2026.08.18
ブログサイトづくり
ブログサイトづくりのために勉強した記録を残しておく。
筆者は仕事でPythonやJuliaといったプログラミング言語を使ってデータ解析やシミュレーションをしている。 他にもRやStan、低レベルではRustを勉強してきた。 学生時代にはPerlで分子動力学シミュレーションソフトの機能を拡張したこともある。 研究室ではFortranの勉強会も開かれていたが、今ではすっかり忘れてしまった。
つまり、これまで筆者はプログラミング言語を多少かじったことはあるが、 Webフロントエンドのプログラミング言語については初心者である。
そんな私がブログサイトを作るうえで勉強してきたことを振り返ってみて、 どのような順番での勉強がおすすめなのか、ここに整理しておこうと思う。
勉強の方法
1. HTML/CSS/JavaScript
よく言われるのは、HTMLはWebページの骨格、CSSは装飾、JavaScriptは動きをつけるための言語である。 筆者はProgateでこの基礎を勉強した。 Progateは環境構築不要でプログラミングを体験できるため、初心者にうってつけのサービスだと思う。
2. React
次にReactだ。 ReactはJavaScriptのフレームワークであり、 HTML/CSS/JavaScriptがひとまとめになったコンポーネントと呼ばれる単位でコードが部品化される。 これらのコンポーネントを組み合わせることでWebページを構成するため、 HTML/CSS/JavaScriptをそれぞれ別のファイルで頻繁に行き来するということが少なくなった。 Reactについてはmosyaというサービスがあったが、今では同サービスはProgateに吸収されている。 筆者もmosyaを利用させてもらったが、Progate同様お手軽な反面、お手本コードが小さく折り返されていて見づらいなと感じることがあり、 筆者にはあまり向かなかった。
おすすめの教材は、挫折しないReactの教科書 作りながら学ぶWeb開発だ。 この教材は本なので、コードも大きくひと目でわかりやすいし、わからなかった箇所に立ち戻りやすい。 本書では最終的に、Reactを使って実践的なToDoアプリを作ることができるようになる。 本に沿ってコードを修正していき、その都度必要な知識を蓄積していくスタイルなので、 教科書的というよりハンズオン的で、プログラミングをしている実感を得やすかった。
3. Next.js
Next.jsはReactのフレームワークだ。 Reactはフロントエンド1の実装及び管理が得意だが、 バックエンド2の機能が複雑で使いづらい。 そこで登場するのがNext.jsだ。Next.jsはこうしたReactの弱点を補い、 高速でSEOに強い3Webサイトを構築できる。
筆者が勉強に使ったのははじめてのNext.jsだ。 本書ではNext.jsの機能について網羅的に解説されている。 Next.jsの性質上、サーバーとかキャッシュとか、その手の話がいっぱい出てくるので、 ある程度Webに明るい人向けかもしれない。 本書の最後にはWebサイトのデプロイ4の仕方を解説してくれているのはポイントが高い。
4. Git
Gitはプログラミングに少しでも触れたことのある人にはおなじみのツールかもしれない。 Gitとは、ファイルのバージョンを管理して、複数人での共有もしてくれる便利ツールのことである。 筆者はVercel5を使ってサイトをデプロイしたかったので、 作ったローカルリポジトリをGitHubのリモートリポジトリと連携する必要があった。 Gitはプログラミングをする上で、覚えておいて損がない知識なので、まだの人はぜひ勉強してみてほしい。 筆者のおすすめはVTuberサプーさんのYouTube動画だ。 Pythonの解説動画がメインだが、どの動画も初心者に大変わかりやすい。 彼女の動画を見ればこのセクションに書かれている単語の意味も容易に理解できるはずだ。
おわりに
いかがだっただろうか。正直なところ、筆者はNext.jsを完璧に理解したとは言い難い。 Next.jsの機能は多岐にわたるので、まだまだ勉強することは山ほどある。 しかし、今回の勉強でWebサイトを作るための基礎的な知識は身につけられると思う。 今後も書籍だけでなく、UdemyやYouTubeなどの動画教材も活用して、時間をかけて理解を深めていきたい。