フロントエンドの何から勉強したらいいかわからない人むけロードマップ
はじめに
対象者について
この記事では、いつの間にか技術の変遷の流れに乗り遅れて、そもそもなにから勉強していいのかわからないという人向けにおすすめの学習ロードマップを紹介します。
昨今のフロントエンドの技術は移り変わりがとにかく速いですね。
なぜ、早いのかというのは置いておいて、その速さゆえに技術的に取り残されてしまった人というのは少くないのではないでしょうか。
例えば十年前のWEBサイト制作会社の募集要項では、とりあえずパソコンが使えれば大丈夫という会社もたくさんありました。
そもそも、フロントエンドエンジニアなんて職業は一般的ではなく、デザイナー兼HTML・CSSコーダーという働き方をしている人が多かったのですが、いつの間にか役割分担や肩書が様変わりしてしまいました。
そんな、もともと非エンジニアの人たちの学び直しのヒントに少しでもなれば幸いです。
開発環境と開発ツールについて
昔は開発環境と本番環境という区別があまりありませんでした。
なぜなら開発環境で書いたソースコードをそのまま本番環境にアップロードしていたので、ビルドやコンパイルといった概念がなかったため、開発用のコードも本番用のコードも同じものだったからです。
これからフロントエンド開発を本格的に学習するにあたって、まず躓きやすいポイントは開発環境とそのなかで利用される開発ツールの多様性だと思います。
言語やフレームワークを学習するための下地として、開発ツールやその役割を整理しましょう。
しかし逆に、開発ツールのひとつひとつは非常に奥深いため、それぞれをあまり深く勉強しすぎると挫折の原因にもなりかねません。
まずは、概要を知り基本的な使い方だけ覚えて、後からしっかり学習することをおすすめします。
情報収集におすすめのサービス
エンジニア向けのコミュニティであるZennやQiitaに加えて、YouTubeなどにもわかりやすい情報が多く発信されているので、ぜひ活用してみてください。
エディター
エディターにはコードを実際に書くだけでなく、そのための補助機能や拡張機能を便利に利用するという役割があります。
VSCode
MicrosoftのVisual Studio Code（通称VSCode）は定番ですので、とりあえずこれを利用しましょう。
他の選択肢はこれに慣れてから考えればよいと思います。
- 利用者が非常に多いため使い方などの資料が非常に豊富
- プラグインが豊富
- ターミナルが一体化していて便利
- 無償
VSCode 拡張機能
VSCodeには様々な機能を追加できるプラグイン群があります。
Japanese Language Pack for VS Code
VSCodeは初期状態では英語表記のため、このプラグインをインストールすることで日本語化できます。
Live Server
ローカル環境でHTMLファイルをリアルタイムにプレビューするためのプラグインです。
フレームワークやビルドツールを用いて開発する場合には、それらの機能の開発サーバーを用いてプレビューを行いますが、そういったものがないケースに便利です。
ESLint
ESLintをVSCodeで利用するためのプラグインです。
ESLintの詳細は後ほど記載します。
Prettier - Code formatter
PrettierをVSCodeで利用するためのプラグインです。
Prettierの詳細は後ほど記載します。
実行環境
プログラミング言語を実行するためには必ず実行環境を構築する必要があります。
HTMLやCSSを経験している人であれば、ブラウザで開くだけで動作するのはご存知だと思いますが、あれはブラウザが実行環境となっているからですね。
JavaScriptもブラウザで動作する言語ですが、ローカル環境ではセキュリティの関係でファイルアクセス制限など一部の機能が制限されているためプレビューするのには向きません。
そのため、ローカルでサーバーを起動する必要があります。
Node.js
JavaScriptの実行環境として定番なのはNode.jsです。
これは本来サーバー上でJSを実行するためのものですが、開発環境としてローカルにインストールして利用するという方法も一般的です。
一方で更新頻度が非常に高いため、頻繁にバージョンアップをしなければいけないということだけは覚えておいてください。
Node.jsのバージョン管理には「Volta」などの管理ツールもあるので調べてみてください。
npm
Node.jsをインストールするとnpmが同梱されています。
npmはNode Package Managerの略で、JSのライブラリやフレームワークなどをパッケージとして管理するためのものです。
近年の開発ではこのパッケージをたくさん利用するため、このような管理システムが必須となっています。
ターミナルからnpm install(パッケージのインストール)やnpm run dev(開発サーバーの起動)などのコマンドを頻繁に利用するため、基本的なコマンドを覚える必要があります。
package.json
npmを利用するうえで中心的な役割のファイルです。
どのような構成になっているか学習しましょう。
また、.jsonという拡張子からもわかるようにJSONというファイル形式です。
このJSONについてもどのような記法でを用いるのか確認してください。
リンター・フォーマッター
リンターは入力ミス・構文エラー・コードの一貫性の欠如などを自動で検知して警告を出してくれるツールです。一方フォーマッターはソースコードを自動整形してくれるツールですが、それぞれのルールが衝突することがあるので、共存方法に注意しましょう。
VSCodeのプラグインとしてインストールしたうえで、各プロジェクトでライブラリとしてインストールして利用します。
ESLint
JavaScriptやTypeScriptの構文やコーディングスタイルのルール違反を検出するリントツールです。
プラグインが豊富にあり、利用するライブラリやフレームワークに合わせて選択します。
Pritter
読み方はプリティアで、ソースコードをきれいに整形してくれるフォーマッターです。
ソースコード管理
ソースコードがどのように変更されたのかという履歴を保存して管理できると非常に便利です。
また、複数のメンバーでその情報を共有する必要もあります。
Git
Gitはソースコード管理の定番です。
- ソースコードの変更の履歴を保存する
- 変更を簡単にもとに戻すことができる
- ブランチを使った並行開発ができる
.gitignore
.gitignoreファイルはGitが特定のファイルやディレクトリを無視するように設定できるファイルです。
もともと大量のファイルを有するプロジェクトを、あとからGitで管理しようとすると処理が重くてフリーズすることがあります。
そのようなケースにも対応できるように書き方などを学習してください。
GitHub
Gitの情報を複数の人で管理することができるサービスです。
誰がどのような変更を行ったのかを管理することができます。
さまざまな機能があるため、学習難易度はやや高めですが基本から少しづつ覚えていきましょう。
SorceTree
Gitは基本的にターミナルで利用します。
しかし初心者にはすこしわかりづらいと思うので、UIを提供してくれるSorceTreeの利用もおすすめです。
視覚的にブランチやコミットの流れがわかりやすいため、理解の促進にもつながります。
言語
JavaScript
JavaScriptは近年非常に人気です。
昔は非常に嫌われていた時期もありますが、そのあたりの事情もJSのヒストリーとともに追ってみるのも面白いです。
また、その拡張言語であるTypeScriptも人気です。
基本をしっかりと抑えるのが重要ですので、焦らずに少しずつ知識を広げましょう。
ビルドツール
フレームワークを学習する前にビルドツールを抑えておきましょう。
ビルドツールには主に以下のような役割があります。
- コードのコンパイル・トランスパイル（本番環境に適した形に変換する）
- モジュールバンドル（複数のファイルを一つにまとめ、依存関係を管理）
- ファイルの圧縮（コードを圧縮して、読み込み速度を向上）
- 自動化（ビルド、テスト、デプロイなどの作業を自動化）
- コードの分割（大規模なアプリケーションを小さなチャンクに分割して、必要なときにのみ読み込む）
- 静的資産の管理（画像やフォントなどの静的ファイルを最適化して管理）
フレームワーク・ライブラリ
フロントエンド開発の基礎となるソフトウェアです。
近年ではこれらを利用せずに開発したり、あるいはJQueryを利用することは少くなってきました。
React／Next.js
近年、Meta社によって公開されているReactが非常に人気で、開発の基礎的なソフトウェアとして多く利用されています。
また、Reactを利用したフレームワークでNext.jsもとても人気です。
Vue.js／NuxtJS
以前は日本ではReactと同じくらい人気のあったVue.jsですが、近年のReact人気に押され気味な印象です。
ただ、Meet upやVue Fesなどのイベントが非常に活発です。
SaaS
SaaSとはインターネット経由で利用できるソフトウェアです。
自分でバックエンドを開発するのと比べると、保守管理の手間がないことや、すぐに利用が可能なことなど恩恵は大きいです。
利用する、しないはケースバイケースですが、一度調べてみると便利なサービスがたくさんあります。
microCMS
microCMSはヘッドレスのCMSを提供するSaaSです。
WordPressのようなCMSが必要なときに非常に簡単で扱いやすいサービスです。
お試しで利用できる無料プランもあるので一度試してみるのをおすすめします。
さいごに
最後まで読んでいただきありがとうございます。
もし、あなたがフレームワークの学習まですすめたらそれはとてもすごいことだと思います。
また、そこまで進められたのであればこれ以降のロードマップはおのずと見えてくるはずです。
開発効率や開発体験の向上は実際に体験してみると非常に楽しいものなので、ぜひ一歩をふみだしてみてくださいね。
そして、それがモチベーションとなることを祈っています。
Discussion