初心者のためのJavaScript入門講座

今回はJavaScriptのための入門講座です。

今では、ほとんどのWebサイトでJavaScriptが使われています。

WebデザイナーでもJavaScriptができるようになると仕事の幅が広がります。

Contents

1 JavaScriptを書く準備
- 1.1 テキストエディタの用意
- 1.2 おすすめのブラウザ
2 HTMLファイルの作成
3 JavaScriptの基本
4 JavaScriptを別ファイルで読み込む
5 まとめ

JavaScriptを書く準備

JavaScriptを書く準備をします。

テキストエディタの用意

JavaScriptを書くためのテキストエディタをインストールしましょう。すでにインストールしている人は飛ばしてください。

初心者におすすめのテキストエディタは、Visual Studio Codeです。

Visual Studio Code

日本語で使えて、面倒な初期設定も必要ありません。すぐに始められます。

エディタは他にも色々あるので、時間がある時に調べてみてください。

HTMLファイルの作成

まずは、別ファイルを作らずHTMLファイル内に直接記述して説明します。

まず、sampleというフォルダを任意の場所に作成して下さい。デスクトップでも構いません。

テキストエディタで新規ファイルを作成し以下のコードを記述して、index.htmlというファイル名でsampleフォルダに保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>JavaSctiptの練習</title>
</head>
<body>
  <p>テスト</p>
  <script>
    // ここに記述していきます
  </script>
</body>
</html>

HTMLファイルに直接書かずに、別ファイルで読み込む方法は後述します。

このファイルを、「右クリック」→「このアプリケーションで開く」でGoogle Chromeを選択するか、すでに開いているGoogle Chromeに直接ドロップしてください。

これで「テスト」と書かれたページが表示されたはずです。

JavaScriptの基本

まずは、Consoleの使い方を解説します。

Consoleを開こう

Google Chrome上で右クリックして「検証」をクリックすると、下のような画面が現れます。

画像の指示にあるように、「Console」と書かれたタブをクリックしてください。

すると、以下のような画面に切り替わります。

次に、この画面に何かを出力していきます。

Hello Wordしてみよう

index.htmlを以下のように編集してください。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>JavaScriptの練習</title>
</head>
<body>
 <p>テスト</p>
 <script>
 console.log('Hello World!');
 </script>
</body>
</html>

保存して、Chromeを再読み込みしてください。

そうすると、以下のように表示されるはずです。

できましたね！

console.log('Hello World');

Consoleに何かを出力させたい時に、console.logを使います。

‘Hello World’のようにクオーテーションで囲まれた部分は文字列と言います。

“Hello World”のようにダブルクオーテーションでも大丈夫です。

例えば、以下のようなコードはエラーになります。

console.log(Hello World); // エラーになる

「Hello World」が文字列として認識されないからです。

そして、行の終わりには;(セミコロン)を記述します。

変数

次に覚えて欲しいのは、JavaScripの変数についてです。

ここからはHTMLの記述は省略して、<script>〜</script>内のコードだけを書いていきます。

var text = 'Hello World';
console.log(text);

varというのは、新たに変数を宣言するための記述です。

つまり、「textというのは変数です」という宣言です。そして、その変数に ‘Hello World’という文字列を代入しています。

JavaScriptにおいて、「=(イコール)」に等しいという意味はなく、代入という意味になります。

「’Hello Wold’という文字列が格納された変数textを宣言した」ということになります。

console.log()というコードは変数textの中に格納されている’Hello World’をConsoleに表示させます。

変数の再代入

変数にある値は、後から変えることができます。

var text = 'Hello World';
text = 'Good Bye World';

console.log(text); // Good Bye Worldが出力される

このコードのように、変数の中身は後から変更することができます。

コメントアウト

// の後にある同じ行の記述は無視されて実行されません。このように、実行されないようになっている箇所をコメントアウト言います。

複数行にまたがる場合は、/* と */で囲みます。

// 一行だけコメントアウト

/*
複数行のコメントアウト
ここに書かれいてる文章は全て実行されません。
*/

何かメモを残したい時や、一時的にコードを使用したくない場合に利用します。

数値

JavaScriptでは、数値と文字列は異なります。

例えば、

var num = 1 + 2;
console.log(num); // => 3

var string = '1' + '2';
console.log(string); // => 12

JavaScriptの「+」は、数値だったら計算を行い、文字列だったら連結します。

ですので、「1」と「2」が数値か文字列かで出力結果が異なるのです。

数値の計算（算術演算子）

お次は、数値を使った計算の仕方です。

+	加算（足し算）
–	減算（引き算）
*	乗算（掛け算）
/	除算（割り算）
%	剰余（余り）

実際に計算すると、以下のようになります。

var num;
num = 2 + 1; // => 3
num = 2 - 1; // => 1
num = 4 * 3; // => 12
num = 12 / 4; // => 3
num = 12 % 5; // => 2

+、-、*、/、%　を算術演算子と言います。

念を押しますが、JavaScriptの=は代入を意味するので、等しいという意味ではないことに注意してください。

代入演算子

代入を行う代入演算子は、=以外にもあります。

名称	短縮表記した演算子	意味
代入	x = y	x = y
加算代入	x += y	x = x + y
減算代入	x -= y	x = x – y
乗算代入	x *= y	x = x * y
除算代入	x /= y	x = x / y
剰余代入	x %= y	x = x % y

特に、加算代入や減算代入はよく使います。

var num = 10;
num += 4; // num = num + 4と同じ意味
console.log(num); // => 14

if文

次はif文です。if文は使用頻度が高いので、しっかり使い方を覚えておきましょう。

var num = 20;
if(num < 30) {
 console.log('30よりも小さいです'); //=>Consoleに出力される
}

if(num < 10) {
 console.log('10よりも小さいです'); //=>Consoleに出力されない
}

波括弧{ }で囲まれた部分をブロックと言います。

if文では、括弧の中身を評価して、当てはまる場合（true）の時にブロックの中を実行し、当てはまらない場合（false）は実行しません。

以下のように書くと、trueの場合とfalseの場合で処理を実行させることができます。

if(num > 10) {
  console.log('10より大きいです');
} else {
  console.log('10以下です')
}

ifの中を評価して、trueであれば上のブロックを実行し、falseの場合はelseの後のブロックを実行します。

if(num > 10) {
  console.log('10より大きいです');
} else if(num === 10) {
  console.log('10です')
} else {
  console.log('10より小さいです')
}

===は等しい場合にはtrueをfalseを返します。詳しくは後述します。

上のコードはif文をまず評価し、falseだった場合にelse if()の中を評価します。それでもfalseだった場合はelseの文を実行します。

比較演算子

上のコードで使われている<が、二つの値を比較する比較演算子です。

比較演算子には色々な種類があります。

等価演算子

二つの値が等しいか比較するのが投下演算子です。

console.log(2 == 2); // => true
console.log(2 == '2'); // => true

イコール二つの場合、型が異なっていている「2 == ‘2’」がtrueを返します。

型も含めた厳密な比較には、イコール三つで比較します。

console.log(2 === 2); // => true
console.log(2 === '2'); // => false

関係演算子

二つの値の大小を比較するのが関係演算子です。

演算子	意味
>	より大きい
>=	以上
<	より小さい
<=	以下

console.log(2 > 3); // => false
console.log(2 < 3); // => true
console.log(2 > 2); // => false
console.log(2 >= 2); // => true

JavaScriptを別ファイルで読み込む

HTML内に直接JavaScriptのコードを記述する方法を紹介しましたが、実際のコーディングでは別ファイルにしてそれをHTMLで読み込みます。

sampleフォルダの中に、jsというフォルダを作ります。

テキストエディタで新規作成して、以下のコードを記述します。

console.log('JavaScriptファイルを読み込みました！');

これを、「script.js」という名前で「js」フォルダ内に保存します。

そして、body要素の最後に、JavaScriptを読み込むための記述をします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<p>テスト</p>
<script src="js/script.js"></script>
</body>
</html>

これで、外部のJavaScriptファイルを読み込むことができます。

実際にHTMLを保存して、ページをリロードしてConsoleを見れば、「JavaScriptファイルを読み込みました！」という文字列が出力されているはずです。

まとめ

ここに書いた内容は基礎中の基礎ですが、とても重要なことばかりです。

JavaScriptを使えるようになるには、最低限マスターしておきましょう。

多くの文法は他のプログラミング言語に似ているので、マスターすれば他言語も覚えやすくなります。

一度できるようになればJavaScriptはとても便利で、様々な利用の仕方ができる言語です。JavaScriptが使える場面はとても広がりました。

慣れてくると奥の深さにハマってしまうと思います。そうなるまで頑張って学習してみましょう。

他にもこんな記事を書いています。

初心者のためのHTML・CSS入門講座【HTML編】

初心者のためのHTML・CSS入門講座【CSS編】