本記事ではJavaScriptについてまとめていきたいと思います。
ここでは前提として端末はWindows、ブラウザはchrome、テキストエディタはVScodeを使用していきます。
まずJavaScriptとは何かについて説明します。
JavaScript
…HTMLやCSSと組み合わせて、動的なウェブページを作成することができます。
例えば、ボタンをクリックしたときに表示内容を変えたり、
文字の入力中に入力内容をチェックする等フォームに情報を送信しない状態で
動作するようなあらゆる仕掛けをページ内に作成することができます。
JavaScriptの記載箇所
まず、JavaScriptを使用するために準備をします。
簡単にですが、HTMLのファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>テスト</title>
</head>
<body>
<p>テスト</p>
</body>
</html>
まず、HTMLに埋め込む記述方法でJavaScriptを記載してみます。
このscriptタグの中にコードを書く方法は、使用するJavaScriptのコードが少ない場合などに用いられることが多いです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>テスト</title>
</head>
<body>
<p>テスト</p>
</body>
<script>
console.log("JavaScriptのテストです")
</script>
</html>
console.log()
…このメソッドはJavaScriptでデバッグや情報を表示する際に使用されるメソッドです。
指定したメッセージや確認したい変数の値をブラウザのコンソールに出力することができます。
実際にブラウザからJavaScriptの内容が実行できているか確認しましょう。
実行方法は様々ありますが、下記の手順で確認ができます。
①：エクスプローラーで該当ファイルを右クリック
②：「開く」をクリックしてブラウザでファイルを開く
※開くときはHTMLファイルを開いてください。
example.htmlをブラウザで実行し、F12キーを押下して「デベロッパーツール（Devツール）」を開き、「コンソール」をクリックします。
このように、コンソールに先ほど記述したJavaScriptのコードが反映されていればOKです。
先ほどはHTMLファイルにJavaScriptを埋め込むように記述しましたが、
次はJavaScriptのファイルを作成して記述してみます。
jsファイルを準備し、下記のように記述します。
'use strict';
'use strict';
…この記述はJavaScriptにおいて厳格にエラーチェックを行ってくれます。
例えば、変数を未定義のまま使用するとエラーを表示したり、関数で使用されるパラメータ名が重複している場合などはエラーになります。
安全で的確なJavaScriptのソースを書くために欠かせない記述です。
HTML側でJavaScriptを読み込むために、scriptタグの記載を書き換えます。
<script src="common.js"></script>
このように記述することによって、同階層のcommon.jsを読み込むことができます。
次にcommon.js側で下記のように記載してコンソールを確認してみましょう。
'use strict';
console.log('common.jsを読み込んで表示しています。')
無事HTMLファイルからJavaScriptファイルを読み込み、文字列を表示することができました。
JavaScriptのエラーについて
例えばもしJavaScriptを使用してうまく動作しなかった場合、コンソールにエラーが表示され正常に動作しなくなります。
下記の「)」を削除したコードで確認してみましょう。
"use strict";
console.log("common.jsを読み込んで表示しています。";
するとこのように英語でエラーの内容が記述されています。
簡単に訳しますが「)」の記述がないことを警告しています。
もし表示されている英語がわからない場合はGoogle翻訳等を頼ってエラー内容を解析するのも一つの手です。
JavaScriptのコメントアウト方法について
JavaScriptにおけるコメントアウトの方法としては２種類あります。
（コメントをどのように記述するかに関してはプロジェクトごとに異なります。）
"use strict";
// testtesttest（１行に対してのみ使用ができる）
/*testtesttesttesttest（複数行に対して使用ができる）
testtesttesttesttest*/
「//」を用いると１行コメントアウトします。（複数行には使用不可）
「/* */」を用いると複数行コメントアウトします。（１行でも使用可）
このように必要ないソースコードや、説明等をコメントアウトすることができます。
JavaScriptの演算について
JavaScriptはJavaやRuby等と同様に演算を行うことができます。
簡易的ですが下記でご紹介いたします。
| 演算子 | 説明 |
|---|---|
| + | 加算演算子。足し算。 |
| - | 減算演算子。引き算。 |
| / | 除算演算子。割り算。 |
| * | 乗算演算子。 掛け算 |
| % | 剰余演算子。 割り算の余り。 |
| ** | べき乗演算子。左辺を右辺の回数掛ける。 |
下記のソースコード例で確認してみましょう。ちなみにconsole.logは計算結果も表示することができます。
'use strict';
console.log(12+5);
console.log(12-5);
console.log(12/5);
console.log(12*5);
console.log(12%5);
console.log(12**5);
結果は上から順にこのようになります。
ここまででJavaScriptの基本的な使用方法についてまとめてきました。
次回の記事では変数の定義方法等、ご紹介する予定です。
参考: JavaScript[完全]入門(https://www.amazon.co.jp/JavaScript-%E5%AE%8C%E5%85%A8-%E5%85%A5%E9%96%80-%E6%9F%B3%E4%BA%95%E6%94%BF%E5%92%8C/dp/481560763X)