JavaScriptの実務レベルについて解説します

始めに

まんじです〜

今回はJavaScriptの実務レベルについて書いていきます。

「とりあえず仕事でJavaScript使えるよね」っていうぐらいのレベル感の話です。

ただ、いきなり前提を崩してしまうと、最近は素のJavaScript単体で仕事をすることはあまりないです。

だいたいはTypeScript（JavaScriptに型をつけたやつ）だったり、ReactやVueみたいなフロントエンドフレームワークと一緒に使われます。サーバーサイドでもTypeScript＋フレームワークって感じですね。

なので今回は、その周辺環境も含めつつ、JavaScriptの文法的な部分にも触れながら解説していきます。

※ ちなみにこの記事はウェブエンジニア向けの話です。ウェブ制作だとだいぶ変わってくるので、文法のところだけ参考になるかも、ぐらいで見てください。

一応、結論から先に言ってしまうと、JavaScriptの実務レベルは 「普通にGit使ってチーム開発が普通にできるレベル」 っていうざっくりしたところに落ち着きます。そこをもう少し深掘りしていきます。

前提条件: JavaScriptの言語的な難易度(レベル)

Pythonよりはちょい難しくて、型ありのコンパイル型言語よりは簡単、ぐらいのレベル感です。

難易度（学習コストの高さ）順に並べるとこんな感じ。

Python < JavaScript < TypeScript < JavaやCやGoやRustなど

個人的には、JavaScriptはかなり入門しやすい部類の言語だと思ってます。

コールバックとかPromiseあたりは最初こそ難しく感じますけど、何度も書いてるうちに慣れますし、今ならAIに任せれば多少ふわっとした理解でもいけたりします。

JavaScriptの実務レベルの文法に関して

全ての言語共通のプログラミングの基本的な部分の理解ができている

だいたいどの言語にも共通する、こういう概念の理解ですね。

• 変数
• 定数
• 関数（メソッド）
• 条件分岐（if, switch, 三項演算, etc...）
• ループ処理（for, while）
• Class（オブジェクト指向）
• コメントアウト（普通にコメント、関数Docコメント）
• 型（文字列、数値、真偽値）

JavaScriptでも同じで、このへんの理解は必須です。

Pythonとか他の言語を書けるなら、JavaScriptを始めても特に困ることはないと思います。

変数スコープが理解できてる

変数のスコープや扱いを、文字列・配列・オブジェクトのどのケースでもちゃんと理解できてる必要があります。

• var
• let
• const

最近の開発だとletとconstしか使わなくて、varはほぼ出てきません。

ReactでもNode.jsでも、letはあまり使わずに、できるだけconstで書かれてることが多いです。

あと、JavaScriptのObject型（配列含む）はconstで宣言しても中の要素は変更できる、みたいな部分は、実際に書きながら理解していく感じですね。

関数型の処理を普通に使える

関数型の処理っていうのは、こういう配列のメソッドあたりのことです。

• forEach
• map
• filter
• sort
• some
• every
• reduce

コールバック関数（引数に渡す関数）を渡して、内部で処理するような配列操作ですね。

例えばこういうやつです。

someArray.filter((elem) => elem !== undefined)

めちゃくちゃ頻出で、普通に読めて書けて使いまくれる、っていうのがJavaScriptの実務レベルとして必須です。

配列やオブジェクトを扱うのに必要で、実務だと2重ネストとかもしがちなので、ちょっと複雑になります。

↓こんなやつ。

someArray.filter((elems) => elems.some((elem) => !!elem))

こういう関数型の処理を普通に使うには、後述するコールバック関数の理解が必要です。

コールバック関数を理解して使える

const onClickButton = (id) => () => {console.log(`operation ${id}`)}
onClick={onClickButton(id)}

上みたいに、関数を変数として扱ったり、関数を引数に渡したりする文法です。

コールバック関数を理解するには、アロー関数っていう関数の定義方法にも慣れる必要があります。

ちなみにfunction記法でも、コールバック関数として関数を引数に渡すことはできます。

最初は難しく感じますけど、使ってるうちに普通に慣れます。

Promise(非同期処理)

• Promise.all
• promise then
• async await

このへんのPromise関連の文法と処理は、ナチュラルにめちゃくちゃ出てくるので、使える必要があります。

定番のaxiosやfetch APIでサーバーサイドと通信するときや、Node.jsでデータベースに接続するときなんかに、Promiseを扱えるasync awaitの文法は頻出です。

最初はとりあえずasync awaitをノリで使ってればなんとかなりますが、そのうちハマるので、そのタイミングでPromiseの処理をググりながら勉強すればいいと思います。

Promise.allとかは最初ちょい難しいですけど、mapと絡めて実務でちょいちょい出てきます。

JavaScriptの周辺環境に関して

DOM系の操作

JavaScriptをそのまま書くことは最近少ないものの、基本的なDOM操作はJavaScriptで書ける必要があります。

厳密には、都度ググりながら理解していける、最低限のDOMの理解ですね。

• window.document.getElementById
• addEventListener
• innerHTML
• innerText
• などなど

React（JavaScriptのフロントエンドフレームワーク？ライブラリ？）を使っていても、複雑なUI操作になるとたまに使わないといけない場面があります。

jQuery

ほぼ使うことはないですが、ノリで読めて、簡単な実装なら調べながらできるくらいだと好ましいです。

（後述するフロントエンドフレームワークが使えて、素のJavaScriptもある程度理解できていれば、よほどニッチなやつ以外はググりながら雰囲気で使っていけます。）

とはいえ、最近のウェブアプリ開発ではほぼ使いません。

ウェブ制作やLP制作あたりではまだ使うのかもしれませんが、だいぶ微妙というか、どんどん使われなくなってる終わりゆく技術です。

Node.js

Node.jsはサーバーサイドで動かせるJavaScriptなんですけど、環境構築ができて普通に書いていけると好ましいです。

ブラウザ側のJavaScriptが書ければ、文法的には普通に書けます。

ECMAScriptやCommonJSまわりのエコシステムも、ちょっと知ってるぐらいだといい感じです。

ローカルにbrewとかでNode.jsを入れて実際に書いてみるか、Dockerコンテナに入ってるNode.jsを使ってみるのもいいと思います。

npm/yarnなどのパッケージ管理

• package.json
• node_modules

npmやyarnコマンドを使って、ライブラリ管理系をある程度使いこなせる必要があります。

最初はよく分からない感じになりがちですが、何度もライブラリを入れたり消したりしてると、徐々に感覚が掴めてきます。

トランスパイルとバンドラーに関する知識

• Babel
• Webpack
• tsc（ts ⇒ js）

このへんのトランスパイラーやバンドラーは、軽く知っておく必要があります。

チーム開発だと元々設定されてることがほとんどですが、場合によっては自分で設定が必要です。

ただ最近は、自分で設定しなくても、フロントエンドだとフレームワーク（Next.jsとか）が勝手に内包していい感じに設定してくれるので、あんまり理解してなくても大丈夫だったりします。

メジャーなフロントエンドフレームワーク

バックエンドだけNode.jsで担当する場合は別ですが、フロントエンドをやるなら、メジャーなフロントエンドフレームワークを最低1つは使える必要がある確率が高いです。

• React
• Vue
• Angular

特に一番人気で使われてるのがReactなので、無難にReactを使えると良さげかもしれません。

Linter

JavaScriptの書き方を統一したり、自動で修正してくれるツールです。

一番有名なのはESLintだと思いますが、ESLintを0から設定して、設定項目をいじりつつ開発に使えると好ましいです。

Next.jsとかを使うと勝手に設定してくれるので、それをChatGPTと一緒に変更したりしてみると、雰囲気や設定方法が分かってきます。

TypeScript

最近はJavaScriptというより、JavaScriptに型をつけたTypeScriptで開発して、トランスパイルされたJavaScriptが実行される、という流れが多いです。

なので「TypeScriptが書けると好ましい」というより、JavaScriptをそのまま書くシーンが減ってるので、必然的にTypeScriptを書けるのが実務では必要になってきます。

最初は難しく感じますが、とりあえず型宣言にanyをつけまくってればなんとかなりつつ、書いてるうちにちょっと複雑な型（genericsなど）も徐々に扱えるようになってきます。

最初につまずくとしたら、オプショナルチェーン(?←これがよく出てくる)ぐらいかなと思います。

TypeScriptも勉強というより慣れの要素が強いですけど、JavaScriptの文法自体がちゃんと分かってればすぐ慣れます。

ちなみに半年〜1年ぐらいプログラミングをやってると、動的型付け言語（JavaScript）よりも、静的型付け言語（TypeScript）のほうが、ある程度量のあるコードを書くのは楽になってきます。

まとめ

「JavaScriptの実務レベル」ってテーマで書いたんですが、厳密にはJavaScript単体ではなかなか語れず、結局その周辺環境を解説する記事になりました。

最初は難しく見えるかもしれませんが、実務に入って書いてれば勝手に全体的に身についてきます。

あと、JavaScriptに限らず、GitやGitHub系、フロントエンドで書くならCSSやHTMLみたいな周辺知識も必要になってきますが、これも実務をしてれば勝手に身についてきます。

実務に入る前に、この記事に書いたような内容を網羅的に、そこそこの深さまでやるのはほぼ無理なので、広く浅くいろいろ知っておきつつ、ウェブアプリをポートフォリオとして作ってから実務に入って、無理やりついていくのが、実務レベルを知るには一番の近道です。

網羅的に深く習得するには、実際に仕事か何かの手段として書いていくのが近道というか、多分それ以外の道はほぼない気がします。

「独学と実務は違う」ってよく言われますが、実務のほうが難しいというより、コードが複雑だったりJavaScript以外の知識も必要になるので、やっぱり難しめなのは否定できないですね。

ということで終わりです〜。