EXERCISE 60分

ストーリー

先
先輩
フォルダとファイルの操作は覚えたね。じゃあ実践だ！
あなた
何を作るんですか？
あ
先
先輩
実際の開発プロジェクトっぽい構造を作ってみよう。現場でも同じようなことをするからね

ミッション概要

以下のプロジェクト構造をターミナルだけで作成してください。

graph TD
    Root["my-portfolio/"]
    Index["index.html"]
    About["about.html"]
    Contact["contact.html"]
    CSS["css/"]
    JS["js/"]
    Images["images/"]
    Style["style.css"]
    Reset["reset.css"]
    Main["main.js"]
    Empty["（空のディレクトリ）"]
    Readme["README.md"]

    Root --> Index
    Root --> About
    Root --> Contact
    Root --> CSS
    Root --> JS
    Root --> Images
    Root --> Readme
    CSS --> Style
    CSS --> Reset
    JS --> Main
    Images --> Empty

    style Root fill:#d1fae5,stroke:#059669,stroke-width:2px,color:#064e3b
    style CSS fill:#dbeafe,stroke:#2563eb,color:#1e40af
    style JS fill:#fef3c7,stroke:#d97706,color:#92400e
    style Images fill:#fce7f3,stroke:#db2777,color:#831843
    style Empty fill:#f3f4f6,stroke:#9ca3af,stroke-dasharray:5 5,color:#6b7280

Part 1: 基本構造を作る（15分）

タスク 1-1: プロジェクトフォルダを作成

# ホームに移動
cd ~

# プロジェクトフォルダを作成
mkdir my-portfolio

# 移動
cd my-portfolio

タスク 1-2: サブフォルダを作成

css、js、images の3つのフォルダを作成してください。

💡 ヒント 
mkdir css js images

または

mkdir css
mkdir js
mkdir images

タスク 1-3: 確認

ls

期待される出力：

css  images  js

Part 2: HTMLファイルを作る（15分）

タスク 2-1: index.html を作成

以下の内容で index.html を作成してください。

cat > index.html << 'EOF'
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Welcome to My Portfolio</h1>
</body>
</html>
EOF

タスク 2-2: about.html を作成

同様に about.html を作成してください。

💡 ヒント 
cat > about.html << 'EOF'
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>About - My Portfolio</title>
</head>
<body>
    <h1>About Me</h1>
</body>
</html>
EOF

タスク 2-3: contact.html を作成

同様に contact.html を作成してください。

📝 解答 
cat > contact.html << 'EOF'
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Contact - My Portfolio</title>
</head>
<body>
    <h1>Contact</h1>
</body>
</html>
EOF

タスク 2-4: 確認

ls *.html

期待される出力：

about.html  contact.html  index.html

Part 3: CSS/JSファイルを作る（15分）

タスク 3-1: style.css を作成

cat > css/style.css << 'EOF'
body {
    font-family: sans-serif;
    margin: 0;
    padding: 20px;
}

h1 {
    color: #333;
}
EOF

タスク 3-2: reset.css を作成

cat > css/reset.css << 'EOF'
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
EOF

タスク 3-3: main.js を作成

cat > js/main.js << 'EOF'
console.log('Portfolio loaded!');
EOF

タスク 3-4: 確認

ls css/
ls js/

Part 4: README.md を作る（10分）

タスク 4-1: README.md を作成

cat > README.md << 'EOF'
# My Portfolio

個人ポートフォリオサイトです。

## 構成

- index.html - トップページ
- about.html - 自己紹介
- contact.html - お問い合わせ

## 技術

- HTML5
- CSS3
- JavaScript
EOF

タスク 4-2: 内容を確認

cat README.md

Part 5: 最終確認（5分）

タスク 5-1: 構造を確認

# すべてのファイルを再帰的に表示
ls -R

期待される出力：

.:
README.md  about.html  contact.html  css  images  index.html  js

./css:
reset.css  style.css

./images:

./js:
main.js

タスク 5-2: ファイル数を確認

find . -type f | wc -l

期待される出力：

7

（7つのファイル: 3 HTML + 2 CSS + 1 JS + 1 README）

チャレンジ課題

Challenge 1: ファイルをコピー

index.html を backup/index.html.bak としてバックアップしてください。

📝 解答 
mkdir backup
cp index.html backup/index.html.bak

Challenge 2: ファイルをリネーム

js/main.js を js/app.js にリネームしてください。

📝 解答 
mv js/main.js js/app.js

Challenge 3: 構造を複製

my-portfolio 全体を my-portfolio-backup としてコピーしてください。

📝 解答 
cd ~
cp -r my-portfolio my-portfolio-backup

達成度チェック

タスク完了
プロジェクトフォルダ作成□
サブフォルダ3つ作成□
HTMLファイル3つ作成□
CSSファイル2つ作成□
JSファイル1つ作成□
README.md作成□
構造の確認□

すべてクリア → Part 5クリア！

クリーンアップ

演習が終わったら、練習用フォルダを削除できます。

cd ~
rm -r my-portfolio
rm -r my-portfolio-backup  # 作成した場合

まとめ

この演習で使ったコマンド：

コマンド用途
mkdirフォルダ作成
cdディレクトリ移動
touch / cat >ファイル作成
ls / ls -R内容確認
cpコピー
mv移動・リネーム
rm -r削除

次のステップへ

プロジェクト構造を作れましたか？

次のセクションでは、Step 2の理解度チェックです。クイズに挑戦して、ファイル・フォルダ操作をマスターしましょう！

推定所要時間: 60分