What Front-End Developer Skills Should You Focus on Learning for the Rest of 2019?

こんにちは、私はFrontend MastersのCEO、Marcです。
このたびdev.toコミュニティのスポンサーになれることを嬉しく思います！😀

JavaScript and Front-End Engineering

我々は、地球上で最も急激に変化し、進化する、そして最も活発なコミュニティのひとつに居ます。

JavaScriptはES6以降、毎年多くの進化をし続けています。
Node.jsが現れて以来、多くの企業がサーバでもJavaScriptを使い始めました。
フロントエンドWeb開発者は、ツールやビルドツール、フレームワークの進化と共に変化し、進化し続けています。
その最先端の一部はWeb AssemblyとReact Hooksで、我々がやがて何を作り出せるかを見るのが楽しみです。

さて、2019年の残り時間に集中して学習すべきスキルは何でしょうか。
以下では3カテゴリに分けて紹介します。

Begin Coding Now
これからコーディングを始める人。
Becoming a Professional Front-End Developer
フロントエンドエンジニアのプロフェッショナルになりたい。
Becoming a Well-Rounded Engineer
フルスタックエンジニアになりたい。

1. Begin Coding Now

手短に言うと、最初に正のフィードバックループを手に入れることが最も重要です。
何かを変更して、そうしたらすぐにその結果がわかる、ということです。

Get Started: Scratch, HTML/CSS/JS or Python

始めよう。Scratchでも、HTML/CSS/JSでも、Pythonでも。

私は、どの言語やツールからプログラミングを始めるかは問題ではないと考えています。
それがScratchでも、HTMLでも、CSSとJavaScriptでも、Pythonでも、あるいは何らかのフレームワークであっても。
大事なのは、正のフィードバックループを確立し、アイデアを構築し、プログラミングに興味を持つことです。

2. Becoming a Professional Front-End Developer

Mastering the Fundamentals of JavaScript

JavaScriptの基礎をマスターする。

Frontend Mastersは、JavaScriptの基礎とプログラミングパラダイムは、普遍的なものであると信じています。
スコープとクロージャの仕組み、プロトタイプシステム、および型システムは、あなたのキャリアにおいて何度も何度も学習することが必要になるでしょう。

Know Your Paradigm: Functional and Object Oriented Programming

自分のパラダイムを知ろう。関数型？オブジェクト指向？

JavaScriptはマルチパラダイム言語であるため、オブジェクト指向と関数型パラダイムの両方を学習することで、より高次のレベルに到達しやすくなります。
オブジェクト指向は大規模なアプリケーションを構築する一般的な手法です。
その次は関数型からmap、reduce、filter、純粋関数、コンポジションといった概念を取り込みましょう。

最後に、オブジェクト指向と関数型をどのように使い分けるかを身につける必要があります。

React or Vue?

プロフェッショナルなコードを素早く作成したい場合、最も早い方法はReactやVueといったフレームワークを使うことです。
大抵の仕事では、これらトップフレームワークの少なくともひとつを深く知っていることを要求されます。

多くの知識人は私がAngularに言及しなかったことに反応するかもしれません。
しかし、Angularは初めて扱うのに適したフレームワークだとは思いません。
なんでもかんでも入ってる、という思想を活かすのに十分な規模のプロジェクトは、最初のうちはやってきません。

Developer Tools

開発者ツールの使い方を習得し、コードをデバッグし、アプリケーションのパフォーマンスを向上させましょう。

TypeScript

開発者のエクスペリエンスを向上させるためにTypeScriptを導入する企業は年々増加しています。

CSS Grid and Flexbox

CSS GridとFlexboxは、あらゆるデバイスで動作するレスポンシブWebサイトをレイアウトするために不可欠です。

Webpack

Create React AppやParcelといったツールは導入を簡単にしてくれますが、より詳しくなるためにはWebpackを学んでください。
出力コードを最適化するためのカスタムビルドを作成しましょう。

3. Becoming More Well-Rounded

Design Skills

基本的なデザインスキルを手に入れることで、より望ましいオールラウンド開発者になることができます。

Node.js & Full-Stack Deployment.

Node.jsを学び、APIを構築する方法を学び、フルスタックエンジニアになりましょう。

アプリを自分でセットアップ・デプロイできるなら、さらに応用範囲が広がります。

現在はアプリのデプロイ先としてAWSが最も勢いのあるプラットフォームですが、Azureも人気を集めつつあります。

SVG

最も能力に秀でていて、そして最も活用されていないグラフィックフォーマットのひとつがSVGです。
モバイルデバイスから看板サイズまで自在に拡縮することができる、非常に優れた形式です。

Testing

壊れたコードを作っていないことを保証したいですか？
Jestのようなテストランナーでテストを行い、壊れたデプロイを防ぎましょう。

Git

コードを失った？
あなたがGitマスターであれば、コードを失うことは決してなく、マージ時に問題が発生したとしても復旧することができます。
Gitのエキスパートは、開発チームの全員から崇拝されるでしょう。

Computer Science

計算量の求め方を計算し、正しいアルゴリズムとデータ構造の使い方を知ることで、エンジニアリング思考力を育て、より効率的なソリューションの開発ができるようになります。

Accessibility

WebサイトとWebアプリケーションがあらゆる人に開かれていることを確認するために、アクセシビリティの理解は重要です。
またナビゲーションにキーボードだけを使用するようなパワーユーザも満足させます。

Newer Skills

高パフォーマンスなWebサイトを作るため、Gatsbyが市民権を得つつあります。

ブラウザで3DのCanvasとWebGLが広くサポートされたため、ブラウザ上でクリエイティブコーディングが可能になりました。

GraphQLはRESTのようにAPIを複数のエンドポイントに分けるのではなく、クライアント側で欲しいデータを正確に指定できるため、APIの柔軟性を高めることができます。

2019年残りの期間に開発者が学ぶべきだと、あなたが考えるスキルは何ですか？

コメント欄

「アマ開発者とプロ開発者の境目はテストだと考えているので、全ての技術スタックでテストを考えるべき」「同意しかない。しばしばテストは後回しにされるけど、TDDは実際最優先されるスキルになりつつある。」
「ここ最近で学習コースを一通り渡り歩いて、FEMは私の人生に必須のツールボックスになったよ。」「それは良かった！あなたのキャリアに幸ありますように！」「あとフロントエンドハンドブックも手放せない。」「ナイス！2020年版も既に作り始めてるよ！」
「現在TypeScriptコースを受講してる。満足したらテストコースやCSコースも受けたい、楽しみ。」
「基礎を全く持ってない人はLinkedInやUdemyのような初心者コースから始めたほうがいい？」「FEMはまさにあなたのためのコースも用意してるよ！ラーニングパスも参考にしてね。」
「Svelteコースがみつからなかった。今後追加される予定はありますか？」「作者のRich Harrisと何かするつもりだけど、まだ決まってないんだ。」
「Accssibility！」「追加した！」
「Flutter…まだモバイルだけだけど、WebバージョンのHummingbirdが近付いてる。Dartはよいぞ。」
「JAMStackとサーバレスにも言及が必要。」