フロントエンドエンジニアになるためにはどんなスキルが必要なのか一覧で確認したいなぁ。。。
こんにちはJun(@JunNomad)です。
最近プログラマーを目指す方の中にも、いきなりフロントエンドエンジニアになりたいといった具体的なイメージを持っている方も増えてきました。
一方で、フロントエンドエンジニアに必要なスキルについてはイマイチ理解出来ていなかったりする人も多いのが事実です。
そこで本記事では、フロントエンドエンジニアに必要な知識の概要をカテゴリ毎にご紹介していきたいと思います。
最初は利用するスキルの数が多くて驚くかも知れませんが、徐々にスキルを取得して憧れのフロントエンドエンジニアへの道を開いてみてください。
- フロントエンドエンジニアの利用するスキル一覧
- フロントエンドエンジニアの必要知識1: インターネットの仕組み
- フロントエンドエンジニアの必要知識2: HTML
- フロントエンドエンジニアの必要知識3: CSS
- フロントエンドエンジニアの必要知識4: JavaScript
- フロントエンドエンジニアの必要知識5: バージョンコントロールシステム
- フロントエンドエンジニアの必要知識6: Webセキュリティ
- フロントエンドエンジニアの必要知識7: パッケージマネージャー
- フロントエンドエンジニアの必要知識8: CSSアーキテクチャー
- フロントエンドエンジニアの必要知識9: CSSプリプロセッサ
- フロントエンドエンジニアの必要知識10: ビルドツール
- フロントエンドエンジニアの必要知識11: JavaScriptフレームワーク
- フロントエンドエンジニアの必要知識12: Modern CSS
- フロントエンドエンジニアの必要知識13: Webコンポーネント
- フロントエンドエンジニアの必要知識14: CSSフレームワーク
- フロントエンドエンジニアの必要知識15: テストツール
- フロントエンドエンジニアの必要知識16: 型定義チェッカー
- フロントエンドエンジニアの必要知識17: PWA
- フロントエンドエンジニアの必要知識18: SSR
- フロントエンドエンジニアの必要知識19: GraphQL
- フロントエンドエンジニアの必要知識20: 静的サイトジェネレーター
- フロントエンドエンジニアの必要知識21: モバイルアプリケーション
- フロントエンドエンジニアの必要知識22: デスクトップアプリケーション
- フロントエンドエンジニアの必要知識23: Webアセンブリ
- フロントエンドエンジニアの知識を効率良く身に付けるには
- さいごに：フロントエンドエンジニアの知識は必要なものからしっかりと身につけよう！
フロントエンドエンジニアの利用するスキル一覧
フロントエンドエンジニアの利用するスキルをまずは一覧で確認してもらいたいと思います。
既にスキルを身につけている分野もあるかと思いますので、ご自身の知らない領域や興味のある分野から確認してみてください。
- インターネットの仕組み
- HTML
- CSS
- JavaScript
- バージョンコントロールシステム
- Webセキュリティ
- パッケージマネージャー
- CSSアーキテクチャー
- CSSプリプロセッサ
- ビルドツール
- JavaScriptフレームワーク
- Modern CSS
- Webコンポーネント
- CSSフレームワーク
- テストツール
- 型定義言語
- PWA
- SSR
- GraphQL
- 静的サイトジェネレーター
- モバイルアプリケーション
- デスクトップアプリケーション
- Webアセンブリ
基本的には紹介する順番に知識を付けていけば良いかと思います。
もちろん自分にとって不要なスキルもあるかと思いますので、全てのスキルを身に付ける必要はありません。
フロントエンドエンジニアの必要知識1: インターネットの仕組み
フロントエンドエンジニアとして働くためには、インターネットの仕組みについて基本的な情報を知っていることは必須です。
DNSホスティングとは
まず前提知識として、DNSとは何なのか、どうやって動くのかを理解することが大切です。
さらにドメインネームとは何かを理解し、ホスティングで何が出来るのかを学習しましょう。
HTTPとは
インターネットを語る上で欠かせないHTTPとは何かを理解する必要があります。
インターネットはどのようにして動いているのか、インターネットを閲覧するためのブラウザの役割と働きについても合わせて学習しておきましょう。
フロントエンドエンジニアの必要知識2: HTML
インターネットの基本を理解出来ましたら、実際にフロントエンド開発の基本中の基本であるHTMLについて理解していく必要があります。
HTMLの基礎
まずは基本となるHTMLの記述方法はもちろん、「フォーム」や「バリデーション」といったHTMLの機能の使い方、そららを正しい使用法で使いこなすためのベストプラクティスに関しても合わせて学習しておきたいところです。
HTMLの応用
HTMLの応用では、「アクセシビリティ」や「SEO」の知識についても学習しておくと良いかと思います。
また「セマンティックHTML」と呼ばれる、HTMLを意味に基づいてマークアップするモダンな記述方法についても知識として吸収しておくと尚良いですね。
フロントエンドエンジニアの必要知識3: CSS
HTMLだけでは、みなさんが利用しているようなWebサイトを作成することは出来ません。
フロントエンドエンジニアであれば、CSSによるデザイン知識が必須となります。
CSSの基本
CSSの基本的な記述方法はもちろん、最近のWebシステムではスマートフォン表示を意識したレスポンシブ対応が必須となっています。
メディアクエリと呼ばれる「メディアのタイプ」や「メディアの特製」までを意識してデザインを組み込むことが必須となりました。
※この辺りはフレームワークに組み込まれていることも少なくないため、フルスクラッチでコードを記述しない限り、ある程度サポートいることも少なくありません。
レイアウト構成の知識
レイアウト構成の手法には様々あり、「Float」「Box Model」「CSS Grid」「Flex Box」などを活用出来ます。
どの手法でWebシステムをデザイン通りに仕上げるのか、吟味出来るスキルも必要となってきます。
フロントエンドエンジニアの必要知識4: JavaScript
最近のWebシステムでは、動的サイトと呼ばれるアクセスしたユーザーの情報を元に表示内容が切り替わるサイトが一般的です。
動的システムを実現するためには、JavaScriptの知識は必須になりますし、みなさんがイメージしやすい処理としては、ボタンを押下した際の処理などもJavaScriptにより実現されています。
JavaScriptの基本
JavaScriptも当然ですが基本的な文法と構成方法については知っておくことが大切です。
さらに、JavaScriptではES6などと呼ばれるバージョンが比較的頻繁に更新されており、記述方法も異なることが多いので、常に最新の情報に知識をアップデートしておくことが大切です。
Fetch API/Ajax
Fetch APIは、ページの外部からリソースを取得するためのインターフェースでWebブラウザの標準APIです。
Ajaxは非同期でサーバーと通信を行う手法で、Google Mapで利用されていることで有名です。
処理概念
処理概念についても、「ホイスティング」「イベント」「スコープ」「プロトタイプ」「Shadow DOM」「strictモード」などの知識を抑えておくことをおすすめします。
フロントエンドエンジニアの必要知識5: バージョンコントロールシステム
プログラム開発はチームで行うことが大半であり、バージョンコントロールシステムの知識も実務では欠かせません。
一人で開発する場合でも、コードを保管する方法としてはもちろん、自身のスキルを証明するため、コードを公開する際などにも利用されます。
ローカルバージョンコントロール
バージョンコントロールシステムには「Git」「SVN」など、いくつかのサービスが存在しますが、これから勉強を始めるのであれば現状「Git」一択で問題ないかと思います。
リモートホスティングサービス
リモートホスティングサービスも「GitHub」「GitLab」「Bitbucket」などいくつかのサービスが存在し、個人や小規模チームであれば無料で利用可能な機能で十分と言えます。
中でも、「GitHub」は最も有名なサービスであり利用者も多いため、特段の理由がない限りはまず「GitHub」から学習を始めるのが良いかと思います。
フロントエンドエンジニアの必要知識6: Webセキュリティ
Webセキュリティに関しても最低限の知識を有していないと、システムに不安要素を残すことに繋がりかねません。
下記の4つについては、深い知識まで有していなくとも、基本的な考え方については理解しておきましょう。
HTTPS
HTTPによる通信を安全に行うためのプロトコル及びURIスキームです。
HTTPとHTTPSの違いは、HTTPが通信内容が暗号化されておらず、HTTPSが通信内容が暗号化されている違いがあります。
オリジン間リソース共有(CORS)
オリジン間リソース共有の「オリジン」は、ドメインにプロトコルとポート番号が含まれていると考えてください。
Webアプリケーションに対して、別の「オリジン」サーバーへのアクセスをHTTPリクエストによって許可出来る仕組みのことを指します。
コンテンツセキュリティポリシー
コンテンツセキュリティポリシーは、クロスサイトスクリプティングやデータインジェクションといった攻撃に対して有効なセキュリティレイヤーです。
対応ブラウザの挙動をWebシステム運営者が制御することにより、攻撃対象範囲を狭めることが可能となります。
OWASP セキュリティリスク
Open Web Application Security Project(OWASP)では、セキュリティリスクに対する重大なレポートを発表しています。
- インジェクション
- 認証の不備
- 機微な情報の露出
- XML外部エンティティ参照(XXE)
- アクセス制御の不備
- 不適切なセキュリティ設定
- クロスサイトスクリプティング
- 安全でないデシリアライゼーション
- 既知の脆弱性のあるコンポーネントの使用
- 不十分なロギングとモニタリング
フロントエンドエンジニアの必要知識7: パッケージマネージャー
パッケージマネージャーは、フレームワークなどのインストール作業を高速かつ正確に行うためのパッケージ管理ツールです。
主流なパッケージマネージャーとして「npm」と「yarn」が挙げられます。
npm
npmは「Node Package Manager」の略称で2010年頃より利用されている比較的歴史のあるパッケージマネージャーです。
フレームワークやライブラリのパッケージインストールが主な用途として利用されます。
yarn
yarnは2016年に登場したパッケージマネージャーです。
npmとは互換性があり、インストール速度やセキュリティが向上しているとされています。
npmとほとんど同じように利用出来る上に、性能も高いことから、今後利用されていくのは「yarn」になるだろうとも言われています。
フロントエンドエンジニアの必要知識8: CSSアーキテクチャー
CSSアーキテクチャでは、様々な設計手法についての知識を学んでおくことで、システムへの理解と開発効率の向上に繋がります。
BEM
BEMはBlock Element Modifierの略語で、Webサイトコンポーネント化の設計手法です。
BEMを利用することで、長期間メンテナンスしやすい設計が可能となることやチームのスケーラビリティが上がること、コードの再利用性が向上するなどのメリットがあります。
OOCSS
OOCSSはオブジェクト指向CSSのことを指し、BEMと同じくCSS設計手法の1つです。
特徴として、「コンテナとコンテンツを切り分ける」「構造と見た目をわける」ことを意識した設計手法となっています。
SMACSS
SMACSSは「スマックス」と呼ばれており、体系立てて構造化することにより制作とメンテナンスを容易にする手法となっています。
パターン化することによって、コード量が少なくなり、メンテナンス性が上がるメリットがあります。
フロントエンドエンジニアの必要知識9: CSSプリプロセッサ
CSSプリプロセッサを活用することで、通常のCSSにはない変数やネスト構造での実装が可能となります。
Sass
Sassは「Syntactically Awesome StyleSheet」の略語です。
スタイルシートを分割することが可能で、条件処理や関数を利用することも可能です。
PostCSS
PostCSSは、Node.jsにより作成されたCSSツールを作るためのフレームワークです。
PostCSSには、色々なプラグインが提供されており、カスタマイズ性も高いのが特徴となっています。
Less
LessはLeanerCSSの略称です。
完結にCSSを記述することが可能となり、様々な変数やネスト構造・関数なども利用出来るCSSプリプロセッサの先駆けです。
クライアント・サーバーサイドの両方で動作させることが可能となっています。
フロントエンドエンジニアの必要知識10: ビルドツール
フロントエンドのビルドツールとしては「タスクランナー」「モジュールバンドラー」「構文チェッカー」「フォーマッター」などの各種ツールが提供されています。
タスクランナー
タスクランナーは開発業務の中で必要な単純作業を自動化することが出来るツールです。
代表的なツールには「npm scripts」「Gulp」「Grunt」などが挙げられます。
モジュールバンドラー
モジュールバンドラーは、複数のモジュールの依存関係を解消してまとめてくれるツールです。
代表的なツールには「Webpack」「Rollup」「Porcel」などが挙げられます。
構文チェックとフォーマッター
静的コードの検証ツールで構文チェックとフォーマッターによるコード整形もフロントエンドの便利ツールとしては欠かせません。
フォーマッターでは「Prettier」、構文チェックツールでは「ESLint」「StandardJS」などが挙げられます。
フロントエンドエンジニアの必要知識11: JavaScriptフレームワーク
従来JavaScriptのライブラリと言えば、jQueryの利用が一般的でしたが、モダンなWeb開発では加えて、JavaScriptフレームワークを利用した開発も増えています。
React.js
近年国内外で一番注目を集めているフレームワークと言っても過言ではないのが「React.js」です。
React.jsの状態管理ツールとして「Redux」または「MobX」と併用する方法が一般的です。
Angular
Angularは一時期に比べると勢いが落ちてきた感じはありますが、JavaScriptフレームワークの中でも高い需要を獲得しているフレームワークです。
イベント処理や非同期処理用ライブラリの「RxJS」、状態管理ツールの「NgRX」などと併用して開発を進めます。
Vue.js
Vue.jsは日本語の公式ドキュメントが充実していることもあり、国内でも人気のJavaScriptフレームワークです。
状態管理ツールとして「VueX」が提供されています。
フロントエンドエンジニアの必要知識12: Modern CSS
最近のJavaScriptフレームワーク、特にReactで利用され始めているJavaScriptでスタイルを記述する「CSS in JS」についてご紹介していきます。
Styled Component
Styled Componentは、現在の「CSS in JS」において一番人気のライブラリと言って良いでしょう。
分かりやすいAPIが採用されており、「CSS in JS」を牽引しているライブラリと言えます。
Styled JSX
こちらも主にReactを使用されたプロジェクトを対象としたスコープ付きのCSSライブラリです。
CSSの機能は全てサポートされているにも関わらず、軽量であるため利用しやすいことから人気となっています。
Emotion
Emotionも「CSS inJS」のライブラリの1つで、Styled Componentほど一般的にはなっていませんが人気のあるライブラリです。
比較的後発のライブラリであることから、多機能さを売りとしており、Reactのみならず様々なフレームワーク環境で導入可能なライブラリとなっています。
フロントエンドエンジニアの必要知識13: Webコンポーネント
Webコンポーネントは、再利用可能な独自のHTML要素を作成するためのWebAPIです。
ReactやVueなどで利用されているようなコンポーネントをライブラリを使用せずに実現出来る手法です。
HTML Templates
HTMLには「template」と「slot」と呼ばれるタグが用意されており、実際のWebページに表示されないテンプレートを記述することが可能です。
ここに記述したテンプレートを独自HTMLの基盤として再利用することが可能です。
Custom Elements
Custom Elementsは、HTMLに新しい要素を定義する手法です。
上述している独自のHTML要素は言い換えるとCustom Elementsと同義です。
完全オリジナルの要素として生成する方法と、提供されているHTML要素を拡張する2種類の方法が存在します。
Shadow DOM
Shadow DOMは実体としては複雑な構造になっている要素群を、1つの要素のように扱うことが出来る技術です。
Shadow DOMでは例として「video」タグがよく活用されます。
フロントエンドエンジニアの必要知識14: CSSフレームワーク
フロントエンドエンジニアが活用したいフレームワークは、JavaScriptだけでなくCSSにも存在します。
React-bootstrap
後述する大人気フレームワーク「Bootstrap」をReact専用のコンポーネントとして再構築したフレームワークです。
jQueryなどの不要な依存関係を解消し、React用にコンポーネント化されています。
Material UI
GoogleのMaterialデザインを元に作成されたUIコンポーネントです。
手軽にMaterialデザインを取り入れられることから人気のライブラリとなっています。
Bootstrap
言わずと知れた大人気UIフレームワークがBootstrapです。
デザインの知識がなくても簡単に綺麗なUIのWebサイトを作成出来ることから、大きなシェア率を獲得しました。
Tailwind CSS
Tailwind CSSでは、コンポーネントは用意されておらず、豊富なユーティリティが提供されています。
提供されたユーティリティクラスを組み合わせることで、様々なデザインを実現することが可能となっています。
Chakra UI
Chakra UIはReact向けに作成されたUIコンポーネントです。
関連ツールとして、オープンソースのビジュアルエディタ「OpenChakra」も利用出来ます。
Materialize CSS
Googleが推奨するマテリアルデザインでWebサイトを構築するためのCSSフレームワークです。
Bulma
BulmaはCSSだけで構成されており、どんなJavaScriptフレームワークとも組み合わせられるのが特徴です。
フレキシブルデザインに対応したシンプルなCSSフレームワークです。
フロントエンドエンジニアの必要知識15: テストツール
フロントエンドのテストには、「Unitテスト」「UIテスト」「E2Eテスト」「Integrationテスト」などいくつかのカテゴリに分かれます。
Jest
Facebook社がOSSとして開発しているJavaScript用の「Unitテスト」用のツールです。
依存が少なく高機能で、すぐにでもユニットテストを実装出来るのが特徴です。
react-testing-library
「react-testing-library」はReactコンポーネントをテストするためのライブラリです。
React開発においては、上述した「Jest」とセットで利用されることが多いようです。
Cypress
E2Eテスト用のフレームワークとしては「Cypress」などが挙げられます。
ブラウザでのテスト作業を自動化するために利用されるフレームワークです。
従来「Selenium」がE2Eテストの筆頭でしたが、最近では「Cypress」の利用者も増えています。
Enzyme
EnzymeはReactのテストユニットのツールです。
Reactにおけるテストコードの記述を簡単に行える定番ツールです。
フロントエンドエンジニアの必要知識16: 型定義チェッカー
JavaScriptでは規模が大きくなると型定義の概念がないことから、実装・保守することが難しくなるといった弱点があります。
また型定義がないことにより、エディタの入力保管を十分に受けられないといった開発上の不都合も存在しました。
そんな従来のJavaScriptにあった型定義への不安要素を補うソフトウェアが各種登場してきています。
TypeScript
マイクロソフトが開発したOSS言語で「型定義可能なJavaScript」と言われています。
AltJSと言われるJavaScriptの代わりとなる言語の一種で、通常JavaScriptでは出来ない型付けやインターフェース・クラスが使えるなどの機能が保管され、最終的に自動的にJavaScriptに変換してくれる機能を保持した言語となっています。
Flow
FlowはJavaScript用の静的型チェッカーです。
Facebookが開発したオープンソースソフトウェアで、従来のJavaScriptでは実行するまで分からなかった型に関するエラーを、プログラム実行前にチェックすることが可能となります。
フロントエンドエンジニアの必要知識17: PWA
PWAは「Progressive Web Apps」の略称で、WebサイトやWebアプリをネイティブアプリのような形でアプリとしてインストールする技術です。
WebAPIs
PWAで抑えておきたいWebAPI技術としてまず「Storage」「Web Sockets」「Service Workers」が挙げられます。
Storageでは、特にオフラインストレージに関する知識は重要で、インターネット接続が不安定な環境でも、キャッシュやストレージテクニックを駆使することでユーザーの利便性向上を目指します。
Web Socketsは双方向通信を低コストで行う技術で、PWAの理解には欠かせません。
Service Workersもネットワークの状況に応じて、アプリが適切な処理を制御出来るように振る舞いを決めることが可能となるツールです。
さらに「Location」「Notifications」「Device Orientation」「Payments」「Credentials」についても、必要に応じて知識として身につけていく必要があります。
機能向上
またこれらのPWAに関する機能向上の考え方として「PRPL Pattern」「RAIL Model」「Performance Metrics」の知識を身につけることや、加えて「Lighthouse」「Dev Tools」の利用を検討するなどの必要があります。
フロントエンドエンジニアの必要知識18: SSR
SSRは「Server Side Renderingの略称で、従来JavaScriptで行っていた画面の書き換えなどの処理をサーバー側で実行し、ユーザーの待機時間を減らすことが可能となる技術です。
React.js
React.jsで利用されているSSRには「Next.js」「After.js」の2種類が存在します。
「Next.js」がデファクトスタンダードとなっている人気のフレームワークです。
After.jsに関しても、SSRに利用可能ですが、情報が少なく特段の理由がない限りは「Next.js」を選択するのが無難です。
Angular
Angularの場合には「Universal」と呼ばれるSSR用のライブラリが利用可能です。
Vue.js
Vue.jsの場合には「Nuxt.js」と呼ばれるSSR用のフレームワークが提供されています。
Nuxt.jsではSSR処理を行う「Universalモード」、単一Webページ構成の処理を実施する「SPAモード」、静的なWebページを生成する際の「Generateモード」が利用可能です。
フロントエンドエンジニアの必要知識19: GraphQL
GraphQLは、クライアントとサーバー間のやりとりを容易に記述するために、Facebookが開発したオープンソースのクエリ言語です。
Apollo
GraphQLを利用する際にフロントエンド・バックサイドのライブラリとして利用出来るのが「Apollo」です。
具体的にはフロントエンドが「Apollo Client」サーバーサイドが「Apollo Server」を利用します。
Relay
RelayはGraphQLサーバーをバックエンドとして作成された、React用のデータアクセスフレームワークです。
GraphQLの提供元であるFacebookが開発を行っており、デファクトスタンダードの拡張仕様となっています。
フロントエンドエンジニアの必要知識20: 静的サイトジェネレーター
その他の通り、静的サイト(HTMLファイル)を生成するためのツールです。
レスポンスが早く、SPAで良く使われています。
GatsbyJS
現在静的サイトジェネレーターとして一番人気は「GatsbyJS」でしょう。
2015年にリリースされて以降、AirbnbやNike、PayPalなどの企業で採用されていることで知られています。
React.jsをベースとしているため、利用者の多くもReactユーザーが中心です。
Next.js
SSRの項目で紹介したように、React用フレームワークである「Next.js」には静的サイトジェネレーターとしての役割を担うことも可能です。
GatsbyJSが登場する以前は静的サイトジェネレーターの中心的な存在でした。
Nuxt.js
Nuxt.jsはVue.js用フレームワークで、上述したNext.js同様、静的ジェネレーターとしての役割を担うことも可能です。
こちらもGatsbyJS登場以前の中心的フレームワークでした。
Vuepress
Vue.jsの開発者が作成した静的サイトジェネレーターです。
Markdown方式でのページ作成が可能で、Vueとの親和性が高いことが特徴です。
Jekyll
JekyllはRubyで作成された静的サイトジェネレーターです。
Vuepressなどと同じようにMarkdown方式でページ作成を行うことが可能です。
Hugo
HugoはGo言語で作成された静的サイトジェネレーターです。
データベースを使用せず、ファイルで全て管理されており、規定のディレクトリ構成にファイルを配置した状態でコマンドを実行すると、HTMLファイルが自動で生成される仕組みとなっています。
Gridsome
GridsomeはVue.jsで作成された静的サイトジェネレーターです。
GatsbyJSにインスパイアされて作られているようなので、GatsbyJSユーザーがVueでのプロジェクトで静的サイトジェネレーターを利用する際には使いやすいかも知れません。
フロントエンドエンジニアの必要知識21: モバイルアプリケーション
現在ではスマートフォンユーザーが増えており、パソコンを利用せずにスマホしか利用しないといった方も増えてきています。
フロントエンドとスマホ用アプリでは異なるプログラミング言語が利用されているため、従来であればほとんど作り直しに近いイメージでしたが、フロントエンドのコーディング手法でスマホアプリにも対応出来るようなフレームワークが増えてきました。
React Native
上述しているJavaScriptフレームワークである「React.js」をモバイルアプリでも利用出来るようにするライブラリです。
iOS・Android両方のアプリを同一のコードで動かすことが可能となっています。
NativeScript
NativeScriptもJavaScriptとCSSによるコーディングでiOS・Androidアプリを開発出来るようにするライブラリです。
AngularやVueと組み合わせて利用することが可能です。
Flutter
Googleが2018年末にリリースしたモバイルアプリ開発用のライブラリです。
「Dart」という言語が利用されるため、JavaScriptの記述法をそのまま利用することは出来ませんが、TypeScriptに似た構造となっており、JavaScript利用者であれば比較的すぐに馴染めるそうです。
Ionic
IonicはAngularをベースに開発されたJavaScriptフレームワークです。
Web/iOS/Androidを1つのコードでまかなえるハイブリッド開発が可能なツールです。
フロントエンドエンジニアの必要知識22: デスクトップアプリケーション
デスクトップアプリケーションは、名前の通り「パソコン」での利用を目的として開発されるアプリケーションです。
Electron
GitHubが開発したオープンソースのフレームワークで、HTML・CSS・JavaScriptなどの技術を使ってデスクトップアプリケーションを作成することが可能です。
ElectronにはNode.jsとChromiumが活用されており、Visual Studio CodeなどのツールはElectronを使用して開発されたそうです。
Carlo
CarloもWeb技術でデスクトップアプリケーションを開発するためのツールですが、Electronとの大きな違いは「手軽さ」にあります。
Electronは、使用する容量も大きく、かなり本格的に開発する方向けといった印象を受けます。
一方でCarloは、容量が非常に小さく、設定もほとんど必要ないことから手軽にデスクトップアプリケーションを開発したいといった方に適したツールとなっています。
Proton Native
Proton NativeはReact構文を利用してデスクトップアプリケーションを開発出来るツールです。
React Nativeの存在が大きいため、まだまだ利用実績は多くないようですが、興味のある方は試してみるのも良いかも知れません。
フロントエンドエンジニアの必要知識23: Webアセンブリ
Webアセンブリは、ブラウザから「C」「C++」といった機械語に近い言語を利用出来るようにする技術です。
まだまだ実用的と呼ぶには少し早いといった印象を受けますが、将来的にはDOM操作やWeb API操作などもJavaScriptを使用せずに実現出来る予定だそうです。
フロントエンドエンジニアの知識を効率良く身に付けるには
ここまでフロントエンドエンジニアに必要な知識、知っておきたい知識についてご紹介してきましたが、膨大な量であることはご理解頂けたかと思います。
今回紹介した内容は、概要のみですので、それぞれの使い方や将来な概念について理解していく必要があります。
これだけ膨大な量の情報を独学で覚えようと思うと効率が良くないことは間違いないため、効果的に下記のサービスを利用していくことをおすすめします。
プログラミングスクール
プログラミングスクールは賛否両論ありますが、基本的なスキルを身につけたり、専門的な部分に絞って学習するには効果的と言えます。
筋トレで最初の基本になる部分だけ、パーソナルトレーニングで教わった方が良い理論と同じですね。
TechAcademy
TechAcademy(テックアカデミー）では、細かくコース分けされているため、自分が学びたい分野の知識だけを格安で学習することが可能です。
Code Village
Code VillageはJavaScript特化型のスクールであるため、フロントエンドエンジニアとしてのスキルを身につけるには効率的なスクールです。
DMM WEBCAMP
DMM WebCamp(ウェブキャンプ)は、大手DMMが運営するプログラミングスクールで、フロントエンドエンジニアに特化したわけではありませんが、実践的なカリキュラムが組まれており、評判も高いことから、これからプログラミングを学習しようと考えている人におすすめのスクールです。
Web学習コンテンツ
プログラミングスクールに通う時間がないという方は、Web学習コンテンツの利用もおすすめです。
Udemy
はもちろん、最近ではyoutubeにも質の高いプログラミング講座が数多く公開されています。
実務経験を積む
プログラミング学習は基本として大事ですが、実践的なスキルを身につけるのであれば企業で働いてしまうことが一番効率的です。
中でも、フリーランスエージェントで働けば、自分が本当に身につけたいスキルや案件を選択出来るため、効率的に経験を積むことが可能となります。
さいごに：フロントエンドエンジニアの知識は必要なものからしっかりと身につけよう！
本記事では、フロントエンドエンジニアに必要な知識、知っておきたい知識についてご紹介してきました。
今回はGitHubの開発者ロードマップを元に記事を作成させてもらいました。
記事内容を確認して頂けると分かりますが、フロントエンドエンジニアだけでも膨大な知識が利用されていることが分かります。
全てを高いレベル理解するのは難しいので、自分に必要なスキルから順番に身につけ、高レベルなフロントエンドエンジニアとなれるように日々学習していきましょう。
