この「JavaScript超入門」シリーズでは、JavaScriptの基礎から簡単なアプリケーションの作成まで、幅広く学んできました。しかし、JavaScriptの世界は、ここで紹介したことだけにとどまりません。さらに学習を深めれば、もっと複雑なアプリケーションを作ったり、様々な技術と組み合わせたりすることができるようになります。
この章では、JavaScriptの学習をさらに進めるための、いくつかの重要なトピックを紹介します。
1. オブジェクト指向って何？
オブジェクト指向とは、オブジェクト（物） を中心にプログラムを組み立てていく考え方です。オブジェクトとは、データ（プロパティ）と処理（メソッド）をひとまとめにしたものです。
例えば、「車」というオブジェクトを考えてみましょう。車には、「色」「メーカー」「車種」などのデータ（プロパティ）と、「走る」「曲がる」「止まる」などの処理（メソッド）があります。オブジェクト指向プログラミングでは、このようなオブジェクトを組み合わせて、プログラムを作っていきます。
JavaScriptは、プロトタイプベースのオブジェクト指向言語です。クラスベースのオブジェクト指向言語（JavaやC++など）とは異なり、プロトタイプと呼ばれる仕組みを使ってオブジェクトを生成します。
クラスとインスタンス（参考）
クラスベースのオブジェクト指向言語では、クラスという設計図を元に、インスタンスという実体を作ります。
例えば、「車」というクラスを定義し、そのクラスを元に、「私の車」や「あなたの車」というインスタンスを生成します。
プロトタイプ
JavaScriptでは、クラスの代わりに、プロトタイプを使います。プロトタイプは、オブジェクトの元となるオブジェクトです。
例えば、「車」というオブジェクトを作り、それをプロトタイプとして、「私の車」や「あなたの車」という新しいオブジェクトを生成します。
プロトタイプについて詳しくは、ここでは触れませんが、「JavaScript オブジェクト指向 プロトタイプ」などで検索すると、多くの情報が見つかるでしょう。
オブジェクト指向を学ぶことで、より複雑なプログラムを、効率的に、そして保守しやすい形で書けるようになります。
2. 非同期処理って何？
非同期処理とは、処理の完了を待たずに、次の処理を進める方式のことです。一方、同期処理とは、処理の完了を待ってから、次の処理に進む方式です。
例えば、サーバーからデータを取得する処理を考えてみましょう。同期処理では、データの取得が完了するまで、プログラムはそこで待機します。一方、非同期処理では、データの取得をサーバーに依頼したら、その完了を待たずに、次の処理に進みます。データの取得が完了したら、その結果を受け取って、必要な処理を実行します。
非同期処理を使うと、時間のかかる処理を実行している間も、プログラム全体を停止させずに済むため、ユーザーの操作を妨げない、スムーズなアプリケーションを作ることができます。
JavaScriptでは、非同期処理を実現するために、主に以下の3つの方法があります。
- コールバック関数: 非同期処理が完了したときに実行する関数を、引数として渡す方法。
- Promise: 非同期処理の結果を、
resolve（成功）またはreject（失敗）という形で返すオブジェクトを使う方法。 - async/await: 非同期処理を、同期処理のように書けるようにする構文。内部的には
Promiseを使っています。
これらの方法を使うと、例えば、サーバーからデータを取得したり、ファイルの読み書きを行ったりする際に、非同期処理を活用できます。
非同期処理について詳しくは、「JavaScript 非同期処理」などで検索してみてください。
3. ライブラリやフレームワーク
ライブラリやフレームワークとは、特定の目的のために作られた、再利用可能なコードの集まりです。これらを使うことで、自分で一からコードを書く手間を省き、効率的に開発を進めることができます。
ライブラリ
ライブラリは、特定の機能を提供する、関数の集まりのようなものです。例えば、以下のようなライブラリがあります。
- jQuery: DOM操作やイベント処理などを簡単に行えるようにするライブラリ。
- React: ユーザーインターフェースを構築するためのライブラリ。Facebookが開発。
- Vue.js: ユーザーインターフェースを構築するためのライブラリ。
- Angular: ユーザーインターフェースを構築するためのフレームワーク。Googleが開発。
- D3.js: データを視覚化するためのライブラリ。
フレームワーク
フレームワークは、アプリケーション全体の構造を提供する、枠組みのようなものです。フレームワークを使うことで、一定のルールに従って、効率的にアプリケーションを開発できます。
例えば、以下のようなフレームワークがあります。
- Express: Node.jsのWebアプリケーションフレームワーク。
- Next.js: Reactベースのフレームワーク。サーバーサイドレンダリングなどをサポート。
- Nuxt.js: Vue.jsベースのフレームワーク。
- NestJS: Angularに着想を得た、サーバーサイドアプリケーションのフレームワーク。
ライブラリとフレームワークの違い
ライブラリとフレームワークの主な違いは、制御の流れです。ライブラリを使う場合、開発者がコードの制御の流れを決めます。一方、フレームワークを使う場合、フレームワークがコードの制御の流れを決め、開発者はその流れに従ってコードを書きます。
ライブラリやフレームワークについて詳しくは、「JavaScript ライブラリ」「JavaScript フレームワーク」などで検索してみてください。