はじめに
最近、マナブさんの12万円のロードマップが話題(KENTAさんのYouTube)となり、更に120円のロードマップ(KBOYさんのYouTube)も発表されました。その費用対効果について賛否両論あるようですが、私のような初学者にとっては、ロードマップは大変役に立ちます。Webには情報がありすぎるため、独学で勉強を始めたばかりの者が、Web開発技術の全体像をおぼろげに知るにはかなりの労力を要すると思います。
私もマナブさんの無料のロードマップにて、HTMLとCSSの学習を進めてきましたが、ここからどうすれば良いか悩んでいたところ、昨夜YouTube（無料）でWeb開発の実践ガイドを発見しました。初学書にとっては大変参考になる内容と思ったので、動画作成者のBrad Traversyさん（@traversymedia）の許可を得た上で、一部を和訳し、紹介させていただきます。
注意事項
- 下記はYouTubeで使われているスライドの一部抜粋となります。動画ではなぜ**Ruby (on Rails)**がないのか等、色々な選択肢についての説明と、それらのさらなる学習コンテンツが紹介されいるので、ぜひご覧ください。
- 初のQiita投稿となります。間違い等があったら、教えてくださるとありがたいです。
- 2021年版はこちらになります。
動画の紹介（抜粋）
このガイドについて
2019年のフロントエンド、バックエンド、及びフルスタック開発者になるための主要なすべての技術へのステップ・バイ・ステップガイドです。
- Web開発者になるためにこちらのすべての技術を学習する必要はありません。
- このガイドはあなたがあなたの道を見つけるのを助けるため、分類された選択肢を提示します。
- 私は経験と参考資料に基づいて助言や提案をおこないます。
- 最初に必要とされる一般的な技術を見ていき、その後2019年の最新トレンドと予測を見ていきます。
基本的なソフトウェア及びツール
Web開発のための基本的なツールです。
※【pitang1965】:太字としたものが動画作成者のおすすめです。動画では下線。
- テキストエディタ又はIDE：VSCode, Sublime Text, Atom
- Webブラウザ：Chrome, Firefox
- デザイン及びモックアップ（任意）：XD, Photoshop, Sketch, Figma
- サードパーティ製ターミナル（任意）：Git Bash, WSL, iTerm2, Hyper
HTML及びCSS
常に最初に学ぶべきこと。
学ぶべきこと
- HTML5セマンティック要素
- CSSの基本（配置方法、ボックスモデル、等）
- Flexbox及びCSSグリッド
- CSS変数（カスタムプロパティ）
- ブラウザ開発者ツール
レスポンシブレイアウト
- Viewportの指定
- 可変レイアウト(Fluid widths)
- メディアクエリ
- pxよりrem
- モバイルファースト、列を並べる
基本的なデプロイメント
静的なWebサイトのデプロイを学ぶ。
- ドメイン名の登録：Namecheap, Google Domains
- 共有ホスティング又はVPSの管理：Inmotion, Hostgator, Bluehost
- FTP、SFTPファイルアップロード：Filezilla, Cyberduck
- 静的サイトのホスティング（Gitを知る必要あり）：Netlify, Github pages
Sassプリプロセッサ
必須ではないが推奨される。基本を学ぶのは十分簡単。
- 構造化CSS
- CSS変数
- ネストされたCSS
- mixin及びfunction
- 継承(inheritance)
バニラJavaScript
ライブラリやフレームワークなしでJavaScriptの学習を開始する。
※【pitang1965】:バニラJavaScriptとは普通（素の）のJavaScriptという意味と思われる。
- データ型、関数、条件分岐、ループ、演算子
- DOM操作及びイベント
- JSON
- Fetch API
- ES6以降（アロー関数、Promise、async / await、分割代入）
基本的なフロントエンド開発
- 静的なWebサイトの構築（小規模ビジネス、情報）
- UIレイアウトの構築（設計し、html/cssを作成）
- 動的機能の追加（モーダル、スライドショー等）
- Webサイトのデプロイと維持
初歩的な仕事を見つけることは可能ですが、もっと知る必要がある。
フリーランスは可能性あり...
次に学ぶこと
次に何をするかは、あなたがやりたいことによる。いくつかの選択肢がある。
- HTML/CSSフレームワーク
- Git及びツール
- フロンエンドJSフレームワーク
- サーバーサイド言語及びデータベース
HTML/CSSフレームワーク（一つ選択）
HTML/CSSフレームワークは少し意味がなくなりつつあるが、それでもまだ１つ学ぶことを勧める。
これらはプロトタイピングのためにあなたの人生を楽にし、素晴らしいものにすることができる。
- Bootstrap
- Masterialize
- Bulma
Git及びツール
Gitは全てのWeb開発者に絶対に必要。
ここはその他のツールの提案を示す。
- 基本的なコマンドライン（これらのツールを含む多くで使用される）
- Git（バージョン管理）
- NPM又はYarn（インストールパッケージ）
- Webpack又はParcel（モジュールバンドリング）
- Gulp又はGrunt（タスクランナー）
- エディターの拡張機能（ESLint、Prettier、Live Server等）
フロントエンド・フレームワーク（一つ選択）
JSフロントエンドフレームワークを学ぶことが必要になってきている。
- 業界で非常に人気がある
- よりインタラクティブかつ面白いUI
- コンポーネント及びモジュール式フロントエンドコード
- チームにとって良い
React - 業界で最も人気
Vue - 使いやすく本当に勢いがある
Angular - 少し勢いがない - 企業で使われている
状態管理
フレームワークを使った大規模アプリケーションでは、アプリレベルの状態を管理する方法を学ぶ必要があるかもしれない。
- Redux、Context API
- Applo (GraphQLクライアント）
- Vuex
- NgRx
本格的なフロントエンドWeb開発者
- 素晴らしいフロントエンドアプリケーションの構築
- スムーズで確実はフロントエンドのワークフロー
- チームで行動し、Gitに精通
- バックエンドAPIに接続してデータを操作
フロントエンドの仕事に就くことも、自分で仕事をすることもよくできるはず。
サーバーサイド言語（一つ選択）
フルスタック又はソフトウェアエンジニアになるには、サーバーサイドの言語/技術を習得する必要がある。
- Node.js
- Python
- PHP
- C#
- Go
学ぶ事
- 基本的な構文
- 構造及びワークフロー
- パッケージ管理
- HTTP/ルーティング
サーバーサイド・フレームワーク（一つ選択）
車輪の再発明をしないこと。
より良く、より速く構築するためのフレームワークを学ぶ。
データベース（一つ又は二つ選択）
ほとんどのアプリケーションはある種のデータベースを使用する。
様々な種類があり、いくつかの選択肢を示す。
- リレーショナルデータベース：MySQL、PostgreSQL、MS SQL
- NoSQL：MongoDB、Couchbase
- クラウド：Firebase、AWS、Azure DocumentDB
- 軽量：SQLite、NeDB、Redis
サーバーサイドレンダリングのページ（Server Rendered Pages）
React、Vue、Angularなどのフレームワークもサーバー上にレンダリングすることができ、実際には比較的簡単になる。
- Next.js（React）
- Nuxt.js（Vue）
- Agular Universal（Angular）
CMS（一つ選択）
コンテンツ管理システムは迅速な開発を可能にし、あなたのクライアントに彼らのコンテンツを更新する能力を与える。一つ習得するのは悪くないアイデアかもしれない。フリーランサーに最適。
- PHPベース：Wordpress、Drupal
- JSベース：Ghost、Keystone
- Pythonベース：Mezzazine
- .NET：Piranha、Orchard CMS
DevOps、デプロイメントなど
言語とフレームワークの学習と、環境構築、テスト及びデプロイメントは別物である。
- デプロイメント：Linux、SSH、Git、サーバーソフトウェア（Nginx、Apache）
- プラットフォーム：Digital Ocean、AWS、Heroku、Azure
- 仮想化：Docker、Vagrant
- テスト：Unit、Integration、Functional、System
フルスタックのすご腕
- フルスタック開発環境及びワークフローの設定
- バックエンドAPI及びマイクロサービスの構築
- データベースの操作
- フルスタックアプリの構築（フロントエンド・フレームワーク及びサーバー）
- クラウドへのデプロイ（SSH、Git、サーバー、等）
あなたは、すげーロックスターだ！
モバイル開発（一つ選択）
Web技術を使ってネイティブアプリを作成できるようにするフレームワークがいくつかある。
- React Native（Reactでネィティブアプリをビルド）
- NativeScript（Angular、TypeScript、JavaScript）
- Ionic（HTML/CSS/JSでのハイブリッドアプリ）
- Flutter（Dartを用いたアンドロイド及びiOS用のモバイルSDK）
- Xamarin（C#でのモバイルアプリ）
Electronによるデスクトップアプリ
Electronは、JavaScriptを使用して強力なクロスプラットフォーム・デスクトップアプリケーションを構築するために使用される。
- Chromium（クロミウム）及びNode.jsを使用
- Windows、Mac及びLinuxに対応
- クラッシュレポート、デバッグ、プロファイリング
GraphQL及びAppollo
GraphQLは、APIについて考えるための革新的な新しい方法である。標準のRESTよりもはるかに厳密ではないクエリ言語。
- 欲しいものだけを求める
- フロントエンドとバックエンドがよりスムーズに連携
- クエリを書くのはとても簡単でJSONに類似
- ApplloはGraphQLサーバーにリクエストを送信するクライアント
- Gatsbyスタティックサイトジェネレータと共に使用
TypeScript
TypeScriptは静的型付けを含む追加機能を備えたJSのスーパーセット（上位互換）。
- 変数、関数等の型
- クラス
- その他ES6類似の機能
- Angularで使われるが、React及びVueで使用可能
サーバーレスアーキテクチャ
独自のサーバーを作成および管理する必要がなくなる。
- 第三者サービスを利用して「サーバーレス機能」を実行する（FaaS）
- 例はAWS, Netlify及びFirebase
- Gatsby静的サイトで人気
- サーバーレスフレームワーク（サーバーレスアプリを構築するためのツールキット）
AI及び機械学習
- AI及び機会学習は、Web開発を含むプログラミング及び技術のほぼすべての分野で非常に大きく拡がっている。
- AIにはまだまだ長い道のりがあるものの、Web開発に置いてもっと目にすることになるだろう
- Pythonがよく使われるがTensorflow.jsやBrain.jsのようなJSライブラリもある
ブロックチェーン技術
より効率的でセキュアにするために、企業はデジタル取引にブロックチェーンを使用している。
- Solidity（コントラクトを実装するための言語）
- Mist（イーサリウムを保管したり、トランザクション及びコントラクトを送るために使用）
- Coinbase API（ブロックチェーン開発者が容易にアプリを構築しビットコンを統合できる）
PWA
プログレッシブウェブアプリは通常のWebアプリであるが、レイアウトと機能の面でネイティブアプリ体験をユーザーに提供する。
- あらゆるフォームファクタに適合（レスポンシブ）
- オフラインで利用できるService Worker
- アプリのようなインタラクション
- HTTPS
- 信頼性、高速、魅力的
WebAssembly
Webブラウザで実行可能なコードのためのアセンブリのようなバイナリ形式。C/C++及びRustのような高級言語から生成可能。
- JavaScirptより高速
- セキュア - ブラウザに同じ生成元及びセキュリティポリシーを適用する
- オープンかつデバッグ可能
最後に
これまでの約3ヶ月、マナブさんの無料ロードマップにて、HTMLとCSSを学習してきましたが、今後は基本このロードマップに則りつつ、Webアプリケーションなど作成していこうかと思います。
Brad Traversyさん (@traversymedia）は色々と有益なYouTube動画を出されておりますので、ぜひチャンネル登録してみてはいかがでしょうか？
あと、無料と書きましたが、講演者（パトロン）も募集していて、特別なコンテンツが観れたりするようです。
参考情報
Brad TraversyさんのYouTubeに記載された技術に関する無料及び格安教材について調べた結果についてこちらに記載しました。