教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
家計簿アプリの各機能はこの画像のようになっています。
現在はHTMLとCSSで表示されているだけでボタンなどをクリックしても何も動作しません。
大きく分けて4つの機能があり、次の章以降でJavaScriptのプログラムを書いて動作するようにします。
機能 | 説明 |
---|---|
メニュー | ボタンを押すとその項目に画面を移動します |
入力 | 入力フォームから収支の入力をします |
入出金一覧 | フォームで入力したデータを一覧表示します |
グラフ | カテゴリ毎に支出の割合の円グラフを表示します |
次にテンプレートのコードについてポイントとなる部分をピックアップして解説をします。
index.html
のheadタグ
内に以下の記述があります。
index.html12 Copied!<!--sakuraの読み込みと、画面レイアウトのスタイルシートの読み込み-->
<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura-earthly.css" type="text/css">
これはsakuraというcssのフレームワークを読み込んでいます。
HTML内の見た目をいい感じにしてくれるCSSファイルを使います。ということが書いてあります。
テンプレートでボタンが緑色になっていたり、入力フォームがグレーの色がついていますが、これがsakuraによって見た目が設定された部分です。
CDN(Content Delivery Network)という方式で公開されており、このURLをlinkタグ
読み込むだけページ全体がきれいになる便利なフレームワークです。
同じくindex.html
のheadタグ
内に以下の記述があります。
index.html123456789 Copied!<!--IndexedDB関連のJavaScriptの読み込み-->
<script src="indexedDB.js">s</script>
<!-- Chart.jsとグラフ表示のJavaScriptの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="graph.js"></script>
<!--フォーム入力チェックのJavaScript読み込み-->
<script src="inputCheck.js"></script>
ここはJavaScriptを記述する.jsファイル
の読み込んでいます。
1章で解説したjsファイルの外部読み込み
です。
indexedDB.js
)graph.js
)inputCheck.js
)機能別でファイルを分けており、それぞれの機能のプログラムを記述していきます。
Chart.js
については5章で解説しますが、これもsakuraと同じようにCDNで提供されているJavaScriptのフレームワークです。
グラフ表示機能を1から全部作ろうとするとものすごく複雑なプログラムを自分で考える必要があります。このURLのグラフ作成機能をもったjsファイル
を読み込んでおくことで、WEBページで手軽にグラフを表示されることができます。
index.html
のbodyタグ
内に以下の記述があります。
index.html1234567891011121314151617181920212223242526272829303132333435 Copied!<!-- 入力 -->
<h2>入力</h2>
<section id="inputSection">
<div>
<label>収支</label>
<input type="radio" value="支出" checked>支出
<input type="radio" value="収入">収入
<label>日付</label>
<input type=" date">
<label>カテゴリ</label>
<select>
<option>-選択してください-</option>
<option>食費</option>
<option>趣味</option>
<option>交際費</option>
<option>交通費</option>
<option>ファッション</option>
<option>クルマ</option>
<option>家賃</option>
<option>保険</option>
<option>税金</option>
<option>その他</option>
</select>
</div>
<div>
<label>金額</label>
<input type="number" placeholder="金額を記入">円
<label>メモ</label>
<input type="text" placeholder="買ったものを記入">
</div>
</section>
<div class="submit">
<button>登録する</button>
</div>
ここは入力フォームの部分のHTMLです。
inputタグ
やbuttonタグ
のはHTMLで記述するだけではブラウザに表示されるだけで入力やクリックしても何も動作はしません。これらを動作させるためにJavaScriptが利用されます。
3章でボタンを押された時にどうするのか、入力されている文字をどうするのか、という感じでプログラムを記述していくことなります。
同じくindex.html
のbody
タグ内に以下の記述があります。
index.html123456789101112 Copied!<!-- 入出金一覧 -->
<h2>入出金一覧</h2>
<section id="list">
<!-- ここに入出金一覧を表示します。 -->
</section>
<!-- グラフ -->
<h2>グラフ</h2>
<!-- <hr> -->
<section>
<!-- ここにグラフを表示します。 -->
</section>
この部分は入出金一覧とグラフを表示する部分で、見出しのHTMLのみが書いてあります。sectionタグ
の中に一覧とグラフが表示されます。4章と5章で作りこんでいきます。
では、これでテンプレートの内容も把握して開発準備完了です。
いよいよ次の章では家計簿アプリ「My Money」をJavaScriptで開発していきましょう。