Webフロントエンド入門
まずはじめに
HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。
あと、いいね、コメントいただけると記事作成の励みになります😇
この記事の対象者
- HTML, CSS, JSはある程度理解した
- モダンなWeb制作を行いたい
これから学ぶべき技術
React, Next.js
一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。
ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。
作成するものによって使い分けを必要としますが、Reactを学べば、ある程度すんなりとNext.jsも理解することができるでしょう。
最近のプロジェクトではReactの方がいいではなく、Reactじゃないと無理ということも出てきています。それは、ReacetがWeb制作の主流なフレームワークであるため、Reactに合わせたライブラリの開発が進み、エコシステムが形成されているからです。
Vanila JS(生のJS)にReact用に開発されたライブラリを組み込むことはできないということです。
TypeScript
これも聞いたことある人が多いと思います。端的にいうと、JSに型付けを行ったものがTypeScriptです。CやJava、C#, Goなどの言語を触ったことのある人なら理解できると思います。
理解できなかった方も、要はちょっとJSを進化させたやつだという雑な認識を今はしておいてください。勉強したらすぐわかると思いますし、JSを理解している方なら、簡単だと思います。
CSS フレームワーク
CSSフレームワークとは、より効率的にCSSの記述を行えるようにしたものです。大抵CSSを当てる場合、クラス名を考える必要がありますが、それを不要とし、また、普段よく記述するCSSの塊をそのまま提供してくれており、開発効率が格段に上昇します。
今回は私が使ったことのあるCSSフレームワーク、左から、TailwindCSS、Bootstrap、Materializeを画像に載せました。
これから初めてCSSフレームワークを始めるという方であれば、TailwindCSSを強くお勧めします。これは最初に説明したReactやNext.jsいったwebフレームワークとの相性や、最近の利用率といった点で圧倒的だからです。
私は元々Bootstrapを使っていたのですが、周りがあまりにもTailwindCSSを使っているので、共同開発をするためにわざわざTailwindCSSに乗り換えました。利用率が高いものを使うことは共同開発をする際や教材の多さといった観点でも良いでしょう。
UI コンポーネントライブラリ
よく、 CSSフレームワークとUIコンポーネントライブラリをまとめて紹介している記事を見かけるのですが、役割が全く違うので注意してください。
UIコンポーネントライブラリとは、よく使うUIを塊(コンポーネント)として提供してくれているものです。例えば、ボタンを作りたいなと思ったとき、これを使えば、一瞬で実現することができます。また、ある程度カスタマイズすることもでき、自由度もあります。
CSSフレームワーク同様、私が使ったことのあるものを画像に載せました。左から、MUI、Ant Design、Radix UIとなっています。
特にこれが圧倒的に人気というイメージ感は私にないですが、もし初めて勉強するのであれば、 Radix UIを勉強されるといいのではないでしょうか？
これは、最近流行っているUIコンポーネントカタログ(UIコンポーネントライブラリではない)のShadcnがRadix UIとTailwindCSSの掛け合わせで作られているからです。
いずれShadcnを学ぶことを見据えると、Radix UIがお勧めです。そもそも、UIコンポーネントライブラリは必須級のものではないですし、なくてもサイトは開発できます。しかも、オリジナリティの高いサイトを作りたいのであれば、ある程度自由度があるとはいえ、対応できないので、そもそも学ぶ意味がないかもしれません。
CSS in JS
CSS in JSとはJSを用いてCSSを記述するものとなっています。もっと簡単にいうと、JSの中にCSSを取り込めるといったイメージです。
画像は左から、Emotion、Linariaとなっています。こちらもReactやNext.jsといったwebフレームワークと相性のいいスタイリング方法となっています。
TailwindCSSなどのCSSフレームワークを使えれば、初学者であれば、そこまで困ることはないですが、知識として知っておいてください。
また、今回あげた二つのCSS in JSはランタイムなのか、ゼロランタイムなのかでもものが異なってきます。この議論は今回深掘りしませんが、勉強を進めるにつれて、出てきた際にこんなものがあったなと思ってもらえればと思います。
よく理解したい方におすすめの記事
状態管理ライブラリ
そもそもReactを知らない人に状態管理ライブラリが何かを伝えるのは難しいのですが、ものすごく簡単にいうと、バケツリレーをやめて、状態を一箇所で管理しようねみたいな感じです。
意味がわからないと思うので、ここは読み飛ばしてもらって構いません。そもそも、大規模なプロジェクトでなければ、状態管理ライブラリをわざわざ使う必要もないですし、Reactで最も難しい部分と言っても過言ではないので、挫折する要因になるのなら、やらなくてもいいです。
しかし、ある程度学習が進んで学びたいという方には、Reduxを学ぶのがおすすめです。画像に載ってるのは左から、Redux、Recoil、Zustandです。
Reduxは他の状態管理ライブラリに比べて圧倒的人気です。また、人気でユーザーが多いということは文献も多く、学びやすさにもつながってきます。
私は状態管理ライブラリを使うときはZustandをよく使います。体感ですが、Reactをやっている人であれば、最も直感的にコーディングでき、理解しやすいのが、Zustandだと思います。
Reduxを勉強して、ある程度、状態管理ライブラリを理解したら、Zustandをやってみてもいいのではないでしょうか。
BaaS
BaaSとは、バックエンドで用いるものをまとめて提供してくれる便利なサービスです。え、なんでフロントをやるのにバックエンドと思った方もいると思います。
もちろん、バックエンドを全く知らなくていいという人もいると思いますが、私は以下の二つの理由で理解する必要があると思います。
一つ目は、フロントしかできないと広がりがないということです。データベースや認証機能といったバックエンド側で行われる処理を導入することにより、作成できるものの幅の広がりは計り知れません。
二つ目は、ReactやNext.jsなどのフレームワークの進化やそれに伴うエコシステムの形成により、フロントでの作業の時間が圧倒的に短縮され、小規模プロジェクトであれば、バックエンド側と作業を分担する必要性も無くなってきています。
また、Next.jsではフロントとバックの境目がなくなるという事態も発生しており、フロントだからバックのことはなにも知らなくていい、できなくてもいいといった時代は終わったと思います。
とはいえ、いきなり、サーバーサイドの言語を学んだり、データベースの学習をしたりと、初心者フロントエンドエンジニアには厳しいと思います。
そこので登場するのが、画像の左にあるFirebaseです。なんと、Firebaseはフロントと直接やりとりを行うサーバーレスな構築を提供しています。すなわち、サーバーサイドの言語を学ぶ必要はなく、データベースや認証機能といったものを導入することができます。
また、画像の右にあるSupabaseと言われるデータベースも最近勢いがあります。初心者にとってはこちらの方が学習コストが高いと思うので、最初をFirebaseを学び、慣れたらSupabaseなどのBaaSを触ってみて、バックエンドに入門していけばいいと思います。
静的ホスティングサービス
静的ホスティングサービスとは、簡単にいうとインターネット上に自分の作ったサイトを公開するサービスです。
画像の左から、Vercel、Netlify、Firebase Hostingとなっています。
Vercelは一番冒頭部分で出てきましたが、Next.jsを作った会社です。また、Netlifyは、最近流行りのweb開発の方法の一つであるJamStackという考え方を作った会社です。FirebaseはGoogleが提供するBaaSであり、ホスティング機能も提供しています。
私は普段作成したサイトはVercelにて公開してます。ホスティングサービスにも相性というものがあり、当然、Next.jsの生みの親であるVercelとNext.jsの相性はとても良いです。Next.jsでサイトを構築することを考えているのであれば、Vercelを選ぶのが良いと思います。
その他のライブラリ
上記では紹介しなかった私がよく使うフロントのライブラリを紹介したいと思います。
一つ目が画像左のThree.jsです。Three.jsは手軽にWeb上に3Dコンテンツを表示することのできるライブラリです。見るのが一番イメージが湧くと思うので、私のおすすめのThree.jsで作られたサイトを下に貼っておきます。
二つ目は画像右のFramer-motionです。これは簡単にアニメーションを実装することのできるReact、Next.jsのライブラリとなっています。
学習始める順番と学習教材
と、ここまで言われたけど、どの順番で、何で勉強すればいいのかわからないという状態だと思います。そこで、おすすめの学習の順序と、それに対応したネット上にある無料の教材を紹介したいと思います。
①まずはReactを学ぶ
とりあえずReactに入門しましょう。これからWebサイトを作る上で避けては通れない大事な部分となっています。しっかり時間をかけて学んでいきましょう。
環境構築
基礎を学ぶ
学んだ基礎を使ったアプリ作成
Reactのhooksの理解
②TypeScriptを学ぶ
Reactを大体理解したなとおもったら、ReactのプロジェクトにTSを導入するべく、勉強を始めていきましょう。
基礎を学ぶ
React+TSを学ぶ
③TailwindCSSを学ぶ
React+TSを理解したところで、CSSフレームワークをプロジェクトに導入し、開発の足場を固めていきましょう。TailwindCSSはCSSを理解している人であれば、公式キュメントでも簡単に理解できると思います。
基礎を学ぶ
④React+TS+Tailwindで一度簡単なアプリを作ってみる
私はここで簡単なアプリを自作して、インプットしたものをアウトプットすることをお勧めします。webフロントの開発の足場は着実に固まってきているのでここで一度今まで学んできたものを整理しましょう。
もし作るものが思い浮かばない場合は、動画で学んだ作品を動画を見ずに、自分のオリジナルのデザインやUIで作成してみるというのも効果あると思います。
⑤GitやGitHubの理解
GitやGitHubはコードをバージョン管理するために用いるものです。すでに知っている方は飛ばしてもらっても、大丈夫です。これを理解しておくことによって、次にやるデプロイを円滑に行うことができるのでしっかりとここで勉強しておきましょう。
載せている動画はGUIでGitを直感的に触ることのできるSourceTreeの入門動画です。#1から#10まであってとてもわかりやすいので是非見てみてください。
時々、GUIじゃなくて、コマンドでやった方がいいという方もいますが、私はまずGUIで理解して、コマンドを勉強した方がイメージがついてわかりやすいと思っているタイプなので、こちらを紹介させていただきます。
⑥デプロイをする
④で自作したサイトを⑤で学習したGit+GitHubでバージョン管理して、ぜひvercelにデプロイしてみてください。下記の記事が参考になると思います。
⑦あとは自由に学ぼう
ここまで学習したあなたはReact+TS+Tailwindの基礎を身につけて、Git+GitHubでバージョン管理し、デプロイまでできるようになっています。
ここから先は今回学んだ土台に対して、何か一つをプラスして、web制作に打ち込んでみてください。
- React+TS+Tailwind+Firebase(BaaS)
- React+TS+Tailwind+Redux
- React+TS+Tailwind+Framer-motion
こんな感じで足場ができていれば、他のものを一つ加えるだけで学習することができます。冒頭で私が書いたこれから学ぶべき技術から選んでみてください。
便利な拡張機能
最後にWeb制作をやっていく上でおすすめの拡張機能を紹介します。
この拡張機能はそのサイトがどんな技術を使って作られているかを見ることのできるGoogleの拡張機能です。試しにこのZennのサイトに使ってみたところ下記のように出ました。
今回紹介したReactやNext.jsを使ってサイトが構築されていることがわかります。今回紹介していない技術もたくさん使われていることがわかると思います。
ふと自分の普段見ているサイトの技術を見て、そこに載っているあなたの知らない技術を調べると、新たな学習につながると思います。
まとめ
ここまで読んでいただきありがとうございました。これからもweb制作における情報をわかりやすくまとめた記事を書いていきたいと思っているので、是非読んでいただけたら嬉しいです。
Discussion
tailwind-variantsも組み合わせると色々楽になります！ー
フロントエンドに関しても記事探していたのでありがたかったです！
ReactとTypeScriptですが動画だと古くなっても更新されないので公式ドキュメントのリンクがあると良いと思います