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

間違いや改善の指摘

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

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

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

質問ポリシー①

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

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

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

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

2-1

家計簿アプリ開発準備

この章では家計簿アプリを作るための準備をします。

これから作るアプリのHTML、CSSファイルの作成やテキストエディタのインストールなどをやっていきます。

必要なファイルの準備

これから家計簿アプリを作るためにHTML、CSS、JSファイルを用意します。

この教材ではJavaScriptを中心に解説するため、HTMLとCSSについてはテンプレートとして見た目だけ作成済みのファイルをダウンロードできるようにしてあります。

このテンプレートにJavaScrptのプログラムを追加してアプリとして動作するように作っていきます。

テンプレートのダウンロード

テンプレートのダウンロードをする場合はこちらのGitHubからダウンロードできます。

zipファイルでダウンロードできますので、動画を参考に解凍してVS Codeで開いてみてください。

▼ ダウンロードはこちら

image

テンプレートのファイル一覧

ファイル名 説明
index.html 家計簿アプリの画面のHTML
style.css 画面のデザインのためのCSS
inputCheck.js 家計簿の入力チェック機能のプログラムを記述します
indexedDB.js 家計簿のデータを記録するプログラムを記述します
graph.js グラフ表示するためのプログラムを記述します

テンプレートの開き方

  • ダウンロードしたら.zipファイルを解凍する
  • 解凍したフォルダをVS Codeで開く
    (VS Codeにドラッグ&ドロップする、またはVS Codeのメニューからファイルフォルダを開く...からテンプレートのフォルダ選択する)

ドラッグ&ドロップで開く方法は以下の動画も参考にしてみてください。

29141b4b41ad4a2e796d282cdd405cfe

VS Codeで編集

上記の動画のように、VS Codeでテンプレートのフォルダを読み込むと画面の左側にファイルの一覧が表示されます。
これから編集したいファイルをクリックするとファイルが開き編集できます。

ファイルを編集した後の保存はWordなどと同じようにWindowsの場合はCtrl + Sキー、Macの場合はCommand + Sキーで保存できます。

ブラウザで実行

テンプレートのフォルダの中にindex.htmlがあります。

これをダブルクリックしてブラウザで開けば実行できます。

JavaScriptはブラウザで実行できるプログラミング言語ですの。このあとプログラムを記述した後も同じようにindex.htmlをブラウザで開くと実行できます。

e02a97690fbaad0fe25e6a5e23db2f8d

ここでテンプレートの準備は完了です。
次のパートではテンプレートの内容について解説をします。

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