💨
はじめてのWebアプリ開発入門ブログ：プログラミングの楽しさを知ろう

2024/09/19に公開
CSS
みなさん、こんにちは！

今日は、プログラミング初心者の方々に向けて、Webアプリ開発の世界に飛び込むためのガイドを書いていきます。プログラミングに少しでも興味を持っている中学生や高校生、あるいは大人の方でも、これを読んで「プログラミングって楽しいな！」と思ってもらえたら嬉しいです。
プログラミングは、最初は「難しそう…」と感じるかもしれませんが、やればやるほど楽しくなってくるものです。今回は、初心者でも理解できるように、わかりやすく説明しつつ、Webアプリ開発という分野を通じて、自分のアイデアを形にする楽しさを一緒に体験していきましょう！

 1. プログラミングって何？ Webアプリって何？
 プログラミングとは？プログラミングとは、コンピューターに指示を与えて動かすことです。私たちが普段使っているスマホやパソコンのアプリ、ゲーム、そしてWebサイトの裏側には、プログラムという指示書のようなものがあります。プログラミングは、その指示書を書く作業のことを指します。
例えば、「○○なときに、△△をする」という風に、コンピューターにどう動いてほしいかを具体的に伝えるんです。

 Webアプリとは？では、Webアプリとは何でしょうか？

Webアプリは、インターネット上で動くアプリケーションのことを指します。例えば、GmailやYouTube、Twitterなど、ブラウザ（ChromeやSafariなど）でアクセスして使うアプリがWebアプリです。
普通のスマホアプリ（InstagramやLINEなど）とは違い、Webアプリはインターネットに接続さえすれば、パソコンやスマホ、タブレットでも動きます。

 2. なぜWebアプリ開発が楽しいの？では、なぜWebアプリ開発が楽しいのでしょうか？ここでは、プログラミングを始めるときに感じられる楽しさや達成感を紹介します。

 2.1. 自分のアイデアを形にできるプログラミングの一番の魅力は、自分のアイデアを形にできることです。

たとえば、「友達と遊びに行く予定を管理するアプリがあったらいいな」と思ったとします。それを実際に作ることができるのがプログラミングです。自分の頭の中にあったアイデアが、画面の中で動き出す瞬間は、まさに感動ものです！

 2.2. 解決策を見つけるワクワク感プログラミングでは、うまく動かないこともありますが、それを解決するのもまた楽しみの一つです。問題が起きたら、どうやってそれを解決するかを考えて、実際にうまくいったときの達成感はとても大きいです。

 2.3. 成長が見える最初は「何をしていいのかわからない…」と思うかもしれませんが、少しずつプログラムを書けるようになると、自分の成長が感じられます。Webアプリを1つ完成させる頃には、プログラミングに対する自信がついているはずです。

 3. Webアプリ開発の基本ステップここからは、実際にWebアプリを作るための基本的な流れを説明していきます。初心者の方でも、このステップに沿って進めていけば、簡単なWebアプリを作れるようになります。

 3.1. アイデアを考えるまずは、どんなアプリを作りたいかを考えます。例えば、「TODOリスト」というアプリはどうでしょう？TODOリストは、やることをリスト化して管理できるシンプルなアプリです。これを作ってみることで、基本的なWebアプリの作り方が理解できます。
他にも、学校の時間割アプリや、友達とチャットできるアプリなど、アイデアは無限大です！

 3.2. 必要な技術を理解するWebアプリを作るために必要な技術は主に3つあります。
フロントエンド

フロントエンドは、ユーザーが目にする部分、つまりアプリの画面やボタンなどを作ります。主な技術は次の通りです。

HTML（ウェブページの構造を作る）

CSS（ページのデザインを整える）

JavaScript（ボタンを押したときの動きなどを設定）
バックエンド

バックエンドは、アプリの裏側で動く部分です。たとえば、データの保存やユーザー認証（ログイン）などを管理します。主な技術は次の通りです。

Node.js（JavaScriptでサーバーを動かす）

Express（Node.jsでサーバーを簡単に作れるフレームワーク）

データベース（データを保存する場所、例：MongoDB）
デプロイ

デプロイとは、作ったアプリを実際にインターネットに公開することです。デプロイするためのサービスとしては、以下のものがよく使われます。

Heroku（バックエンドを公開するためのクラウドサービス）

Netlify（フロントエンドを公開するためのクラウドサービス）

 3.3. 環境を整えるWebアプリを作るためには、まず開発環境を整える必要があります。これには、プログラムを書くためのソフトウェア（テキストエディタ）や、プログラムを実行するためのツールが必要です。
テキストエディタを用意する

プログラムを書くためのテキストエディタとして、初心者におすすめなのがVisual Studio Code（通称VS Code）です。無料で使えて、多くのプログラマーに支持されています。まずはVS Codeをインストールしましょう。
Node.jsをインストールする

次に、Node.jsというツールをインストールします。Node.jsは、JavaScriptでサーバーサイドのプログラムを動かすために必要です。公式サイトからダウンロードし、インストールします。

 4. プログラミングの始め方：実際にコードを書いてみよう！ここからは、具体的にプログラミングを体験してみましょう。プログラムを書くことは、まるでパズルを解くような作業です。最初はシンプルなWebアプリを作りながら、基本を学びます。

 4.1. フロントエンドの基本：HTMLとCSSまずは、Webページの骨組みを作るためにHTMLとCSSを使います。HTMLはWebページの構造（見出し、段落、リストなど）を作り、CSSはその見た目（デザイン、色、レイアウト）を整えるための言語です。

 HTMLとCSSの役割
HTML（HyperText Markup Language）：Webページの「内容」を記述します。例えば、見出し、段落、リンク、ボタンなど、ページ内の要素を定義します。

CSS（Cascading Style Sheets）：Webページの「見た目」を整えます。文字の色やサイズ、背景色、余白などを設定し、ページのレイアウトを美しくします。

 4.1.1. HTMLで基本の構造を作るHTMLを使って、シンプルなTODOリストの構造を作りましょう。HTMLのタグは、次のように<タグ名>という形で記述します。タグには、それぞれ特定の役割があり、Webページを構成する要素を指定します。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TODOリスト</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>TODOリスト</h1>
  <input type="text" id="new-task" placeholder="新しいタスクを追加">
  <button id="add-task-btn">追加</button>

  <ul id="task-list">
    <!-- ここにタスクが追加されます -->
  </ul>

  <script src="script.js"></script>
</body>
</html>

 HTMLコードの解説：
<!DOCTYPE html>：この行はHTML5のドキュメントであることを宣言します。これは必ずHTMLファイルの最初に書きます。

<html lang="ja">：ページの言語を指定します。この場合、日本語のWebページなのでlang="ja"とします。

<head>：ページに関する情報を記述します。例えば、文字コード（UTF-8）、タイトル（ブラウザのタブに表示されるテキスト）などです。

<body>：ここに、実際のコンテンツ（見出し、入力フィールド、ボタン、リストなど）を記述します。

 4.1.2. CSSでデザインを整える次に、CSSを使って見た目を整えます。ここでは、文字の色、背景色、ボタンのデザインなどを設定します。
CSSの基本的なルール：

セレクタ：どのHTML要素に対してスタイルを適用するかを指定します。例：h1、button、#new-taskなど。

プロパティと値：プロパティは「色」や「フォントサイズ」のように、何を変更したいかを表し、値は具体的なスタイルです。例：color: red;は文字の色を赤にします。
body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  text-align: center;
  padding: 50px;
}

h1 {
  color: #333;
}

input {
  padding: 10px;
  font-size: 16px;
  width: 300px;
  margin-right: 10px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007BFF;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  background-color: #fff;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

li button {
  margin-left: 10px;
}

 CSSコードの解説：
body：ページ全体のデザインを設定しています。背景色を薄いグレーにし、ページのコンテンツが中央に来るように余白（padding）を設定しています。

h1：見出しの色を設定しています。文字の色は少し暗めのグレー（#333）にしています。

inputとbutton：タスク入力フィールドと「追加」ボタンのスタイルを設定しています。ここでは、余白やフォントサイズ、背景色などを指定しています。

li：タスクのリストアイテムのデザインです。背景色、ボーダー、余白を設定して、見やすいデザインにしています。

 4.2. JavaScriptで動きをつけるHTMLとCSSだけでは、Webページに「動き」はありません。ボタンを押しても何も起こらないのです。そこでJavaScriptを使って、Webページに動きをつけましょう。JavaScriptは、ボタンがクリックされたときのアクションを定義したり、ページ上の要素を動的に操作するための言語です。

 4.2.1. タスクを追加する機能を作ろうTODOリストの基本機能は、タスクを入力してリストに追加することです。ここでは、JavaScriptを使って、この機能を実装します。
// 新しいタスクを追加する関数
function addTask() {
  // ユーザーが入力したタスクのテキストを取得
  const taskText = document.getElementById('new-task').value;
  
  // 入力フィールドが空のときはアラートを表示して処理を終了
  if (taskText === "") {
    alert("タスクを入力してください");
    return;
  }

  // 新しいタスクを作成してリストに追加
  const taskList = document.getElementById('task-list');
  const newTask = document.createElement('li');
  newTask.textContent = taskText;

  // 完了ボタンの作成
  const completeButton = document.createElement('button');
  completeButton.textContent = "完了";
  completeButton.addEventListener('click', () => {
    // 完了ボタンを押すとタスクに取り消し線を引く
    newTask.style.textDecoration = "line-through";
  });

  // 削除ボタンの作成
  const deleteButton = document.createElement('button');
  deleteButton.textContent = "削除";
  deleteButton.addEventListener('click', () => {
    // 削除ボタンを押すとタスクをリストから削除
    taskList.removeChild(newTask);
  });

  // タスクにボタンを追加
  newTask.appendChild(completeButton);
  newTask.appendChild(deleteButton);

  // タスクリストに新しいタスクを追加
  taskList.appendChild(newTask);

  // 入力フィールドをクリア
  document.getElementById('new-task').value = "";
}

// ボタンがクリックされたときにタスクを追加
document.getElementById('add-task-btn').addEventListener('click', addTask);

 JavaScriptコードの解説：
addTask関数：この関数は、ユーザーがタスクを入力して「追加」ボタンを押したときに実行されます。

taskTextは、ユーザーが入力したタスクのテキストを取得します。もし入力フィールドが空なら、alertで警告を表示して処理を中断します。
タスクを<li>要素として作成し、taskListに追加します。


completeButton：完了ボタンを押すと、タスクに取り消し線が引かれるように設定しています。

deleteButton：削除ボタンを押すと、タ
スクがリストから削除されます。

 4.3. プログラムが動く流れを理解しようプログラムが実行されるとき、イベントと呼ばれる「何かが起こる」瞬間が発生します。このイベントは、ユーザーがボタンをクリックしたり、入力フィールドに何かを入力したりしたときに発生します。
JavaScriptは、こういったイベントが発生したときに、特定の動作を実行するようにプログラムを設定することができます。例えば、今回のプログラムでは、次のようなイベントが発生します。

「追加」ボタンがクリックされるイベント：ボタンがクリックされると、addTask関数が呼び出され、入力フィールドからタスクがリストに追加されます。

「完了」ボタンがクリックされるイベント：タスクが完了したら、完了ボタンがクリックされ、タスクに取り消し線が引かれます。

「削除」ボタンがクリックされるイベント：削除ボタンを押すと、リストからそのタスクが削除されます。

 4.4. 実際に動かしてみよう！プログラムを実際に動かすには、ブラウザ（Google ChromeやFirefoxなど）を使います。以下の手順で確認しましょう。
ファイルの保存

HTML、CSS、JavaScriptのファイルを同じフォルダに保存します。例えば、以下のようにファイルを保存してください。

index.html（HTMLファイル）

styles.css（CSSファイル）

script.js（JavaScriptファイル）
ブラウザで開く

index.htmlファイルをダブルクリックすると、ブラウザで開くことができます。これで、TODOリストアプリが表示され、ボタンをクリックしてタスクを追加できるようになります。
Chromeで実際に表示すると↓のような表示になります。

 4.5. エラーが出たらどうする？プログラムを書いていると、エラーが出ることがあります。最初は「どうしてエラーが出るんだろう？」と思うかもしれませんが、エラーを解決するのもプログラミングの楽しい部分です。

 よくあるエラーとその解決方法：
コンソールエラー：ブラウザには「開発者ツール」という便利な機能があり、エラーが発生したときに原因を教えてくれます。開発者ツールは、Chromeなら右クリック→「検証」で表示できます。
エラーが出たら、どの部分で問題が発生しているかを確認し、そのコードを見直します。


タイプミス：document.getElementById('new-task')のように書くべきところを、document.getElementById('new_tak')のようにタイプミスをしてしまうことがあります。エラーが出たときは、スペルミスがないか確認しましょう。

 4.6. どんどん改善していこう！プログラムが一度完成したら、それで終わりではありません。機能を追加したり、デザインを改善したりすることで、さらに素敵なWebアプリを作ることができます。例えば、次のような機能を追加してみるのはどうでしょう？

タスクの期限を設定できる機能：タスクに締め切りを設定し、その日にリマインダーを送るようにする。

カテゴリー分け：タスクを「仕事」「プライベート」「買い物」のようにカテゴリごとに整理する機能を追加。

完了したタスクのリスト：完了したタスクを別のリストに移動し、いつでも確認できるようにする。
これらの機能を追加することで、プログラミングのスキルがさらにアップし、実際に使える便利なWebアプリを作ることができるようになります。

 5. バックエンドの基本：データを保存しよう！ここまでで、フロントエンド側のHTML、CSS、JavaScriptを使ってWebページを作り、シンプルなTODOリストアプリを動かすことができました。しかし、このままだと、ページを再読み込みすると追加したタスクが消えてしまいます。これは、データが一時的にしか保存されていないためです。
そこで必要なのがバックエンドです。バックエンドは、データを永続的に保存したり、ユーザーがログインできるようにしたり、Webアプリの裏側で重要な処理を行う部分です。具体的には、以下のことを担当します。

データベースと連携してデータを保存・読み込みする

ユーザー認証（ログイン・ログアウト）を管理する
フロントエンド（ユーザーのブラウザ）からのリクエストに対して、適切なデータを提供する

 5.1. サーバーとは何か？まず、バックエンドで動く重要なものがサーバーです。サーバーは、インターネット上でフロントエンドからのリクエスト（「タスクを保存して！」や「保存されたタスクを見せて！」といった要求）を受け取り、必要な処理を行います。サーバーは、ユーザーのブラウザがアプリを動かすための司令塔のような役割を果たします。
Webアプリのサーバーは通常、以下のようなことを行います。
ユーザーが送信したデータ（タスクなど）を受け取る
データを保存するための命令をデータベースに送る
保存したデータをユーザーに返す
ユーザーがリクエストしたデータを検索して提供する

 5.2. Node.jsとExpressを使ってサーバーを作るサーバーを構築するためには、Node.jsというJavaScriptを使ってサーバーサイドのプログラムを実行するためのツールと、Expressというフレームワークを使います。これらを組み合わせることで、バックエンドの機能を簡単に作ることができます。

 5.2.1. Node.jsとは？Node.jsは、JavaScriptでサーバーサイドの処理を行うための環境です。通常、JavaScriptはブラウザの中で動きますが、Node.jsを使えばサーバー上でもJavaScriptが動かせるようになります。Node.jsを使うことで、JavaScriptだけでフロントエンドとバックエンドを開発できるため、初心者にも優しい環境です。

 5.2.2. Expressとは？Expressは、Node.jsでサーバーを作るための軽量で強力なフレームワークです。Expressを使うと、複雑な設定なしにサーバーを立ち上げることができ、簡単にAPIを作成して、フロントエンドとバックエンドを連携させることができます。

 5.3. サーバーの基本コード：タスクを管理するAPIを作ろうまずは、簡単なサーバーを作ってみましょう。Node.jsとExpressを使って、タスクを保存したり、読み込んだりするAPIを作成します。

 5.3.1. 開発環境の準備Node.jsをインストール

Node.jsを公式サイトからインストールします。インストールが完了したら、以下のコマンドを使って、Node.jsがインストールされているか確認します。
node -v
プロジェクトを初期化

ターミナルで新しいディレクトリを作成し、そのディレクトリ内で以下のコマンドを実行してNode.jsのプロジェクトを初期化します。
npm init -y
Expressをインストール

次に、Expressをインストールします。これにより、Node.jsで簡単にサーバーを作成できるようになります。
npm install express

 5.3.2. サーバーの基本コード以下は、Node.jsとExpressを使って作るシンプルなサーバーのコード例です。このサーバーは、フロントエンドからのリクエストを受け取って、タスクを管理するAPIを提供します。
// 必要なライブラリを読み込む
const express = require('express');
const app = express();
const PORT = 3000;

// データをJSON形式でやり取りできるように設定
app.use(express.json());

// タスクを保存するための仮のデータ（配列）
let tasks = [];

// タスクを取得するためのエンドポイント（GETリクエスト）
app.get('/tasks', (req, res) => {
  res.json(tasks);
});

// 新しいタスクを追加するためのエンドポイント（POSTリクエスト）
app.post('/tasks', (req, res) => {
  const newTask = req.body;
  tasks.push(newTask);
  res.status(201).json(newTask);  // ステータス201は「作成成功」を意味する
});

// サーバーを起動する
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

 サーバーコードの解説：
express()：Expressを使ってアプリケーション（サーバー）を作成します。

app.use(express.json())：フロントエンドから送られてくるデータをJSON形式で受け取れるように設定します。

app.get('/tasks', (req, res) => {...})：GETリクエストを処理するエンドポイントです。/tasksにアクセスすると、保存されたタスクを取得して、JSON形式で返します。

app.post('/tasks', (req, res) => {...})：POSTリクエストを処理するエンドポイントです。フロントエンドから送られてきた新しいタスクをtasks配列に追加し、結果を返します。

app.listen(PORT, () => {...})：サーバーを指定されたポート（この場合は3000番）で起動します。

 サーバーの実行：ターミナルで次のコマンドを実行して、サーバーを起動します。
node index.js
これで、サーバーがhttp://localhost:3000で動いている状態になります。

 5.4. データベースを使ってデータを永続化する先ほどのコードでは、タスクはサーバーが動いている間だけ保存されます。サーバーを再起動すると、保存されていたタスクは消えてしまいます。この問題を解決するために、データを永続的に保存できるように、データベースを使います。
データベースは、フロントエンドから送られてきたデータを保存し、必要なときに取り出すための場所です。多くのWebアプリでは、データベースがデータの保管庫として重要な役割を果たしています。

 5.4.1. MongoDBを使ってデータを保存ここでは、NoSQL型のデータベースであるMongoDBを使います。MongoDBは、データをJSON形式のようなドキュメントとして保存するため、扱いやすく、初心者にも理解しやすいデータベースです。
MongoDBを使うために、以下の手順でセットアップを行います。
MongoDB Atlasのセットアップ

MongoDB Atlasというクラウドサービスを使って、無料のデータベースを作成します。アカウントを作成してクラスタをセットアップし、接続URI（MongoDBの接続情報）を取得します。
Mongooseライブラリをインストール

Mongooseは、MongoDBとNode.jsを簡単に接続できるライブラリ
です。以下のコマンドでMongooseをインストールします。
npm install mongoose

 5.4.2. MongoDBを使ったサーバーコードの例次に、Mongooseを使ってMongoDBにタスクを保存し、読み込むコードを書いてみましょう。
const express = require('express');
const mongoose = require('mongoose');
const app = express();
const PORT = 3000;

// MongoDBに接続
mongoose.connect('your-mongodb-uri-here', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

// タスクのスキーマ（データの構造）を定義
const taskSchema = new mongoose.Schema({
  text: String,
  completed: Boolean,
});

// モデルを作成
const Task = mongoose.model('Task', taskSchema);

app.use(express.json());

// タスクを取得するエンドポイント（GETリクエスト）
app.get('/tasks', async (req, res) => {
  const tasks = await Task.find();
  res.json(tasks);
});

// 新しいタスクを追加するエンドポイント（POSTリクエスト）
app.post('/tasks', async (req, res) => {
  const newTask = new Task(req.body);
  await newTask.save();
  res.status(201).json(newTask);
});

// サーバーを起動する
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

 データベース連携のコード解説：
mongoose.connect：MongoDBに接続するための関数です。取得した接続URIを使ってMongoDBと接続します。

taskSchema：Mongooseを使って、タスクのデータ構造（スキーマ）を定義します。ここでは、タスクのテキストと完了状態（completed）を保存します。

Task.find()：MongoDBからすべてのタスクを取得するための関数です。

newTask.save()：新しいタスクをMongoDBに保存します。

 5.5. サーバーとフロントエンドの連携バックエンドのAPIが完成したら、次はフロントエンドとバックエンドを連携させます。フロントエンドのJavaScriptコードを使って、バックエンドのAPIにリクエストを送り、データを取得したり保存したりするようにします。
例えば、先ほど作ったTODOリストアプリに、タスクを保存する機能を追加することができます。これを実現するために、AxiosというHTTPクライアントライブラリを使って、バックエンドのAPIにリクエストを送ります。

 フロントエンドでAxiosを使ったリクエスト：// Axiosを使ってタスクを取得
axios.get('http://localhost:3000/tasks')
  .then(response => {
    const tasks = response.data;
    tasks.forEach(task => {
      // 取得したタスクをリストに追加
      const taskList = document.getElementById('task-list');
      const newTask = document.createElement('li');
      newTask.textContent = task.text;
      taskList.appendChild(newTask);
    });
  });

// Axiosを使って新しいタスクを追加
function addTask() {
  const taskText = document.getElementById('new-task').value;
  if (taskText === "") {
    alert("タスクを入力してください");
    return;
  }
  
  axios.post('http://localhost:3000/tasks', { text: taskText, completed: false })
    .then(response => {
      const newTask = response.data;
      const taskList = document.getElementById('task-list');
      const taskItem = document.createElement('li');
      taskItem.textContent = newTask.text;
      taskList.appendChild(taskItem);
    });
}

 5.6. まとめ：バックエンドでデータを管理する楽しさここまでで、バックエンドの役割と、Node.js、Express、MongoDBを使ってタスクを管理するAPIの作り方を学びました。フロントエンドとバックエンドが連携することで、データを保存したり、サーバー経由でやり取りできるWebアプリが作れるようになります。

サーバーの役割：サーバーはデータの受け渡しや保存を管理し、フロントエンドに必要なデータを提供します。

データベースの役割：データベースを使うことで、データを永続的に保存し、サーバーが再起動してもデータが失われないようにします。
これで、簡単なTODOリストアプリが完成し、データの保存もできるようになりました。次は、さらに高度な機能を追加したり、ユーザー管理を行う機能を追加してみるのも楽しいですね。プログラミングの世界は、どんどん広がっていきます。ぜひ、自分のアイデアを形にしてみてください！

 6. Webアプリを公開しよう：デプロイ
 デプロイとは何か？デプロイとは、開発中に作成したWebアプリを、インターネット上のサーバーに公開して、他のユーザーがアクセスできるようにすることです。デプロイすることによって、自分だけでなく、世界中の誰もがブラウザを通してそのアプリを使えるようになります。
デプロイの手順は、フロントエンドとバックエンドで少し異なりますが、それぞれ順番に解説していきます。

 6.1. フロントエンドのデプロイ：Netlifyを使おうまず、フロントエンド（HTML、CSS、JavaScript）をインターネットに公開する方法から始めましょう。ここでは、Netlifyという無料で使えるクラウドサービスを使って、簡単にフロントエンドを公開します。

 6.1.1. Netlifyとは？Netlifyは、HTMLやCSS、JavaScriptといった静的なファイルを簡単にインターネット上に公開できるクラウドサービスです。GitHubなどのリポジトリと連携して、WebサイトやWebアプリを自動的に公開することができ、初心者でも手軽に利用できるのが魅力です。

 6.1.2. Netlifyでのデプロイ手順Netlifyにアカウントを作成

Netlifyの公式サイトにアクセスし、無料アカウントを作成します。GitHubアカウントで簡単にサインアップできるので、既にGitHubアカウントを持っている場合は、GitHubを使ってログインすると便利です。
プロジェクトの準備
フロントエンドのファイルを準備します。具体的には、以下の3つのファイルを作成しているはずです。

index.html（HTMLファイル）

styles.css（CSSファイル）

script.js（JavaScriptファイル）

これらのファイルを同じフォルダにまとめておきます。
Netlifyの管理画面にアクセス
ログイン後、Netlifyの管理画面にアクセスし、右上にある「Add new site」ボタンをクリックします。そして、「Deploy manually（手動でデプロイ）」を選択します。
ファイルをドラッグ＆ドロップでアップロード
先ほどまとめたプロジェクトのフォルダを、Netlifyの「Drop your site folder here」と書かれた場所にドラッグ＆ドロップします。
アップロードが完了すると、Netlifyが自動的にフロントエンドのファイルを公開し、WebサイトのURLが発行されます。
公開されたWebアプリのURLを確認
アップロードが完了すると、Netlifyが自動的にURLを発行します。発行されたURLにアクセスすることで、フロントエンドのWebアプリがインターネット上で公開され、他のユーザーがアクセスできるようになります。
URLの形式は通常、https://your-site-name.netlify.app という形になります。

 6.1.3. GitHubと連携して自動デプロイ手動でファイルをアップロードするのではなく、GitHubにコードをアップロードしておき、Netlifyと自動で連携させることで、GitHubに新しいコードをプッシュするたびに、Netlifyが自動的にデプロイしてくれるようになります。これを自動デプロイといいます。
GitHubリポジトリを作成
GitHubにアカウントを作成し、新しいリポジトリを作成します。作成したリポジトリに、フロントエンドのファイル（index.html、styles.css、script.js）をアップロードします。
NetlifyとGitHubを連携
Netlifyの管理画面から、「New site from Git」を選択します。
その後、GitHubアカウントとNetlifyを連携させ、公開したいリポジトリを選択します。
自動デプロイの設定
GitHubリポジトリとNetlifyを連携させることで、リポジトリに新しいコードをプッシュするたびに、Netlifyが自動的にその更新を検出して、デプロイしてくれます。つまり、リポジトリに変更が加わるたびに、手動でデプロイする必要がなくなるということです。
これで、GitHubを使ったフロントエンドの自動デプロイが完成です。

 6.2. バックエンドのデプロイ：Herokuを使おう次に、バックエンド（Node.js + Express）のデプロイについて説明します。バックエンドは、データの保存や処理を行うための重要な部分であり、フロントエンドと連携して機能する必要があります。ここでは、Herokuというクラウドプラットフォームを使ってバックエンドを公開します。

 6.2.1. Herokuとは？Herokuは、Node.jsなどのアプリケーションをインターネット上に簡単にデプロイできるクラウドサービスです。Herokuは、無料プランから利用でき、プロジェクトの初期段階や学習に最適です。

 6.2.2. Herokuでのデプロイ手順Herokuアカウントを作成

Herokuの公式サイトにアクセスして、無料アカウントを作成します。サインアップ後、Herokuの管理画面にログインします。
Heroku CLIのインストール
Heroku CLI（コマンドラインツール）をインストールします。CLIは、Herokuにアプリケーションをデプロイするために使うツールです。
インストールが完了したら、ターミナルで以下のコマンドを実行してHerokuにログインします。heroku login
Node.jsプロジェクトの準備
ローカル環境に作成したNode.js + ExpressプロジェクトをHerokuにデプロイする準備をします。
プロジェクトのルートディレクトリに移動し、Procfileというファイルを作成します。このファイルには、Herokuでアプリを実行する際に必要なコマンドを記述します。以下のように記述します。web: node index.js
index.jsは、サーバーを起動するファイルです。もし他のファイル名を使っている場合は、そのファイル名を指定します。
Herokuにアプリケーションを作成
以下のコマンドを使って、Heroku上に新しいアプリケーションを作成します。heroku create
このコマンドを実行すると、Herokuが自動的にアプリケーションのURLを生成します。
Gitを使ってアプリをHerokuにデプロイ
プロジェクトがGitで管理されていない場合、以下のコマンドでGitリポジトリを初期化します。
git init
その後、すべてのファイルをGitに追加してコミットします。
git add .
git commit -m "Initial commit"
最後に、Herokuにアプリをデプロイします。
git push heroku main
デプロイ完了！アプリのURLを確認
デプロイが成功したら、HerokuのURLが表示されます。このURLにアクセスすると、バックエンドのAPIがインターネット上で公開されます。
もし
バックエンドが正常に動作していることを確認したい場合、ブラウザでhttp://your-heroku-app.herokuapp.com/tasksのようにAPIエンドポイントにアクセスしてみてください。

 6.2.3. HerokuにMongoDBを接続バックエンドでデータを永続化するためには、データベースが必要です。ここでは、Heroku上のアプリケーションにMongoDB（MongoDB Atlas）を接続する方法を説明します。
MongoDB Atlasのセットアップ

MongoDB Atlasで無料のMongoDBクラスタを作成し、接続URI（MongoDBの接続情報）を取得します。
Herokuに環境変数を設定
HerokuにデプロイしたアプリケーションがMongoDBに接続できるように、MongoDBの接続URIをHerokuに設定します。これを行うには、ターミナルで以下のコマンドを実行します。heroku config:set MONGODB_URI="your-mongodb-uri"
バックエンドコードの修正
既に作成してあるNode.jsのサーバーコードに、MongoDBの接続URIを環境変数から読み込むように修正します。mongoose.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
これで、MongoDBとHerokuを連携させ、データの永続化が可能になります。

 6.3. フロントエンドとバックエンドの連携フロントエンド（Netlify）とバックエンド（Heroku）をそれぞれデプロイしたら、次はこの2つを連携させます。フロントエンドからバックエンドのAPIにリクエストを送り、データを取得したり保存したりできるようにします。

 6.3.1. フロントエンドのAPIリクエストをHerokuに向けるこれまでローカル環境では、フロントエンドがhttp://localhost:3000のバックエンドにリクエストを送っていましたが、デプロイ後はHeroku上のバックエンドにリクエストを送るようにします。
例えば、以下のように、フロントエンドのJavaScriptコードでAPIのエンドポイントを修正します。
// HerokuのバックエンドAPIエンドポイントにリクエストを送る
axios.get('https://your-heroku-app.herokuapp.com/tasks')
  .then(response => {
    const tasks = response.data;
    tasks.forEach(task => {
      // 取得したタスクをリストに追加
      const taskList = document.getElementById('task-list');
      const newTask = document.createElement('li');
      newTask.textContent = task.text;
      taskList.appendChild(newTask);
    });
  });
これで、フロントエンドがHerokuのバックエンドAPIにリクエストを送り、データをやり取りできるようになります。

 6.4. カスタムドメインを設定しようNetlifyやHerokuを使うと、デフォルトのドメイン（https://your-app-name.netlify.appやhttps://your-app.herokuapp.com）が提供されますが、オリジナルのドメインを使用することもできます。例えば、自分のサイトを「https://myawesomeapp.com」のようにしたい場合です。

 6.4.1. カスタムドメインを取得ドメインを取得するには、GoDaddyやGoogle Domainsなどのサービスを利用します。ドメインの価格は、通常年間1000円〜3000円程度です。

 6.4.2. Netlifyにカスタムドメインを設定Netlifyの管理画面から、公開したサイトの「Domain settings」にアクセスします。
「Add custom domain」をクリックし、取得したカスタムドメインを入力します。
Netlifyの案内に従って、DNS設定を更新し、カスタムドメインを有効にします。
これで、オリジナルのドメインでWebアプリを公開できるようになります。

 6.5. まとめ：Webアプリを公開して世界にシェアしようこれで、作成したWebアプリをインターネット上にデプロイする方法が理解できたはずです。デプロイは、プログラムを作成するだけでなく、それを世界中に公開するための重要なステップです。公開することで、自分だけでなく他の人にも使ってもらえるようになります。

Netlifyを使ってフロントエンドを簡単に公開

Herokuを使ってバックエンドをデプロイし、データベースと連携

カスタムドメインを使ってプロフェッショナルなWebサイトを公開
ぜひ、これらの知識を使って、自分のアイデアを形にし、世界中の人に共有してみてください！

 7. まとめ：プログラミングは自分の力で未来を作るツールこれで、簡単なTODOリストWebアプリを作成し、公開するまでの流れを一通り体験しました。いか
がでしたか？最初は難しそうに感じるかもしれませんが、一つ一つのステップを進めていくことで、必ず成果が見えてきます。
プログラミングの魅力は、自分のアイデアを形にできるところにあります。学校での課題や友達との遊び、家族のサポートなど、日常の中で感じる「こうだったらいいのにな」という思いを、プログラミングを通じて実現できるんです。
そして、インターネットの力を使えば、作ったアプリを世界中の人に使ってもらうことだってできます。

ぜひ、このブログをきっかけに、プログラミングに挑戦してみてください！

 次に進むべきステップ他の言語や技術を学んでみる

JavaScriptだけでなく、PythonやRubyなど他のプログラミング言語にも挑戦してみましょう。それぞれの言語に特有の魅力や強みがあります。
もっと大きなプロジェクトに挑戦する

今回作ったTODOリストをベースに、新しい機能（ユーザー認証、カレンダー連携など）を追加してみると、さらに学びが深まります。
開発コミュニティに参加する

プログラミングには、たくさんのオンラインコミュニティがあります。他の人と知識を共有したり、困ったときに質問したりすることで、成長スピードがアップします。
これからも、プログラミングの世界を楽しんでください！
1. プログラミングって何？ Webアプリって何？

プログラミングとは？

Webアプリとは？

2. なぜWebアプリ開発が楽しいの？

2.1. 自分のアイデアを形にできる

2.2. 解決策を見つけるワクワク感

2.3. 成長が見える

3. Webアプリ開発の基本ステップ

3.1. アイデアを考える

3.2. 必要な技術を理解する

3.3. 環境を整える

4. プログラミングの始め方：実際にコードを書いてみよう！

4.1. フロントエンドの基本：HTMLとCSS

HTMLとCSSの役割

4.1.1. HTMLで基本の構造を作る

HTMLコードの解説：

4.1.2. CSSでデザインを整える

CSSコードの解説：

4.2. JavaScriptで動きをつける

4.2.1. タスクを追加する機能を作ろう

JavaScriptコードの解説：

4.3. プログラムが動く流れを理解しよう

4.4. 実際に動かしてみよう！

4.5. エラーが出たらどうする？

よくあるエラーとその解決方法：

4.6. どんどん改善していこう！

5. バックエンドの基本：データを保存しよう！

5.1. サーバーとは何か？

5.2. Node.jsとExpressを使ってサーバーを作る

5.2.1. Node.jsとは？

5.2.2. Expressとは？

5.3. サーバーの基本コード：タスクを管理するAPIを作ろう

5.3.1. 開発環境の準備

5.3.2. サーバーの基本コード

サーバーコードの解説：

サーバーの実行：

5.4. データベースを使ってデータを永続化する

5.4.1. MongoDBを使ってデータを保存

5.4.2. MongoDBを使ったサーバーコードの例

データベース連携のコード解説：

5.5. サーバーとフロントエンドの連携

フロントエンドでAxiosを使ったリクエスト：

5.6. まとめ：バックエンドでデータを管理する楽しさ

6. Webアプリを公開しよう：デプロイ

デプロイとは何か？

6.1. フロントエンドのデプロイ：Netlifyを使おう

6.1.1. Netlifyとは？

6.1.2. Netlifyでのデプロイ手順

6.1.3. GitHubと連携して自動デプロイ

6.2. バックエンドのデプロイ：Herokuを使おう

6.2.1. Herokuとは？

6.2.2. Herokuでのデプロイ手順

6.2.3. HerokuにMongoDBを接続

6.3. フロントエンドとバックエンドの連携

6.3.1. フロントエンドのAPIリクエストをHerokuに向ける

6.4. カスタムドメインを設定しよう

6.4.1. カスタムドメインを取得

6.4.2. Netlifyにカスタムドメインを設定

6.5. まとめ：Webアプリを公開して世界にシェアしよう

7. まとめ：プログラミングは自分の力で未来を作るツール

次に進むべきステップ

Discussion
