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

2025/5/19（月）デイトラweb制作コース挫折しない！ 532日目

作業：3時間

作業内容

【Web制作コース 532日目】

1. 【bakushins-portfolio制作 51日目】コーディング TOTAL 151時間

P	【コーディング】 　bakushins-portfolio制作 　workページのスタイリング完成させる
D	【コーディング】 　bakushins-portfolio制作 　workページのスタイリング 　ACFでカスタムフィールド追加
C	フェッチしたblog記事のスタイリングを考えたけど、かなりファイルを構わないといけない ちょっと先に済ませてお起きたいのでwork記事のスタイリング フェッチしたGIFの画質が荒すぎてどうしても改善しないのでこのパーツの改善を決定した YouTube自動再生でフェッチすることにした WordPressで自動再生の形で埋め込んでおけばフェッチしたときにも自動再生表示できる そんため、ACFでカスタムフィールドを追加（できるだけ省力化して毎回のカスタムHTML記述を省くため） ついでにYouTubeとともにフェッチする部分をもう一つ追加しないといけないや 明日も続行！今日も挫折感なし！
A	1日のルーチンを積み上げる！

2025/5/20（火）デイトラweb制作コース挫折しない！ 155日目

作業：4時間

作業内容

【Web制作コース 533日目】

1. 【bakushins-portfolio制作 52日目】コーディング TOTAL 155時間

P	【コーディング】 　bakushins-portfolio制作 　work記事に動画をフェッチする
D	【コーディング】 　bakushins-portfolio制作 　WordPressからの動画fetch実装
C	今日もめちゃめちゃ内容の濃いぃぃプログラムだった😊 YouTubeのfetchは簡単だったけど、ブラウザ標準で自動再生✕ってなった その後、なんとかYouTubeの自動再生を実装したけど直後にWebMを知る 調べたら、YouTubeのfetchはJSバンドルを食うらしい WebMは超高速でSEO有利 ってなって「まじかよ！」😂で、ここからWebMをフェッチするプログラムを組む なんとかWordPressにフェッチしたYouTube、WebMをNext.jsにも自動再生でフェッチできた😖！
A	1日のルーチンを積み上げる！

2025/5/21（水）デイトラweb制作コース挫折しない！ 534日目

作業：6時間

作業内容

【Web制作コース 534日目】

1. 【bakushins-portfolio制作 53日目】コーディング TOTAL 161時間

P	【コーディング】 　bakushins-portfolio制作 　Work詳細ページを完成させる
D	【コーディング】 　bakushins-portfolio制作 　Work詳細ページ実装完了！
C	まじで焦ったぁぁぁ〜😨挫折ポイントだらけだったぁぁぁ！ たかだか！（と思っていた）VIDEOの width, height がどんなにやっても決まらない！ 4時間くらいして dangerouslySetInnerHTML を使う場合は、globals.css にスタイルを適用させないといけないってやっとわかった！ で、_variants.modelu.scss にスタイルを入れてやっとVIDEOのスタイルが効いた💪 今日の進まなさはまじで挫折させる？みたいな要素がふんだんすぎた。 でも、実装できるとめちゃ爽快！ 実装後はスイスイと関連記事のFetchもスタイルもできたので、計画通り今日で詳細記事を仕上げた！ （でも、WebGLの勉強時間を削除したからできたのが、むむむ、、、）
A	1日のルーチンを積み上げる！

2025/5/22（木）デイトラweb制作コース挫折しない！ 535日目

作業：5時間

作業内容

【Web制作コース 535日目】

1. 【bakushins-portfolio制作 54日目】コーディング TOTAL 166時間

P	【コーディング】 　bakushins-portfolio制作 　Worksのアーカイブページを完成する
D	【コーディング】 　bakushins-portfolio制作 　Worksのアーカイブに設置する絞り込みの名称設定 　問い合わせフォームの自動応答の実装 　リポジトリの削除・クローン → クリーンアップ 　営業 1件
C	まじでやばい！挫折が目の前に出てきそうなそんなレベルの対応だった😨😨😨 GITHUBへプッシュできない！VSCodeが固まった！ ようやく実装したコードなのにプッシュできず固まった、、、 ここ数週間、かってに js、scssのファイルがVSCode内で複製されてた なぜ？🤔とずっと気になっていたけど、原因不明だった で、毎回「リポジトリに深刻なダメージがあります、通常ではないです」みたいなコメント表示される😨 Geminiにきいてようやくわかった！原因は「クラウド同期」 Googleドライブに mac の同期を設定したころからたしかに複製がはじまったと思う iCloudへの【同期は問題ないかと思った（Googleドライブよりも前から同期してたので） でも、Geminiの勧める通りすべて同期をやめた（GITHUBにプッシュするからOK） クローン後、必要なファイル修正を行い build ところが GraphQL と reCAPTCHA が効かない😱 冷静に考えて env.ファイルを前のローカルリポジトリからコピペしてなかっただけ😌 すべて復活！ とにかく、めちゃめちゃ勉強になった‼️ WebGLの学習、今日も時間が取れなかった😖
A	1日のルーチンを積み上げる！

2025/5/23（金）デイトラweb制作コース挫折しない！ 536日目

作業：4時間

作業内容

【Web制作コース 536日目】

1. 【bakushins-portfolio制作 55日目】コーディング TOTAL 170時間

P	【コーディング】 　bakushins-portfolio制作 　Worksの一覧、詳細を完成
D	【コーディング】 　bakushins-portfolio制作 　Blogsの一覧、詳細のフェッチ実装 　app/page.js をSSG化
C	計画通り、Worksの一覧、詳細を完成させようとしたら workの詳細記事の下部に設置した関連記事が、現在見ているworkも表示している 当該記事を除外するフェッチを試みたけど、なかなかプログラムが合わない そうこうしていると、似た設計のblogs記事の詳細ページでは現在見ている記事を除外してフェッチできた それと一番肝心な app/page.js を use client にしてたのでコンポーネントを分けた use clien を別コンポーネントにして page.js で読み込むことで SSG化完成🙌 今日は挫折感なし👍️
A	1日のルーチンを積み上げる！

2025/5/24（土）デイトラweb制作コース挫折しない！ 537日目

作業：5時間

作業内容

【Web制作コース 537日目】

1. 【bakushins-portfolio制作 56日目】コーディング TOTAL 170時間

P	【コーディング】 　bakushins-portfolio制作 　all-blogsのアーカイブ完成
D	【コーディング】 　bakushins-portfolio制作 　営業（依頼主、デザイナーさんとチャット） 　all-blogs ページネーション以外設定
C	WordDefense、GraphQLとの接続が問題？ WordPressでは区民根であるコードを使えたのでPHPでもできたけど🤔 プラグイン無しのNext.jsで設定がなかなかできない 全記事はGraphQL通して記事数までキャッチしてるのに、フェッチができない🤔 明日もDO!!
A	1日のルーチンを積み上げる！

2025/5/25（日）デイトラweb制作コース挫折しない！ 538日目

作業：6時間

作業内容

【Web制作コース 538日目】

1. 【bakushins-portfolio制作 57日目】コーディング TOTAL 181時間

P	【コーディング】 　bakushins-portfolio制作 　ALL-WORKSの完成
D	【コーディング】 　bakushins-portfolio制作 　ALL-WORKSの設計が完了🙌
C	めちゃめちゃ時間かかったけど、ついにアーカイブページのフェッチ＆SCSS完了！ 長かった〜〜 といってもまだタグの絞り込み機能がまだではあるので98%完成が正確かな😊 今日でかなり計画通りの進捗になった もう少し遅れぎみではあるけど今月中にデブロイはできる （ただし、ブログ記事詳細のフェッチ後のスタイリングがまだなのでこことの勝負‼️） あとは、レスポンシブと記事詳細のスタイリング！🔥
A	1日のルーチンを積み上げる！