LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Kohei-Tk

Web開発基礎 + インフラ基礎

Last updated at Posted at 2025-08-18

【6ヶ月でフリーランス】Week 1-2: フロントエンド基礎の完全攻略ガイド

はじめに

フリーランスエンジニアを目指す6ヶ月集中学習プランの第1弾！
最初の2週間で「HTML5 + CSS3 + JavaScript + React.js」の基礎をマスターする具体的な学習方法をご紹介します。

この記事の対象者

  • プログラミング初心者〜少し経験がある方
  • フリーランスエンジニアを目指している方
  • 短期間でフロントエンド技術を習得したい方

学習時間の目安

  • 平日：1日3時間（朝30分 + 昼1時間 + 夜1.5時間）
  • 休日：1日6-8時間

Week 1: HTML5 + CSS3 + JavaScript基礎をマスター

Day 1-2: HTML5基礎 - セマンティックなマークアップを身につける

学習時間: 1日3時間

朝の理論学習 (30分)

  • HTML5の新要素とセマンティック要素
  • アクセシビリティの基本

実践学習 (2.5時間)

<!-- 実際に作成するHTMLの例 -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自己紹介サイト</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="about">
            <h1>自己紹介</h1>
            <p>フリーランスエンジニアを目指しています</p>
        </section>
        
        <section id="skills">
            <h2>スキル</h2>
            <article>
                <h3>Web開発</h3>
                <p>HTML, CSS, JavaScriptを学習中</p>
            </article>
        </section>
    </main>
    
    <footer>
        <address>
            <p>Email: your.email@example.com</p>
        </address>
    </footer>
</body>
</html>

作成するもの

  1. 自己紹介ページ - プロフィール、経歴、目標
  2. フォームページ - お問い合わせフォーム
  3. ギャラリーページ - 画像一覧表示

Day 3-4: CSS3基礎 - モダンなレイアウトとデザイン

学習時間: 1日3時間

朝の理論学習 (30分)

  • Flexbox vs Grid の使い分け
  • CSS設計手法（BEM記法）

実践学習 (2.5時間)

/* 実際に書くCSSの例 */
/* リセットCSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* レスポンシブ対応 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Flexboxレイアウト */
.header__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Gridレイアウト */
.skills__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* アニメーション */
.button {
    transition: all 0.3s ease;
    transform: scale(1);
}

.button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* レスポンシブ */
@media (max-width: 768px) {
    .header__nav {
        flex-direction: column;
    }
}

作成するもの

  1. レスポンシブなナビゲーション
  2. カード型レイアウト
  3. ホバーエフェクト付きボタン

Day 5-7: JavaScript基礎 - インタラクティブな機能を実装

学習時間: 1日3時間

朝の理論学習 (30分)

  • ES6+の新機能（let/const, アロー関数, 分割代入）
  • DOM操作の基本

実践学習 (2.5時間)

// 実際に書くJavaScriptの例

// 1. DOM操作基礎
const button = document.querySelector('#submit-btn');
const form = document.querySelector('#contact-form');
const modal = document.querySelector('#modal');

// 2. イベントリスナー
button.addEventListener('click', (e) => {
    e.preventDefault();
    showModal();
});

// 3. 関数定義
const showModal = () => {
    modal.classList.add('show');
    document.body.style.overflow = 'hidden';
};

const hideModal = () => {
    modal.classList.remove('show');
    document.body.style.overflow = 'auto';
};

// 4. フォームバリデーション
const validateForm = (formData) => {
    const errors = [];
    
    if (!formData.name.trim()) {
        errors.push('名前は必須です');
    }
    
    if (!formData.email.includes('@')) {
        errors.push('有効なメールアドレスを入力してください');
    }
    
    return errors;
};

// 5. 非同期処理（基礎）
const fetchData = async () => {
    try {
        const response = await fetch('/api/data');
        const data = await response.json();
        displayData(data);
    } catch (error) {
        console.error('エラーが発生しました:', error);
    }
};

作成するもの

  1. インタラクティブフォーム - リアルタイムバリデーション
  2. モーダルウィンドウ - 開閉アニメーション付き
  3. スライダー - 画像切り替え機能

Week1 制作物 → https://github.com/Kohei-Tk/WebInfra/tree/main/HTML

Week 2: React.js基礎 - モダンフロントエンド開発への第一歩

Day 8-10: React基礎概念 - コンポーネント思考を身につける

学習時間: 1日3時間

朝の理論学習 (30分)

  • コンポーネント思考
  • props vs state の違い
  • JSXの書き方

実践学習 (2.5時間)

# プロジェクト作成
npx create-react-app my-portfolio
cd my-portfolio
npm start

// 実際に作成するReactコンポーネントの例

// src/components/Header.jsx
import React from 'react';
import './Header.css';

const Header = ({ title, navigation }) => {
    return (
        <header className="header">
            <h1 className="header__title">{title}</h1>
            <nav className="header__nav">
                {navigation.map((item, index) => (
                    <a key={index} href={item.href} className="header__link">
                        {item.text}
                    </a>
                ))}
            </nav>
        </header>
    );
};

export default Header;

// src/components/SkillCard.jsx
import React, { useState } from 'react';

const SkillCard = ({ skill }) => {
    const [isExpanded, setIsExpanded] = useState(false);
    
    return (
        <div className="skill-card">
            <h3 className="skill-card__title">{skill.name}</h3>
            <div className="skill-card__level">
                レベル: {skill.level}/100
            </div>
            <button 
                onClick={() => setIsExpanded(!isExpanded)}
                className="skill-card__toggle"
            >
                {isExpanded ? '詳細を隠す' : '詳細を見る'}
            </button>
            {isExpanded && (
                <div className="skill-card__description">
                    {skill.description}
                </div>
            )}
        </div>
    );
};

export default SkillCard;

作成するもの

  1. Headerコンポーネント - props受け渡し
  2. SkillCardコンポーネント - state管理
  3. ContactFormコンポーネント - フォーム制御

Day 11-14: React実践開発 - 実際のアプリケーションを作成

学習時間: 1日3時間

朝の理論学習 (30分)

  • useEffect フック
  • カスタムフック
  • コンポーネント設計パターン

実践学習 (2.5時間)

// src/App.js - メインアプリケーション
import React, { useState, useEffect } from 'react';
import Header from './components/Header';
import SkillSection from './components/SkillSection';
import ContactForm from './components/ContactForm';
import './App.css';

const App = () => {
    const [skills, setSkills] = useState([]);
    const [darkMode, setDarkMode] = useState(false);
    
    useEffect(() => {
        // スキルデータの読み込み
        const skillsData = [
            { id: 1, name: 'HTML', level: 80, description: 'セマンティックHTMLが書けます' },
            { id: 2, name: 'CSS', level: 75, description: 'Flexbox, Gridを使ったレイアウト' },
            { id: 3, name: 'JavaScript', level: 70, description: 'ES6+, DOM操作' },
        ];
        setSkills(skillsData);
    }, []);
    
    const navigation = [
        { href: '#about', text: 'About' },
        { href: '#skills', text: 'Skills' },
        { href: '#contact', text: 'Contact' }
    ];
    
    return (
        <div className={`app ${darkMode ? 'dark' : 'light'}`}>
            <Header 
                title="My Portfolio" 
                navigation={navigation}
            />
            <main className="main">
                <SkillSection skills={skills} />
                <ContactForm />
            </main>
            <button 
                onClick={() => setDarkMode(!darkMode)}
                className="theme-toggle"
            >
                {darkMode ? '🌞' : '🌙'}
            </button>
        </div>
    );
};

export default App;

作成するもの

  1. ポートフォリオサイト - 複数コンポーネント統合
  2. ダークモード切り替え - グローバルstate管理
  3. レスポンシブ対応 - モバイルファースト設計

効率的な学習のためのリソース活用法

必須学習サイト一覧

HTML/CSS

  1. MDN Web Docs - https://developer.mozilla.org/ja/
  2. CSS-Tricks - https://css-tricks.com/
  3. Flexbox Froggy - https://flexboxfroggy.com/ (ゲーム形式)

JavaScript

  1. JavaScript.info - https://ja.javascript.info/
  2. Eloquent JavaScript - https://eloquentjavascript.net/
  3. FreeCodeCamp - https://www.freecodecamp.org/

React

  1. React公式チュートリアル - https://ja.react.dev/learn
  2. React Hooks入門 - 公式ドキュメント
  3. YouTube: React講座 - コーディング動画

時間効率を最大化する学習フロー

平日の学習スケジュール（3時間）

【平日スケジュール例】
07:00-07:30: 理論学習（通勤中・朝食時）
12:00-13:00: 実践コーディング（昼休み）
19:00-20:30: 実践コーディング（夜）
21:00-21:30: 復習・調べ物

#### 休日の学習スケジュール（6-8時間）
09:00-12:00: 集中コーディングタイム
13:00-15:00: 新機能実装
16:00-17:00: コードレビュー・リファクタリング
19:00-20:00: 週次振り返り

学習の成果を確実にする進捗管理法

毎日のチェックリスト

  • その日の学習目標を達成
  • GitHubにコードをpush
  • 学習ログを記録
  • 翌日の学習計画を立てる

週末の確認項目

  • 制作物が動作する
  • コードが整理されている
  • README.mdを更新
  • デプロイできる状態

躓きがちなポイントと解決策

よくある躓きポイント別の対処法

  1. CSS Gridが理解できない

    • CSS Grid Gardenで練習

  2. JavaScript非同期処理が分からない

    • Promise, async/awaitを段階的に学習

  3. Reactの状態管理が複雑

    • 最初は単一コンポーネントから始める

技術的な相談先・コミュニティ

  • Stack Overflow - 技術的な質問
  • Qiita - 日本語での情報収集
  • Discord/Slack - リアルタイム相談
  • Twitter - エンジニアコミュニティ

2週間で達成すべき明確なゴール

Week 1-2終了時のスキルチェックリスト

  • HTML5の主要要素を使ったページ作成
  • Flexbox/Gridを使ったレスポンシブレイアウト
  • JavaScript DOM操作とイベント処理
  • Reactコンポーネントの作成とprops/state管理

完成させるべき制作物

Week 1の成果物

  1. HTML/CSS/JSサイト - バニラJSでのインタラクティブサイト

Week 2の成果物
2. Reactポートフォリオ - コンポーネント分割された単一ページ

GitHubリポジトリ構成例

my-learning-journey/
├── week1-vanilla-js/
│   ├── index.html
│   ├── style.css
│   └── script.js
├── week2-react-portfolio/
│   ├── src/
│   ├── public/
│   └── package.json
└── README.md

おわりに

この2週間のプランを実行することで、フロントエンド開発の基礎がしっかりと身につきます。

成功のポイント

  • 完璧を求めずに、まずは動くものを作る
  • 毎日GitHubにコードをpushして進捗を可視化
  • 分からないことがあっても立ち止まらず、調べて解決
  • 週末に作ったものを友人に見せてフィードバックをもらう

次回は「Week 3-4: API開発 + クラウド基礎」について詳しく解説する予定です！

実際にこの学習プランを試された方は、ぜひコメントで進捗や感想を教えてください。みんなで応援し合いましょう！

※この記事が参考になった方は、ぜひLLIKEをお願いします！
また、フォローしていただけると、続編の記事をいち早くお届けできます。

関連記事

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?