デイトラweb制作コース挫折?40代プログラミング日記【19ヶ月目第5週】

デイトラweb制作コース挫折?40代プログラミング日記【19ヶ月目第5週】 Web制作
Web制作デイトラ
アフィリエイト広告を利用しています

2025/5/26(月)デイトラweb制作コース挫折しない! 539日目

作業:2時間

作業内容

【Web制作コース 539日目】

  1. 【bakushins-portfolio制作 58日目】コーディング TOTAL 183時間
P【コーディング】
 bakushins-portfolio制作
 新規案件につきデイトラコミュニティーでデザイナーさんと打ち合わせ
 GraphQLでフェッチした記事にStyling
D【コーディング】
 bakushins-portfolio制作
 デザイナーさんとデイトラコミュニティーで打ち合わせ
 ngrok登録、公開
 GraphQLでフェッチした記事にStyling
C新規案件につき依頼主との打ち合わせ前にデザイナーさんと事前打ち合わせ
それに合わせ ngrokのアカウント作成して進行中のサイトをdesignerさんと共有
ngrok 便利じゃ〜!
WordPressからGraphQLでフェッチした記事にStyleが !important しても当たらない
今日の挫折感はここ☝️
どうやらWordPressの記事はもともと動的に設計されていることが原因
globals.scss もしくは _variants.module.scss からStyleを当てる必要がある
A1日のルーチンを積み上げる!
bakushin
bakushin

さらにフェッチで dangerouslySetInnerHTMLで直接HTMLを挿入しているため、そのHTML内の要素には追加のクラス名が付与されない!

→ classNameがつかないのでStyleを当てるのに設計が必要🤔明日もDO!

bakushin
bakushin

とにかく、テーブルなどもCocoonのスタイルが再現された‼️ここからフェッチ先のStyleで仕上げる!

2025/5/27(火)デイトラweb制作コース挫折しない! 540日目

作業:3時間

作業内容

【Web制作コース 540日目】

  1. 【bakushins-portfolio制作 59日目】コーディング TOTAL 186時間
P【コーディング】
 bakushins-portfolio制作
 GraphQLでフェッチした記事にStyling
D【コーディング】
 bakushins-portfolio制作
 GraphQLでフェッチした記事にStyling
 Widget実装
CdangerouslySetInnerHTMLでフェッチしたからなのやっぱり🤔
styleがなかなか効かない
ようやくすいすいと効くようになった
Styling自体はなんでもないんだけんど🤔
で、気になるWidgetの実装も並行した
Claudeに図解もしてもらいながらやっとSSGで実装できた
最初に答えがわかると復習・学習が早いので助かる😊
他の実装方法もあるだろうけど自分の軸をずらさなければ型が決まってくる
SSGが今回は軸👍️
思ったより残りのStylingも早く終わりそう、明日でStylingをFINISHしたい🔥
A1日のルーチンを積み上げる!
bakushin
bakushin

デイトラのWeb制作コースではNext.jsもヘッドレスCMSも教わってない内容👨‍💻

ClaudeはじめAIがないと開発が遅くなるし挫折感が半端ないくらい押し寄せてくるだろうな🤔

2025/5/28(水)デイトラweb制作コース挫折しない! 541日目

作業:4時間

作業内容

【Web制作コース 541日目】

  1. 【bakushins-portfolio制作 60日目】コーディング TOTAL 190時間
P【コーディング】
 bakushins-portfolio制作
 GraphQLでフェッチした記事にStyling
D【コーディング】
 bakushins-portfolio制作
 GraphQLでフェッチした記事にStyling
 Widget実装
 新規案件の打ち合わせ日時決定
Cちょっと苦戦するかなぁぁ🤔
って思ったけどフェッチ記事のStylingも完成👍️
WordPressのプラグイン(Table of Contents Plus)もCocoonも曲がある
かと思いきや妙に素直な感じでStylingがキアmるので半分笑いながらのStylingだった😊
WidgetはなかなかWordPressじゃないとクセが強いわ🤔
でも、これであとはレスポンシブでデブロイ可能だ!
明日、明後日で終えたいなぁ
頑張る🔥
A1日のルーチンを積み上げる!
bakushin
bakushin

新規案件の打ち合わせ日時を、依頼主、デザイナーさんと決定した!

依頼主さんがZoom有料契約しているのでZoom決定!

2025/5/29(木)デイトラweb制作コース挫折しない! 542日目

作業:2時間

作業内容

【Web制作コース 542日目】

  1. 【bakushins-portfolio制作 61日目】コーディング TOTAL 192時間
P【コーディング】
 bakushins-portfolio制作
 スムーススクロールの修正
D【コーディング】
 bakushins-portfolio制作
 Serviceセクションのカード修正
 Loading実装の設計
Cスムーススクロールを修正しようと思ったけど別パートを修正
どうしてもServiceセクションのFigureで表示してるimageの画素が荒くなる
さらにimage囲ってるborderも表示されなくなった、なぜ🤔
1時間ほど???が続き、ようやく原因にたどり着いた
Next.jsの画像最適化機能と競合してる感じ
Webpにしてたので4-16kbが4枚ほど
AIに聞くとこのサイズなら Next.jsのタグではなくても良い!と回答
HTML で imageタグを使ったら画素が直った!
デザイナーさんにオリジナルの画像を送っていただいたりお手数おかけしたけど、まさかのNext.jsだった🤔
勉強になった🍀
A1日のルーチンを積み上げる!
bakushin
bakushin

Loding画面を作るのを忘れてた!devで毎回表示されるのも面倒経ったので最後に製作計画だった!

GSAPが良さそう!ディレクトリ構成のベストプラクティスをClaudeに相談した😊

レスポンシブの手前なのに、あともう少し🔥

2025/5/30(金)デイトラweb制作コース挫折しない! 543日目

作業:4時間

作業内容

【Web制作コース 543日目】

  1. 【bakushins-portfolio制作 62日目】コーディング TOTAL 194時間
P【コーディング】
 新規案件の打ち合わせ
 bakushins-portfolio制作
 スムーススクロールの修正
D【コーディング】
 bakushins-portfolio制作
 新規案件の打ち合わせ(Zoom)
 Serviceセクションのカード修正
 Loading実装の設計
C新規案件の打ち合わせ
依頼主とポートフォリオサイトでお世話になっているデザイナーさん https://x.com/ngu_pursing と3人で
仕様としては Shopify でデザインから作成となったので Remix でサイト制作となった
会員サブスクリプション(決済機能)
ログイン後研修プログラムヘアクセス可能
メールマーケティング
ブログ・お知らせ機能
こんな仕様に決定😊
A1日のルーチンを積み上げる!
bakushin
bakushin

サイト管理として毎月の管理費をいただけることになる感じ🙌

デザイナーさんも今回の依頼主から定期的にいろいろなデザイン依頼がある感じ🙌

LINE構築も👍️🔥

今後はWebマーケティングも託したいと依頼があったので嬉しい😊

2025/5/31(土)デイトラweb制作コース挫折しない! 544日目

作業:7時間

作業内容

【Web制作コース 544日目】

  1. 【bakushins-portfolio制作 63日目】コーディング TOTAL 201時間
P【コーディング】
 bakushins-portfolio制作
 スムーススクロールの修正
D【コーディング】
 bakushins-portfolio制作
 Loading実装の設計
 Widgetの実装修正
 WebMのフェッチ修正
 ドロワーボタン・再アニメーションの修正
C色々とカオス化した最終盤の感じ
PC幅のStyling、Animationは100%完成!と思ったところ
でも、LodaingのStylingが最終的に位置調整だけ残ってたことを1日が終わってから気付いた😊
でも、ようやくあとはレスポンシブにまでたどり着いた!
ここから1週間でデブロイに持っていこうと思う!
何よりも2週間ほど手を付けれなかったWebGLの学習に時間を振り戻さねばならない!
藻で風呂いちかくなってきたこと、月替りもありXでのPDCAに振り替えようと思うところ🤔
とにかく🔥
A1日のルーチンを積み上げる!

コメント

タイトルとURLをコピーしました