初心者向け学習方法一覧はこちら
はじめに
JavaScriptはプログラム言語の1つで、1行ずつ順番にプログラムを実行するスクリプト言語に分類されます。プログラムの実行結果を細かく確認できるため、プログラミングの勉強を始めたばかりの方にもおすすめです。
また、Webサイトにアクセスのたびに結果が変化する動的コンテンツを作る上ではかかせない言語で、ほぼすべてのWebサイトで使われています。
本記事ではJavaScriptを勉強するための環境の準備をして、実際に簡単なコードを書いて実行するところまでを説明します。
JavaScriptの概要
JavaScriptはインターネットにおいて最も欠かせない言語といっても過言ではありません。HTMLのみで記述したWebページは動きのない静的なコンテンツのみですが、そこに動きのある動的なコンテンツを実装するためにJavaScriptが使われるようになりました。
公開されているWebサイトの9割以上にJavaScriptが使用されているとも言われています。現在ではブラウザ上で動作するだけではなく、サーバーサイドでの処理を行ったりアプリケーションの作成にも使われるようになっています。
JavaScriptはプログラム初心者におすすめ
JavaScriptはメモ帳アプリでコードを記述することができ、ブラウザ上ですぐに結果を確認できるので、初心者のプログラミング学習に向いています。
他の言語ではプログラム全体をまとめて変換（コンパイル）して実行ファイルを作成する必要があるものもありますが、JavaScriptはインタプリタ方式という形式で、コードを1行ずつ解釈しながら実行します。
メモ帳でも記述できると言いましたが、実際にコードを記述する際はもっと開発しやすい環境があります。特におすすめなのがVisual Studio CodeというMicrosoftが開発したソースコードエディタです。
コードの整合性チェックなど開発するにあたって手助けとなる機能がたくさんあります。数多くのプラグインも開発されていて、自分好みにカスタマイズも可能です。
JavaScriptはどのようなことができるのか
実際にJavaScriptはどのように使われているのでしょうか？
ブラウザ上のみで動作するものとしては「ボタンがクリックされたとき」「マウスを画像などにのせたとき」「ページをスクロールしたとき」などの処理が実装できます。皆さんもWebサイトの閲覧しているときに見たことがあると思います。これらの「〜されたとき」という動作のことを「イベント」といい、ブラウザには様々なイベントが用意されています。
ボタンがクリックされたときは「onclickイベント」が発生します。クリックしたときにポップアップでメッセージを表示するなどの処理を行えます。マウスカーソルを画像などにのせたときは、「onmouseoverイベント」が発生します。カーソルを画像の上に移動すると名前などをツールチップで表示するものを見たことがあると思います。
他にもマウスカーソルが要素の上を移動した際の「onmousemoveイベント」や、マウスカーソルが要素の上から離れたときの「onmouseoutイベント」などもあります。
ページをスクロールしたときは「scrollイベント」が発生し、スクロールを縦方向横方向にどれぐらい移動したのかを検知することができます。
ブログなどで下までスクロールすると、最初は表示されていなかった「上に戻るボタン」が表示されるのはこのスクロールを検知してボタンを表示する処理を実行しているからです。
JavaScriptが活躍するのはブラウザ上だけではありません。私達がパソコンやスマートフォンからURLでアクセスするサーバーでもJavaScriptを活用することができます。サーバーで活用するJavaScriptは「サーバーサイドJavaScript」と呼ばれます。
サーバーは、私達のURLアクセスが来るまで待機し、アクセスがあった場合はその内容に応じた結果を返信する役割を担います。
結果を返信する際には、データベースで管理しているデータを集計したり、他のサーバーと連携してより高度な処理を行うこともできます。作成の手軽さから、サーバーサイドJavaScriptの利用シーンも増加してきています。
環境構築（Visual Studio Code）
ここからは実際にJavaScriptのコードを記述して動かしてみましょう。まずはおすすめのエディタであるVisual Studio Code（以下、VSCode）を準備します。VSCodeはこちらの公式サイトからインストーラーをダウンロードします。
ダウンロード後の設定については、
おすすめプラグインのインストール
VSCodeを使用してコーディングする際はプラグインをインストールするとさらに便利になります。
プラグインのインストールはVSCodeの左メニューの5番目にある拡張機能から行います。アイコンをクリックするとプラグインの検索メニューが表示されます。
インストールしたいプラグインを検索して、installボタンをクリックします。似ている名称のプラグインもありますのでアイコンを確認してからインストールしましょう。
VSCodeを使用してJavaScriptのコードを記述する際におすすめのプラグインが2つあります。
どちらもJavaScript以外でも使えるものばかりですので、ぜひ導入してみてください。
- LiveServer LiveServerは簡易的なローカルサーバを立ち上げてリアルタイムに結果を確認できるプラグインです。
- TabNine TabNineはAI技術により使用する機能の候補を表示してくれるプラグインです。 コードを記述する際に入力を補完してくれるので、正しく素早い記述が可能となります。
JavaScriptを動かしてみよう
それではVSCodeを使って実際にJavaScriptのコードを記述してみましょう。
index.htmlというファイルを作成して、まずはブラウザで表示できるHTMLファイルを記述します。VSCodeを起動して左メニューの1番上のエクスプローラーから作業フォルダを開きます。
エクスプローラー上で右クリックして新規ファイル「index.html」を作成します。
index.htmlに下記のコードを打ち込んでみましょう。 このページ内でも実行結果を確認できます。
※読み込めない場合はRun Penをクリックしてください。
HTMLはタグというもので要素を囲むことで要素の意味を定義します。<body>タグで囲まれた範囲がページ表示されるものとなります。
今回は<Style>で文字色を赤色に定義しています。redの他にも16進数表記で#FF0000など番号でも定義可能です。
HTMLやCSSについては
ファイルメニューからも行えますが、ショートカットを覚えると便利です。ショートカットはWindowsでは「Ctrl + S」、Macでは「Cmd + S」です。保存したら実際に実行してみましょう。
index.htmlファイルを右クリックして、表示されるメニューから「Open with Live Server」を選択します。
ブラウザが起動して実行結果が表示されます。
JavaScriptで計算結果を表示しよう
先ほど記述したindex.htmlにJavaScriptの要素を追加しましょう。
下記のコードを参考にindex.htmlを書き換えて、ボタンをクリックしたら計算結果が表示されるページを作成しましょう。
※読み込めない場合はRun Penをクリックしてください。
コードを書き換えたら先ほどと同じように実行してみましょう。
表示されたページの「計算するボタン」をクリックするとボタンの下にある「答えは (結果) です。」が「答えは9です」と表示が変化します。
このコードでは<button>の中で、JavaScriptのonclickイベントが発生したらcalcいう処理をまとめたコード（関数）を呼び出すようになっています。
呼び出されるcalcは<script>タグの中で定義されており、4＋5を計算した結果をanswerという引数に代入しています。
引数というのは様々な値を入れておける入れ物です。
入れ物に計算結果や文字列を入れたり、内容を呼び出して表示するという使い方をします。
この計算の内容を書き換えると表示される内容が変化します。
例えば数字を変えて5＋5にしたり、足し算以外の引き算（-）、掛け算（*）、割り算（/）の計算結果を表示することも可能です。
コードを書き換えて試してみましょう。
「document.getElementById("result").innerHTML = answer;」は何を行っているかというと、id名が”result”と定義されたものの内容を読み込んで書き換えています。
内容の書き換えを行うのがinnerHTMLです。ここでは計算結果のansewrの値に書き換えます。
”result”というid名の設定は<span id="result">という箇所です。
引数やidなどは初めて目にするかもしれませんが、JavaScriptを勉強する上でどちらも大事な要素です。
本記事では詳細な説明はいたしませんが、引数やidというものが存在することを覚えておいてください。
○×クイズを作ってみましょう
次はif文を使って条件分岐をしてみましょう。
条件分岐とは条件を定義して当てはまるときだけ特定の処理を実行できるものです。
今回は○×クイズで正解・不正解の場合で異なる処理が実行されるようにします。
※読み込めない場合はRun Penをクリックしてください。
このコードではボタンをクリックした際に、ボタンに設定されている答え（引数）を「check」という処理をまとめたコード（関数）に渡して、呼び出しています。
クイズの答えは○が正解なので、引数の値が'まる'の場合は”result”を”正解”に書き換えて、'ばつ'の場合は”result”を”間違い”に書き換えます。
最後は書き換えた”result”の内容を表示します。
if文の条件分岐はもっとたくさんの条件を定義可能です。
○×クイズだけではなく4択クイズなども作れますので、ぜひ、チャレンジしてみてください。
まとめ
今回はJavaScriptとはどのような言語なのか、どのような使い方ができるのかについて説明しました。
VSCodeを使って実際にコードを書いて動かすことで理解が深まったと思います。
次回は、
プログラミングスクールの選び方
転職を検討中の方向け
フリーランス・副業で活躍したい方向け
教養・キャリアアップしたい方向け
給付金について詳しく知りたい方向け
学習方法一覧
- はじめに
- JavaScriptの概要
- JavaScriptはプログラム初心者におすすめ
- JavaScriptはどのようなことができるのか
- 環境構築（Visual Studio Code）
- おすすめプラグインのインストール
- JavaScriptを動かしてみよう
- JavaScriptで計算結果を表示しよう
- ○×クイズを作ってみましょう
- まとめ
- プログラミングスクールの選び方
- 学習方法一覧
