フロントエンド技術を学ぼう 1-10.フロントエンドデベロッパーになるには

Front-end Developer Handbookを教科書にフロントエンド周りの技術を習得する連載。

フロントエンドデベロッパーになるにはについての説明です。

フロントエンドデベロッパーになるには

どの様にしたら確実にフロントエンドデベロッパーになれるでしょうか？これは難しい問題です。フロントエンドエンジニアリングの学位を取得できる大学は、現在なお見当たりません。それにコンピュータサイエンスやグラフィックデザインの学位を取得するために、HTML、CSS、JavaScript書くことができなくなっている、フロントエンドデベロッパーを見たことはありません。

私の見解では、現在フロントエンド界隈で働いている殆どの人々は、独学か非公認のプログラム、コース、ブートキャンプから来ているようです。

フロントエンドデベロッパーになる為のプロセス

今日からフロントエンドデベロッパーになろうとする場合は、次項から説明する以下のプロセスに従ってみて下さい。(パート2「Learning Front-End Dev」では、学習リソースの詳細について説明します。)

1. ウェブの仕組みの概要を学ぶ
   ウェブプラットフォームの仕組みを大まかに学ぶ。HTML、CSS、DOM、JavaScript、ドメイン、DNS、URL、HTTP、ブラウザ、サーバ/ホスティングの「何を」「どこで」知っているかを確認してください。まだ何も深く掘り下げずに、各部分を理解し、それらがどのように相互に関連しているかを理解することを目標にしてください。まずは簡単なウェブページを作ることから始めましょう。
   
   • ドメインとは「何」で「どこ」であるか
   • DNS
   • URL
   • HTTP
   • ネットワーク
   • ブラウザ
   • サーバ/ホスティング
   • JSON
   • データAPI
   • HTML
   • CSS
   • DOM
   • JavaScript
2. HTMLを学ぶ
3. CSSを学ぶ
4. JavaScriptを学ぶ
5. JSONとデータAPIを学ぶ
6. ユーザーインターフェイスデザインの基本を学ぶ
   
   • UIパターン
   • インタラクションデザイン
   • ユーザーエクスペリエンスデザイン
   • ユーザビリティなど
7. CLI /コマンドラインを学ぶ
8. ソフトウェアエンジニアリングの実践を学ぶ
   
   • アプリケーションデザイン/アーキテクチャ
   • テンプレート
   • Git
   • テスト
   • 監視
   • 自動化
   • コード品質
   • 開発手法
9. あなたにとって価値のあるツール集を作る
   
   • Webpack
   • React
   • Mobxなど
10. Node.jsを学ぶ

学習に関するアドバイス

抽象化された技術を学ぶ前に、実際の基礎技術を学んでください。

• jQueryを先に学んではいけません、DOMを学びましょう。
• SASSを先にを学んではいけません、CSSを学びましょう。
• JSXを先にを学んではいけません、HTMLを学びましょう。
• TypeScriptを先にを学んではいけません、JavaScriptを学びましょう。
• Handlebarsを先にを学んではいけません、JavaScript ES6テンプレートを学びましょう。
• Bootstrapを先にを学んではいけません、UIパターンを学びましょう。

学び始めの段階では、複雑さを排除することは避けるべきです。間違った手法で抽象化した結果、良い結果を生み出せたとしても、基本概念を理解していない開発者になります。

学習リソースとツールの紹介

そしてこの本の残りの部分では、フロントエンド開発の学習に使用できるリソースや、実践に使用できるツールを紹介します。この旅ではあなたは学習するだけでなく、ツールについて調査し実践することもあります。実践によって学ぶ、あるいは実践方法を学ぶ。どちらも有用ですが、両方を組み合わせて理解することを私は勧めます。ただ読むだけではなく、実際に手を動かしましょう。それが確かな道です！

学んで、試して、学んで、試して、、終わりなく繰り返すことで、物事が急速に変化していきます。これが、私が抽象概念ではなく基礎を学ぶことを重視する理由です。

有料学習コースについて

最近、多くの非公認で、高額なフロントエンドのコードスクール/ブートキャンプが登場しました。フロントエンドデベロッパーになるためのこれらの道は、伝統的なスタイルである、講師から学ぶコースです。（シラバス、テスト、クイズ、プロジェクト、チームプロジェクト、成績など）もしあなたが高額なトレーニングプログラムを受講しようとしているならば、これはWebだということを思い出して下さい！全ての学ぶべきものはWeb上にあり、少しもコストが掛かりません。

私は、インターネット接続とビデオチャットアカウント、燃えるような知識欲があれば、実質的に無料でなれる職業を他に知りません。

フロントエンド学習1歩目

今日は、以下の単発コースの1つ以上を試してみて下さい。

So, You Want to be a Front-End Engineer (だから、あなたはフロントエンジニアになりたい)

その他のリソース

• Getting started with the Web [読み物]
• Frontend Masters Learning Paths [視聴][$]
• freeCodeCamp [インタラクティブ]
• Become a Front-End Web Developer [視聴][$]
  (フロントエンドWebデベロッパーになる)
• Treehouse Techdegree [視聴][$]
• Front-End Web Developer Nanodegree  [視聴][$]
• Introduction to Web Development [視聴][$]
  (ウェブ開発入門 )