Next.jsでブログを作ってみた
更新日 : 2023/5/13
この度Next.jsでブログを作ってみました。
作ったのはこのブログです。
技術的なことはまだまだ勉強中で分からないことだらけですが、せっかくブログを作ったので、作ろうと思ったきっかけや使った技術、今後の課題などをまとめてみようと思います。
まずは作ろうと思ったきっかけです。
作ろうと思ったきっかけ
結論から述べるといづれフリーランスとして活動して、その時のポートフォリオにしたいと思っていたからです笑。
大学を卒業後、現在まで約3年間社会人として働いていますが、仕事の内容と時間をなかなか自分で調節できないことや、 苦手な人とのコミュニケーションを避けられない点が私としてはストレスに感じ、実力が発揮できていないなーと感じている今日この頃です。（たぶん社会不適合者なんです。。）
ただ、ネガティブな理由だけではなく、自分の学びを発信することでそれが誰かの助けになったり、自分自身の知識定着に繋がるので、文章にまとめる（そして発信する）ってとても大切なことだと思っています。
ブログを作ろうと思った理由というより社会への文句になってしまいましたが、フリーランスになってみたい！という思いが年々高まってきているので、その準備第一弾としてこのブログを作ってみました。
使った技術
このブログ作成には以下の技術やプログラミング言語を使っています。
HTML
おそらく皆さんご存じのHTML(HyperText Markup Language)です。
Webサイトを作るうえで基本中の基本の言語ということで使用しています。
CSS(Tailwindcss)
HTMLで作成したコンテンツをデザインするための言語で「Cascading Style Sheets」の略だそうです。
今回はプレーンのCSSを使用するか、Bootstrapなどのフレームワークを使用するかで少し悩みましたが、 CSSの基本を理解したいという気持ちの上に楽もしたいという気持ちがあったので、 中間くらいに位置するTailwindcssを使用することにしました。
JavaScript
HTML, CSSときたらJavaScriptですよね。フロントエンドではサイトのコンテンツに動きを付ける時などに使われます。
今回は静的なブログを作成するだけなのでJavaScriptはなくても作れるのですが、 以前から下記のReactというJavaScriptのフレームワークに興味があったので使ってみました。
React
JavaScriptのフレームワークで、コンテンツをコンポーネントという単位でまとめて管理することができます。
ブログ程度の静的なサイトだとHTMLとCSSのみでも問題なく作ることができるのですが、前述の通りReactというものに以前から興味があったので、ページ自体や良く使うHTMLタグをコンポーネント化するために使用しました。
Next.js
JavaScriptのフレームワークであるReactのさらにフレームワークであるNext.jsです。
Next.jsを使用することで難しい設定をしなくとも高速で快適なWebサイトを作ることが出来ます。
また、ルーティングで面倒な設定が不要なことも大きなメリットだと感じています。
Next.jsはReactについて調べている間に存在を知り、Reactを使うなら便利そうだ！使ってみよう！と思ったのがきっかけです。（Next.jsのSSG, SSRの詳しい仕組みは現在勉強中です。。）
Vercel
作成したサイト（今回だとブログ）を世に配信するためのサービスです。 Next.jsを開発している会社がVercelという名前で、社名と同名のサービスとなります。
Next.jsの開発会社が開発しているということもあってNext.jsとの相性は抜群だそうで、 Gitの更新をトリガーにしてビルド→デプロイの流れを自動で行ってくれます。
本ブログで使った技術はざっと以上となります。
続いて、以上のプログラミング言語や技術をどのように勉強したかを書こうと思うのですが、その前にブログ制作を始める前の私のスキルについて簡単に触れようと思います。
ブログ制作を始める前の自身のスキル
大学を卒業後、システムエンジニアや社内SEの職を3年ほど経験しましたが、 ぶっちゃけ業務ではバックエンド側を担当することがほとんどで、上記のプログラミング言語はほぼ触れたことはない状態でした。
ですので、このブログ制作を始める前はHTMLはもちろんCSS、JavaScriptにも触れたことはほとんどなく、どちらかというとPythonやSQL、基盤でいうとAWS等の知識しかありませんでした。
ただIT業界で働いていると、業務内で嫌でもITについての話題はでてくるので、 このブログを作るにあたって触れたことのない技術であっても、何となく聞いたことがあるなーという技術やサービス名はいくつかあったという感じです。
はい、要するにフロントエンド初心者ということですね笑。
プログラミング言語などの学習方法
上記の通り、フロントエンドについてのスキルはほぼ皆無な私ですが、その状態からどんな過程で学習してこの記事を執筆するまでに至ったか、期間別でご紹介します。
0～1ヶ月半程度 : HTML, CSSの勉強
始めの1か月半の学習はほぼ全てHTMLとCSSの習得にあてていました。
やはりWebサイトを作成する上で欠かせないプログラミング言語ですし、基本中の基本ということでじっくり時間を書けて勉強しました。
その甲斐あってか、3カ月前はHTMLとCSSを使って「Hello World」と表示するだけのページでもどう作れば良いか思いつかなったのが、現在ではこのようにブログ程度の簡単なサイトであればある程度自由に編集できるようになっています。
ちなみにHTML, CSSに限らず、基本的に勉強はUdemyというオンライン学習サイトを使って勉強しています。
1ヶ月半～2ヶ月 : JavaScriptの勉強
大体1ヶ月半～2ヶ月の半月ではJavaScriptを主に学習していました。
バックエンドで良く使われるプログラミング言語はある程度使える知識は持っていたので、JavaScriptの勉強はあまり時間がかからなかった印象です。
ただ、せっかく勉強するならある程度深い部分まで知っておきたいという思いがあったので、 同期処理/非同期処理の違いやProxyなどの少し難しめの内容も勉強していたこともあり、少し長めに時間を取りました。（現時点の当ブログではそれら技術は本当に全く使ってないんですけどね、、）
2ヶ月～2ヶ月半 : Reactの勉強
ここに来てやっとですが、Reactの勉強を始めます。 実をいうと、ブログを作ろうと思ってまず初めにUdemyでReactの講座を受講したのですが、HTMLやCSSが全く分からず、 Reactの内容が全然頭に入ってこなかったので、HTML, CSSの勉強時間をまず初めに取り、このタイミングでReactの勉強を始めました。
約2カ月の地道な下積みの甲斐もあって、基本的なReactの仕組みの理解にはあまり時間はかからなかったと思っています。
ただ、コンポーネントを分ける単位や、コンポーネント間でデータを共有するuseContextやReduxをどの区切りで整理するのが良いのかは、実際にWeb制作を経験して学ぶ必要があるなーと思っています。
2ヶ月半～3ヶ月 : Next.jsの勉強とブログ制作
ここでいきなりブログを作り始めます笑。Reactの勉強を始めた頃から早くブログを作りたい欲が高まっていたんですよね笑。
当初はプレーンのReactでブログ作成する予定だったのですが、 UdemyでReactの講座を見ていた時に、あわせてNext.jsというフレームワークの紹介があったので、そこでNext.jsを使うことに方向転換しました。
前に書いた通りNext.jsについては現在も勉強中であまり詳しくは理解できていないのですが、便利さ故にこの早さでブログを公開できています。 （ Next.jsを使ったブログの制作から公開まで一気に学ぶことが出来る講座がUdemyにあったからというのが早く作れた一番の理由です。はい。）
ブログを作ろう！と思い立ってからこの記事を書くまでの経緯は以上のような感じでした。
せっかくなので私が受講したUdemyの講座をご紹介させていただきます。全てとても分かりやすい講座でした！
HTML/CSSの講座
- 【最新2022】未経験からHTML、CSS をマスターして、WEBデザイナー・エンジニアを目指す 最高の実践コース
- ちゃんと学ぶ、HTML/CSS + JavaScript（JavaScriptも含まれていますが、HTML/CSSの印象が強かったのでHTML/CSSに入れさせていただきました）
- 【tailwindcss】初心者向け講座・CSSが苦手な人向け 【わかりやすさ重視】【次世代のCSS】にじっくり取り組む
JavaScriptの講座
今後の課題や実装したい機能
思っていたより早くブログを公開することはできたのですが、学習終盤で一気に作ったこともあり、現在のこのブログは見た目も中身もスッカスカです笑。
しかし今後もメンテナンスはしてきたいと思っているので、現時点で追加したと思っている機能や、課題について最後にまとめようと思います。
ドメインの購入とサーバへの設定
いや、早くやれよって感じですよね笑。というかもはや、独自ドメインを設定せずにサイトを公開したと言えないのでは 、、という感じなのですが、一応固定のURLでサイトを公開でいているので、一旦良しとしています笑。
ただやはり、本格的に運用していくのであれば独自ドメインは設定した方が良いと思うので（愛着がわきますし、、）、まず初めにドメインを買って設定したいと思っています。
良く使うもののコンポーネント化
良く使うHTMLタグなどその他コンポーネント化できそうな部分が現状まだまだあります。
見出しのデザインや目次のデザインなど、再利用して何度も使用するものは早めにコンポーネント化して修正したいときの負荷を減らさねばっ、、
と思っているのでこちらも早めに対応したいことの1つに挙がっています。
GA(Google Analytics)の導入
ブログを作ったからにはやはりどのくらい見られているのかが気になりますよね。
GAを導入することで、ホームページの訪問者数や、訪問者がサイト上で行った操作をデータで可視化することができます。
このブログはまだまだ作ったばかりで、そんな機能があっても宝の持ち腐れ状態になる未来が見えるので急いではいないのですが、 いずれGAを導入して最低でも訪問者数の把握はできたらいいなーなんて思っています。
AWSへの移行
ここまであまり触れてこなかったのですが、私は仕事でAWSを使っていて割と多くのサービスに触れたことがあるので、EC2に立てたWebサーバにブログを移行して、更にCI/CDの設定も自作してみようかなーと思っています。
現状のVercelのサーバと比較すると運用の負荷は上がること間違いなしな気がしていますが、その分サーバ周りの勉強にもなるので、こちらもいずれチャレンジしたいです。
現時点でパッと思いつく課題は以上のような感じです。
もっと記事やコンテンツが増えれば、ナビゲーションメニューとかも作ってみたいなーと思っているのですが、現状では作っても画面遷移させる先がないので一旦保留としてます。
それっぽいものでいうと、記事が増えてきたらジャンル（カテゴリ）別のメニューを作って、それぞれのジャンルの記事一覧にジャンプさせるとかですかね、、やるとしたらいつになるんだろう、、笑。
最後に
以上、Next.jsでブログを作成したので、作るまでの学習や今後の課題についてまとめてみました。
まだまだ改善しなければならない点も沢山あるのですが、今後もメンテナンスを続けてこのブログを育てていくことができたらいいなと思っています！
また冒頭でも書いたのですが、ブログを作った一番の目的はフリーランスになった時のアピール材料にすることなので、技術的な記事を沢山投稿していく予定です！
【お礼】
まともに記事を書いてた経験が今回初めてということで、汚い文章で申し訳ありませんが、読んでくださった方がもしいたら本当にありがとうございました！
今後は技術的な記事をメインに投稿していく予定なので、もしよかったらまた訪れてみてください！
それでは！
