【JavaScript入門】JavaScriptの基本を解説！JavaScriptでできることや書き方も紹介
JavaScriptは、Adobe Flashなどサードパーティプラグイン以外で唯一、ブラウザで動くプログラミング言語です。
幅広い分野で採用されている言語でありニーズが高いため、IT業界以外でもさまざまな場面でJavaScriptを扱える人材が求められています。
今回は、JavaScriptの入門編として、できることから具体的な書き方、配列作成方法まで基本情報をまとめてご説明しましょう。
最後まで読めば、JavaScriptについて未経験の方でも、概要を一通り知ることができます。
一からJavaScriptを学びたい方やJavaScriptを扱えるITエンジニアを目指す方は、ぜひ最後まで読んでみてください。
JavaScriptでできること
JavaScriptでできることは多岐に渡りますが、大きく分けると次の3つが挙げられます。
- Webサイトに「動き」をプラスする
- イベントの処理を行う
- リアルタイム通信を実現する
1.Webサイトに「動き」をプラスする
JavaScriptではWebサイトのHTML、CSSに動的操作を加えることができます。Webページが表示された後に色やデザインなどが変わるもののことです。
下記に一例を挙げます。
- Webページのレイアウト
- アニメーション効果
- 画像ギャラリー
- カウントダウンタイマー
- お絵かきツール
多くの場合は、ユーザーのクリックやマウスオーバー（マウスを乗せる、話すといった行為）と組み合わせて使われます。
2.イベントの処理を行う
マウスの移動やクリックをイベントとして取得し、そのイベントと紐づけていろいろな動作をつけることができます。
また、チェックボックスへのチェックも、クリックと同じようにイベントとして取得可能です。
イベント処理の一例をまとめます。
- ボタンのクリックやダブルクリック
- ポップアップウィンドウ
- 検索機能などフォームの送信
- テキスト選択
- フォーカスの移動
- フォームの入力値、選択の変更時
- キーボードからの入力
- ソート機能
- マウスオーバーや離した時
- マウスの移動
- マウスのドラッグ＆ドロップ
これ以外にも多数のイベントがあり、ユーザー操作に応じて幅広い処理を自由に追加することが可能です。
3.リアルタイム通信を実現する
リアルタイム通信を担う技術に非同期通信があります。
アプリケーションが非同期通信を装備している場合、サーバーからの応答を待たなくても処理を進めることができるので便利です。
Webページ内でマウスや表示を動かすと、時差を置かずに画面が更新されるGoogle Map、リアルタイムで更新していく為替表記、株価のグラフなどにも使われています。
JavaScriptの上級編では、次のようなより複雑なプログラムも実装可能です。
- 2D・3Dアニメーショングラフィック
- Google ChromeやFirefoxの拡張機能
- Web上で操作できるゲーム
- アプリケーション制作
上記に挙げたものはほんの一例であり、Webサイトに関する幅広い作業ができます。
JavaScriptのコードの書き方
JavaScriptのコードの書き方について大まかにご説明していきます。
JavaScriptはHTMLを操作できるプログラミング言語ですが、2つは異なる言語であるため、特定のルールに沿ったコード入力が必要です。
JavaScript のコードの書き方は大きく分けると下記の2つに分かれます。
- 直接定義
- 外部定義
プログラムの種類や目的に合わせて選択して使うことになります。
1.直接定義
HTMLファイルに直接JavaScript のコードを書いていく方法を、直接定義といいます。
TMLファイルの中に<script>タグを挿入するだけとシンプルで、作成したファイルは名前の後に「.html」をつけるとHTMLとして保存可能です。
直接定義の書き方は読み込みが早いというメリットがありますが、HTMLとJavaScriptが混在しファイル管理が難しくなってしまいます。
そのため、小規模なプロジェクトやテスト、他人と共有しないものに使われれることが多いです。
2.外部定義
外部定義は、HTMLにはファイルの読み込みだけを指示し、外部のファイルにJavaScriptのコードを書く方法です。
変更があった際に何度も書き直す必要がなく、編集が楽になるというメリットがあります。
外部定義の場合は、<script>タグにsrc属性指定が必要です。
src属性は世界中のサーバーのURLを指定することが可能なので、外部サーバーからでも読み込むことはできます。
ファイル数が多くなると読み込みスピードが遅くなるデメリットはあるものの、JavaScriptを何度も書く必要がなく、ファイルの再利用もしやすい方法です。
現在は、大規模なプロジェクトやライブラリなど他人と共有するものなど幅広く採用されています。
JavaScriptの配列作成法
文字列や真偽値を組み合わせて使う時に必須の、JavaScriptの配列作成方法について解説していきます。
配列
JavaScriptの配列は、いくつかの値をまとめておくためのデータ構造で、番号を使ってデータにアクセスします。
例）
- var a =[7,11,19]
数値をはじめ文字列、真偽値なども右側に入れることが可能です。
オブジェクト
オブジェクトは「ものの名前」でアクセスするために使われます。
配列では番号を使ってアクセスしましたが、オブジェクトの場合名前でアクセスができるため、データの順序にとらわれない構造です。
条件文
プログラムの実行フローを変えるための指示は、条件文で行います。
JavaScriptのプログラムは、上から順番に実行されるようになっていますが、条件文で自由に変更が可能です。
if文やif-else文は、条件文の結果に応じて実行フローを変えるためのコードで、case分けが多い場合はswitch-case文を使用する方法もあります。
if文ではすべての分岐を辿って進みますが、switch-case文では直接caseに飛ぶことができて効率的です。
例）
- var a = 1;
- switch(a) { // aが
- case 0: // 0であるとき実行
- a++;
- break;
- case 1: // 1であるとき実行
- a–;
- break;
- default: // どれにも当てはまらなければ実行
- a = 0;
- break;
- }
JavaScriptで数値を表示させる方法
数値を表示させる方法を解説していきます。
数値の書き方
数値の書き方は複数あり、10進数を使うのが一般的です。
ただし、JavaScriptには整数という概念がないので、すべて実数として扱われます。
例）
- 18; // 10進数の整数
数値を扱う演算
演算には主に次のような種類があります。
- 算術演算：足し算、引き算など
- ビット演算：ビット単位での論理演算、シフト演算
- 代入演算：変数に値を入れ、他の演算と組み合わせる
- インクリメント：変数の値を1増やす
- デクリメント：変数の値を1減らす
JavaScriptで文字列を表示させる方法
JavaScriptで文字列を表示させる方法についてです。
文字列の書き方
Webページに文字列を表示する方法は複数あり、JavaScriptを使用し文字列を表示する場合、「document.write」や「innerHTML」を使います。
JavaScriptでは、文字列の表示を制御できる上、HTMLタグを含めて文字列を表示することも可能です。
文字列の長さ指定
基本の文字列は、ダブルクオーテーション（”）かクオーテーション（’）で囲みます。
特殊な文字
改行など特殊な文字を挿入する場合は、バックスラッシュ（\）を先頭につけた特殊文字を用います。
例）
- “\n”; // 改行文字
- “\t”; // タブ
文字列の長さ
文字列の長さは、文字列の後に「.length」を付けて指定します。
文字列の結合・分割
複数の文字列を、結合または分割（切り出し）することも可能です。
分割の場合は区切り文字が必要で、文字列の後に「.split(区切り文字の文字列)」と挿入することで、区切り文字を使って文字列を分割できます。
真偽値
真偽値は、正しいか間違っているか、という「true/false」を表すために使われ、次のように書きます。
例）
- true;
- false;
比較演算の結果として使用される表記です。
JavaScriptのブラウザ上のしくみ
現在では、Web上に存在するほぼすべてのWebページでJavaScriptが使用されています。
そのため、何らかの理由によってJavaScriptが無効になっていると、Webページ内の機能やコンテンツが制限される可能性も否めません。
JavaScriptでAPIを呼び出す
API（Application Programming Interface）は、プログラミング言語によって提供される構造のひとつ。
開発者が複雑な機能を簡単に作成するために使われます。
複雑なコードを抽象化し簡潔な構造を提供するシステムです。
プログラムから特定の条件を指定しAPIにアクセスすることで、必要なデータだけをピックアップすることができます。
API経由で情報を取得できる仕組みがあることで、情報提供側のデータ処理方法や格納方法が変わっても、アクセスする側に影響が出ない点もメリットです。
JavaScriptでは、APIを呼び出すのに「XMLHttpRequest」を使用します。
JavaScriptとDOM
JavaScriptを構成する要素のひとつに、DOM（Document Object Model）があります。
WebページとJavaScriptなどプログラミング言語を紐付ける重要な役割があり、プログラムからHTMLやXMLを操作するのに欠かせない仕組みです。
DOMによって、ブラウザ上での文字の色やサイズ、Webページの外観などを変更できます。
ファイル上の特定部分だけを指定して、具体的にどのような処理をするのかという取り決めが可能です。
HTMLにおけるエレメントやタグなどの要素は、DOMでの読み方はノードと読んでいます。
ノーは階層構造を取り、特定のノードの上にある親ノード、下にある子ノード、同一階層にある兄弟姉妹ノードによる構成です。
各ノードを取得、あるいは削除する、といった使われ方をします。
JavaScriptの実装について
JavaScriptの実装についてご説明します。
JavaScript（JS）とHTML
Web上でJavaScriptを使う方法には、HTML上で動かす方法と、外部ファイルとして読み込む方法の2パターンがあります。
HTML上で動かすやり方としては、「index.html」というファイルに直接記述する方法です。外部ファイルに記述してHTMLファイルから読み込む方法もあります。
サーバーサイドとクライアントサイド
サーバーサイドとは、アプリケーションを提供する側がプログラムを実行することを意味します。
クライアントサイドとは、クライアント側のパソコンやスマホなどに搭載されているWebブラウザのことです。
アプリケーションを実際に実行するのに利用されます。
インターネットを介して提供されたサービスをクライアントが利用する場合は、クライアントサイドのアクションという意味です。
両者で使用するプログラミング言語は異なり、JavaScriptで実装されているのはクライアントサイドで、サーバーサイドではPHPやJava、Rubyなどが使われています。
気になるJavaScriptの豆知識
JavaScriptとECMAScriptの関係
JavaScriptは、Netscape Communications社によって開発されたプログラミング言語です。
後に幅広い対応力と機能が認められたため、欧州欧州電子計算機工業会（ECMA: European Computer Manufacturers Association）によって標準化が図られました。
結果、ECMAScriptと呼ばれる標準規格として世界的に利用されています。
JavaScriptとJavaの関係
JavaScriptとよく似た言葉に、Javaがあります。いずれもC言語と呼ばれる部類に属しており親しいものと思われがちですが、実際はまったくの別物です。
JavaはSun Microsystems社が開発したプログラミング言語なので、JavaScriptと混同しないように注意しましょう。
まとめ
JavaScriptはWebサイト関連で幅広く取り入れられているプログラミング言語です。
情報量が多いため最初は難しく感じるかもしれませんが、取り扱えるようになると多数のプログラムを実装できるようになります。
JavaScriptの基本を身につけて、日々のプログラミングに役立ててください。
