1.はじめに
この記事のターゲットは「駆け出しエンジニア」もしくは「エンジニアを全くしらない超初心者」向けです。
特に以下のような悩みを抱えている方の悩みを解決できると思います。
- プログラミング始めたばっかりだけど何を作ればいいかわからない
- JavaScriptでできることとは
- そもそもwebアプリってなんだろう
２.著者紹介
冒頭ですごく偉そうなことを言っていますが本記事の著者はプログラミングを初めて１ヶ月の「超初心者」です。
スキルセットとしては以下のような感じです。
- HTML&CSSがだいたい分かる（progateで一周）
- JavaScriptは全然わからない（progateで一周）
- ちょっとしたデータサイエンスに関する知識
簡単に言うとまだまだポンコツです。
３.アプリ概要
【ホーム画面】
使い方
- 入力フォームにタスクを入力
- タスクを「add」する
- タスクが終了次第「done」ボタンを押す
４.作成理由
「アウトプット型の学習をしたかったから」です。
人間は基本的に【アウトプット：７・インプット：３】の学習がもっとも効果的だと言われています。そのため、progateなどのインプット中心の学習を手早く済ませて自分でwebアプリを作ってみたいと考えていました。
そこで「HTML、CSS、JAVASCRIPT」のすべてがまんべんなく理解できるTODOリストに挑戦することにしました。
作成期間
・２日間
５.設計
TODOアプリ（フォルダ）
├── index.html
├── style.css
├── app.js
６.使用技術
フロント：HTML、CSS、JavaScript
データベース：PostgreSQL
バージョン管理：Git hub
エディタ：VSCode
【ソースコード】
https://github.com/ShinKitayama/practice.git
７.機能
１.タスクの追加
２.タスクの消去
８.苦労した点
- 学習したことがない技術の導入
- １からの学習
- 予期せぬエラーへの対処
９.反省点
- 一つのエラーに対処するのにすごく時間がかかった 【解決策】技術に関する二次情報でなく、一次情報を探す
- 全て思いつきで機能を実装した 【解決策】コーディングする前から設計を考えておく
- 見たことないコードに焦った 【解決策】経験するのみ
1０.まとめ
今回私は初めて自分でwebアプリをを作成して見て大変だなあと感じた一方ですごく学びのある経験になりました。
最後に、予想される読者の悩みについて再度確認していきます。
- プログラミング始めたばっかりだけど何を作ればいいかわからない →TODOアプリを作りましょう
- JavaScriptでできることとは →「TODOアプリ、ブログ、カレンダー、クイズゲーム」画面の中で動作するものです
- そもそもwebアプリってなんだろう →Webサイトの中でも多機能で、コメントやデータの加工、商品の購入などができる、インタラクティブなもの（今回私が作成した簡単なTODOリストもwebアプリです）
次は簡単なゲームを「HTML、CSS、JAVASCRIPT」で作成しようと思います。