girataro

Girataro Times

Twitter github

ブログを作成したので技術スタックと導入フローを話します

投稿日 2022-11-30
最終更新日 2023-11-18

この度、ブログを開設することになりました。 初投稿の今回は、このブログの技術スタックと導入フローについて解説していきます。

ブログを作るモチベーション

私は、大学時代に機械学習関連の研究室に所属していました。そのため、Pythonでデータ分析やAIモデルの開発に関しての知見はありましたが、そのほかのWeb周りの開発経験はよくわかっていませんでした。大学院1年まではHTML、CSSすらロクに書いたことが無かったほどです。
ただ、何か作りたいとは思っていて、HTMLとCSSオンリーで自己紹介サイトを作ってみたりReactを入門してみたりしていましたが、結局作りたいアプリが思い浮かばず放置していました。そんな時に「技術ブログがとっつきやすい」と知人から聞きました。確かに技術ブログは求められる機能要件がそこまで多くなく、(記事次第では)他開発者と競合しにくいと感じたので作ってみることにしました。
先述の通り最近までフロントエンドで何か作ったの経験があまりない身であり、今後のキャリアがそれになる可能性も低いと考えていたため、、インプット含めて一ヶ月程度でさっくり作ってしまおうという意気込みで作りました。

開発環境

  • MacBook Air (M1)
  • Visual Studio Code
  • Google Chrome

使用した技術・ツール

フロントエンド

Next.js

Reactをベースにして作られた、フロントエンドフレームワークです。SG(Static Generation)によって高速なブログサイトの構築ができます。当初は、静的サイトジェネレータのHugoを用いて作ることを検討していましたが、Next.jsでも比較的簡単に自作が可能であることを知りました。半年前くらいにReactのUdemy講座を受けていたこと、今後も軽くアプリを作る可能性があることから学習のついでに採用しました。

TailwindCSS

CSSフレームワークです。HTMLタグにプロパティを並べることで簡単にスタイルを当てられます。元々、CSSには苦手意識があり何かしらのフレームワークを使いたいとは思っていました。そんな中、いくつかTailwindCSSが良いというタレコミを聞いていたため、学習のついでに採用して見ることにしました。

Vercel

Next.jsを作成した会社と同じ会社が作っている、デプロイ環境です。Next.jsとは特に相性が良く、簡単にデプロイできること、無料であることから採用しました。ただし、Hobbyプランでは収益化が不可となっているようです。

その他

Route53

ブログのドメイン名を独自ドメインにするために使いました。

Markdown

ブログ本文の執筆のため採用しました。

Figma

ブログの画面設計のため採用しました。

導入フロー

1. 技術のインプット

まず、ブログ作成時はNext.jsの知識はないためインプットする必要がありました。今まで、0を1にするときにはUdemyを使ってきたので今回もそうのようにしました。受講した講座はNext.jsでブログを作成するという非常にマッチしたものでした。その後、TailwindCSSに関するインプットもUdemyで行いました。受けた講座に関しては、参考文献としてページ下部に掲載しておきます。

2. 画面設計

ブログ作成にあたり、Figmaを用いたデザイン設計をしました。シンプルで見やすいサイトの設計をこころがけました。

3. 開発

設計完了後に、プログラム作成に取り掛かりました。Next.js固有の部分はインプットで作成したコードと大きな変更はありませんでしたが、マークダウンのサニタイズだけは実装しました。設計された画面通りになるようにHTMLとTailwindCSSの実装に多くの時間を割きました。

実装した所感

良かったこと

実装する機能を最小限にした

技術ブログにも様々機能があります。例えば以下のようなものです。

  • ページング機能
  • タグによる分類機能
  • 単語検索機能

しかし、これらの機能は基本的に記事が充実してからでないと機能しません。先述したとおりフロントエンドエンジニアになる可能性が低いこと、デプロイすることが第一目的であることから、必要な機能を最小限に絞って開発しました。結果的に、初めてだらけの技術でデプロイまでこじつけたと思います。

TailwindCSSを使用した

TailwindCSSには好き嫌いがあるようですが、個人的にはこれのおかげでスタイルの適用が簡単になったと思っています。特に、レスポンシブデザインの設計はかなり楽になりました。学習コストがあったことは否定しませんがそれでも利用価値はあったと思います。

コーディングの前にFigmaで画面設計をした。

今までは、思いついたらとりあえずコードに移すことが癖でしたが、フロントエンド初心者であることから一度画面設計することにしました。そこでFigmaを知ったのですが、MacやiPhone等の画面に沿って設計ができるため、非常に便利でした。実装後もフォントサイズやカラーコードを見ながら実装できたのでとてもスムーズでした。

改善点

もちろん、初めてということもあり改善点はあると思います。今回は、記事が充実していないと意味をなさない機能は削りましたが、それ以外にも実装を省いた点はあります。

  • TypeScriptへの移行
  • 単体テストの作成
  • GitHub Actionによる自動デプロイ

これらはフロントエンド開発を続けていく上で、必ず必要になってくると思うので、早めに実装したいと思います。
それとは別に収益化の観点も課題です。Vercelのhobbyプランは商用利用が不可であり、広告やアフィリエイトの掲載ができません。現時点で収益化する必要性はないと考えていますが、できるに越したことはないので他のデプロイ先も検討してみます。Firebase HostingやS3 + CloudFrontなどが視野に入ります。

今回は以上です。想像よりも簡単に実装できたので、みなさんも作ってみてはいかがでしょうか。

参考


トップページへ戻る