2019年の残り期間で学習するべきスキル

Gatsby？ああ、MovableTypeの翻案ね(間違い)

以下は[Marc Grabanski](https://dev.to/1marc)による記事、[What Front-End Developer Skills Should You Focus on Learning for the Rest of 2019?](https://dev.to/frontendmasters/what-front-end-developer-skills-should-you-focus-on-learning-for-the-rest-of-2019-10c5)の日本語訳です。


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

こんにちは、私は[Frontend Masters](https://frontendmasters.com/)のCEO、Marcです。
このたびdev.toコミュニティの[スポンサーになれること](https://dev.to/devteam/introducing-our-may-2019-sponsors-3dcp)を嬉しく思います！😀

## JavaScript and Front-End Engineering

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

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

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

1. Begin Coding Now
これからコーディングを始める人。

2. Becoming a Professional Front-End Developer
フロントエンドエンジニアのプロフェッショナルになりたい。

3. Becoming a Well-Rounded Engineer
フルスタックエンジニアになりたい。


## 1. Begin Coding Now

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


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

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

私は、どの言語やツールからプログラミングを始めるかは問題ではないと考えています。
それが[Scratch](https://www.youtube.com/watch?v=5azaK2cBKGw)でも、[HTML](https://frontendmasters.com/welcome/web-development/)でも、[CSSとJavaScript](https://frontendmasters.com/welcome/web-development/)でも、[Python](https://frontendmasters.com/courses/python/)でも、あるいは何らかのフレームワークであっても。
大事なのは、正のフィードバックループを確立し、アイデアを構築し、プログラミングに興味を持つことです。


## 2. Becoming a Professional Front-End Developer

### Mastering the Fundamentals of JavaScript

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

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


### Know Your Paradigm: Functional and Object Oriented Programming

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

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

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


### React or Vue?

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

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


### Developer Tools

[開発者ツール](https://frontendmasters.com/courses/chrome-dev-tools-v2/)の使い方を習得し、コードをデバッグし、アプリケーションのパフォーマンスを向上させましょう。


### TypeScript

開発者のエクスペリエンスを向上させるために[TypeScript](https://frontendmasters.com/courses/typescript-v2/)を導入する企業は年々増加しています。


### CSS Grid and Flexbox

[CSS GridとFlexbox](https://frontendmasters.com/courses/css-grids-flexbox/)は、あらゆるデバイスで動作するレスポンシブWebサイトをレイアウトするために不可欠です。


### Webpack

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


## 3. Becoming More Well-Rounded

### Design Skills

基本的な[デザインスキル](https://frontendmasters.com/courses/design-for-developers/)を手に入れることで、より望ましいオールラウンド開発者になることができます。

### Node.js & Full-Stack Deployment.

[Node.js](https://frontendmasters.com/courses/servers-node-js/)を学び、[APIを構築する](https://frontendmasters.com/courses/api-design-nodejs-v3/)方法を学び、[フルスタックエンジニア](https://frontendmasters.com/learn/fullstack/)になりましょう。

アプリを自分で[セットアップ・デプロイ](https://frontendmasters.com/learn/fullstack/)できるなら、さらに応用範囲が広がります。

現在はアプリのデプロイ先として[AWS](https://frontendmasters.com/courses/aws-frontend-react/)が最も勢いのあるプラットフォームですが、Azureも人気を集めつつあります。


### SVG

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


### Testing

壊れたコードを作っていないことを保証したいですか？
Jestのようなテストランナーで[テストを行い](https://frontendmasters.com/courses/testing-practices-principles/)、壊れたデプロイを防ぎましょう。


### Git

コードを失った？
あなたが[Gitマスター](https://frontendmasters.com/courses/git-in-depth/)であれば、コードを失うことは決してなく、マージ時に問題が発生したとしても復旧することができます。
Gitのエキスパートは、開発チームの全員から崇拝されるでしょう。


### Computer Science

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


### Accessibility

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


## Newer Skills

高パフォーマンスなWebサイトを作るため、[Gatsby](https://frontendmasters.com/courses/gatsby/)が市民権を得つつあります。

ブラウザで3DのCanvasとWebGLが広くサポートされたため、ブラウザ上で[クリエイティブコーディング](https://frontendmasters.com/courses/canvas-webgl/)が可能になりました。

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


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


# コメント欄

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


# 感想

[FrontendMasters](https://frontendmasters.com/)はフロントエンド中心の学習コースを提供しているサイトです。
費用は月`$39`、年間`$390`と決して安くはありませんが、[評判は](https://www.quora.com/Has-anyone-ever-used-Frontend-Masters-to-learn-coding-I-could-really-use-some-feedback-Thanks)[悪くない](https://www.reddit.com/r/webdev/comments/9jhvm2/is_front_end_masters_worth_it/)ようで、特に中上級者向けだそうです。
英語のヒアリングが苦にならない人は試してみてはどうでしょうか。

それ以外の活動としては、毎年[Front-End Developer Handbook](https://frontendmasters.com/books/front-end-handbook/)を発表しています。
フロントエンドについてはかなり最強に近いところではないかと思います。

そんなところが勧めるのですから、半分はコースの宣伝だったとしても、学習方針としては適切な方向性を向いているのではないでしょうか。
コースを受講するかどうかは別として、出てきた技術を学習することは決して悪くないと思います。