TODO リスト用のフォルダ作成

JavaScript

Last updated at 2024-09-23Posted at 2024-09-23

1. ターミナル開く

まず、MacやLinuxでは「ターミナル」、Windowsでは「コマンドプロンプト」または「PowerShell」を開きます。ターミナルは、コマンドを入力して操作するためのツールで、コードの実行やファイル操作などを行います。
画面に表示されるスクリーンショットのように、アプリケーションフォルダ（Macの場合）やスタートメニュー（Windowsの場合）からターミナルを起動します。

上記の画像は、Macの「ターミナル」を開いた際の画面です。

WindowsでターミナルやPowerShellを使用する場合の画面例です。

2. 新規ファイル作成

次に、プロジェクトフォルダを作成して、必要なファイルを準備します。

作業ディレクトリに移動

作業を行うフォルダに移動します。以下のコマンドを実行して、workspace フォルダに移動します。
```
cd workspace
```
新しいプロジェクトフォルダを作成

新しいプロジェクトを保存するためのフォルダ todo-app-v-2 を作成します。mkdir コマンドでディレクトリを作成します。
```
mkdir todo-app-v-2
```
HTMLファイルを作成

プロジェクトのメインHTMLファイルである index.html を作成します。touch コマンドで空のファイルを作成できます。
```
touch index.html
```
JavaScriptファイルを作成

index.js という名前のJavaScriptファイルを作成し、このファイルにプログラムのロジックを記述します。
```
touch index.js
```
CSSファイルを作成

index.css というCSSファイルを作成して、スタイルシートとして利用します。Webページのデザインやレイアウトを指定するために使います。
```
touch index.css
```

3. HTMLファイルに基本構造を追加

HTML構造の作成

index.html ファイルに以下のコードを追加して、TODOリストアプリの基本的なHTML構造を作成します。このコードは、リスト表示の領域と、スタイルシートやJavaScriptファイルのリンクを設定しています。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TODO-List</title>
<link rel="stylesheet" href="index.css"> <!-- CSSファイルをリンク -->
</head>
<body>
  <h1>TODO-List-v2</h1> <!-- タイトル部分 -->
  <div id="table"> <!-- タスクリストを表示するための領域 -->
    <h2>Current Tasks</h2>
    <ul class="task_list"></ul> <!-- タスクが表示されるリスト -->
  </div>
<script src="index.js"></script> <!-- JavaScriptファイルをリンク -->
</body>
</html>

<h1>: メインのタイトルとして「TODO-List-v2」を表示。
<ul class="task_list">: タスクをリスト形式で表示する領域を作成します。タスクの項目はJavaScriptを使って動的に追加します。

4. CSSファイルにスタイルを追加

次に、index.css ファイルに基本的なスタイルを追加して、ページの外観を整えます。

body, html {
    font-family: 'Arial', sans-serif; /* フォントの設定 */
    background-color: #f4f7f6; /* 背景色を淡いグレーに設定 */
    color: #333; /* 文字色を濃いグレーに設定 */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* コンテンツを中央に配置 */
    align-items: center; /* 垂直方向でも中央に配置 */
    height: 100vh; /* ページ全体の高さを100%に設定 */
}

h1 {
    text-align: center; /* タイトルを中央に配置 */
    color: #4CAF50; /* タイトルの文字色を緑に設定 */
    margin-bottom: 20px; /* 下にスペースを設定 */
}

body, html のスタイル:
- ページ全体をセンタリングし、背景色を淡いグレー（#f4f7f6）に、文字色を濃いグレー（#333）に設定しています。また、height: 100vh でページ全体をフルスクリーンに対応させています。
h1 のスタイル:
- タイトル（TODO-List-v2）は、緑色（#4CAF50）にし、中央揃えにします。また、下に20pxのスペースを設け、見やすくしています。

5. まとめ

これで、以下の3つのステップが完了しました：

ターミナルで新しいプロジェクトフォルダと基本ファイル（HTML、CSS、JavaScript）を作成。
index.html に、TODOリストアプリの基本的なHTML構造を追加。
index.css に、アプリの基本スタイルを設定し、見やすくしました。

次のステップとして、index.js にタスクの追加や削除などのロジックを記述して、TODOリストの機能を実装します。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up