何かを理解するには、まず全体像を把握します。それから、一つ一つについて知っていくと理解しやすいです。私自身そうでしたが、JavaScriptを勉強すると決めたはいいものの、勉強内容が膨大で、何をどこまで勉強したらいいのか全く分かりませんでした。そこで、JavaScriptの全体像とおおまかな説明を私なりにですが、していきます。
JavaScriptの全体像
個人的かつ大雑把にJavaScriptの全体像を以下のように表してみました。それぞれの項目については後述しています。
- JavaScriptの基本
- 組み込みオブジェクト
- 関数
- その他
- ライブラリ/フレームワーク
まず、最初に勉強することは「JavaScriptの基本」「組み込みオブジェクト」「関数」の3つです。これらを理解し、使えるようになれば、JavaScriptの基本を押さえられるのではないでしょうか。
その他に含まれる項目は、他にもたくさんあります。それだけ、JavaScriptは勉強することが多いということです。また、JavaScriptは現在も改良され続けているので、新たな書き方や機能が追加されています。他の言語もそうですが、今後もアップデートしていくと思うので、勉強し続けていくことになります。
JavaScriptの基本
JavaScriptの基本として、以下のようなことを学びます。
JavaScriptの書き方のルールを知ることから始まります。例えば、変なところで改行したり、スペースを入れるとコードが正しく認識されないので、書き方のルールに則って書いていきます。
変数は、値を入れる箱のようなものです。データ型は、JavaSccriptで扱えるデータ(値)の種類について勉強します。
足し算、引き算、掛け算、割り算などのことを演算子といいます。演算子の使い方や書き方について勉強します。演算子は加減乗除以外もあります。
制御構文は、プログラムの流れについてです。プログラムは基本的に、上から順番に実行します。しかし、条件によって、実行したいことを選びたい場合があります。その場合の書き方や使い方について勉強します。他に、繰り返し実行したい場合についても勉強します。
組み込みオブジェクト
- String/Number/Math/Array/Map/Date/RegExpなど
組み込みオブジェクトは、「JavaScriptに初めから備わっている便利な機能の集まり」というイメージでひとまず良いと思います。Stringオブジェクトは、文字についての便利な機能を持っています。Numberオブジェクトは、数字についての便利な機能を持っています。このようにそれぞれが便利な機能を持っています。
我々は、それを利用してプログラムを書きます。例えば、Dateオブジェクトでは日付を取得できます。Stringオブジェクトでは、小文字を大文字に変換できます。Mathオブジェクトでは、ランダムな数字を生成することができます。他にももっと便利な機能がたくさん提供されています。自分で書くコードを最小限にして、既存の便利なものを利用してプログラムを書いていくのが良いです。
組み込みオブジェクトは、全て覚える必要はありません。こんな機能があったなということを頭の片隅に置いておくだけで良いです。使い方は、使うときに調べれば良いです。
関数
関数は、何回でも使える機能のことです。再利用したい機能に名前を付けて、いつでも使えるようにしておくことができます。関数の名前を呼べば、いつでもその機能が使えるようになります。
その他
JavaScriptの基本と組み込みオブジェクト、関数を勉強してから上記を勉強する流れになると思います。ここでは説明を割愛しますが、それぞれ使えるようになるとプログラムで実現できることの幅が広がります。例えば、DOMを勉強するとウェブサイトに動きをつけるプログラムが書けるようになります。
ライブラリ/フレームワーク
さらに発展的な内容として、ライブラリとフレームワークを挙げます。
- jQuery
- Node.js
- React
- Vue.js
- Backbone.jsなど
上記のようなライブラリやフレームワークと呼ばれるものがあります。これらは、JavaScriptの基本的な知識があり、プログラムが書けることを前提で利用します。
おわりに
JavaScriptの勉強範囲は広いですし、細かいところまでやると奥が深いです。この記事で、JavaScriptの全体像とおおまかな内容が掴めればと思います。
しかし、ただ勉強するだけでは、作りたいものは作れません。実際に自分でコードを書いて試さないことには難しいです。理想と現実のギャップを埋めていくには、色々なコードを読んで、書いて、試して、試行錯誤するしかありません。
