【Bootcamp 0】 高収入エンジニアへの道｜フロントエンド編
時代遅れのプログラミング講座
海外でエンジニアとして働いていると、日本で受けることのできるほとんどのプログラミング学習コースは時代遅れで、そのスキルでエンジニアになったとしても、今後エンジニアとして高い給与を獲得できません。
インターネットには非常に多くのコースやチュートリアル、書籍があり、未経験の方でもプログラミングの知識を学ぶことができます。しかし、これからエンジニアとして高い収入を得たい方にとって何の技術を学べば良いか教えるようなガイドブックはありません。
実際に、既に世界では時代遅れになっている jQuery や PHP などのプログラミング言語や、HTML、CSS、JavaScript の基礎を教えるコースや教材が中心で、実際にアプリケーションを作る上で必要な技術をすべてカバーしていません。
このノートでは、今後エンジニアを目指す人にとって高い収入を得るためのスキルを Bootcamp 形式で学ぶガイドブックになります。
Bootcamp を受けるべき理由
このような世の中から必要とされていないプログラミング言語ばかりを学習しても、エンジニアとして収入を上げることはできません。実際に、このようなプログラミング学習コースを受けてなれる職種と、フロントエンドエンジニアと呼ばれる職種の平均年間給与を Indeed （リクルートが買収した求人情報専門の検索サイト）で比較した結果を出してみました。
比較する職種（Junior Web Designer vs Junior Front End Developer）
・Junior Web Designer：次のプログラミング講座を受けてなれる職種
→ HTML、CSS、JavaScript などのプログラミング言語学習コース
・Junior Front End Developer ：フロントエンドエンジニアと呼ばれる職種
まずは、Junior Web Designer の平均年間給与を Indeed で確認してみます。
Junior Web Designer
続いて、Junior Front End Developer の平均年間給与を確認してみます。
Junior Front End Developer の方が平均年間給与が 約 180 万円（= $16,053）も高いことが分かります。
このように、現在日本で受けるられる時代遅れのプログラミング講座を受けてもエンジニアとして高い給与を得ることはできません。（ちなみに Junior のつかない普通の Front End Developer の平均年間給与は約 1200 万円です。）
そこで、今回皆さんがフロントエンドエンジニアとしての一歩を踏み出すことで、「高収入エンジニアへの道」を歩んでいけるためのスキルを教えたいと思います。
学べるスキル
この Bootcamp では、最終的に React を使用してモダンなウェブサイトを作成します。また WebAPI を使用して画像を取得したり、Google Fonts や外部ライブラリを使用して、高い UI のウェブサイトを開発します。さらに、GitHub Pages を利用して、皆さんが作成したウェブサイトをインターネット上に公開できるようになります。
これらの技術を使えることで、皆さん自身でポートフォリオ作って、企業や他の開発者とウェブサイトを共有したりできるようにもなります。（もし、今これを読んでもよく理解できなかった人は安心して大丈夫です。この Bootcamp でステップを踏んで説明していきます。）
また、この Bootcamp は実際に Google、Facebook、Netflix などで利用されている技術を利用しますが、すべて無料です。さらに、この Bootcamp では新しい情報やフィードバックを受けて、常に最新の状態に更新していくつもりです。そのため、他のプログラミング学習講座やコースに何万円も払う必要はありません。
・React アプリの開発環境の構築ができる
・React を使ったモダンなウェブサイトが開発できる
・WebAPI を使ってデータを取得できるようになる
・GitHub Pages を使ってウェブサイトをインターネット上に公開できる
Bootcamp 概要
この Bootcamp では、皆さんが高収入エンジニアとしての第一歩を踏み出せることをゴールとしており、最終的に次のようなウェブサイトを作って、インターネット上に公開することを最終成果物としています。
Kace Gallery：ポートフォリオ共有ウェブサイト
こちらの URL からウェブサイトにアクセスもできます。
ホームページと、写真やプロジェクトを共有・検索できるギャラリーページで構成されているモダンなウェブサイトになります。ギャラリーページでは、WebAPI を利用して写真を取得して表示しており、写真をクリックすることで、対象のウェブページに飛べるようになっています。
この Bootcamp は、皆さんが高収入エンジニアとなるための第一歩を進むことができるように 8 つの章で構成されています。最終成果物である「Kace Gallery」というウェブサイトを作るために必要な知識とスキルを段階的に身につけて行きます。
目次
・Bootcamp 0 - はじめに → 今ここです
・Bootcamp 1 - なぜ React なのか？
・Bootcamp 2 - React Component の世界に触れる
・Bootcamp 3 - 初めての React アプリを作ろう
・Bootcamp 4 - React でウェブサイトを作る（前半）
・Bootcamp 5 - React でウェブサイトを作る（後半）
・Bootcamp 6 - ウェブサイトを公開しよう
・Bootcamp X - 最後に
Bootcamp 1
そもそもなぜ今回の Bootcamp で React を使用するのかを説明します。世界的に見た React の利用度、企業からのニーズ、どのくらいの収入が可能なのかを説明します。
Bootcamp 2
React Component の世界に触れることで、React アプリを作るために必要な基本的な知識を身につけます。Hands-On 形式で、実際に React Component を作りながら、コンポーネントの概念やライフサイクルについて理解を深めていきます。
Bootcamp 3
初めての React アプリを開発します。ここからはコーディングがメインになり、Bootcamp の中でも楽しい部分になります。この章の最後には、 React を使った開発環境構築ができるようになり、シンプルなアプリを作れるようになります。
Bootcamp 4
これまでに学んだ知識を利用して、この Bootcamp の最終成果物である「Kace Gallery」を作っていきます。React だけではなく、Bootstrap 4 に対応しているライブラリである Reactstrap を使って、 Bootstrap ライクにウェブサイトを開発します。
Bootcamp 5
Pixbay API を使用して、キーワードをもとに写真のデータを WebAPI で動的に取得できるようになります。また、画面遷移や検索機能なども実装します。この章が終わることには、自分で React を使用してウェブサイトを開発できるスキルが身につきます。
Bootcamp 6
5 章で開発したウェブサイトの UI を改善していきます。Google Fonts API を利用して文字のフォントを変えたり、他のライブラリを使用してアイコンを表示します。さらに、GitHub Pages を利用してインターネット上に作ったウェブサイトを公開する方法を説明します。
Bootcamp X
最後にこれまで学んだスキルの復習と、今後高収入エンジニアとして求められる・学ぶべきスキルについて触れます。次に皆さんが何をすべきかを知ることができます。
以上が、この Bootcamp の概要です。実際に React を使用してウェブサイトを開発することで、今後皆さんが高収入エンジニアとしての一歩を踏み出せるスキルを学ぶことができます。この Bootcamp では、今後世の中から求められないプログラミングの知識を教えたり、そのようなスキルの取得に皆さんの時間を費やすことありません。
対象者
この Bootcamp では、 React を使用してモダンなウェブサイトを自分で作れるようになり、インターネット上に公開できるようになることをゴールとしています。そのため、データベースやサーバーサイドについて学びたい方は購入しないでください。
「Progate で HTML、CSS、JavaScript などの基礎を終えたけど、次に何を学んだら良いか分からない」、「作ったウェブサイトをどうやって公開したら良いのか知りたい」、「実際に世の中から求められるスキルをつけたい」、と悩んでいるフロントエンドエンジニア入門向けのコースになります。
・これから数年間、世の中から需要のある技術を学びたい方
・エンジニアとして高収入を得れるようになりたい方
・HTML、 CSS、 JavaScript の基本的な知識がある方
・Progate 完了後、エンジニアとして次のステップに進みたい方
・色々なフレームワークやライブラリ、 WebAPI を使ってみたい方
・ウェブサイトをインターネット上に公開できるようになりたい方
＊この Bootcamp では Mac で行うことを推奨しています。（Windows 向けの環境セットアップが準備できていません。）
また、HTML、CSS、JavaScript について学んだことのない方は Progate で学習することをオススメします。
Bootcamp を始めるには
この Bootcamp の購入方法は 2 つあります。各章のノートを単体購入 or マガジンを購入になります。マガジンを購入して頂いた方がトータルでは安くなっているので、こちらの方をオススメします。（もちろん一部の章だけを読みたく、ノートを単体購入して頂くこともできます。）
【Bootcamp】高収入エンジニアへの道｜フロントエンド編
目次
・Bootcamp 0 - 時代遅れのプログラミング講座 → ここまで完了
・Bootcamp 1 - なぜ React なのか？
・Bootcamp 2 - React Component の世界に触れる
・Bootcamp 3 - 初めての React アプリを作ろう
・Bootcamp 4 - React でウェブサイトを作る（前半）
・Bootcamp 5 - React でウェブサイトを作る（後半）
・Bootcamp 6 - ウェブサイトを公開しよう
・Bootcamp X - 最後に
最後まで読んで頂きありがとうございます。この Bootcamp をもっと色々な方に知って頂きたいので、サポート、他のSNS でシェアやフォローをお願いします。（Bootcamp に関する質問は Twitter の DM でも受け付けます。）
よろしければサポートお願いします！もっと質の高い Bootcamp を提供していきたいと思います！