教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
この章ではJavaScriptの基本的な書き方や機能を学びます。
家計簿アプリを作り始める前に、まずはJavaScriptの基本を学ぶところから始めましょう。
WEBプログラムは大きく分けてクライアントサイドプログラム(フロントエンド)とサーバーサイドプログラム(バックエンド)の2種類に分けられます。
JavaScriptはクライアントサイドプログラムで、主にブラウザ上で動作するプログラミング言語です。
PHPやPythonはWEBサーバー上で動作するサーバーサイドプログラムにあたります。
たとえば下記のような用途でJavaScriptが使われます。
上記のようにWEBページでHTMLとCSSでは実現できない数字の計算やフォームの操作などをするために多く利用されます。
この教材で作る家計簿アプリでもこれらの機能を利用して開発をします。
任意のフォルダにhello.html
ファイルを作成してください。
作成できたらVS Codeで以下のコードを記述してください。
hello.html1234567891011 Copied!<!DOCTYPE html>
<html>
<head>
<title>JavaScript Sample</title>
</head>
<body>
<script>
document.write("Hello World");
</script>
</body>
</html>
上記のscriptタグの中の記述がJavaScriptのプログラムです。
HTMLファイル内に書かれたJavaScriptのプログラムは、そのHTMLファイルをブラウザで開くと実行できます。
記述できたらhello.html
ファイルをChromeへ以下のようにドラッグしてください。
hello.html
ファイルがブラウザで開かれ、以下のように「Hello World」の文字が表示されます。
コードの説明をします。
html123 Copied!<script>
document.write("Hello World");
</script>
JavaScriptのプログラムはscript
タグの中に記述します。
document.write()
は""
の中に書かれた文字を表示するJavaScriptのプログラムです。
JavaScriptの命令の末尾には;
(セミコロン)をつける必要があります。末尾にセミコロンをつけることで、その行のプログラムはそこで終わりであることを意味します。お作法として覚えておきましょう。
JavaScriptのプログラムはHTMLファイルとは別のファイルにして実行できます。
HTMLとJavaScriptのプログラムを両方ひとつのhtmlファイルに書いてしまうと、開発が進んでコードが長くなった時に、読解しにくいコードになってしまいます。
それを避けるためにJavaScriptのコードはHTMLとは別のファイルに記述できます。
外部ファイルにするには.js
の拡張子を付けたファイルにJavaScriptのプログラムを書きます。
下記のようにVS Codeでhello.js
を作成し、hello.html
を書き換えてみましょう。
hello.js
ファイルを作成できたら、以下のように編集してください。
hello.js123 Copied!function hello(){
document.write("Hello World");
}
続いてhello.html
ファイルを以下のように編集してください。
-
が表示された行は削除して、+
が表示された行のコードに書き換えてください。
hello.html12345678910111213 + -+ Copied!<!DOCTYPE html>
<html>
<head>
<title>JavaScript Sample</title>
<script src="./hello.js"></script>
</head>
<body>
<script>
document.write("Hello World");
hello();
</script>
</body>
</html>
実行結果は先ほどと同じですが、実行しているプログラムの書かれている場所が異なります。
hello.js
ファイルではfunction hello()
の記述があります。詳しくは1章で解説しますが、これは関数(メソッド)と呼ばれるものです。この関数の中に「Hello World」を表示するプログラムが書かれています。
そしてhello.html
からhello.js
に記述されたhello
関数を呼び出して実行することで「Hello World」と表示しています。
hello.js
に記述したプログラムをhello.html
側から呼び出して実行する仕組みになっています。
コメントアウトとはプログラムの中にメモを残す機能です。
コメントアウトしたテキストやコードはプログラムとして認識されなくなります。
エラーの発生するコードをコメントアウトして一時的に無効して原因調査などに利用することもあります。
HTMLでは<!-- ●●● -->
のように記述してタグやテキストを囲むことでコメントアウトができました。
JavaScriptではコメントアウトの機能は2種類あります。
以下のように行頭に// ●●●
のようにスラッシュを2個記述するとその行がコメントアウトされ、プログラム内にコメントを残すことができます。
js12 Copied!// 「Hello World」と表示する
document.write("Hello World");
複数行をコメントアウトしたいときは/* ●●● */
でコードやテキストを囲みます。
js12345678910 Copied!/*
関数名:hello
引数:なし
戻り値:なし
機能:「Hello World」を表示する
*/
function hello(){
document.write("Hello World");
}
このように、ここに書かれているコードが何を意味するのか後から見てわかりやすくするために、コメントを残しておくことができます。
プログラムの規模が大きく複雑になるほどわかりやすくコメントを残すことが重要になってきます。
この教材のプログラムでもコメントアウトはたくさん使っています。
便利な機能なので活用していきましょう。
本教材でHTMLやJavaScriptのコードの解説をするにあたり、コードの編集箇所の指示に+
と-
の表記をします。
それぞれ以下のように編集をしてください。
なお、実際に編集するコードに+
と-
は記述する必要ありません。
+
の表記された行を追記します。
js123 Copied!function hello(){
+ document.write("Hello World");
}
-
の表記の行を+
の表記の行のように書き換えます。
(『Hello World』を『こんにちは世界』に書き換える)
js1234 Copied!function hello(){
- document.write("Hello World");
+ document.write("こんにちは世界");
}
以上のようにコードの編集箇所を指示していますので、+
と-
の表記について覚えておいてください。