使えそうだと思ったら、マネして構いません。
例として「JavaScriptで作るTODOアプリ」を考えて載せました。
完成イメージ
完成した画面の動画や画像を添付する。フローチャートなどでも良い。少し複雑なものなら仕様もここに記載する。
HTMLとJavaScriptを使ってシンプルなTODOアプリを作成する。
TODOの追加ができ、TODOをメモすることができるアプリ。
概要
基本的な情報はここに記載する。
動作環境 macOS(M1) 使用技術 JavaScript、HTML 作業時間 5分
技術解説
メインで使う技術の解説はここに記載する。記載しなくても構わない。
JavaScriptとは
- 主にWeb開発で使用されるプログラミング言語
- 「JavaScript」と書いて「ジャバスクリプト」と読む
- テキストエディタとブラウザがあればすぐに開発可能
事前準備
どんなツールが必要で、どんなバージョンのものが必要かはここに記載する。
テキストエディタを用意
Visual Studio Codeでインストーラーをダウンロードし、インストーラーを起動しアプリをインストールする
ブラウザを用意
Google Chromeでインストーラーをダウンロードし、インストーラーを起動しアプリをインストールする
手順
行った操作は全て記載する。必ず動作が確認できたコードを載せる。必要であれば画像も載せる。
プロジェクト作成
$ mkdir todo-appプロジェクトを開く
VSCodeでプロジェクトを開く。
以降の作業は、todo-appをカレントディレクトリとする。index.htmlの記述
index.htmlを作成し、以下のように記述する
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>TODO List</title> </head> <body> <div> <input type="text" id="title" /> <button type="button" onClick="addTodo()">追加</button> </div> <ul id="todos"></ul> <script src="index.js"></script> </body> </html>index.jsの記述
index.jsを作成し、以下のように記述する
index.jsfunction addTodo() { const title = document.getElementById('title'); const todos = document.getElementById('todos'); if (title.value === '') return; todos.innerHTML += `<li>${title.value}</li>`; title.value = ''; }動作確認
Chromeでindex.htmlを開く。
完成イメージのように追加ができるはず。
まとめ
最終的な全体コード及びディレクトリ構成を記載する。行ったこと、学べたことを総括しても良い。
最終ディレクトリ構成は以下のようになる。
todo-app/ ├── index.html └── index.js全体コード
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>TODO List</title> </head> <body> <div> <input type="text" id="title" /> <button type="button" onClick="addTodo()">追加</button> </div> <ul id="todos"></ul> <script src="index.js"></script> </body> </html>index.jsfunction addTodo() { const title = document.getElementById('title'); const todos = document.getElementById('todos'); if (title.value === '') return; todos.innerHTML += `<li>${title.value}</li>`; title.value = ''; }