初心者でも分かる!JavaScriptの関連技術を体系的に解説


JavaScript関連の技術ってなんだか難しい…
JavaScriptでポイントになるの重要な言語仕様を知りたい
Web APIなど関連技術について学んでおきたい

JavaScriptを勉強していると、単なる言語仕様だけでなくさまざまなWeb APIが存在しておりどれを学習したら良いのか迷うことも少なくありません。

JavaScriptに関連した技術や重要なポイントについて把握するにはどうすれば良いのでしょうか?

こんにちは!ライターのマサトです。

この記事では、初心者でも今日からJavaScriptの関連技術をまとめて学習する方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

この記事はこんな人のために書きました

  • JavaScriptの関連技術について把握したい方
  • Web APIのポイントを知りたい方
  • JavaScriptの重要な言語仕様を学びたい方

JavaScriptで重要な言語仕様

この章では、JavaScriptを学習するうえで特に重要なポイントになる仕様について見ていきましょう。主に、this・promise・プロトタイプについて学んでいきます。

thisという特殊な変数について

JavaScriptを学習するうえで欠かせないのがthisという特別な変数です。

thisは最初からJavaScriptで提供されている変数で、その呼び出す場所や方法によって中身の値が変化するという特徴があります。この変化することによって便利な面もあれば、初心者が難しく感じるポイントでもあります。

例えば、新規にオブジェクトを作成してthisの値を確認してみましょう!

実行結果

この例では、obj.logにthisの値を格納しており、obj.showにはthisの値を返すだけの関数が定義されています。注目してほしいのは実行結果が異なっているという点です。

つまり、thisを記述した場所によって値が変化しているわけですね。このような性質を知らないでthisを使ってしまうとバグの原因となるので注意しましょう。

thisについて他の呼び出し方や便利な活用方法などを次の記事でまとめているので、ぜひ合わせて参考にしてみてください

thisって何?使い方を覚えて、JavaScriptをもっと楽しく使おう!
更新日 : 2019年5月11日

promiseによる非同期処理

JavaScriptはシングルスレッドなので、プログラムを上から下へ同期的に処理していきます。しかし、途中で時間の掛かる処理がある場合、その処理が完了するまで以降の処理がストップしてしまうわけです。

この問題を解消するために、JavaScriptにはPromiseによる非同期処理が提供されています。

この例のように、非同期処理の部分で時間が掛かる場合でも次の処理へすぐに移行することができるわけです。非同期処理は完了した時点で続きを実行できます。

具体的なプログラミングとしては、Promiseオブジェクトを作ることで簡単に実現できます。

このようにPromiseのインスタンスを作成する時に引数へ実行したい処理を記述して、その結果をresolve()に指定することで変数resultにPromiseオブジェクトが格納されます。

このresolve()が結果を取得するまで処理は非同期で実行されるというわけですね。

他にも、Promiseにはthisを使ったチェーン処理や便利なメソッドなども提供されています。これらの基本的なプログラミング手法については次の記事でまとめているのでぜひ参考にしてみてください!

【JavaScript入門】誰でも分かるPromiseの使い方とサンプル例まとめ!
更新日 : 2019年2月10日

プロトタイプの仕組み

JavaScriptの理解を深める上でプロトタイプの仕組みを知っておくことは欠かせません。

JavaScriptのオブジェクトはこのプロトタイプと呼ばれる最小テンプレートのようなものをベースにしており、これをコピーして新しいオブジェクトを作っているのです。


プロトタイプをコピーしてオブジェクトを作る

JavaScriptの標準で提供されているオブジェクトも上記のような仕組みで構成されています。つまり、すべてのオブジェクトはプロトタイプを持っているわけですね。

このプロトタイプを利用した特徴として分かりやすいのがコンストラクタを作成する時です。

例えば次の例を見てください!

この例では、名前と年齢を格納するプロパティと名前を取得するメソッドを持ったコンストラクタを作っています。

しかし、このコンストラクタはインスタンスを作成するたびにプロパティとメソッドがすべてコピーされます。

このようなケースでプロトタイプを利用すると次のようになります。

この例では、プロパティだけを記述したコンストラクタを作成しています。

メソッドに関してはUser.prototype.getNameというように、プロトタイプを利用して記述しているのがポイントです。これにより、コンストラクタはインスタンスを作成してもプロパティだけをコピーすることになるのでメモリを節約できるのです。

このプロトタイプを利用したプログラミング手法について、さらに理解を深めたい方は次の記事で体系的にまとめているのでぜひ参考にしてみてください!

【JavaScript入門】プロトタイプ(prototype)の使い方と継承まとめ!
更新日 : 2019年5月13日

WebAPIを利用した技術

この章では、JavaScriptによるWeb開発のなかでも特に重要なポイントになる技術について見ていきましょう。主にDOMの制御、AJAX通信、双方向通信について学んでいきます。

DOMAPIによる制御

JavaScriptのユニークな点として、HTML要素(DOM)を制御できるという特徴があります。これは標準で提供されているDOM APIを利用することで簡単に構築できるのです。

例えば、h1要素を取得して任意の文字列に書き換えるには次のように記述します。

この例では、querySelector()を使ってh1要素を取得して「こんにちは」という文字列に書き換えています。

また、addEventListener()を使うことでユーザーのアクションを検出してプログラムを実行できるイベント処理を実現できます。

この例では、ボタン要素を取得したあとにaddEventListener()を紐づけてクリックイベント処理を構築しています。これにより、ユーザーが任意のボタンをクリックした瞬間に処理を実行できるわけです。

このようなDOM APIを利用することで、動的でインタラクティブなWebページを作ることができるようになります。

ちなみに、DOM APIの基本から応用までを次の記事でまとめているので、さらに理解を深めたい方は合わせて参考にしてみてください!

【JavaScript入門】はじめてのDOM操作・取得まとめ!
更新日 : 2019年6月25日

XMLHttpRequestによるAJAX通信

ブラウザにURLを入力して任意のWebサイトに画面遷移する時、画面が真っ白になって一切の操作ができなくなりますよね?これは同期通信でサーバーとやり取りをしており、すべてのデータが処理されてからようやく操作ができるようなるわけです。

これに対して、サーバーとやり取りをしている最中でも別の処理が行えることを非同期通信と言います。

例えば、FacebookやTwitterなどをはじめとしたSNSはこの非同期通信を使って画面の情報を更新し続けているわけですね。これが一般的にAJAX通信と呼ばれている技術であり、JavaScriptではXMLHttpRequestを使って実現します。

基本的な使い方としては以下のとおりです。

XMLHttpRequestのインスタンスを作成し、open()メソッドで方法(GET/POSTなど)と目的のサーバーアドレスを指定することで通信が行えるようになります。

send()で通信を開始し、onreadystatechangeでサーバーから取得したデータを受け取って処理を実行するという流れになります。

一般的にGET通信・POST通信を利用してサーバーとやり取りを行うケースが多いのですが、その具体的な手法については次の記事でまとめているのでぜひ参考にしてみてください!

【JavaScript入門】Ajaxの使い方とGET・POST通信まとめ!
更新日 : 2019年3月28日

WebSocketによる双方向通信

サーバー側とユーザー側を常時接続した状態にしておくと、お互いにリアルタイムで通信が行えるようになります。これを双方向通信と呼んだりしますが、このような技術を簡単に実現するのがWebSocketなのです。

WebSocketを利用することで、複数人によるチャットアプリやオンラインゲームなどを実現できるようになります。

基本的な使い方としては、WebSocketのインスタンスを作成する際にサーバーアドレスを設定しておきます。

あとは、状態に応じたイベント処理を記述していくというのが基本的な流れになります。

主に、onmessageメソッドを利用することで簡単にチャットアプリなどを構築することができるので便利です。

このWebSocketを利用した簡単なサンプル事例を次の記事でまとめているので、ぜひ合わせて参考にしてみてください!

【JavaScript入門】誰でも分かるWebSocketによるデータ送受信の方法
更新日 : 2018年9月3日
【Node.js入門】WebSocketとSocket.IOで簡単チャットアプリ制作まとめ!
更新日 : 2018年10月24日

まとめ

今回は、JavaScriptに関連した重要な技術ポイントについて学習しました!

最後に、もう一度ポイントをおさらいしておきましょう!

  • JavaScriptの言語仕様で重要なのはthis / Promise / プロトタイプ
  • DOM APIを活用することでHTML要素を制御できる
  • AJAXとWeb Socketを利用することで特殊な通信を実現できる

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

JavaScriptカリキュラム無料公開中!


この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。

JavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】
更新日 : 2018年12月13日

無料体験レッスン実施中

今あなたはこんな悩みをお持ちではないでしょうか?

「つまづいてばかりで学習が進まない…」
「どこまで勉強すればいいのか、終わりが見えない…」
「習得できたとしてもどうやって仕事につなげればいいのかわからない…」

プログラミング学習やキャリアに関してお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

あなたにとって、最適の解決策をご提案させていただきます。

詳しくは下の画像をから詳しいサービス内容をご確認ください。

cta_js2

LINEで送る
Pocket

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説