Webアプリ
ブラウザーで使うメモ、予約、家計簿などを作る。
最初に作るもの
まずは、入力した文章を画面に追加するメモを作ります。
何を使う？
React
画面を部品に分けて作る。
FastAPI
PythonでAPIを作る。
Spring Boot
Javaでサーバーを作る。
言語はコードを書くためのもの。ライブラリーやフレームワーク、エンジンは制作を助ける道具です。
学ぶ順番
進み方の選択肢
文章を追加するメモ
memo.htmlに保存してブラウザーで開きます。この例は入力した文章を画面に追加します。再読み込みすると消えます。
memo.html
<!doctype html>
<html lang="ja">
<head><meta charset="utf-8"><title>メモ</title></head>
<body>
<label for="memo">メモ</label>
<input id="memo">
<button id="add">追加</button>
<ul id="list"></ul>
<script>
const input = document.querySelector("#memo");
const list = document.querySelector("#list");
document.querySelector("#add").onclick = function () {
if (input.value.trim() === "") return;
const item = document.createElement("li");
item.textContent = input.value;
list.append(item);
input.value = "";
};
</script>
</body>
</html>次に作るもの
メモの削除、ブラウザーへの保存、一覧の検索。
フロントエンドとバックエンド
画面を動かす側と、データの保存や処理を受け持つ側。最初は画面だけで作り、保存が必要になったら後者へ進みます。