脱初心者!JavaScriptの重要な技術を一気に学習するためのコツ


JavaScriptを勉強するうえで重要なポイントって何だろう
サーバーとの通信技術を使えるようになりたい
thisやプロトタイプなど難しい専門用語が多いなぁ

JavaScriptを学習していると、その奥深さに少しずつ気づいてくるでしょう。単なる基礎構文だけを勉強してもダメで、プロトタイプやthis・非同期処理など幅広い知識がWeb開発には求められます。

しかしながら、これらのポイントを体系的に学習することは難しく、またそのガイド的な情報も少ないのが現状ではないでしょうか。

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

一人でも多くの方がJavaScriptの不安を解消できれば幸いです。

DOMについて

この章では、JavaScriptを使いこなす上で必ず必要となるDOM操作について見ていきましょう。主に、DOMの概要、制御方法、イベント処理について学んでいきます。

DOMとは?

JavaScriptを使いこなすうえで必要となるのがDOMの存在です。

DOM(Document Object Model)は、JavaScriptからHTML要素にアクセスするための標準化された仕様です。HTMLタグをはじめ、属性・値・テキストなどさまざまな要素をJavaScriptで制御できるようになります。

DOMは以下のようにHTML要素がツリー構造となったデータをイメージすると分かりやすいでしょう。

パソコンのディレクトリ構造にもよく似ていますね。

JavaScriptはこのようなDOMの力を借りて、HTML要素を取得したり変更したり削除することで全体を制御することになるわけです。

JavaScriptでDOMを制御する方法

JavaScriptでDOMを制御するための具体的な方法について見ていきましょう。

一般的には、標準で提供されているメソッドとして【getElementById()】【querySelector()】のどちらかを利用してHTML要素を取得することが多いでしょう。

getElementById()メソッドはその名の通りHTMLに付与されているID属性値を利用して取得します。querySelector()はHTMLのタグ名をそのまま引数に指定するだけで取得できます。

他にもクラス名を利用した取得や任意のHTML要素をすべて取得するメソッドなどもあります。

HTML要素を取得すれば、JavaScriptから自在に制御することが可能になります。例えば、h1要素のテキストを任意の文字列に変更するには次のように記述します。

DOMを利用してHTML要素を取得したら、innerHTMLを使って任意の文字列に書き換えることができます。HTMLタグも認識してくれるので、好きなHTML構造に変えることも可能です。

また、JavaScriptから動的にHTML要素を作成することもできます。

この例では、createElement()メソッドを利用することで引数に指定したHTML要素を作成することができます。作成したHTML要素はappendChild()を利用して、最終的にHTMLへ出力しなければ画面に表示されないので注意しましょう。

イベント処理を制御する方法

イベント処理は、Webページ上でユーザーが何らかのアクションを行うことで、特定の処理を実行させる処理になります。

例えば、ボタンをクリックしたり、フォームを送信したり、画面をスクロールさせたりなどが挙げられるでしょう。

これらのイベント処理をJavaScriptで実装するには、addEventListener()メソッドを利用するのが一般的です。次のサンプル例を見てください!

この例では、ボタン要素を取得したあとにaddEventListener()でクリックイベント処理を記述しています。第1引数にイベント名を指定し、第2引数に実行したい関数を記述していますね。

このイベント名には他にも【load】【drag】【scroll】など、ほぼすべてのユーザー側のアクションを検出できるように提供されています。

また、イベント処理をよく使うフォーム要素については、name属性を利用することでJavaScriptから簡単に利用できます。

例えば、次のようなフォームがあるとします。

フォーム要素にはすべてname属性が付与されていることに注目してください。このname属性を利用すると、例えばボタン要素を取得したければ【document.myform.btn】のようにdocumentに続けてname属性値をチェーンするだけで良いのです。

次のサンプル例を見てください!

この例では、フォームのボタンをクリックしたら文字列をコンソールログに出力します。このように、name属性を利用することでフォームをJavaScriptで簡単に制御できるという点は覚えておきましょう。

他にも、多彩なイベント名の使い方やより実践的な活用方法については、次の記事で体系的にまとめているのでぜひ参考にしてみてください!

【JavaScript入門】初心者でも分かるイベント処理の作り方まとめ!
更新日 : 2019年2月28日

JavaScriptの高度な使い方

この章では、JavaScriptをより高度に活用するためのポイントについて見ていきましょう。主に、プロトタイプ、thisについて学んでいきます。

プロトタイプの基本

JavaScriptはプロトタイプと呼ばれる最小限の構成で作られたテンプレートをベースにしています。その関係ですべてのオブジェクトは、このプロトタイプをベースにしているわけです。

プロトタイプのメリットとして、メモリを節約したメソッド定義の書き方が可能です。

次のサンプル例を見てください。

この例では、プロパティだけが定義されたコンストラクタを作成しています。メソッドも一緒に定義できるのですが、この時にプロトタイプを利用して定義することが出来るのです。

先ほど作成したコンストラクタUserのプロトタイプに、showName()というメソッドを定義していますね。プロトタイプ(prototype)はすべてのオブジェクトのベースになっているので、一度定義すればUserからも参照することができます。

上記のように、Userコンストラクタにはメソッドが定義されていませんでしたが、プロトタイプに定義したことでshowName()メソッドが利用できるというわけです。

この仕組みを応用すれば、継承を行うのも非常に簡単です。

この例では、User / Memberという空っぽのコンストラクタを作成しています。

注目して欲しいのは、MemberプロトタイプへUserのインスタンスを代入しているという点です。実はこの1行で継承が完了するのです。

例えば、次のサンプル例を見てください!

この例では、Userプロトタイプにhello()メソッドを定義しています。

そして、継承を行うことでメソッドを定義していないMemberのインスタンスで、hello()メソッドが実行できていることが分かりますね。

thisの注意点

JavaScriptにはthisが標準で提供されているのですが、これは利用する状況によって値が変化するという特殊な変数になります。

例えば、コンソールログにthisを出力してみましょう。

実行結果

実行結果を見るとwindowオブジェクトが格納されていることが分かります。つまり、このthisは最初にwindowオブジェクトを指しているわけです。

ところが、この値をずっと保持しているわけではありません。

今度は、オブジェクトのメソッド定義の中でthisの値を確認してみましょう。

実行結果

この例では、showText()メソッドの中でthisの値をコンソールログに出力していますが、windowオブジェクトではなく呼び出し元のオブジェクトmyobjを指しています。

さらに、今度はメソッドをアロー関数で記述してみましょう。

実行結果

書き方がアロー関数に変わっただけで先ほどの例とまったく同じ内容です。

しかし、実行結果はwindowオブジェクトになっていますよね?同じ関数でも記述方法が変わるだけでもthisの値は変化してしまうので注意が必要なのです。

サーバーとの通信技術

この章では、さらなるJavaScriptの活用ワザとしてサーバーとの通信技術について見ていきましょう。主に、双方向通信と非同期処理についての基本を学んでいきます。

双方向通信(WebSocket)の基本

WebSocketは、JavaScriptを利用してサーバー側と通信を行える技術の1つで、ユーザーとサーバーを常時接続することが可能です。

これにより、チャットのようなリアルタイムに応答するメッセージサービスなどを簡単に実現することができます。使い方も簡単で、WebSocketのインスタンスを作成することですぐに利用することができます。

【通信URL】はWebSocketを利用して接続するサーバー側のアドレスになります。そのため、独自にサーバー側で準備が必要になりますが、今回は簡単に試したいのでテスト用のURLを以下のように設定しておくと良いでしょう。

【echo.websocket.org】はWebSocketを簡単に試せるように公開されているサーバーで、送信したメッセージをそのまま返してくれる機能を提供してくれます。

インスタンスを作成したら準備はできているので、次のように任意のメッセージを送信してみましょう。

【onopen】イベントを利用することで、接続が完了した時点で任意の処理を実行できます。この例では、send()メソッドを利用して好きな文字列を送信しています。

メッセージを送信すると、サーバー側で自動的に同じメッセージを返してくれるのでこのデータを次のように取得してみましょう。

【onmessage】イベントでサーバーから返ってきたデータを取得することができます。引数のイベントオブジェクトのdataプロパティに格納されているので、これをコンソールログへ出力しています。

最後にclose()メソッドを記述していますが、これは双方向の接続を解除するという意味になります。任意のタイミングでclose()を実行できますが、これをしないといつまでも常時接続状態になっているので注意しましょう。

また、WebSocketについてより深い知識を基本から学習したい方は、次の記事で体系的にまとめているので合わせて参考にしてみてください!

【JavaScript入門】誰でも分かるWebSocketによるデータ送受信の方法
更新日 : 2018年9月3日

非同期処理(Ajax)の基本

JavaScriptでよく使う通信処理として、非同期処理(Ajax)という通信技術があります。

一般的にJavaScriptはシングルスレッドなので、サーバーと通信するとその処理が完了するまでは他の処理が実行できないという欠点があります。この欠点を解消するための技術がAjaxであり、通信中であっても他の処理を実行することができます。

Ajaxを利用するためのもっとも基本的なメソッドがXMLHttpRequest()です。

使い方としては、WebScoketと同じようにインスタンスを作ることから始めます。

あとは、open() / send()メソッドを利用して通信を行います。

open()の第1引数は通信の種類で、一般的にはGET / POSTのどちらかになるでしょう。第2引数には通信を行うサーバー側のアドレスを設定します。

そこで、今回はGitHub APIにアクセスしてJavaScriptのリポジトリ数を取得してみましょう。次のサーバーURLを利用します。

これで、GitHub APIと通信できるようになったので、あとは返ってくるデータを取得する処理を書けば良いですよね。

次の例を見てください。

実行結果

onreadystatechangeを利用して通信が正常に行われているかを確認してから、返ってくるデータを取得するのが良いでしょう。

【readyState === 4】が通信完了を意味しており、【status === 200】が正常に通信が行われたことを意味しています。そして、responseTextにデータが格納されているので、これをJSONに変換すれば良いわけです。

非同期処理について、基本的な構文や活用方法については次の記事でまとめているので合わせて確認すると理解が進みますよ!

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

まとめ

今回は、JavaScriptの重要な技術についてポイントを学習しました。

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

  • DOMやイベントを制御することでHTMLを自在に操作できる
  • プロトタイプ / thisを使いこなして効率の良いプログラムを作る
  • WebSocket / Ajaxを利用すればサーバーとの通信が最適化される

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

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

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

おすすめコンテンツ

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

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