カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

1-1

JavaScriptの基礎

JavaScriptの基礎

この章ではJavaScriptの基本的な書き方や機能を学びます。
家計簿アプリを作り始める前に、まずはJavaScriptの基本を学ぶところから始めましょう。

JavaScriptでできること

WEBプログラムは大きく分けてクライアントサイドプログラム(フロントエンド)とサーバーサイドプログラム(バックエンド)の2種類に分けられます。

JavaScriptはクライアントサイドプログラムで、主にブラウザ上で動作するプログラミング言語です。

PHPやPythonはWEBサーバー上で動作するサーバーサイドプログラムにあたります。

image

たとえば下記のような用途でJavaScriptが使われます。

  • 入力フォームの入力不備チェック
  • 数字の計算
  • ダイアログの表示
  • データの一時保存
  • グラフの生成
  • etc

上記のようにWEBページでHTMLとCSSでは実現できない数字の計算やフォームの操作などをするために多く利用されます。

この教材で作る家計簿アプリでもこれらの機能を利用して開発をします。

JavaScriptの実行方法

任意のフォルダにhello.htmlファイルを作成してください。

作成できたらVS Codeで以下のコードを記述してください。

hello.html
1234567891011
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へ以下のようにドラッグしてください。

image

hello.htmlファイルがブラウザで開かれ、以下のように「Hello World」の文字が表示されます。

image

コードの説明をします。

html
123
Copied!
<script> document.write("Hello World"); </script>

JavaScriptのプログラムはscriptタグの中に記述します。

document.write()""の中に書かれた文字を表示するJavaScriptのプログラムです。

JavaScriptの命令の末尾には;(セミコロン)をつける必要があります。末尾にセミコロンをつけることで、その行のプログラムはそこで終わりであることを意味します。お作法として覚えておきましょう。

jsファイルの外部読み込み

JavaScriptのプログラムはHTMLファイルとは別のファイルにして実行できます。

HTMLとJavaScriptのプログラムを両方ひとつのhtmlファイルに書いてしまうと、開発が進んでコードが長くなった時に、読解しにくいコードになってしまいます。
それを避けるためにJavaScriptのコードはHTMLとは別のファイルに記述できます。

外部ファイルにするには.jsの拡張子を付けたファイルにJavaScriptのプログラムを書きます。

下記のようにVS Codeでhello.jsを作成し、hello.htmlを書き換えてみましょう。

image

hello.jsファイルを作成できたら、以下のように編集してください。

hello.js
123
Copied!
function hello(){ document.write("Hello World"); }

続いてhello.htmlファイルを以下のように編集してください。
-が表示された行は削除して、+が表示された行のコードに書き換えてください。

hello.html
12345678910111213
+ -+
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個記述するとその行がコメントアウトされ、プログラム内にコメントを残すことができます。

js
12
Copied!
// 「Hello World」と表示する document.write("Hello World");

複数行をコメントアウトしたいときは/* ●●● */でコードやテキストを囲みます。

js
12345678910
Copied!
/* 関数名:hello 引数:なし 戻り値:なし 機能:「Hello World」を表示する */ function hello(){ document.write("Hello World"); }

このように、ここに書かれているコードが何を意味するのか後から見てわかりやすくするために、コメントを残しておくことができます。

プログラムの規模が大きく複雑になるほどわかりやすくコメントを残すことが重要になってきます。

この教材のプログラムでもコメントアウトはたくさん使っています。

便利な機能なので活用していきましょう。

コードの編集箇所の表記について

本教材でHTMLやJavaScriptのコードの解説をするにあたり、コードの編集箇所の指示に+-の表記をします。

それぞれ以下のように編集をしてください。

なお、実際に編集するコードに+-は記述する必要ありません。

追記する

+の表記された行を追記します。

js
123
Copied!
function hello(){ + document.write("Hello World"); }

書き換える

-の表記の行を+の表記の行のように書き換えます。

(『Hello World』を『こんにちは世界』に書き換える)

js
1234
Copied!
function hello(){ - document.write("Hello World"); + document.write("こんにちは世界"); }

以上のようにコードの編集箇所を指示していますので、+-の表記について覚えておいてください。

現在のパート (0)
全パート (20)
みんなで助け合おう!
現在のパートのディスカッション 全0件