目指せ中級!JavaScript学習ロードマップ(非webエンジニア向け)

JavaScript
JavaScript

当ブログの筆者のinashunです。

私はJavaをメインの技術としてお仕事をしているのですが、最近お仕事でJavaScriptを扱う機会が増えてきました。
これまでも扱う機会は多々あったのですが、すべて「既存ソースの改修」か「実装ルールやガイドラインが整備された環境での開発」だったので、あまり深く理解していなくても実装できていました
ところが今回は完全ゼロベース(というか自分が共通処理とかガイドラインを作る役割)での開発なのです。

Java側はスムーズに実装できているのですが、JavaScript側になった途端「どこから手をつけたらいいのかわからない…ふえぇ」という状態になってしまいました。JavaScriptの基礎が身に付いていないことに改めて気づかされたのです。

これでは仕事にならないので、JavaScriptの基礎を再学習してJavaScript中級者を目指していこうと思います!
そこまでの道のりをロードマップとしてアウトプットしていこうと思います。

当記事では、HTML/CSSは学習の対象としません。HTML/CSSの基礎知識を有しているという前提のもと構成されています。
当記事は非webエンジニア向けとさせていただきます。バックエンドエンジニアだけど時よりJavaScriptを扱わなければいけない、という方向けです。ReactとかVueとか使ってバキバキのwebエンジニアとしてやっていきたいという方にとってはちょっと物足りないかもしれないです。。。

① JavaScript基本文法

まずは基本文法から。

リンク集
JavaScriptの基礎の文法をまとめる
案件でWebアプリの構成の検討のためにサンプルアプリを作っていたのですが、Javaのソースならさらさらっと書けるけど、JavaScriptとなると「文法がよくわからん」となって初歩的なことを調べることが多かったです。Webアプリエンジニアと...
  •  初期に書いた記事なのですごい書き方が雑ですが悪しからず。。。

② DOM操作

Document Object Model (DOM) はマークアップ言語の要素をツリー構造で表現し操作を可能にする仕組みです。
XMLなどいろいろなマークアップ言語がありますが、ここで対象になるのはwebのブラウザ表示を司るHTMLです。JavaScriptではHTMLのDOMを操作して動的なwebページを表現していきます。

リンク集
JavaScript中級者への道!DOMを操作するの巻
3月は個人的にJavaScript集中強化月間としてお勉強していきます。 今回はJavaScriptでHTMLのDOM操作をする方法をまとめていきます。 こちらのJavaScriptロードマップも併せてご覧ください。 DO...

③ イベントとコールバック関数とthis

ページ表示時や要素のクリック、フォームの値の変更やフォーカスイン/フォーカスアウトなど、JavaScriptの処理を走らせるきっかけになるイベントは数多くあります。そんなイベントの発生をトリガーとして処理を行う方法を学びます。そこで頻繁に使用されるのがコールバック関数という仕組みです。頻繁に使用するのでしっかり覚えましょう。
また、理解が難しいJavaScriptのthisキーワードについても併せて学んでいきます。

リンク集
JavaScript中級者への道!クリックされたら動くの巻
3月は個人的にJavaScript集中強化月間としてお勉強していきます。 今回はJavaScriptで画面イベントをトリガーに処理を実行する方法をまとめていきます。 こちらのJavaScriptロードマップも併せてご覧ください。 ...

④ jQuery

もう下火とか言わないの。有無を言わさず使わされることばっかりなんだから。
スクラッチ開発ではもうあまり採用されないかもしれないですが、既存システムの改修などでまだまだお世話になるであろうjQueryです。基本的な読み書きはできるようになっておいて損はないと思います。

リンク集
JavaScript中級者への道!jQueryをそこはかとなく知るの巻
この3月をJavaScript強化月間としていろいろ学習しています。 今回はまだまだ現役なjQueryを学んでいきます。 こちらのJavaScriptロードマップも併せてご覧ください。 jQueryとは jQueryは、...

⑤ Ajax

サーバサイドのエンジニアがJavaScriptのお世話になる場面といえばやっぱりAjaxによる非同期通信です。
末永くお世話になっていく技術だと思いますので、しっかり理解しておきましょう。
また、この段階でJavaScriptの非同期処理についても併せて理解しておきます。

リンク集
JavaScript中級者への道!Ajaxを使いこなすの巻
JavaScript強化期間もいよいよ終盤戦です。 今回は、Ajaxについて学んでいきます。 こちらのJavaScriptロードマップも併せてご覧ください。 Ajaxとは AjaxはAsynchronous JavaSc...

⑥ モダンJavaScript(ES6)

JavaScriptにもバージョンがあり、このES6というバージョン以降がモダンなJavaScriptと扱われるようです。
このバージョンアップによって新たな機能が多く追加されているので、その内容について理解していくことで今ドキなJavaScriptが書けるようになることを目標とします。

リンク集

⑦ さらなる高みへ?

中級者を目指すのが目的なのですが、やはりJavaScriptの世界の上級者コースはカッコよく見える。。。
というわけで、簡単に上級者コースのご紹介です。これらについて勉強して記事を書くかどうかはわかりません。

TypeScript

マイクロソフトが開発したJavaScriptの上方互換となるプログラミング言語です。実行前にJavaScriptにコンパイルして実行します。
静的型付け、インターフェースが使える、nullセーフなどの特徴を持っています。コンパイルをするので、文法エラーなどは実行前に洗い出せる、エディタやIDEなどで入力補完が充実するなど、JavaScriptの弱点を補うような扱いやすい言語になっています。

フレームワーク

JavaScriptのフレームワークは数多くありますが、現在の主流は3大JavaScriptフレームワークとも称される「Angular/React/Vue」です。これらは「関心の分離」という考え方に基づいて設計されています。JavaScriptをメインの技術としてやっていくエンジニアであれば、どれか一つはマスターするべきかなと思います。

個人的にはReactが好みです。でも、昔案件でやるかもって言われてちょっと勉強して電卓とか作ったのに、その案件なしになっちゃって。縁がないのかなぁ。。。

Node.js & Express

JavaScriptはブラウザ上で動作するプログラミング言語という役割が主でしたが、これをサーバサイドで動作させられるようにした実行環境がNode.jsです。そして、そのNode.js上で動作するMVCアーキテクチャの王道フレームワークとしてExpressがあります。これらを活用することでフロントからサーバサイドまで、すべてJavaScriptでシステムを構築することもできます。

参考

JavaScript Primer
JavaScriptの教科書です。

JavaScript|MDN
Firefoxで有名なMozillaのリファレンス

更新履歴

微細な更新は含めていません。
日付概要
2021/03/01初版
2021/03/07② DOM操作にリンクを追加
2021/03/18③ イベントとコールバック関数とthisにリンクを追加
2021/03/26④ jQueryにリンクを追加
2021/04/28⑤ Ajaxにリンクを追加

コメント

タイトルとURLをコピーしました