教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
この章では家計簿アプリを作るための準備をします。
これから作るアプリのHTML、CSSファイルの作成やテキストエディタのインストールなどをやっていきます。
これから家計簿アプリを作るためにHTML、CSS、JSファイルを用意します。
この教材ではJavaScriptを中心に解説するため、HTMLとCSSについてはテンプレートとして見た目だけ作成済みのファイルをダウンロードできるようにしてあります。
このテンプレートにJavaScrptのプログラムを追加してアプリとして動作するように作っていきます。
テンプレートのダウンロードをする場合はこちらのGitHubからダウンロードできます。
zipファイルでダウンロードできますので、動画を参考に解凍してVS Codeで開いてみてください。
ファイル名 | 説明 |
---|---|
index.html | 家計簿アプリの画面のHTML |
style.css | 画面のデザインのためのCSS |
inputCheck.js | 家計簿の入力チェック機能のプログラムを記述します |
indexedDB.js | 家計簿のデータを記録するプログラムを記述します |
graph.js | グラフ表示するためのプログラムを記述します |
.zipファイル
を解凍するファイル
→フォルダを開く...
からテンプレートのフォルダ選択する)ドラッグ&ドロップで開く方法は以下の動画も参考にしてみてください。
上記の動画のように、VS Codeでテンプレートのフォルダを読み込むと画面の左側にファイルの一覧が表示されます。
これから編集したいファイルをクリックするとファイルが開き編集できます。
ファイルを編集した後の保存はWordなどと同じようにWindowsの場合はCtrl + Sキー
、Macの場合はCommand + Sキー
で保存できます。
テンプレートのフォルダの中にindex.html
があります。
これをダブルクリックしてブラウザで開けば実行できます。
JavaScriptはブラウザで実行できるプログラミング言語ですの。このあとプログラムを記述した後も同じようにindex.html
をブラウザで開くと実行できます。
ここでテンプレートの準備は完了です。
次のパートではテンプレートの内容について解説をします。