フロント実務未経験が０からポートフォリオサイトを作ってみた

事の発端

　表題のとおり、フロント未経験の状態で、NextJSを用いてポートフォリオを作りました。未経験からITエンジニアになりましたが、これといったポートフォリオがありませんでしたので、エンジニア２年生にもなったので作ってみようということにしました。

まず筆者について語る

　ポートフォリオサイトに詳しく記載していますが、一応初めての投稿なのでこちらでも。。。！ざっくりですが

国立大学の土木系学科を卒業
新卒３年間、地元で公務員として従事。
アナログなシステムの現状を見て、システムに興味を持ち始め、転職を決意。独学をしながら、都内SESの企業に転職。１年間バックエンドを担当。
ITコンサル会社に転職。現在に至る。

　といった経歴になります。社会人は5年目となりますが、エンジニアとしては２年生序盤です。フロントは全くかかわってきませんでしたが、まあ何とかいけるかな、というのでとりあえず作業開始。だいたい、３週間ぐらいかかりましたかね。。。

技術の選定

　技術、特にフロントには疎かったですが、結果的に下記になりました。

フロントエンド

NextJS

　ルーティングがしやすい、という噂をどこかで聞いたので使ってみることにしました。
　作成に当たり、React、Vueを少しだけ触って、次にNextを触りました。書き方ほとんどReactじゃん！と思いながら２週間コーディングしていると、「NextはReactベースのフレームワーク」と知り、納得です。私の使用しているバージョンでは、PageRouter→AppRouterに代わっており、情報が少なめでしたので、人生で初めて公式ドキュメントを読み解いてみました。公式ドキュメント、便利。

TailWIndCss MaterialUi

ミックスすることにしました。MaterilaUIでコンポーネントを使いつつ、もうちょっと微調整したい、というときにTailWIndCssで修正、言った形です。独学時代に、ほんの少しＣＳＳを触った記憶がありましたが、「ＣＳＳこんなに簡単だっけ・・？」と思えるぐらいにはTailWindCssは私には使いやすかったです。

現場レベルでも、使うべきでは？と思うぐらい工数削減＆ある程度自由が利く、神ツールと思ってます。

バックエンド

Docker

　Dockerはバックエンドじゃないだろ！という感じもしますが、流れ的にこちらに、、、
　今回バックエンド部分については、すべてDockerさんにお願いしました。意図は、本当に工数を削減したかっただけです。本業もあるので、環境構築で時間を割きたくなかったのです。。。
実をいうとDockerについても触ったことがなかったのですが、今回で使えるようにマスターしてみました。これが本当に便利で、、、はまりました。

WordPress Mysql

実ははじめ、ここをGo言語で書いていっていました。２時間ぐらいかけてブログ記事を取得するＡＰＩを作成したところで、「画像ってどう保存するの？」「タグとかってどうしよう」「記事のinsert,update,delete作るの面倒だな、ポートフォリオサイトだしサクッと仕上げたいな」というので、泣く泣くgoフォルダはdeleteキーで削除です。

　WordPressを使用していますが、ブログ部分wordpressっぽくないな、と思われた方も多いと思います。
ここが今回の肝になる部分で、WordPressを「ヘッダーレスCMS」として使用しています。簡潔に言うと、ブログの管理機能だけをWordPressに持たせて、表示だけはNextJsにお願いしています。
　特段触れませんが、DBはMysqlです。特にこだわりはありませんでした。ちなみに、今までPostgresqlしか触ったことがありません。

GraphQL

　GraphQLをWordPressにプラグインとして導入し、簡単なクエリのような書き方で、データを取ってこれるようにしました。具体的には

query getAllArticles {
  posts {
    edges {
      node {
        title
        featuredImage {
          node {
            id
            sourceUrl
          }
        }
        id
        date
        categories {
          edges {
            node {
              id
            }
          }
        }
      }
    }
  }
}

という感じで何の情報が欲しいかの特殊なqueryを書いて、GraphQL（ここでは、wordpressのGraphQLエンドポイント）に向かってリクエストを送れば、これらの情報をすべて返してくれます。あまり知られてないようですが、こちらは本当に便利でした。

{
  "data": {
    "posts": {
      "edges": [
        {
          "node": {
            "title": "エンジニアに一番必要なことは日々の自己承認な気がした",
            "featuredImage": {
              "node": {
                "id": "==",
                "sourceUrl": "uploads/2024/01/engineermindjpg-e1705154460563.jpg"
              }
            },
            "id": "==",
            "date": "2024-01-13T23:01:08",
            "categories": {
              "edges": [
                {
                  "node": {
                    "id": ""
                  }
                }
              ]
            }
          }
        },
        {
          "node": {
            "title": "フロント実務未経験が０からポートフォリオサイトを作ってみた",
            "featuredImage": {
              "node": {
                "id": "==",
                "sourceUrl": "uploads/2024/01/portfolio.jpg"
              }
            },
            "id": "",
            "date": "2024-01-12T23:02:30",
            "categories": {
              "edges": [
                {
                  "node": {
                    "id": ""
                  }
                }
              ]
            }
          }
        }
      ]
    }
  },
  "extensions": {
    "debug": [
      {
        "type": "DEBUG_LOGS_INACTIVE",
        "message": "GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."
      }
    ]
  }
}

苦労したこと

大枠は上記ですが、苦労は小さい部分でたくさん出てきました。

Eslint,Prettierってなんだ、、、設定難しすぎる
NextJSのレンダリング方式を考えずに書いたのでホスティングサービスの選定に困った。
dokcerの起動でエラー連発
パソコンの画面主体でデザインしたため、スマホで映したときに崩れまくって完成後に修正
レンタルサーバーの使い方わからなすぎ問題。ドメインってなんや、、、
公開したらポート番号隠れないんだけど問題　初めてのNginxへ

などなど、、、、本当はもっとありますが、きりがないので、残りは友達へ話しておきます。

感想

　大変だった、でも楽しかったという気持ちでいっぱいです。
会社のシステムリリースとかいうレベルからすると、規模は本当に本当に小さいですが、頼れるのは自分とGoogleだけです。プチリリースを、すべて最後まで自分でやりましたので、エンジニアとしての成長は段違いでした。
　未経験からエンジニアに転職して、初めて自分だけの力でリリースまでやりましたが、転職前にこの経験をしておけば、もっと成長は早かったのかな？とも思っちゃいました。
しかし、一番ダメなのは「難しすぎて挫折する」ことなので、これでよかったと思っておきましょう！エンジニアは「楽しく」を忘れていはいけない職種です

参考サイト

React.jsを使ってヘッドレスWordPressサイトを構築する方法
https://kinsta.com/jp/blog/wordpress-react/