プログラミング中部大学2025年春期

Javascriptによるプログラミング1

Javascriptの学習環境を整える

プログラムの開発にはソースコードを編集するエディタ(editor)とプログラムをテストする環境が必要である。それらを用意して、使用できるようにする。

エディタ

テキストエディタ(単にエディタともいう)はプログラムのソースコードを編集するためのソフトウェアである。プログラムのソースコードは一般にテキストというファイル形式になっていることが多く、どのエディタで編集しても構わない。 Windowsにはメモ帳という名のテキストエディタがあり、WORDでもテキストファイルを編集することができるが、それらはプログラムのソースコードを書くときに便利な機能を備えていないので、プログラミング用のエディタを使用したほうがよい。

エディタには様々な種類があるが、今回はVisual Studio Codeを紹介する。インストールはMicrosoft Storeから行うことができる。

Visual Studio Codeのメニューは英語になっているが、日本語にすることもできる。「Visual Studio Codeを日本語化する」を参考にしてください。メニューの日本語化とJavascript中の日本語とは無関係です(メニューを日本語化しなくても日本語の編集はできます)。

ブラウザー

Javascriptのデバッグ(プログラムの間違いを見つけ修正すること)には高機能なウェブブラウザーが必須である。今回はGoogle Chromeを使う。

このページを開いてchromeをダウンロードし、インストールを行う。

プログラム開発手順

プロジェクトのフォルダを作成する

フォルダの作成は必須ではないが、HTML、CSS、Javascriptそれぞれのファイルをばらばらに保管するよりもまとめておいたほうがよい。

Visual Studio Codeを起動する

適当な場所に適当な名前のフォルダを作成する。今回はproject1というフォルダを作成する。
デスクトップにあるVisual Studio Codeのアイコンをダブルクリックして起動する。またはWindowsのメニューからVisual Studio Codeを探して起動する。
Visual Studio Codeのメニュー「ファイル」-「フォルダを開く...」をクリックする。
先ほど作成したフォルダを探し、フォルダを選択した状態で「フォルダーの選択」ボタンをクリックする。
以下のような画面がでた場合、YesでもNoでもどちらを選択してもよい(Noを推奨)。 Yesの場合、フォルダ内のファイルはプログラムの一部として実行されることを承認するが、Javascriptはウェブブラウザー上で動作するのでウィルスのようになることはない。
Visual Studio Codeのメニュー「ファイル」-「新規テキストファイル」をクリックするかCtrl + Nキーを押す。untitled-1というタブが作られることを確認する。

untitled-1に以下のHTMLのコードを入力する。

<!DOCTYPE HTML>
<html lang='ja_JP'>
<body>
<script type='text/javascript'><!--
  document.write("Hello world");
--></script>
</body>
</html>

Visual Studio Codeのメニュー「ファイル」-「保存」をクリックするか、Ctrl + Sキーを押す。 sample1.htmlという名前でproject1フォルダに保存する。 sample1.htmlという名前のsample1の部分は適当でよい。

chromeを起動する

Google chromeを起動して、sample1.htmlを開く。

デスクトップにあるchromeのアイコンをダブルクリックして起動する。またはWindowsのメニューからchromeを探して起動する。
Ctrl + Oキーを押して、sample1.htmlファイルを開く。またはchromeのウィンドウにsample1.htmlファイルをドロップする。
以下のように表示されることを確認する。

プログラムを修正する

Visual Studio Codeのsample1.htmlの「Hello world」を「初めてのJavascript」に修正する。
Ctrl + sキーを押して、変更を保存する。
chromeを選択し、F5キーを押してページを再読み込みする。文字が変わったことを確認する。
以後はVisual Studio Codeで編集、保存したあと、chromeでページの再読み込みをして動作を確認するということを繰り返して、プログラムを完成させる。

Javascriptのデバッグ

Javascriptが思うように動作しないときは原因を追究し、それを修正する必要がある。これをデバッグと呼ぶ。

デバッグにはchromeのデベロッパーツールが役に立つ。

sample1.htmlの document を documen にして、保存する(documentと書くところを間違えたことにする)。
chromeのデベロッパーツールを起動する。
デベロッパーツールが画面の右に表示される場合は図のようにすると下に表示することができる。各自のコンピュータの画面サイズに応じて、使いやすく配置するとよい。
デベロッパーツールの右に赤地に白のばつが表示されていて、エラーがあることがわかる。 Consoleをクリックするとエラーメッセージが表示される。今回の原因は「documen is not defined」であることがわかる。コンピュータにとってdocumenがわからないという意味で、変数や関数の名前を間違えたときに起きることが多い。 sample1.html:5とあるのは5行目にエラーの原因があることを示している。
sample1.htmlの5行目のdocumenをdocumentに修正し、chromeで再読み込みを行うとエラーが表示されなくなることを確認する。

デバッグの練習

次のようにわざとJavascriptを間違えたときにどのようなエラーがでるのかを確認する。同時にエラーとなっている行をみて、編集した行との違いがないか調べる。

5行目の document.write を document..write にしたとき(.を余分につけた)。
5行目の .を,(カンマ)と書き間違えたとき。
5行目の )を削除したとき(()を閉じ忘れた)。
4行目の <script を script にしたとき(<を入力し忘れた)。

課題

ブラウザーに「Hello ○○」(○○の部分は自分の名前に置き換えること)と表示させるJavascriptを含むHTMLファイルを作成し、それを提出せよ。

プログラミング 中部大学2025年春期