スライドショー

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


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

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

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

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

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

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

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

JavaScriptで重要な言語仕様

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

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

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

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

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

const obj = {
  log: this,
  show: function() {return this}
}



console.log(obj.log);
console.log(obj.show());

実行結果

Window { postMessage: function, blur: function, Window, … }

Object { log: Window, show: function }

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

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

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

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

promiseによる非同期処理

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

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

同期処理
↓
非同期処理(Promise)
↓ 
同期処理(前の処理を待たずに実行できる)
↓
同期処理

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

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

var result = new Promise(function(resolve) {
 
    //実行したい処理を記述する

    //最終的な結果を引数に指定する
    resolve(【結果】);
 
})

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

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

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

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

プロトタイプの仕組み

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

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


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

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

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

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

var User = function(name, age) {
    this.name = name;
    this.age = age;

    this.getName = function() {
        return this.name;
    }
}

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

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

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

//プロパティだけを定義したコンストラクタ
var User = function(name, age) {
    this.name = name;
    this.age = age;
}
 

//メソッドをプロトタイプで定義する
User.prototype.getName = function() {
    return this.name;
}

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

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

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

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

WebAPIを利用した技術

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

DOMAPIによる制御

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

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

const h1 = document.querySelector('h1');

h1.textContent = 'こんにちは';

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

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

const button = document.querySelector('button');

button.addEventListener('click', function() {

    //ここに処理を記述する

});

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

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

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

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

XMLHttpRequestによるAJAX通信

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

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

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

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

var xhr = new XMLHttpRequest();
 
xhr.open(【どんな方法で?】, 【どのサーバーに?】);
xhr.send();
 
xhr.onreadystatechange = function() {
 
    if(【いつデータを取得するか?】) {
 
        //データを取得した後の処理を書く
    }
}

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

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

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

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

WebSocketによる双方向通信

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

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

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

var connection = new WebSocket(【通信を行うURL】);

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

//通信が接続された場合
connection.onopen = function(e) { };
 
//エラーが発生した場合
connection.onerror = function(error) { };
 
//メッセージを受け取った場合
connection.onmessage = function(e) { };
  
//通信が切断された場合
connection.onclose = function() { };

主に、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を利用することで特殊な通信を実現できる

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

マサト

マサト

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

おすすめコンテンツ

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

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