2025/3/17（月）プログラミング日記
作業：1.5時間
作業内容
【Web制作コース 468日目】
- 営業
- 転職準備
- コーディング（サイト公開）
| P | 【営業】 クラウドソーシングで応募して営業をどんどん進める 【転職】 Wantedlyで応募 【コーディング】【勉強】 Next.jsを使ったサイト公開 |
| D | 【営業】【転職】 ポートフォリオサイトのデザインカンプ確認 受注見込みの新規サイトのデザイナー依頼打診 【コーディング】【勉強】 Udemy で Next.js で作成したサイトの公開 |
| C | Vercelでアカウント作成して Next.js で作成したサイトを公開した Udemy講座（Next.js）は完了 WordPressで¥Next.js 使う方法がまだ不明なので情報収集する！ ポートフォリオサイトのデザインカンプを受領、めちゃコーディング楽しそう😊 デザイナーさんにここまでしていただいて感謝際立つ💫 あわせて、受注見込みの新規サイトのデザイン作成も打診した！ |
| A | 1日のルーチンを積み上げる！ |
bakushin
Next.js で作成したサイト👇️ページ遷移が爆速😊
ORIGIN.Doc
ORIGIN.Docのウェブサイトです
next.js-sample.bakushin.blog
2025/3/18（火）プログラミング日記
作業：なし
作業内容
【Web制作コース 469日目】
| P | 【営業】 クラウドソーシングで応募して営業をどんどん進める 【転職】 Wantedlyで応募 【コーディング】 ポートフォリオサイトのコーディング 【勉強】 FLOCSSの再確認（デイトラ実務編） Next.jsでWordpress構築する方法をAIに聞く、ググる |
| D | なし |
| C | 息子の小学校卒業式へ出席、関連して、てんやわんやで体力も時間も無くなった 家族との時間を優先！ |
| A | 1日のルーチンを積み上げる！ |
2025/3/19（水）プログラミング日記
作業：1時間
作業内容
【Web制作コース 470日目】
- 勉強
| P | 【営業】 クラウドソーシングで応募して営業をどんどん進める 【転職】 Wantedlyで応募 【コーディング】 ポートフォリオサイトのコーディング 【勉強】 FLOCSSの再確認（デイトラ実務編） Next.jsでWordpress構築する方法をAIに聞く、ググる |
| D | 【勉強】 FLOCSSの再確認（デイトラ実務編） Next.jsでWordpress構築する方法をAIに聞く、ググる |
| C | 体調悪い日々が続いているのが響いている😱 1時間のFLOCSSの動画視聴とヘッドレスCMSについてぐぐるので精一杯😫 ほんの少しでも成長を重ねるぞ🔥 |
| A | 1日のルーチンを積み上げる！ |
2025/3/20（木）プログラミング日記
作業：2時間
作業内容
【Web制作コース 471日目】
- 勉強
| P | 【営業】 クラウドソーシングで応募して営業をどんどん進める 【転職】 Wantedlyで応募 【コーディング】 ポートフォリオサイトのコーディング 【勉強】 FLOCSSの再確認（デイトラ実務編） Next.jsでWordpress構築する方法をAIに聞く、ググる |
| D | 【勉強】 FLOCSSの再確認（デイトラ実務編） Next.jsでWordpress構築する方法をAIに聞く、ググる |
| C | 今日も体調悪い💦 2時間が精一杯😱 FLOCSSの再確認はやっぱりしておいて良かった、まだ途中だけど再整理になる！ BEMのモディファイヤーは何だったっけ🧐？って認識だったのですでに身についているのが分かった Next.jsでWordpress構築する方法を調べて、どうやらヘッドレスCMSにすればよいのだとわかったぞ💪 ポートフォリオサイトの制作方法をPHPにするか、Next.jsにするか決めてからじゃないとコーディングに取り掛かれない😵 早く整理して決めたい！ |
| A | 1日のルーチンを積み上げる！ |
bakushin
ヘッドレスCMSについて参考になった👇
2025/3/21（金）プログラミング日記
作業：4時間
作業内容
【Web制作コース 472日目】
- 勉強
| P | 【営業】 クラウドソーシングで応募して営業をどんどん進める 【転職】 Wantedlyで応募 【コーディング】 ポートフォリオサイトのコーディング 【勉強】 FLOCSSの再確認（デイトラ実務編） Next.jsでWordpress構築する方法をAIに聞く、ググる |
| D | 【勉強】 FLOCSSの再確認（デイトラ実務編） Next.jsでWordpress構築する方法をAIに聞く、ググる |
| C | FLOCSSについてはあとは実践動画をみながら最終確認のみ componentとprojectの構成をどうするかがポイントなのは変わらぬ理解 でもデイトラ卒業したばかりの3か月前よりもFLOCSSでcomponentとprojectをどう構成するか明瞭になった感じがする ヘッドレスCMSの設計方法がより具体的にわかってきたぞ☺ あとはサーバーの問題が一番大きい Vercelサーバーを利用するのが構成上は最適なんだけど利用料がやや高い いまのサーバーは共用サーバーだから、node.jsが使えないという結論 VercelはWordpressの簡単インストールやSSL化が手間取りそう AWSで構築するか？？？🧐 サーバーのほかにはあとはこまごました不明瞭ポイントあるけどおおむねコーディングを始めることできそう！ |
| A | 1日のルーチンを積み上げる！ |
bakushin
とりあえずヘッドレスCMSだけど、GraphQL（プラグイン）を使用せずにWordpressのREST API で良さそうだ🧐
2025/3/22（土）プログラミング日記
作業：4時間
作業内容
【Web制作コース 473日目】
- 勉強
| P | 【勉強】 ポートフォリオサイトの設計のための勉強 |
| D | 【勉強】 ヘッドレスCMS Next.jsを使うときのサーバー性能 Next.js、PHPとの使い分け ドメインの使用方法 |
| C | 勉強の結果、ヘッドレスCMSでポートフォリオサイトを制作することは決めた GraphQL、restAPI、RSSのどれでWordPressとVercelを接続するか悩んだ 結果、GraphQLに依存した構造になるとGraphQLやWordPressのアップグレードなどでメンテナンスがそれぞれに必要だとわかった どうやらブログの記事数からは、restAPI だとサーバー負荷が大きくなり得るので、 GraphQL か RSSになりそう RSSは12時間くらいデータ更新に時間かかるようでリアルタイムではないけど、リアルタイム性は不要、しかし、セキュリティー脆弱性もあるらしい とりあえず、GraphQLに依存したサイト設計は避けて、制作実績（Works）のページだけ、Next.jsにしてあとは普通にPHPでWordPress化にしようと思う でも、Vercelのhobbyプランの対象外になるようなので $20/月 かかる、、、ビジネスコスト💪あと、普通に別のサーバー代がいる💪 |
| A | 1日のルーチンを積み上げる！ |
2025/3/23（日）プログラミング日記
作業：4時間
作業内容
【Web制作コース 474日目】
- 勉強
| P | 【勉強】 ポートフォリオサイトの設計のための勉強 |
| D | 【勉強】 ヘッドレスCMS Next.jsを使うときのサーバー性能 Next.js、PHPとの使い分け GraphQL、WP GraphQL |
| C | 結局、ポートフォリオサイトはお問い合わせページ、お問い合わせ完了ページのみPHPでWordPress化にした あとはすべて Next.js でヘッドレスCMSにする 本当はサイト全体を完全にヘッドレスCMSにしたいけど、 Contact Form 7 を使うページはVercelが対応不可だった なので、Vercelが対応できないWordPressインストール、PHPについては別サーバで公開 Next.js についてはVercelで公開 とした |
| A | 1日のルーチンを積み上げる！ |
bakushin
昨日の結論とは反対に GraphQL 使用にかじを切ったのは、WP GraphQL というプラグインを見つけたから。
しかも、Vercel が公式にヘッドレスCMSの作成方法としてGraphQL、WP GraphQL を紹介していたから。
AIにきいてもGraphQL、WP GraphQL は開発が止まることは見通せないし開発はどんどん進むと積極的な指示。
How to Use Headless WordPress with Next.js and Vercel
Learn how to use Headless WordPress with your Next.js application and deploy it to Vercel.
vercel.com
WordPress Starter Templates & Themes | Vercel
Discover free curated WordPress templates, starters, and themes to jumpstart your website development process.
vercel.com
bakushin
WP GraphQL 使うと GraphQL の設定もかなり簡素化されるみたい！
ということで、PHP、WordPressテンプレをつかって動的にブログ記事を表示するよりも、一段高いスキルをつけようということで Next.js、GraphQL、WP GraphQL でヘッドレスCMSにチャレンジ決定！
やっとコード書き始めることができる🔥
コメント