テクノロジー

2022年7月22日

初めてのJavaScript

developerツールのコンソール、HTMLファイルを使ったJavaScriptの実行ができるようになる / JavaScriptの記述のルールを理解する

目次

1. なぜJavaScriptを学ぶのか
2. 初めてのJavaScript
3. 演算子や制御構文はなんのためにあるのか
4. 四則演算の演算子と変数
5. 数値と条件分岐を使って簡単なプログラムを書いてみよう
6. 繰り返し構文のwhile/for
7. JavaScriptの関数とは
8. デバッグに慣れよう
9. 簡単なイベントを実行してみよう

*上記のリンクにアクセスすることで、続きをDIVER Learningsで確認できます。

ゴール

  • developerツールのコンソール、HTMLファイルを使ったJavaScriptの実行ができるようになる
  • JavaScriptの記述のルールを理解する

JavaScriptの実行方法

JavaScriptを実行するにはいくつかの方法があります。

  1. developerツールのコンソールで実行
  2. HTMLに埋め込んでWebブラウザで実行
  3. 外部jsファイルを作成してHTMLで読み込んで実行
  4. Node.jsの対話モードで実行
  5. 外部jsファイルを作成してNode.jsで実行

上記の方法のうち、4と5は主にサーバサイドJavaScriptの実行方法であり、Googleが開発したJavaScriptの実行環境である Node.js を使います。
JavaScriptの基本的な文法や使い方を学ぶ際には必要ないので、今回は1から3までの方法でJavaScriptを実行してみましょう。

developerツールのコンソールで実行

まず、1. developerツールのコンソールで実行 をやってみましょう。
Chromeのdeveloperツールには Console というJavaScriptを実行できるツールがあります。
実際にクライアントサイドJavaScriptで開発を行う際には、デバッグにも役立つツールです。

developerツールを開き、Consoleを選択します

Image from Gyazo

ここに、簡単なプログラムを入力してみます。

> 1 + 2

このように計算式を入力してEnterを押すと、次の行に”3”と表示されます。

Image from Gyazo

次は、以下のように入力してみます。

> console.log("Hello, JavaScript")

Enterを押すと、次の行に”Hello, JavaScript”と表示されます。

Image from Gyazo

console.log()は、Consoleの画面に()の中の値を出力します。
最後の行に出力されている”undefined”は”定義されていません”と言う意味であり、最後に実行された式の結果の値です。現時点では気にしなくても大丈夫です。

HTMLに埋め込んでWebブラウザで実行

HTMLファイルの準備

次に、2. HTMLに埋め込んでWebブラウザで実行です。
クライアントサイドJavaScriptでは、HTMLファイルからJavaScriptを実行します。
今回は、HTMLファイルに直接JavaScriptを記述します。

ここからは、JavaScript学習用のディレクトリを作成して記述していきます。
ホームディレクトリに”javascript_sample”というディレクトリを作成し、中にindex.htmlというHTMLファイルを作成します。

index.htmlには、以下のコードを書き込んで保存しておきましょう。

[/index.html]

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
     JavaScript
  </body>
</html>

index.htmlファイルをブラウザで表示すると、”JavaScript”という文字が表示されます。

Image from Gyazo

scriptタグでJavaScriptを記述

HTMLファイルの中にJavaScriptを記述するには<script>タグを使用します。
<body>タグの最後に<script>タグを挿入し、<script> ~ </script>の中にJavaScriptを記述します。
その際、一行の終わりには終わりを示す”;“(セミコロン)を記述するようにします。

[index.html]

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
     JavaScript
     <!-- 以下を追加 -->
     <script>
        console.log("Hello, JavaScript");
    </script>
  </body>
</html>

ブラウザを再読み込みすると、developerツールに”Hello, JavaScript”と表示されているのが確認できます。

Image from Gyazo

外部jsファイルを作成してHTMLで読み込んで実行

今度はHTMLファイルに直接記述せず、JavaScriptファイルを作成して読み込んでみます。
javascript_sampleディレクトリに”sample.js”というJavaScriptファイルを作成します。
sample.jsも以下のように記述します。

[sample.js]

console.log("Hello, JavaScript");

外部のJavaScriptファイルをHTMLから読み込む際も<script>タグを使用しますが、対象のJavaScriptファイルをsrc属性に記述する必要があります。

<script type="text/javascript" src="JavaScriptファイルのパス"></script>

今回は以下のような記述になります。

[index.html]

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
     JavaScript
     <!-- 以下を追加 -->
     <script type="text/javascript" src="sample.js"></script>
  </body>
</html>

この状態でブラウザを再読み込みしても、developerツールに”Hello, JavaScript”と表示されているのが確認できます。
<script>タグやJavaScriptファイルにコードを記述する時は文末に”;“(セミコロン)を記述するのを忘れないようにしましょう。

今度はsample.jsを以下のように書き換えてみましょう。

[sample.js]

alert("Hello, JavaScript");

ブラウザを再読み込みすると、このようなアラートポップアップが表示されます。

Image from Gyazo

alert()は、このようにブラウザに()の中の値をアラートとして表示します。

このように、JavaScriptの実行にはいくつかの方法がありますが、簡単な演算の確認などはdeveloperツールを使い、複数行のプログラムを記述する場合はJavaScriptファイルを読み込んで実行する方法で学習していきます。
クライアントサイドJavaScriptの開発では、主にJavaScriptファイルを読み込んで実行する方法が取られます。

JavaScript記述のルール

文末にはセミコロン

JavaScriptでは一つの文の最後をセミコロンで終了します。

(例)

console.log("Hello, JavaScript");

上記のプログラムは、一つの文になっています。文の最後を示すものがセミコロンですので、忘れないようにしましょう。
セミコロンを使うと、改行せず続けて文を記述することもできます。

(例)

console.log("Hello, JavaScript"); alert("Hello, JavaScript");

可読性を上げるため、一つの文をセミコロンで終了したら改行するのが一般的です。
ただし、このあと学習する構文の中には、並べて記述する方が一般的なものもあります。

複合文は{}で表す

JavaScriptではいくつかの文を囲んで処理をまとめることが多くあります。その場合は{}を使って複合文として文をまとめます。
複合文の文末にはにはセミコロンはつけません
また{}を使う場合、以下の例のように改行を入れた上で、中の文にはインデントをつけるようにします。

{
  console.log("Hello, JavaScript");
  alert("Hello, JavaScript");
}

コメントアウト

  • 1行コメントは//の後に書く
    ソースコードとしては認識させず、プログラムの注釈として記述しておきたいコメントは、以下のように//を使って記述します。
// コメント
alert("Hello, JavaScript"); // コメント
  • 複数行コメントは/**/で囲む
    複数行をまとめてコメントとしたい場合は/**/で囲みます。
/*
ここから始まる文章をまとめてコメントアウトします。
コメント
ここまでがコメントでした
*/

まとめ

  • クライアントサイドJavaScriptの実行にはdeveloperツールでの実行、HTMLファイルに直接記述しての実行、JavaScriptファイルをHTMLファイルに読み込んでの実行がある。
  • クライアントサイドJavaScriptの開発では、主にJavaScriptファイルを読み込んで実行する方法が取られる。
  • サーバサイドのJavaScriptの実行にはNode.jsが使用される。

関連記事

次回:3. 演算子や制御構文はなんのためにあるのか
前回:1. なぜJavaScriptを学ぶのか

*上記のリンクにアクセスすることで、続きをDIVER Learningsで確認できます。

ダイビックのことをもっと知ってみませんか?