カテゴリー
サインイン 新規登録
学習時間 15時間
難易度 入門
質問投稿
価格 ¥1,980
月額 ¥2,980
Unlimited会員はこちらの教材を含む100種類以上のUnlimited対象教材が学び放題

家計簿アプリを作りながら学ぶJavaScript!

JavaScriptの基礎を学びながら家計簿アプリを開発!JavaScriptでの入力フォームの機能の実装、データベースを利用した家計簿データの記録、ライブラリを利用して円グラフの作成方法などを学べます。

4.7
最終更新 2023/1
近藤秀彦

JavaScriptの基礎を学びながらWEBアプリ開発

本教材では家計簿アプリを題材にJavaScriptの基礎的なテクニックを利用してWEBアプリケーション開発を学びます。

HTMLとCSSを学び、その次のステップとしてJavaScriptに挑戦したい人に向けた教材となっています。

なぜJavaScriptを学ぶとよいのか?

WEBサイトを作成するにはHTMLとCSSで作成しますが、HTMLやCSSは主にWEBサイトの見た目を作るための言語で、それだけではWEBサイトの機能が作れないことがあります。

たとえば、入力フォームの送信や、入力したデータの記録などを実現するにはJavaScriptが使われます。

また、写真のスライドショーやWEBサイトのハンバーガーメニューのような、WEBサイト内の要素をアニメーションさせるときにもJavaScriptを使うケースがあります。

このようにWEBサイト制作においてJavaScriptのスキルは欠かせません。

プログラミング初心者にとって適切な学習ステップを選択することが難しい

初心者の人がプログラミング学習を始めるとき、何から学べばよいかわからなくて、間違った学習を進めてしまうケースがあります。

プログラミング学習で挫折してしまうケースとして、いきなり最新トレンドの技術の学習やりはじめたり、開発規模の大きすぎるWEBアプリケーションを目標にしてしまったり、実力に合わないものに挑戦しがちです。

最初のプログラミング学習としてWEBアプリケーション開発をするには適切な技術選定と適切な開発規模の題材を選ぶ必要があります。

どうやって適切にJavaScriptを学ぶのか?

プログラミング初心者におすすめな学習方法は、座学と実践形式で学ぶことです。

そして本教材ではその学習方法を採用して、教材の前半は変数や関数、繰り返し処理などJavaScriptの言語についての基礎を学び、後半では実際に家計簿アプリを作りながら、WEBアプリケーション開発においてJavaScriptをどのように使っていくのか実践して学んでいきます。

さらに家計簿アプリにはお金を何にいくら使ったのか記録する必要があり、そのためにデータベースの利用方法も学びます。

そして家計簿アプリを作ることで、JavaScriptの基礎的な使い方と小規模なWEBアプリケーション開発の仕組みや知ることで開発に役立つテクニックが身に付きます。

本教材はHTMLとCSSを学び、その次のステップとしてJavaScriptに挑戦したい方や実際動くものをアウトプットしたい方にぜひ読んでいただきたい教材です。

学習内容

以下のようなJavaScriptのテクニックを学習します。

  • 変数や関数、条件分岐などの基礎的な使い方
  • 繰り返し処理やDOM操作などのややテクニカルな使い方
  • JavaScriptによる入力フォームの操作方法
  • データベース(IndexedDB)によるデータの保存、読み込み
  • ライブラリ(Chart.js)を利用した円グラフの作成

本教材の対象者

  • HTML、CSSの基礎を学習し次のステップとしてJavaScriptに挑戦したい方
  • HTML、CSSだけでは表現できない動的なWEBアプリを作りたい方

受講における必要条件

  • HTMLとCSSの基礎知識
  • パソコン:Windows、またはmac
  • ブラウザ:Google Chrome 推奨
  • テキストエディタ:VS Code 推奨

作成する家計簿アプリのイメージ

Image from Gyazo

学ばないこと

この教材ではJavaScriptの基礎を学ぶことを目的としています。

そのためHTML、CSSの基本的な解説はしません。

JavaScriptを学ぶ上でHTML、CSSの解説が必要な部分はもちろん解説します。

また、ReactやVue.jsなどのモダンなJavaScriptフレームワークは利用しないためこの教材では学びません。

本教材の対応バージョン

  • JavaScriptバージョン:ES6(ES2015)以降に対応

本教材で質問対応可能なOSや環境

  • OS:Windows、macOS
  • ブラウザ:Chrome
  • エディタ:VS Code (Visual Studio Code)

カリキュラム

Section 0 はじめに
Section 1 JavaScriptの基礎
Section 2 家計簿アプリ開発準備

講師のプロフィール

教材のレビュー

4.7
7件の評価
71%
28%
0%
0%
0%
榎本康一 6ヶ月以上前
完成までできました。一度で理解するのは難しいきれど、実用性に近いアプリができたことが良かったです。
ヒロキ 1年以上前
丁寧な解説で初学者に最適だった。
dcsyhi 1年以上前
解説が非常に丁寧でした