デイトラ40代プログラミング日記【17ヶ月目第4週】アラフォー初心者

Web制作デイトラ
アフィリエイト広告を利用しています

2025/3/17(月)プログラミング日記

作業:1.5時間

作業内容

【Web制作コース 468日目】

  1. 営業
  2. 転職準備
  3. コーディング(サイト公開)
P【営業】
 クラウドソーシングで応募して営業をどんどん進める
【転職】
 Wantedlyで応募
【コーディング】【勉強】
 Next.jsを使ったサイト公開
D【営業】【転職】
 ポートフォリオサイトのデザインカンプ確認
 受注見込みの新規サイトのデザイナー依頼打診
【コーディング】【勉強】
 Udemy で Next.js で作成したサイトの公開
CVercelでアカウント作成して Next.js で作成したサイトを公開した
Udemy講座(Next.js)は完了
WordPressで¥Next.js 使う方法がまだ不明なので情報収集する!
ポートフォリオサイトのデザインカンプを受領、めちゃコーディング楽しそう😊
デザイナーさんにここまでしていただいて感謝際立つ💫
あわせて、受注見込みの新規サイトのデザイン作成も打診した!
A1日のルーチンを積み上げる!
bakushin
bakushin

Next.js で作成したサイト👇️ページ遷移が爆速😊

ORIGIN.Doc
ORIGIN.Docのウェブサイトです

2025/3/18(火)プログラミング日記

作業:なし

作業内容

【Web制作コース 469日目】

P【営業】
 クラウドソーシングで応募して営業をどんどん進める
【転職】
 Wantedlyで応募
【コーディング】
 ポートフォリオサイトのコーディング
【勉強】
 FLOCSSの再確認(デイトラ実務編)
 Next.jsでWordpress構築する方法をAIに聞く、ググる
Dなし
C息子の小学校卒業式へ出席、関連して、てんやわんやで体力も時間も無くなった
家族との時間を優先!
A1日のルーチンを積み上げる!

2025/3/19(水)プログラミング日記

作業:1時間

作業内容

【Web制作コース 470日目】

  1. 勉強
P【営業】
 クラウドソーシングで応募して営業をどんどん進める
【転職】
 Wantedlyで応募
【コーディング】
 ポートフォリオサイトのコーディング
【勉強】
 FLOCSSの再確認(デイトラ実務編)
 Next.jsでWordpress構築する方法をAIに聞く、ググる
D【勉強】
 FLOCSSの再確認(デイトラ実務編)
 Next.jsでWordpress構築する方法をAIに聞く、ググる
C体調悪い日々が続いているのが響いている😱
1時間のFLOCSSの動画視聴とヘッドレスCMSについてぐぐるので精一杯😫
ほんの少しでも成長を重ねるぞ🔥
A1日のルーチンを積み上げる!

2025/3/20(木)プログラミング日記

作業:2時間

作業内容

【Web制作コース 471日目】

  1. 勉強
P【営業】
 クラウドソーシングで応募して営業をどんどん進める
【転職】
 Wantedlyで応募
【コーディング】
 ポートフォリオサイトのコーディング
【勉強】
 FLOCSSの再確認(デイトラ実務編)
 Next.jsでWordpress構築する方法をAIに聞く、ググる
D【勉強】
 FLOCSSの再確認(デイトラ実務編)
 Next.jsでWordpress構築する方法をAIに聞く、ググる
C今日も体調悪い💦
2時間が精一杯😱
FLOCSSの再確認はやっぱりしておいて良かった、まだ途中だけど再整理になる!
BEMのモディファイヤーは何だったっけ🧐?って認識だったのですでに身についているのが分かった
Next.jsでWordpress構築する方法を調べて、どうやらヘッドレスCMSにすればよいのだとわかったぞ💪
ポートフォリオサイトの制作方法をPHPにするか、Next.jsにするか決めてからじゃないとコーディングに取り掛かれない😵
早く整理して決めたい!
A1日のルーチンを積み上げる!
bakushin
bakushin

ヘッドレスCMSについて参考になった👇

2025/3/21(金)プログラミング日記

作業:4時間

作業内容

【Web制作コース 472日目】

  1. 勉強
P【営業】
 クラウドソーシングで応募して営業をどんどん進める
【転職】
 Wantedlyで応募
【コーディング】
 ポートフォリオサイトのコーディング
【勉強】
 FLOCSSの再確認(デイトラ実務編)
 Next.jsでWordpress構築する方法をAIに聞く、ググる
D【勉強】
 FLOCSSの再確認(デイトラ実務編)
 Next.jsでWordpress構築する方法をAIに聞く、ググる
CFLOCSSについてはあとは実践動画をみながら最終確認のみ
componentとprojectの構成をどうするかがポイントなのは変わらぬ理解
でもデイトラ卒業したばかりの3か月前よりもFLOCSSでcomponentとprojectをどう構成するか明瞭になった感じがする
ヘッドレスCMSの設計方法がより具体的にわかってきたぞ☺
あとはサーバーの問題が一番大きい
Vercelサーバーを利用するのが構成上は最適なんだけど利用料がやや高い
いまのサーバーは共用サーバーだから、node.jsが使えないという結論
VercelはWordpressの簡単インストールやSSL化が手間取りそう
AWSで構築するか???🧐
サーバーのほかにはあとはこまごました不明瞭ポイントあるけどおおむねコーディングを始めることできそう!
A1日のルーチンを積み上げる!
bakushin
bakushin

とりあえずヘッドレスCMSだけど、GraphQL(プラグイン)を使用せずにWordpressのREST API で良さそうだ🧐

2025/3/22(土)プログラミング日記

作業:4時間

作業内容

【Web制作コース 473日目】

  1. 勉強
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/月 かかる、、、ビジネスコスト💪あと、普通に別のサーバー代がいる💪
A1日のルーチンを積み上げる!

2025/3/23(日)プログラミング日記

作業:4時間

作業内容

【Web制作コース 474日目】

  1. 勉強
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で公開
とした
A1日のルーチンを積み上げる!
bakushin
bakushin

昨日の結論とは反対に GraphQL 使用にかじを切ったのは、WP GraphQL というプラグインを見つけたから。

しかも、Vercel が公式にヘッドレスCMSの作成方法としてGraphQL、WP GraphQL を紹介していたから。

AIにきいてもGraphQL、WP GraphQL は開発が止まることは見通せないし開発はどんどん進むと積極的な指示。

Using Headless WordPress with Next.js and Vercel | Vercel Knowledge Base
Learn how to use Headless WordPress with your Next.js application and deploy it to Vercel.
WordPress Templates - Vercel
Jumpstart your app development process with pre-built solutions from Vercel and our community.
bakushin
bakushin

WP GraphQL 使うと GraphQL の設定もかなり簡素化されるみたい!

ということで、PHP、WordPressテンプレをつかって動的にブログ記事を表示するよりも、一段高いスキルをつけようということで Next.js、GraphQL、WP GraphQL でヘッドレスCMSにチャレンジ決定!

やっとコード書き始めることができる🔥

コメント

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