始めに
こんにちは、まんじです。
今回は「JavaScriptの実務レベル」を解説します。
とりあえず仕事でJavaScript使えるよねって状態についてです。
と言ってもJavaScript単体で仕事をすることなんてほぼないっていう現実はあるので、文法やTypeScriptやフレームワークなどの周辺環境を含めての解説になります。
*あとこの記事はウェブエンジニアの場合の話になります。ウェブ制作はちょっと違います。
結論から書いてしまうと、JavaScriptの実務レベルは普通にGit使ってチーム開発が普通にできるレベルというざっくりとした感じに落ち着くんですが、そこら辺をもう少し深掘りします。
JavaScriptの実務レベルの文法に関して
変数スコープが理解できてる
以下の変数定義のスコープや扱いが文字列型や配列やオブジェクトの型の場合にも理解できている必要があります。
最近の開発だとletとconstしか使わなくて、varはほとんど出てきません。
関数型の処理を普通に使える
関数型の処理というのは以下のメソッドなどです。
- forEach
- map
- filter
- sort
- some
- every
- reduce
コールバック関数を渡してそれを内部で処理するような配列操作です。
例えば、こういうやつです。
someArray.filter((elem) => elem !== undefined)
めちゃくちゃ頻出というか、普通に使えて読める必要があります。
配列とオブジェクトを扱うのに必須です。
これらの処理を普通に使うためには、後述するコールバック関数の理解が必要です。
コールバック関数が理解して使える
const onClickButton = (id) => () => {console.log(`operation ${id}`)}
onClick={onClickButton(id)}
上記のような関数を変数として扱うというか、関数を引数に渡すような文法です。
コールバック関数の理解にはアロー関数という関数の定義方法にも慣れる必要があります。
ちなみにfunction記法でもコールバック関数として関数を引数にすることはできます。
Promise(非同期処理)
以上のPromiseに関する文法はナチュラルにたくさん出てくるので、使える必要があります。
定番のaxiosやfetch APIでサーバーサイドと通信する時やAPIを使用する時、Node.jsでデータベースと接続する時などにPromiseは頻出です。
JavaScriptの周辺環境に関して
DOM系の操作
JavaScriptをそのまんま書くことは少ないものの、基本的なDOM操作はJavaScriptでそのまま書ける必要があります。
厳密には都度ググって理解していけるDOMの最低限の理解です。
- window.document.getElementById
- addEventListener
- innerHTML
- innerText
- などなど
jQuery
ほとんど使うことはないですが、ノリで読んで簡単な実装は調べながらできるくらいはできるのが好ましいところです。
（後述するフロントエンドフレームワークなどが使えれば、よほどニッチなJQuery以外はググりながら使っていけます）
ただ、ウェブアプリケーションの開発だとほぼ使うことはないです。
ウェブ制作やLP制作なんかではまだ使うのかもしれません。
Node.js
Node.jsはサーバーサイドで動かせるJavaScriptなんですけど、環境構築ができて普通に書いていけるのが好ましいです。
ブラウザ側のJavaScriptが書ければ書けます。
ECMAScriptやCommonJSのJavaScriptに関するエコシステムも少し知っているぐらいが好ましいです。
npm/yarnなどのパッケージ管理
- package.json
- node_modules
npmやyarnコマンドを使ってライブラリ管理系をある程度使いこなせる必要があります。
トランスパイルとバンドラーに関する知識
- Babel
- Webpack
- tsc（ts ⇒ js）
ここらへんのトランスパイラーやバンドラーは軽く知っておく必要があります。
チーム開発の場合は元々設定されていることがほとんどですが、場合によっては自分で設定が必要です。
メジャーなフロントエンドフレームワーク
バックエンドだけをNode.jsで実務で担当する場合は別ですが、フロントエンドをやる場合はメジャーなフロントエンドフレームワークを最低でも1つは使える必要がある確率が高いです。
特に1番人気というか使われてるのがReactなので、無難にReactを使えるのが良さげかもしれません。
Reactの実務レベルはぶっちゃけどれくらいなのか
*使うプロジェクトで何を使うか次第ではありますが…
Linter
JavaScriptの書き方を統一したり自動で修正してくれるツールです。
ESLintが1番有名な気がしますが、ESLintを0から設定して設定項目をいじりつつ、開発に使えるのが好ましいです。
TypeScript
JavaScriptというよりもほとんど最近はJavaScriptに型をつけたTypeScriptで開発が行われてトランスパイルされたJavaScriptが実行されます。
なので、TypeScriptが書けるのが好ましいというよりも、JavaScriptをそのまんま書くシーンは減ってきているので必然的にTypeScriptを書けるのが実務では必要です。
まとめ
「JavaScriptの実務レベル」ってことで記事を書いたんですが、実務に入って書いていれば全体的に身についてきます。
一方で実務に入る前にこの記事に書いたような内容を網羅的にそこそこな深さまでやるのはほぼ無理なので、ある程度広く浅くいろいろ知っておきつつも、ウェブアプリなどをポートフォリオとして作ってから実務に入って無理やりついていくのが実務レベルを知るのには1番近道です。
網羅的に深く習得するには実際に仕事か何かの手段として書いていくのが近道というか、多分それ以外の道がほぼない気がします。
独学と実務は違うなんて言われがちですが、実務のほうがやはり難しいというよりも、コードが複雑であったりJavaScript以外の知識も必要になるのが一般的にはやはり難しいです。