1.
カフェアプリ 1
はじめに
前提知識
このコースを作成するには、基本知識が必要です。
- ブラウザの基本操作
- IDE（VSCode）の基本操作
- Web（HTTP、サーバー）
- HTML
- CSS
使用ブラウザ
ブラウザはWeb開発・制作で多く利用される Google Chrome とします。 また、付属のDev Toolsを利用すると、HTMLコンテンツの確認やプログラムのデバッグがとても便利です。
JS（JavaScript）の基礎
このコースはWebアプリのフロントエンドを作成しながら、JSの基礎も学びます。
- フロントエンドアプリはブラウザやスマホで見た目の表示・動作
- 永続的なデータを通信・保存する（データベース化）にはバックエンドアプリの開発が必要
JSの基本構文
JSの細かな基本構文を学習する場合は、以下のコースを参考にしてください。
開発環境
VSCode（VitualStudioCode）とは
この講座のWeb開発のエディタソフトは、Microsoft が提供するVisualStudioCode(VSCode) で説明します。VSCodeは無償のエディタソフトなので、あらかじめインストールしておきましょう。
VSCodeのプラグイン
Visual Studio CodeはMicrosoftが提供する無償の高機能テキストエディタで、略してVSCodeといいます。Windows、Mac、Linux で利用可能で、Web開発現場のエディタとしてシェアが拡大しています。
JavaScript (ES6) code snippets
ECMAScript6 対応のコードスニペットです。
Tailwind CSS IntelliSense
Tailwind CSS のサジェストプラグインです。
Live Server
Live Serverは、ローカル開発環境でのWebページのプレビューできるツールで、Webサーバー構築が難しいユーザでも簡単に実行できます。
- Webサーバを独自に利用している場合は必要ありません。
Path Intelisense
コーディングのとき、ファイル、フォルダ、画像パスの候補を自動補完してくれます。スペルミスを防ぐのに効果的です。
Auto Close Tag
HTMLの終了タグを自動的に入力してくれます。
Auto Rename Tag
HTMLの開始、終了タグを自動でリネームしてくれます。
Webサーバー
Webサーバの用意
HTMLを表示するには Apache、NginxなどのWebサーバ構築が必要です。Webサーバはバックエンドプログラムやデータベースも動作できますが、Linux、Virtual PC 知識が必要なため、初心者にはハードルが高いのが現実です。
Live Server
Webサーバの構築が難しい場合は、VSCodeのプラグイン「Live Server」で擬似的にフロントエンドの確認は可能です。ただし、PHP、Python、Node.js といったバックエンド用プログラムは動作しません。
DOM
DOMとは
DOM（Document Object Model）は、HTML文書をプログラム的に操作できるように用意されたオブジェクトのことです。Webページを読み込むと、ブラウザはそのHTML文書を解析し、DOMツリー（ツリー構造）として表現します。
DOMの主な要素
DOMの基本は、Documentをベースに、Node（Element、Text）などで構成されます。
Element
各HTMLタグはJSでは Element（要素）として扱います。
Element
<div>
<h1></h1>
<p></p>
</div>
Text Node
テキストコンテンツはDOMツリーのNode（ノード）として存在します。 例えば、pタグの「Hello World」はText Nodeです。
Element
<div>
<h1></h1>
<p>Hello World</p>
</div>
Attribute（プロパティ）
各Elementの属性（id や classなど）は、オブジェクトのAttribute（プロパティ）として操作できます。
Attribute（プロパティ）
<div class="continer">
<h1 id="title"></h1>
<p class="content">Hello World</p>
</div>
Documentオブジェクト
Documentオブジェクトは、HTMLページ全体のルートオブジェクトのことで、JSでプログラムするベースとなります。
Documentオブジェクト
document
タブウィンドウのタイトル
例えば、documentオブジェクトを利用すると、JSプログラムでタブウィンドウのタイトルを設定できます。
document.title = "タブウィンドウのタイトル"
プロジェクト作成
完成イメージ
カフェサイトのオーダーアプリを作成します。
- フロントエンドのみで、バックエンドは作成しません
- バックエンド
ファイル構成
cafe/
├── images
│ ├── cappuccino.webp
│ ├── croissant.webp
│ └── green-tea.webp
├── index.html
└── js
└── main.js
プロジェクトフォルダ作成
PCにプロジェクトフォルダ「cafe」を作成してVSCodeで選択します。
- Webサーバーを起動している場合は、Webサーバで動作する場所に作成します。
HTMLファイル作成
プロジェクトフォルダに「index.html」を作成し、HTMLの基本構文を追加します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
画像表示
画像用意
商品画像を images/ に用意します。
画像表示
imgタグで images/ の画像を表示します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- images フォルダから画像読み込み -->
<img src="images/cappuccino.webp" alt="">
</body>
</html>
ブラウザ確認
ブラウザで画像が表示できるか確認します。
Webサーバを起動している場合
Webサーバを起動している場合は、「http://localhost」からアクセスします。
Webサーバがない場合
Webサーバがない場合、VSCodeのプラグイン「Live Server」でも確認できます。
JSの実行
JSファイル作成
js/ を作成し、「main.js」を作成します。
プログラム追加
「main.js」にサイトタイトルを設定するプログラムを追加します。
js/main.js
// サイトタイトルにコンスタント（定数）設定
const siteTitle = "Café Bonjour";
// ブラウザタブにタイトル設定
document.title = siteTitle;
HTMLからJS読み込み
「index.html」から「js/main.js」を外部読み込みします。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="images/cappuccino.webp" alt="">
<!-- main.js 外部読み込み -->
<script src="js/main.js"></script>
</body>
</html>
動作確認
ブラウザを再読み込みして、JSが動作する確認します。
ブラウザタブ
タブのタイトルが変更されました。
デバッグ
プログラム開発では、コードの途中経過や変数の値、計算結果などを確認が必要です。JSではブラウザの開発者ツールを利用してコンソール表示などをして、プログラムの結果を確認します。
- Google Chromeでは「Dev Tools」を利用します。
console.log()
console.log() は、JSのデバッグ用関数で、コンソールにメッセージやプログラム結果を出力して確認できます。
console.log(結果)
使い方
console.log() を利用してサイトタイトルの値をコンソール表示します。
js/main.js
const siteTitle = "Café Bonjour";
document.title = siteTitle;
// siteTitle の内容をコンソール表示
console.log(siteTitle);
コンソール表示確認
コンソール表示は、Google DevToolsを【F12】キーまたは「検証」で開き、「console」タブに切り替えて確認します。
console.log() の内容が表示されました。
