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

間違いや改善の指摘

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

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

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

質問ポリシー①

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

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

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

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

2-2

テンプレートの解説

家計簿アプリの各機能はこの画像のようになっています。

現在はHTMLとCSSで表示されているだけでボタンなどをクリックしても何も動作しません。

大きく分けて4つの機能があり、次の章以降でJavaScriptのプログラムを書いて動作するようにします。

機能 説明
メニュー ボタンを押すとその項目に画面を移動します
入力 入力フォームから収支の入力をします
入出金一覧 フォームで入力したデータを一覧表示します
グラフ カテゴリ毎に支出の割合の円グラフを表示します

image

次にテンプレートのコードについてポイントとなる部分をピックアップして解説をします。

CSSの読み込み

index.htmlheadタグ内に以下の記述があります。

index.html
12
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タグ読み込むだけページ全体がきれいになる便利なフレームワークです。

jsファイルの読み込み

同じくindex.htmlheadタグ内に以下の記述があります。

index.html
123456789
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.htmlbodyタグ内に以下の記述があります。

index.html
1234567891011121314151617181920212223242526272829303132333435
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.htmlbodyタグ内に以下の記述があります。

index.html
123456789101112
Copied!
<!-- 入出金一覧 --> <h2>入出金一覧</h2> <section id="list"> <!-- ここに入出金一覧を表示します。 --> </section> <!-- グラフ --> <h2>グラフ</h2> <!-- <hr> --> <section> <!-- ここにグラフを表示します。 --> </section>

この部分は入出金一覧とグラフを表示する部分で、見出しのHTMLのみが書いてあります。sectionタグの中に一覧とグラフが表示されます。4章と5章で作りこんでいきます。

では、これでテンプレートの内容も把握して開発準備完了です。

いよいよ次の章では家計簿アプリ「My Money」をJavaScriptで開発していきましょう。

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