フロントエンドエンジニアになろう

2020年10月22日 08:40

参考元：Modern Frontend Development　in 2018

Learn the basics of HTML
HTMLはwebサイトに構造を与えるもの。
それは人間が自立するために必要な骨格のようなもの。最初にすることは、HTMLの構文を学び、HTMLが提供しなければならないこと全てを学ぶこと

以下を集中すべき
・セマンティックHTMLの基本と作成方法
・ページをセクション毎に分ける方法と、DOMを適切に構造化する方法。

Task
HTMLの基本を学んだら、少なくとも５ページのHTMLサイトを作成する。
GitHubのプロホィールページや、Twitterログインページなどを参考にすると良い。
また、コンテンツの構造化に注意する。
今はまだ、サイトは、綺麗に表示されないでしょうが、見た目は気にせず、適切な構造化にのみ主眼はおいておく。

Learn some CSS
ここまでで、ページのスケルトンを準備する方法を学んだ。
次は、その上にスキンを追加して美しく見せる時間。
CSS、 Cascading stylesheetsは、ページを美しく装飾するために使用される。
・まずCSS構文kについて学び、一般的なCSSプロパティについて理解する。
・Boxモデルについて学び、GridレイアウトとFlexboxを使う方法を理解する
・次に、メディアクエリを使ってwebサイトをレスポンシブに対応する方法を学ぶ。

Task
CSSの基本を覚えたら次に行うことは、先ほど作った５つのHTMLページを装飾すること。例えば、GitHubpいうプロフィールページをHTMLで作っていたとしたらCSSを適用して本物のGitHubプロフィールのように見せかける。
これを５ページ全てで行う。

Learn the Basics of JavaScript
JavaScriptは、HTMLページをよりインタラクティブlにするためにもの。
例えば、webサイトで表示されるスライダー、ポップアップ、トースト通知や、ページ全体をリトードせずに一部だけをロードする場合、これらは全てjavascriptaで作られている。

Task
このステップでは、今後のためにjavascriptの基礎を学ぶ。
・言語の構文と基本構造について学ぶ
・javascriptを用いてDOMを操作する方法を学ぶ。要素の追加削除、classの追加削除、CSSスタイルの適用など。
・次に、スコープ、Closure、変数巻き上げ、イベントバブリング等を理解する。
・XHRもしくは、AjaxでHTTPリクエストを送る方法について学ぶ。Ajaxはページをロードせずにリクエストを送ることができる。
・ここまで終わったら、ES6以降の新機能について学ぶ。ES6は単なるjavascriptのバージョンであるが、class、変数宣言、配列メソッド、文字列連結など多くの機能が追加された。オンラインで見つかる多くの記事は、古いブラウザでサポートされていないため、ES6はBabelとともに開設される。しかしここでは、Babelを気にする必要はなく、最新のブラウザを用いて動作を確認するだけで良い。
ES６については、後に開設。

Should I learn jQuery?
誰もがjQueryを必要としていた時代がありました。 JavaScriptの上にラッパーを提供し、ブラウザ間の差異を気にせず何かを実行できる強力なライブラリでした。 今やそれも過去の話、新しいプロジェクトではそれほど使われていませんが、まだ多く残っています。 貴方はjQueryを必ずしも学ぶ必要はありませんが、とても簡単なので気になったら見てみると有益です。

Time to Practice
何度でも言います。ここでも言います。 練習しなければ何も学ぶことは出来ません。 この記事を読んで一瞬わかった気になったとしても、練習しなければすぐに忘れ去ることでしょう。 このロードマップに従っている間はとにかくできるだけ練習してください。
次はレスポンシブなWebサイトを作り、JavaScriptを使ってインタラクティブな機能を追加してください。 面白そうな既存サイトから機能をコピペすることも出来ますが、ここまでで学んできたこと全てを使うことを忘れないでください。
幾つかWebサイトを作ったら、次はいよいよビジネスに入るところです。 github.comから適当にプロジェクトを検索し、オープンソースプロジェクトにプルリクを出してみてください。 プルリクできそうなアイデアの一部を以下に示します。
・UIの強化、デモページをレスポンシブにしたりデザインを改善したりする。 ・解決できそうなOpen Issueを探して対応する。 ・改善できそうなコードをリファクタリングする。

このリポジトリにリンクして、学習中であること、プルリクの改善内容を伝えましょう。
Githubについて学習すべきだと考えていますが、これにはgitの知識が必要です。 必ずしも行う必要はありませんが、実行すれば、これがどれだけ有益かわかるでしょう。 gitについては多くのリソースがありますが、こちらのコースを試してみましょう。

Give yourself a pat on the Back
あなたは立派にフロントエンドの基礎を手に入れました。 ここまでのことを全て学べば、フリーランスやフルタイムの仕事をこなすことができるでしょう。 しかし、ここで立ち止まらないでください。 よりよいキャリアを積みたいと考えているならば、さらに長い道のりがあります。

Package Managers
ここに来るまでに、プラグインやウィジェットなどの外部ライブラリを使ったかもしれません。 この場合、JavaScriptとCSSを手動でダウンロードして、プロジェクトに導入する必要があります。 それらのライブラリに新バージョンがリリースされると、再び新しいファイルをダウンロードして導入しなければならず、これは非常に面倒です。 パッケージマネージャは、その面倒を肩代わりしてくれます。 外部ライブラリやプラグインをプロジェクトに導入するときに、手動でコピーしたりバージョンアップしたりする手間を省くことが出来ます。 現在はyarnとnpmというものが使えます。 どちらもほぼ同じで、片方の使い方を覚えたらもう一方も全く同じに使用できます。

Let’s use what we have learnt
パッケージマネージャの基本がわかったら、上で作成したWebページに外部ライブラリを導入してください。 たとえばトースト通知のプラグインを導入して、ユーザがボタンをクリックしたときにトーストを表示する、ログインフォームを作成し、フォーム検証ライブラリを用いて入力値検証を行う、などです。 様々なオプションを試し、複数のバージョンをインストールしてみてください。
それらを行いながら、Semantic Versioningに目を通しておきましょう。

CSS Preprocessors
CSSプリプロセッサは、デフォルトのCSSでは不可能な機能を使えるようになります。 Sass、Less、Stylusなど色々な種類がありますが、私がひとつ選ぶのであればSassにするでしょう。 また、PostCSSも徐々に市民権を得つつあります。 それはCSS版のBabelのようなもので、それだけをスタンドアロンで使うことも、Sassと一緒に使うこともできます。 今はSassだけを学習し、PostCSSについては後から見直すことを勧めます。

CSS Frameworks
CSSフレームワークについて学ぶ必要はもはやありませんが、使いたいのであればひとつだけ選ぶとよいでしょう。 私が試した中で好みだったのはBootstrap、Materialize、Bulmaですが、シェアを鑑みると、今から始めるならBootstrapを選ぶべきです。

CSS Organization
アプリケーションが成長するにつれ、CSSは複雑怪奇で管理不能になり始めます。 そこでCSSをスケーラブルにする色々な方法論が提唱されています。 OOCSS、SMACSS、SUITCSS、Atomic、BEMなどがありますが、私はBEMが好みです。

Build Tools
Linter、タスクランナー、バンドラーなど、JavaScriptアプリケーションの構築・バンドル、および開発に役立つツールたちです。
かつてはタスクランナーとしてnpm script、gulp、gruntなど様々な選択肢がありました。 しかし現時点で生き残っているのはnpm scriptだけです。 これを使い、webpackを呼び出してタスクを自動化します。
Gulpを学習する必要はありませんが、後で時間があれば導入してみて、自分のアプリケーションに必要かどうかを確認することが出来ます。
LinterについてはESLint、JSLint、JSHint、JSCSなどがありました。 しかし現在はほぼ全てESLintです。
モジュールバンドラはParcel、Webpack、Rollup、Browserifyなど複数の選択肢があります。 ひとつ選択することになったら、とりあえずWebpackを選んでください。 Rollupも最近では有名ですが、これはライブラリに用いられるのが一般的です。 アプリのためにまずWebpackを使い、後からこのセクションに戻ってRollupを使ってみてください。

Time to Practice — Create something
おめでとう！ これでモダンJavaScriptの75%を制覇しました。 今度は、今まで学んだこと全てを使って何かを作りましょう。 おそらくあなたはSassとJavaScriptでできた、何らかのライブラリを作るでしょう。 その後Webpackを使ってSassをCSSに変換し、babelを使ってES6を旧JavaScriptに変換します。 最後にnpmを使ってGithubにリリースしましょう。

Pick a Framework
旧ロードマップではこのセクションは基礎セクションの次に位置していましたが、Sass・ビルドツール・パッケージマネージャの後に移動しました。 フレームワークの機能を知らないままに使うことになるので、混乱してしまうことがあったからです。
フレームワークにも多くの選択肢がありますが、最近よく使われているのはReact、Vue、Angularです。 最近はReactの需要が増えていますが、リストのいずれを選んでも問題はありません。 個人的にはReactかAngularを選択します。 初心者にはAngularが比較的簡単に思えるかもしれません。 これはAngularがほとんどの機能をサポートしているからです。 遅延ロードをサポートした強力なルーティング、インターセプト可能なHTTPクライアント、依存性注入、CSSのカプセル化など、外部ライブラリを使う必要はありません。 しかしReactは間違いなくフレームワークの頂点にあり、facebookのチームが改善に取り組んでいます。 あなたにとって最もよいものはどれか、惑わされず自分で探してみてください。
AngularとReactの学習曲線について、私の個人的な経験による比較を別記事から転載しておきます。 両方を見て、あなたに適したものを選んでください。

フレームワークを選択したら、他にも学ばなければならないものが出てきます。 たとえばReactを選択した場合、作成するアプリケーションの規模に応じてReduxかMobxによるステート管理を学ばなければなりません。 Mobxは中小規模のアプリに適しており、Reduxは大規模アプリに適しています。 さらにアプリによってはいずれも必要とせず、Reactの素のステート管理だけで十分かもしれません。
Angularを選択した場合、TypeScriptとRx.jsを覚えることで、Angularの恩恵を受けることができます。 TypeScriptは使わないこともできますが、使うことを強く推奨します。 Rx.jsは本当に強力なライブラリで、また関数型プログラミングを書くことにも適しています。
Vue.jsを選択した場合はVuexを学ばなければならないでしょう。 これはVue用のReduxです。
Redux、Mobx、Rx.jsはフレームワークと不可分のものではなく、バニラのJavaScriptにそれらだけを適用することも可能です。 またAngularについては、Angular1ではなくAngular2であることに注意してください。

Time to Practice
これであなたは、モダンなJavaScriptアプリケーション構築に必要な全てを学ぶことができました。 選んだフレームワークでアプリをいくつも作ってください。 アイデアはリポジトリのアイデアディレクトリから見つかるはずです。 どれかを選んですぐ始めましょう。
アプリの開発が完了したら、パフォーマンスを測定し、改善する方法を調べましょう。 たとえば操作可能になるまでの時間、Page Speed Index、Lighthouse Scoreなどがあります。

Progressive WebApps
ここまでのステップが完了したら、次はService Workerについてと、プログレッシブWebアプリを作る方法を学びます。

Testing your Apps
非常に多くの目的のために、非常に多くのツールが存在します。 私はほぼJest、Mocha、Karma、Enzymeの組み合わせだけで対処しています。 しかし、あなたはいずれかのツールを選ぶ前に、テストの種類について調べ、様々なツールを試してから最も適したツールを選んだほうがベターでしょう。 ここにテストツールについての素晴らしい記事が存在します。

Static Type Checkers
静的型チェッカーは、JavaScriptに型チェックを追加します。 これらを学ぶ必要はありませんが、数時間かけて学ぶだけで非常に強力な武器を手に入れることができます。 主にTypeScriptとFlowがあり、私はTypeScriptを断然お勧めしますが、両方をチェックして好みの方を選んでください。

Server Side Rendering
ここまでで得たスキルは、フロントエンドエンジニアのポジションを得るのに十分なものです。 しかし、ここで立ち止まらないで！
どのフレームワークを選んでいたとしても、サーバサイドレンダリングについて学んでください。 選んだフレームワークに応じて、様々な選択肢が存在します。 ReactであればNext.jsやAfter.jsが、AngularならUniversalが、そしてVueにはNuxt.jsがあります。
実はこのロードマップにはまだ欠けているものがあり、それはフロントエンドエンジニアすべてに必要なものです。 そしてその鍵は、常に多くのことを練習し続けることにあることを忘れないでください。 最初は大変で、覚束ないと感じることも多いでしょうが、それは正常です。 時間が経つにつれ、あなたはいつのまにかよくわかるようになっていることでしょう。 躓いているときは助けを求めてください。 どれだけ多くの人々があなたを助けてくれるかに驚くことでしょう。

この記事が気に入ったらサポートをしてみませんか？