今回はJavaScriptのための入門講座です。
今では、ほとんどのWebサイトでJavaScriptが使われています。
WebデザイナーでもJavaScriptができるようになると仕事の幅が広がります。
Contents
JavaScriptを書く準備
JavaScriptを書く準備をします。
テキストエディタの用意
JavaScriptを書くためのテキストエディタをインストールしましょう。すでにインストールしている人は飛ばしてください。
初心者におすすめのテキストエディタは、Visual Studio Codeです。
日本語で使えて、面倒な初期設定も必要ありません。すぐに始められます。
エディタは他にも色々あるので、時間がある時に調べてみてください。
おすすめのブラウザ
今回は、Google Chromeを使って解説します。
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が使える場面はとても広がりました。
慣れてくると奥の深さにハマってしまうと思います。そうなるまで頑張って学習してみましょう。
他にもこんな記事を書いています。


コメントを残す