この記事は、「架空プロジェクトを通してシステム開発とドキュメント作成を体験してみる（2022 Late）」の記事の一部です。

概要

ここでは開発体験で利用するツールの紹介やインストール方法について紹介します。
また、簡単なWebページを作って、最低限の動作確認もしてみたいと思います。

このコースで利用する環境やツール

開発環境

執筆や動作テストはmacOS（Monterey）上で行っていますが、利用するツールやコードはWindowsでも問題なく動きます。

Windows版での環境構築方法や差異についてはこちらをご覧ください。

利用するツール

以下のツールを利用する予定です。

エディタ（プログラムを書くソフト）：Visual Studio Code（最新版）
ブラウザ：Google Chrome（最新版）
node.js（サーバでJavaScriptという言語を動かすソフト）：16.x（インストールは後々紹介）

node.jsのインストールについては「テストをしてみよう（単体テスト）」で改めて紹介します。

Visual Studio Code(VSCode）のインストール

では、Visual Studio Codeをダウンロードしてインストールします。

Visual Studio Codeとは
Microsoftが提供している無料コードエディターです。執筆現在でシェアNo1です。
MicrosoftのクラウドサービスであるAzureやGitHub と統合された機能と拡張機能を使用すれば開発、デバッグ、デプロイまで実行できます。

公式サイトからダウンロードします。「今すぐダウンロード」をクリックします。

Macを選択します。

もちろんWindows環境ではWindowsを選択します。

ダウンロードの許可を求められた場合は「許可」します。

デフォルトの場合、ダウンロードフォルダに入るので、ダウンロードフォルダを開きます。
同時にアプリケーションも開き、　ダウンロードフォルダからアプリケーションフォルダにVisual Studio Codeをドラッグアンドドロップして移動します。

移動したらVSCodeアイコンをクリックして開きます。
はじめは確認アラートが出るので「開く」を押して進みます。

VSCodeが開けばインストール完了です。

VS Code を code コマンドで起動できるようにする

起動はアイコンをダブルクリックしてもいいのですが、コマンドラインからcodeコマンドで開けるようにした方が何かと便利なので設定します。

VSCodeのメニューバーの「View」> 「Command Palette...」を選択します。

VSCodeのショートカットで、Command + Shift + P でもOK。

コマンドパレットに「Shell」と入力すると該当項目が表示されるので
「Shell Command: install 'code' command in PATH を選択します。

確認が出るので「OK」を押して進めます。

パスワードを聞かれた場合は、ログインしているユーザーのパスワードを入力します。

インストールに成功したアラートが表示されたら「OK」をクリックします。

確認

ターミナルを起動してcodeコマンドで起動できるか確認します。
macのメニューバーから「移動」＞「ユーティリティ」をクリックします。

Finderのショートカットで、Command + Shift + U でもユーティリティが開きます。

「ターミナル」をダブルクリックで起動します。

今後よく使うので、ドラッグアンドドロップでDockに追加しておくと便利です。

ターミナルが起動したら「code」と入力してエンターをします。

code

vscodeが起動すれば設定完了です。

逆に、VSCodeを開いた状態でControl + Shift + ^ (or @)をするとVSCode内にターミナルを開くこともできます。

簡単な動作確認

HTMLファイル作成

VSCodeに慣れるためと、動作確認を含め簡単なHTMLファイルを作成してみます。
デスクトップで右クリックして「新規フォルダ」を選択し、testというフォルダを作成します。

testフォルダを選択してdock上にあるVSCode上にドラッグアンドドロップします。
VSCodeが立ち上がります。
フォルダ名が表示され、testフォルダが開いているのがわかります。

この状態でTESTの右側のファイル新規作成アイコンをクリックして、作成するファイル名を入力します。
作成するファイル名はindex.htmlです。

エンターを押すと、index.htmlが作成され、右側スペースにindex.htmlが編集できる状態で開かれます。
htmlを記述していきます。本来はもっと記述することがありますが、一旦下記をコピーして貼り付けて保存します。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>動作確認</title>
</head>

<body id="body">
    <h1 id="message">Hello World!</h1>
</body>

</html>

DOCTYPE htmlはDTD（Document Type Definition）と言われる記述。HTML5以降はHTMLのみ。HTML5も今は廃止され、HTML Living Standardとなった。
記述したコードはVSCodeの標準のフォーマッタで形式を揃えています（Control + Shift + F）

保存できたら、デスクトップ上のtestフォルダの中のindex.htmlをダブルクリックするか、ブラウザにドラッグアンドドロップします。
ブラウザでindex.htmlが展開されます。
ブラウザのタブ部分にtitleタグで指定した文言が表示され、bodyタグで指定したHello World!がブラウザに表示されました。

簡単なhtmlファイルの作成と動作確認ができました。

CSSの利用（スタイルの変更）

ページのデザインを少ししてみます。デザインを変更するにはCSS（Cascading Style Sheets）を利用します。

headタグ内にstyleタグを設定します。（ここでは一旦headタグ内に設定します。）
id名bodyに対して背景色をlightblueで指定します。

index.html

	<!DOCTYPE html>
	<html>

	<head>
	    <meta charset="UTF-8">
	    <title>動作確認</title>
+	    <style>
+	        #body {
+	            background-color: lightblue;
+	        }
+	    </style>
	</head>

	<body id="body">
	    <h1 id="message">Hello World!</h1>
	</body>

	</html>

コピペ用

<style>
    #body {
        background-color: lightblue;
    }
</style>

headの閉じタグ< /head >の前で改行してコピペ用を貼り付ける。

確認すると背景色が変化しました。

うまく変更が反映されない場合、ブラウザのキャッシュが影響している場合があります。何度か更新したり、Cmd + Shift + Rで強制リロードしてみてください。

JavaScript動作確認

JavaScriptを使って、「Hello World!」をクリックしたら「Hello World!」という文字が赤になるプログラムを書いてみます。

JavaScriptとはブラウザ内で実行できるプログラミング言語です。JavaScriptを使うことでgoogle mapのように地図を表示してマウスの動きに合わせて描画位置をずらしたり、音楽を再生したり、複雑な動作を実装することができるようになります。以前はブラウザで利用できる唯一の言語でしたが、最近はWebAssemblyにより、他の言語も利用できるようになってきています。

Bodyの閉じタグの直前にscriptタグを設定します。
HTMLを読み込んだ後にJavaScriptが実行されるようにBodyの閉じタグの直前に設定することが基本となっています。

index.html

	<!DOCTYPE html>
	<html>

	<head>
	    <meta charset="UTF-8">
	    <title>動作確認</title>
	    <style>
	        #body {
	            background-color: lightblue;
	        }
	    </style>
	</head>

	<body id="body">
	    <h1 id="message">Hello World!</h1>

+	    <script>
+	        const message = document.getElementById("message");
+
+	        message.addEventListener("click", () => {
+	            message.style.color = "red";
+	        });
+	    </script>
	</body>

	</html>

コピペ用

<script>
    const message = document.getElementById("message");

    message.addEventListener("click", () => {
        message.style.color = "red";
    });
</script>

保存して確認してみます。
「Hello World!」クリック前

「Hello World!」クリック後

文字色が赤く変化しました。

ファイルの分割（CSS, JavaScript部を外部に切り出す）

動作確認では、シンプルで単純な内容だったため、htmlファイル内にstyleとjavascriptのタグを挿入して記述しました。
ですが、プログラムが複雑になるにつれて、1つのファイル内に全てを記述するとソースがわかりにくメンテナンスもしづらくなります。
また、同じ内容のプログラムを他のファイルで実行したいという場合にも、同じプログラムをファイルごとに書かなければいけなくなります。
ですので、通常はスタイルはstyle部分のみを切り出してcssファイルとして保存し、読み込んで使うことが多いです。JavaScriptも同様です。

では、やってみましょう。

style.css

style.cssの作成

styleタグで記述した部分のみを切り出して、style.cssとして保存し、index.htmlで読み込んで使えるようにします。
まず、style.cssを作成します。

できたら、index.htmlの<style>〜</style>の中の内容をコピーしてstyle.cssへ貼り付けます。

style.css

#body {
    background-color: lightblue;
}

保存します。

index.htmlで読み込み

index.htmlでstyle.cssを読み込みます。

補足：下図にて赤く背景がついている部分はcodeを削除（style.cssへ転記）した箇所、緑背景は追記した箇所になります。（コード左側に＋ーが表示されています。）

index.html

	<!DOCTYPE html>
	<html>

	<head>
	    <meta charset="UTF-8">
	    <title>動作確認</title>
-	    <style>
-	        #body {
-	            background-color: lightblue;
-	        }
-	    </style>
+	    <link rel="stylesheet" href="./style.css" />
	</head>

	<body id="body">
	    <h1 id="message">Hello World!</h1>

	    <script>
	        const message = document.getElementById("message");

	        message.addEventListener("click", () => {
	            message.style.color = "red";
	        });
	    </script>
	</body>

	</html>

確認

保存して確認すると見た目に変化はありませんが、右クリック＞検証（chromeの場合）で「Network」タブを確認すると、index.htmlの他にstyle.cssも読み込まれているのが確認できます。

検証はOption + Command + I（or J）でも開きます。

index.js

index.jsの作成

testフォルダ内にindex.jsを作成します。

作成できたらindex.htmlの<script>〜</script>の中の内容をコピーしてindex.jsに貼り付けます。

index.js

const message = document.getElementById("message");

message.addEventListener("click", () => {
    message.style.color = "red";
});

index.htmlで読み込み

src属性でindex.jsを指定します。

index.html

	<!DOCTYPE html>
	<html>

	<head>
	    <meta charset="UTF-8">
	    <title>動作確認</title>
	    <link rel="stylesheet" href="./style.css" />
	</head>

	<body id="body">
	    <h1 id="message">Hello World!</h1>

-	    <script>
-	        const message = document.getElementById("message");
-
-	        message.addEventListener("click", () => {
-	            message.style.color = "red";
-	        });
-	    </script>
+	    <script src="./index.js"></script>
	</body>

	</html>

確認

保存して確認します。
見た目には変化ありませんが、検証画面で確認すると、index.jsも読み込まれていることがわかります。

最終的なコード

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>動作確認</title>
    <link rel="stylesheet" href="./style.css" />
</head>

<body id="body">
    <h1 id="message">Hello World!</h1>
    <script src="./index.js"></script>
</body>

</html>

style.css

#body {
    background-color: lightblue;
}

index.js

const message = document.getElementById("message");

message.addEventListener("click", () => {
    message.style.color = "red";
});

まとめ

プログラミングはエディタを使って行う。
- 2022年10月時点でのシェアNo1はVisual Studio Code（VSCode）
- もっと大規模な開発の場合はIDEという統合開発環境を使う場合もある。Visual Studioという上位製品がある。
WebページはHTML、CSS、JavaScriptなどを組み合わせて表現されている
- HTMLやCSSは構造やデザインといった静的な要素を記述する
- JavaScriptは動的な処理を記述する

ドキュメント作成視点での考察

開発に利用するツールや開発環境は指定すべきか？
指定するとしてどこにどう記述すべきか？

関連コンテンツ

次：フロントエンド開発１
前：なし（表紙コンテンツ）