見習エンジニアProgateから始めようと思ったけどどこから手を付けていいのか・・・。
見習エンジニアエンジニアになるためのProgateでの効率的な学習方法を教えてください！
Progateが人気そうだし、ここからプログラミングを始めようと思ってもレッスンが多くて迷ってしまうと思います。
ゆきだるま私も、最初は何から手を付ければいいかわかりませんでした。
Progateは初心者でも理解しやすい最高の教材なのですが、コース選びの時点で難しいのも事実。
そこで今回の記事では
- Progateは最高の教材であるからこその注意点
- 【超効率的な】Progate学習方法
- Progateの次に学習すべき内容
について解説します。
ゆきだるま私はProgateレベル288を突破しました。
しかし、これは自慢ではなく、後悔すべき数字なのです。
長く学習すると、Progateでしかプログラミングできない人になってしまいます。
Progateをささっと卒業して、効率的にプログラミングを学んでいきましょう！
なお、この記事では「Progateを終わらせた後」についても言及していますので、Progateを終了した方も参考になると思います。
【Progateは意味がない？】学習を始める前の注意点
Progateはプログラミング学習サイトでは圧倒的な人気を誇っています。
ゆきだるまゆきだるまもプログラミングの導入教材として最高だと思います
その理由は以下の3つが挙げられます。
ただし、そんな最高なプログラミング教材だからこそ、注意するべき点があります。
ゼロから基礎を学習できる→基礎を習得しても、コードがかけるようにならない
Progateはレッスンが基礎～応用まで段階的に用意されているので、基礎固めに最適。
多くのプログラミング教材は難易度が急に上がり、挫折してしまう人が多くいます。
Progateは基礎を学ばなければ、応用に進めないようになっているので挫折する人が少ない傾向にあります。
Progateは無料で受講できるレッスンもありますが、数が限られています。
有料版にすることは必須なので、まずは1か月だけでもいいので、惜しまず投資しましょう。
ゆきだるま無料の部分だけやって楽しいと思えたら課金を決意していいと思うぞ！
ここはケチらず自己投資しよう！
ただし、有料プランの学習を終了したからと言って、コードを書けるようになるわけではありません。
見習エンジニア確かに、Progate卒業してからWeb開発できるようになるまでのイメージが思い浮かばないよ
つまり、Progateで基礎を習得した後、何をすべきかわからないという問題が発生してしまいます。
そこで、次の章でコードが書ける人になるためのProgateの効率的な学習方法を紹介しています。
その学習方法で取り組めば、自分のパソコンでプログラミングできるようになるので、安心してください。
環境構築なしでコードを書き始められる→Progate以外でプログラミングできない
環境構築は現役のエンジニアでもエラーが頻発する難しい作業です。
ただし、Progateはその難しい環境構築を終えた状態で、ユーザーにサービスを提供しています。
Progate学習者は、環境について意識せずにプログラミング言語の学習に集中できます。
ゆきだるまゆきだるまも他の環境でプログラムが組めないから、延々とProgateを周回していたよ。今思えば、その時間は無駄だったな。
見習エンジニアプログラミングのやり方がわからないから、Progateの学習に逃げちゃうんだよね
Progate以外でもプログラミングできる人になるためには、成果物を作りながら、進めていくのが大事です。
後続の章で詳しく解説します。
多くのプログラミング言語を学習できる→何の言語を学べばいいかわからない
Progateでは以下の16の言語を学ぶことができます。これから実装される言語もあるかもしれません。
見習エンジニアこんなに勉強しなきゃいけないのか・・・
ゆきだるまシステムの規模や要件、作りたいものによって、学ぶべき言語は変わってくるんだ。
しかし、初学者が言語を選ぶことは難しく、何から学習していけばよいか混乱してしまいます。
そこで、今回は「一般的なWeb開発」を例に、どのプログラミング言語をどの順番で学ぶべきかを解説します。
ゆきだるま何の言語がどういったところで使われているか知ることはエンジニアにとって重要です。時間があるときに調べてみよう！
Progateの進め方・コース順番を解説
Progateの進め方を解説する前に、注意する点を1つだけ解説します。
この一点だけを注意すれば、効率よく学習を進められますよ！
【挫折しないために】成果物をつくりながらProgateを進めよう
Progateを効率よく学習するためには、成果物を作りながら、進めていくのが重要です。
ゆきだるまエンジニアは覚えること学習することが多いですよね。
焦って、いろんな技術を一気に学習しても、結局全部忘れてしまいます。
学習効率を高めるために、新しく学習した技術を使って自分で何か作ってみましょう。
実際の業務でも調べることが多いので、こういった技術の引き出しを作っておくことは重要です。
ゆきだるま次の章で、私が作った成果物の例を載せておくので、参考にしてください
まずは、HTML,CSSでWebページを作ってみよう
HTMLとCSSは、Webページを作成するための基本的な技術です。まずはここから始めましょう。
- HTML・・・サイトの骨組みを作る。HTMLだけだと「白黒のテキスト」中心のページ
- CSS・・・サイトの見た目を整える。白黒のテキストを色鮮やかに装飾できる。
見習エンジニアHTMLとCSSを学ぶことで、簡単なWebサイトが作れるようになるんだね！
成果物
HTML,CSSで作れるようになる成果物は以下になります。
- 自己紹介ページ
- シンプルなブログ記事
- お問合せフォーム
- ポートフォリオサイト
- ランディングページ
ゆきだるま私が作成したものは以下になります。
参考までにプログラムを以下に載せておきます。
自己紹介ページのHTMLファイル
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width,initial-scale=1″ />
<title>自己紹介 | 山田 祐紀</title>
<link rel=”stylesheet” href=”stylesheet.css” />
<!– Font Awesome CDN（アイコン用） –>
<link
rel=”stylesheet”
href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css”
integrity=”sha512-p1Cm…”
crossorigin=”anonymous”
referrerpolicy=”no-referrer”
/>
</head>
<body>
<div class=”container”>
<header>
<div class=”avatar”>
<img
class=”avatar-img”
src=”https://from-zero-to-dev.com/wp-content/uploads/2025/12/4f0a3b8a6f237c975d08a561f7fa5757.png”
alt=”プロフィール写真”
/>
</div>
<div>
<h1>山田 祐紀（やまだ ゆうき）</h1>
<p class=”lead”>
フロントエンド開発者 /
<span class=”transparent-text”
>趣味でグラフィックデザインも行います。使いやすく美しいUIを作るのが好きです。</span
>
</p>
</div>
</header>
<section class=”profile”>
<h2>概要</h2>
<p>
東京都在住。HTML/CSS/JavaScriptでの開発を中心に、ReactやNext.js、TypeScriptの経験があります。現在は個人プロジェクトとフリーランスの仕事を並行して行っています。
</p>
</section>
<section class=”details grid”>
<div>
<h3>スキル</h3>
<ul>
<li>HTML / CSS / JavaScript</li>
<li>React / Next.js / TypeScript</li>
<li>レスポンシブデザイン / アクセシビリティ</li>
</ul>
</div>
<div>
<h3>連絡先</h3>
<ul>
<li>
メール: <a href=”mailto:you@example.com”>you@example.com</a>
</li>
</ul>
<!– ソーシャルボタン –>
<div
style=”margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap”
>
<a
class=”btn icon twitter”
href=”https://twitter.com/yourhandle”
target=”_blank”
rel=”noopener”
>
<i class=”fab fa-twitter” aria-hidden=”true”></i>
<span class=”sr-only”>Twitter</span>
</a>
<a
class=”btn icon github”
href=”https://github.com/yourname”
target=”_blank”
rel=”noopener”
>
<i class=”fab fa-github” aria-hidden=”true”></i>
<span class=”sr-only”>GitHub</span>
</a>
<a class=”btn icon email” href=”mailto:you@example.com”>
<i class=”fas fa-envelope” aria-hidden=”true”></i>
<span class=”sr-only”>Email</span>
</a>
</div>
</div>
</section>
<section>
<h3>趣味</h3>
<p>
写真撮影、カフェ巡り、登山。休日はカメラを持って近郊を散歩することが多いです。
</p>
</section>
<!– 問い合わせフォーム –>
<section class=”contact-form”>
<h3>お問い合わせ</h3>
<form action=”#” method=”post”>
<label for=”name”>お名前</label>
<input
id=”name”
name=”name”
type=”text”
required
placeholder=”例：山田 太郎”
/>
<label for=”email”>メールアドレス</label>
<input
id=”email”
name=”email”
type=”email”
required
placeholder=”you@example.com”
/>
<label for=”message”>メッセージ</label>
<textarea
id=”message”
name=”message”
required
placeholder=”お問い合わせ内容をご記入ください”
></textarea>
<button class=”btn” type=”submit”>
<i class=”fas fa-paper-plane” aria-hidden=”true”></i>
送信
</button>
</form>
</section>
<footer>
<p>このページは簡単な自己紹介ページのサンプルです。</p>
</footer>
</div>
</body>
</html>
自己紹介ページのCSSファイル
body {
font-family: system-ui, -apple-system, “Segoe UI”, Roboto,
“Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;
margin: 0;
/* フォールバック色 */
background-color: #f7f7f9;
color: #111;
/* ページ全体の背景画像 */
background-image: url(“https://from-zero-to-dev.com/wp-content/uploads/2025/12/4385400_m.jpg”);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.container {
max-width: 800px;
margin: 40px auto;
padding: 24px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(6px);
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
transition: box-shadow 240ms ease, transform 240ms ease;
}
header {
display: flex;
gap: 18px;
align-items: center;
/* header の背景画像は削除（ページ全体で設定） */
}
.avatar {
width: 96px;
height: 96px;
border-radius: 50%;
/* 画像を丸くトリミングするためのコンテナ */
overflow: hidden;
display: inline-block;
flex: 0 0 auto;
background-color: #eee;
}
.avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
h1 {
margin: 0;
font-size: 1.6rem;
}
p.lead {
margin: 8px 0 0;
color: #555;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 20px;
}
ul {
margin: 0;
padding-left: 1.25rem;
}
footer {
margin-top: 32px;
font-size: 0.9rem;
color: #666;
text-align: center;
}
@media (max-width: 600px) {
header {
flex-direction: row;
gap: 12px;
}
.grid {
grid-template-columns: 1fr;
}
}
/* ボタン共通 */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 10px;
border: none;
cursor: pointer;
font-weight: 600;
text-decoration: none;
color: #fff;
background: linear-gradient(180deg, #4f46e5, #4338ca);
box-shadow: 0 8px 20px rgba(67, 56, 202, 0.18);
transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.btn:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(67, 56, 202, 0.22);
}
/* 押したときに凹む表現 */
.btn:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12),
inset 0 4px 8px rgba(0, 0, 0, 0.06);
}
/* ソーシャル用の小さなボタン */
.btn.icon {
padding: 8px 12px;
border-radius: 12px;
}
.btn .fa,
.btn .fab {
font-size: 1rem;
}
/* 色別バリエーション */
.btn.twitter {
background: linear-gradient(180deg, #1da1f2, #0d95e8);
}
.btn.github {
background: linear-gradient(180deg, #111827, #0b1220);
}
.btn.email {
background: linear-gradient(180deg, #10b981, #059669);
}
/* フォーム */
.contact-form {
margin-top: 24px;
}
.contact-form form {
display: grid;
gap: 12px;
}
.contact-form label {
font-size: 0.9rem;
color: #333;
}
.contact-form input[type=”text”],
.contact-form input[type=”email”],
.contact-form textarea {
width: 100%;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid rgba(16, 24, 40, 0.08);
background: rgba(255, 255, 255, 0.9);
transition: box-shadow 160ms ease, transform 160ms ease;
font-size: 0.95rem;
color: #111;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.12);
transform: translateY(-2px);
}
.contact-form textarea {
min-height: 120px;
resize: vertical;
}
/* 既存の透明クラスは維持 */
.transparent-text {
color: rgba(0, 0, 0, 0.7);
}
Javascriptを学習して、Webサイトに動きを付けてみよう
HTMLとCSSだけだと、ページの内容が変わらないサイト(静的サイト)になっています。
Javascriptで、HTMLとCSSで作成したサイトに様々な機能を追加していきます。
Javascriptを学習することで、ユーザーアクションがあるサイト(動的サイト)にすることができます。
見習エンジニアJavascriptを使うと、僕たちが普段目にするWebサイトっぽくなるんだね！
見習エンジニアJavascriptのライブラリでjQueryのレッスンもあるけど、やった方がいいのか？
ゆきだるまjQueryは学ぶ必要がないよ。もし使うことがあっても、Javascriptを学習していれば、学習コストは少ない。
モダンな自社開発企業ではjQueryを使うことがほとんどありません
jQueryを現場で使うことがあったらその時に学習しましょう！
成果物
さきほどHTML,CSSで作ったWebページに以下のような機能を追加してみましょう。
- ドロップダウンメニューやハンバーガーメニュー機能
- モーダルウィンドウ（ポップアップ）機能
- 入力チェックやエラーメッセージ表示機能
- 天気情報やニュースを外部APIで取得して、表示する機能
- アニメーション(スクロールに応じて要素をフェードイン)機能
ゆきだるま私が作成したものは以下になります。
参考までにプログラムを以下に載せておきます。
HTML
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width,initial-scale=1″ />
<title>自己紹介 | 山田 祐紀</title>
<link rel=”stylesheet” href=”stylesheet.css” />
<!– Font Awesome CDN（アイコン用） –>
<link
rel=”stylesheet”
href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css”
integrity=”sha512-p1Cm…”
crossorigin=”anonymous”
referrerpolicy=”no-referrer”
/>
</head>
<body>
<div class=”container”>
<nav class=”topbar”>
<ul class=”nav-menu” role=”menu”>
<li><a href=”#profile”>プロフィール</a></li>
<li class=”dropdown”>
<button
class=”dropdown-toggle”
aria-haspopup=”true”
aria-expanded=”false”
>
メニュー
</button>
<ul class=”dropdown-menu” role=”menu”>
<li><a href=”#skills”>スキル</a></li>
<li><a href=”#contact”>連絡先</a></li>
</ul>
</li>
<li class=”nav-right”>
<a href=”#” data-modal-target=”#modal-about”>About</a>
</li>
</ul>
</nav>
<header>
<div class=”avatar”>
<img
class=”avatar-img”
src=”https://from-zero-to-dev.com/wp-content/uploads/2025/12/4f0a3b8a6f237c975d08a561f7fa5757.png”
alt=”プロフィール写真”
/>
</div>
<div>
<h1>山田 祐紀（やまだ ゆうき）</h1>
<p class=”lead”>
フロントエンド開発者 /
<span class=”transparent-text”
>趣味でグラフィックデザインも行います。使いやすく美しいUIを作るのが好きです。</span
>
</p>
</div>
</header>
<section id=”profile” class=”profile fade-in-on-scroll”>
<h2>概要</h2>
<p>
東京都在住。HTML/CSS/JavaScriptでの開発を中心に、ReactやNext.js、TypeScriptの経験があります。現在は個人プロジェクトとフリーランスの仕事を並行して行っています。
</p>
</section>
<section id=”skills” class=”details grid fade-in-on-scroll”>
<div>
<h3>スキル</h3>
<ul>
<li>HTML / CSS / JavaScript</li>
<li>React / Next.js / TypeScript</li>
<li>レスポンシブデザイン / アクセシビリティ</li>
</ul>
</div>
<div>
<h3>連絡先</h3>
<ul>
<li>
メール: <a href=”mailto:you@example.com”>you@example.com</a>
</li>
</ul>
<!– ソーシャルボタン –>
<div
style=”margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap”
>
<a
class=”btn icon twitter”
href=”https://twitter.com/yourhandle”
target=”_blank”
rel=”noopener”
>
<i class=”fab fa-twitter” aria-hidden=”true”></i>
<span class=”sr-only”>Twitter</span>
</a>
<a
class=”btn icon github”
href=”https://github.com/yourname”
target=”_blank”
rel=”noopener”
>
<i class=”fab fa-github” aria-hidden=”true”></i>
<span class=”sr-only”>GitHub</span>
</a>
<a class=”btn icon email” href=”mailto:you@example.com”>
<i class=”fas fa-envelope” aria-hidden=”true”></i>
<span class=”sr-only”>Email</span>
</a>
</div>
</div>
</section>
<section class=”fade-in-on-scroll”>
<h3>趣味</h3>
<p>
写真撮影、カフェ巡り、登山。休日はカメラを持って近郊を散歩することが多いです。
</p>
</section>
<!– 問い合わせフォーム –>
<section id=”contact” class=”contact-form fade-in-on-scroll”>
<h3>お問い合わせ</h3>
<form action=”#” method=”post”>
<label for=”name”>お名前</label>
<input
id=”name”
name=”name”
type=”text”
required
placeholder=”例：山田 太郎”
/>
<div
class=”error”
id=”name-error”
style=”display: none”
aria-live=”polite”
></div>
<label for=”email”>メールアドレス</label>
<input
id=”email”
name=”email”
type=”email”
required
placeholder=”you@example.com”
/>
<div
class=”error”
id=”email-error”
style=”display: none”
aria-live=”polite”
></div>
<label for=”message”>メッセージ</label>
<textarea
id=”message”
name=”message”
required
placeholder=”お問い合わせ内容をご記入ください”
></textarea>
<div
class=”error”
id=”message-error”
style=”display: none”
aria-live=”polite”
></div>
<button class=”btn” type=”submit”>
<i class=”fas fa-paper-plane” aria-hidden=”true”></i>
送信
</button>
</form>
</section>
<!– モーダル（送信成功） –>
<div id=”modal-success” class=”modal” aria-hidden=”true”>
<div class=”modal-dialog”>
<button class=”modal-close” data-modal-close aria-label=”閉じる”>
×
</button>
<h4>送信完了</h4>
<p>お問い合わせを受け付けました。ありがとうございます。</p>
</div>
</div>
<!– About モーダル –>
<div id=”modal-about” class=”modal” aria-hidden=”true”>
<div class=”modal-dialog”>
<button class=”modal-close” data-modal-close aria-label=”閉じる”>
×
</button>
<h4>About</h4>
<p>このページの簡単な説明やリンクをここに掲載できます。</p>
</div>
</div>
<footer>
<p>このページは簡単な自己紹介ページのサンプルです。</p>
</footer>
</div>
<script src=”https://from-zero-to-dev.com/wp-content/uploads/2025/12/scripts.js”></script>
</body>
</html>
CSS
body {
font-family: system-ui, -apple-system, “Segoe UI”, Roboto,
“Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;
margin: 0;
/* フォールバック色 */
background-color: #f7f7f9;
color: #111;
/* ページ全体の背景画像 */
background-image: url(“https://from-zero-to-dev.com/wp-content/uploads/2025/12/4385400_m.jpg”);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.container {
max-width: 800px;
margin: 40px auto;
padding: 24px;
/* より半透明にして背景画像を透けさせる */
background: rgba(255, 255, 255, 0.45);
/* 背景をぼかして奥行きを出す */
backdrop-filter: blur(10px) saturate(1.05);
-webkit-backdrop-filter: blur(10px) saturate(1.05);
border-radius: 12px;
/* シャドウは弱めて背景が見えるように */
box-shadow: 0 8px 30px rgba(2, 6, 23, 0.08);
transition: box-shadow 240ms ease, transform 240ms ease;
}
header {
display: flex;
gap: 18px;
align-items: center;
/* header の背景画像は削除（ページ全体で設定） */
}
.avatar {
width: 96px;
height: 96px;
border-radius: 50%;
/* 画像を丸くトリミングするためのコンテナ */
overflow: hidden;
display: inline-block;
flex: 0 0 auto;
background-color: #eee;
}
.avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
h1 {
margin: 0;
font-size: 1.6rem;
}
p.lead {
margin: 8px 0 0;
color: #555;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 20px;
}
ul {
margin: 0;
padding-left: 1.25rem;
}
footer {
margin-top: 32px;
font-size: 0.9rem;
color: #666;
text-align: center;
}
@media (max-width: 600px) {
header {
flex-direction: row;
gap: 12px;
}
.grid {
grid-template-columns: 1fr;
}
}
/* ボタン共通 */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 10px;
border: none;
cursor: pointer;
font-weight: 600;
text-decoration: none;
color: #fff;
background: linear-gradient(180deg, #4f46e5, #4338ca);
box-shadow: 0 8px 20px rgba(67, 56, 202, 0.18);
transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.btn:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(67, 56, 202, 0.22);
}
/* 押したときに凹む表現 */
.btn:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12),
inset 0 4px 8px rgba(0, 0, 0, 0.06);
}
/* ソーシャル用の小さなボタン */
.btn.icon {
padding: 8px 12px;
border-radius: 12px;
}
.btn .fa,
.btn .fab {
font-size: 1rem;
}
/* 色別バリエーション */
.btn.twitter {
background: linear-gradient(180deg, #1da1f2, #0d95e8);
}
.btn.github {
background: linear-gradient(180deg, #111827, #0b1220);
}
.btn.email {
background: linear-gradient(180deg, #10b981, #059669);
}
/* フォーム */
.contact-form {
margin-top: 24px;
}
.contact-form form {
display: grid;
gap: 12px;
}
.contact-form label {
font-size: 0.9rem;
color: #333;
}
.contact-form input[type=”text”],
.contact-form input[type=”email”],
.contact-form textarea {
width: 100%;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid rgba(16, 24, 40, 0.08);
/* 入力欄も半透明にして背景を活かす */
background: rgba(255, 255, 255, 0.6);
transition: box-shadow 160ms ease, transform 160ms ease;
font-size: 0.95rem;
color: #111;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.12);
transform: translateY(-2px);
}
.contact-form textarea {
min-height: 120px;
resize: vertical;
}
/* 既存の透明クラスは維持 */
.transparent-text {
color: rgba(0, 0, 0, 0.7);
}
/* スキル: ナビとハンバーガー */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
}
.nav-menu {
display: flex;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
align-items: center;
}
.nav-menu .nav-right {
margin-left: auto;
}
.nav-menu a,
.nav-menu button {
color: #111;
/* ナビも半透明にして背景を透過 */
background: rgba(255, 255, 255, 0.36);
padding: 8px 10px;
border-radius: 8px;
text-decoration: none;
border: 1px solid rgba(16, 24, 40, 0.06);
}
/* モバイル時のメニューは縦並びにするが表示は維持 */
@media (max-width: 700px) {
.nav-menu {
display: flex;
flex-direction: column;
width: 100%;
}
}
/* ドロップダウン */
.dropdown {
position: relative;
}
.dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
padding: 8px;
min-width: 140px;
}
.dropdown.open .dropdown-menu {
display: block;
}
.dropdown-menu li {
list-style: none;
}
.dropdown-menu a {
display: block;
padding: 6px 10px;
color: #111;
text-decoration: none;
}
/* モーダル */
.modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(2, 6, 23, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease;
z-index: 999;
}
.modal.open {
opacity: 1;
pointer-events: auto;
}
.modal-dialog {
background: #fff;
border-radius: 12px;
padding: 20px;
max-width: 520px;
width: calc(100% – 40px);
box-shadow: 0 14px 40px rgba(2, 6, 23, 0.25);
transform: translateY(8px);
transition: transform 180ms ease;
}
.modal.open .modal-dialog {
transform: translateY(0);
}
.modal-close {
position: absolute;
top: 8px;
right: 12px;
background: transparent;
border: none;
font-size: 20px;
cursor: pointer;
}
/* エラーメッセージ */
.error {
color: #b91c1c;
font-size: 0.9rem;
margin-top: 6px;
display: none;
}
[aria-invalid=”true”] {
box-shadow: 0 6px 14px rgba(185, 28, 28, 0.06);
}
/* スクロールフェード */
.fade-in-on-scroll {
opacity: 0;
transform: translateY(18px);
transition: opacity 520ms ease, transform 520ms ease;
will-change: opacity, transform;
}
.fade-in-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
/* ユーティリティ */
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
Javascript
// scripts.js: ドロップダウン・モーダル・フォーム検証・スクロールフェード
(function () {
function qs(sel, ctx) {
return (ctx || document).querySelector(sel);
}
function qsa(sel, ctx) {
return Array.from((ctx || document).querySelectorAll(sel));
}
// ドロップダウンメニュー
function initDropdowns() {
qsa(“.dropdown-toggle”).forEach((btn) => {
btn.addEventListener(“click”, (e) => {
const parent = btn.closest(“.dropdown”);
parent.classList.toggle(“open”);
});
});
// 外側クリックで閉じる
document.addEventListener(“click”, (e) => {
qsa(“.dropdown.open”).forEach((menu) => {
if (!menu.contains(e.target)) menu.classList.remove(“open”);
});
});
}
// モーダル
function openModal(modal) {
modal.classList.add(“open”);
modal.setAttribute(“aria-hidden”, “false”);
document.body.style.overflow = “hidden”;
}
function closeModal(modal) {
modal.classList.remove(“open”);
modal.setAttribute(“aria-hidden”, “true”);
document.body.style.overflow = “”;
}
function initModals() {
qsa(“[data-modal-target]”).forEach((btn) => {
btn.addEventListener(“click”, (e) => {
e.preventDefault();
const selector = btn.getAttribute(“data-modal-target”);
const modal = qs(selector);
if (modal) openModal(modal);
});
});
qsa(“.modal [data-modal-close]”).forEach((btn) => {
btn.addEventListener(“click”, () => {
const modal = btn.closest(“.modal”);
if (modal) closeModal(modal);
});
});
// クリックでオーバーレイを閉じる
qsa(“.modal”).forEach((modal) => {
modal.addEventListener(“click”, (e) => {
if (e.target === modal) closeModal(modal);
});
});
// ESC キーで閉じる
document.addEventListener(“keydown”, (e) => {
if (e.key === “Escape”) {
qsa(“.modal.open”).forEach((m) => closeModal(m));
}
});
}
// フォーム検証
function showError(input, message) {
input.setAttribute(“aria-invalid”, “true”);
const id = input.getAttribute(“id”);
const err = qs(`#${id}-error`);
if (err) {
err.textContent = message;
err.style.display = “block”;
}
}
function clearError(input) {
input.removeAttribute(“aria-invalid”);
const id = input.getAttribute(“id”);
const err = qs(`#${id}-error`);
if (err) {
err.textContent = “”;
err.style.display = “none”;
}
}
function validateEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
function initFormValidation() {
const form = qs(“.contact-form form”);
if (!form) return;
const name = qs(“#name”, form);
const email = qs(“#email”, form);
const message = qs(“#message”, form);
form.addEventListener(“submit”, (e) => {
e.preventDefault();
let ok = true;
[name, email, message].forEach(clearError);
if (!name.value.trim()) {
showError(name, “お名前を入力してください。”);
ok = false;
}
if (!email.value.trim()) {
showError(email, “メールアドレスを入力してください。”);
ok = false;
} else if (!validateEmail(email.value.trim())) {
showError(email, “有効なメールアドレスを入力してください。”);
ok = false;
}
if (!message.value.trim() || message.value.trim().length < 10) {
showError(message, “メッセージは10文字以上で入力してください。”);
ok = false;
}
if (!ok) {
const firstError = qs(‘[aria-invalid=”true”]’);
if (firstError) firstError.focus();
return;
}
// 成功時の挙動（ここでは簡易にダイアログ表示）
const successModal = qs(“#modal-success”);
if (successModal) {
openModal(successModal);
form.reset();
} else {
alert(“送信しました。”);
form.reset();
}
});
// 入力時にリアルタイムでエラークリア
[name, email, message].forEach((input) => {
input.addEventListener(“input”, () => clearError(input));
});
}
// スクロールに応じたフェードイン
function initScrollFade() {
const items = qsa(“.fade-in-on-scroll”);
if (!items.length) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add(“visible”);
io.unobserve(entry.target);
}
});
},
{ threshold: 0.12 }
);
items.forEach((i) => io.observe(i));
}
document.addEventListener(“DOMContentLoaded”, () => {
initDropdowns();
initModals();
initFormValidation();
initScrollFade();
});
})();
RubyやPHPなどでバックエンドを構築してみよう
バッグエンドとはデータベースと連携して、会員登録機能などのデータを取り扱う処理です。
見習エンジニアバックエンドを学べば、データベースのやり取りができるようになるんだね！
例えばメモ帳機能があるサイトや、SNSサイト、タスク管理サイトなどを作ろうと思ったときには必須です。
ゆきだるま有名な言語は、Ruby、PHP、Pythonなどです。
現在は、バックエンドの共通処理(ルーティング、セッション管理、データベース接続、バリデーション、セキュリティ対策など)をあらかじめ実装してあるフレームワークを使って、開発します。
ゆきだるま有名なフレームワークはRuby on Rails、Laravel、Django、Expressなどです。
特に、初学者の方はRuby on Railsをおすすめします。
有名なベンチャー企業やスタートアップで採用しているところが多いです。また、Progateでのレッスンの数も豊富ですぐにWebアプリの開発ができます。
- ベンチャー企業などで働きたい人・都心など大都市で就職を考えている人→Ruby（Rails）
- 今後WordPressで案件をとっていきたい人・地方での就職を考えている人→PHP（Laravel）
- AI・データ分析系の案件を狙いたい人・海外企業で働きたい人→Python（Django）
- JavaScript をバックエンドでも使いたい人→Python（Express）
ざっくりいうとこのような棲み分けになるかなと思います。迷う人はRailsが一番おすすめです。
一つフレームワークを覚えれば、他のフレームワークも使えるようになるので、まずは一つのフレームワークを重点的に学習していきましょう。
ゆきだるま雪だるまもRailsから学習を始めました。この辺りから難しくなってくるかもしれませんが、今はこの順番で学習していけばいいんだな～と覚えておいてください！
ここまで学習すれば、Webアプリを開発できるようになります。
成果物
成果物の作成には、フレームワークを使いましょう。
フレームワークにはWebページを描画する機能があるので、先ほど作ったWebページを参考にしながら、一から作っていきます。
まずは、Progateで作成したWebページをそのまま再現してみる擬似サイトを作ってみましょう。
先ほど作成したWebページに、バックエンドの機能を追加したほうが簡単に思われるかもしれませんが、フロントエンドとバックエンドのインターフェースや通信方法などを設計する手間が発生してしまうため、フレームワークだけで作成するのがおすすめです。
- サイト訪問者がコメントを残せる機能
- ユーザー認証機能
- ユーザーごとに異なるページを表示させる機能
- プロフィール画像や資料をアップロードできる機能
- フォームを送受信する機能
SQLを学んでデータベース操作に慣れよう
SQLとは、データベースを操作するための言語です。
先ほど、紹介したバックエンドフレームワーク(Railsなど)を使用すれば、SQLは不要です。
しかし、複雑なデータベース検索やパフォーマンス改善にはSQLの理解が欠かせません。
上級者になればなるほど、SQLの理解が求められるので、少し学んでおくといいと思います。
ゆきだるま全てを理解する必要はないので、なんとなくわかったら次のレッスンに進みましょう
Gitやコマンドライン操作に慣れよう
Gitは主にチーム開発で必要になってくる重要な技術です。
また、コマンドライン操作はWeb開発環境の構築やデバッグ操作などに必要になりますが、使いたい時に調べればOKです。
ゆきだるま以下の画像のような黒い画面にカタカタ打ち込んでいるのを見たことはないでしょうか？これがコマンドラインです。
ProgateはGit、コマンドラインのレッスンが少ないので、ささっと終わらせてしまいましょう。
Gitやコマンドライン操作も今後の開発で避けては通れない技術なので、概要だけ知っておきましょう。
ゆきだるま最初は「なんでこんな意味不明な画面使わなきゃいけないんだよ・・・」と思ってましたが、今では特に嫌悪感もなく使っています（笑）
【Progateの進め方】周回は絶対にするな
同じレッスンを何回もやるのはおすすめしません。2周目のProgateをやるくらいだったら、自分で悩みながらコードを書いていく方が学習効率がいいです。
Progateはスライドでわかりやすく説明してくれるため、最初の学習のステップには最適。
実践スライドでも、どこにコードを書けばいいか教えてくれるので、コードを書くのに迷いはありません。
だからこそ、自分で考えてコードを書く時間が取れないのです。
ゆきだるまProgateを何周もやったけど、結局、頭に入っていないという状況に陥りがち
１周してなんとなくわかった状態で、実際に自分でコードを書くと全く書けません。
でも、それでいいのです。
現役のエンジニアでも、なにも見ないで開発することは絶対にあり得ません。
成果物を作りながらわからなくなった時に、Progateのスライドを復習しましょう。
詳しくは、【挫折しないために】成果物をつくりながらProgateを進めようを参考にしてください！
Progateが終わったら次は何をすべきか
Progateを終えたみなさんは、次の2つの道を選択することになると思います。
学んできたことを使って、オリジナルアプリを開発する
スクールに通う
Progateが終わったら、オリジナルの成果物を作って、Web業界の転職にチャレンジしましょう。
ゆきだるまWeb業界の現場でしか学べないことが多いので、なるべく早く転職にチャンレンジすることがおすすめです。
とはいっても、オリジナルの成果物を作ることは難しいと思います。
そんな方はAIを味方にして開発していくことをおすすめします。私はスクールに通わずに、オリジナルのWebアプリを開発できました。
詳細は、以下の記事で解説しています。
スクールで学習効率を高めるのもあり！
見習エンジニアProgate終わって何やっていいかわからない・・・
見習エンジニアオリジナルアプリ開発とか難易度高すぎて、自分ひとりじゃ無理・・・
このように思った方は、スクールに通うのがおすすめです！
私も、スクールでAWSの学習に取り組みましたが、エラーに悩む時間が少なくなりました。
ゆきだるまエラーに悩む時間が多くなると、プログラミングが嫌になってくるので、お金がある方はスクールの受講をおすすめします。
Progateをサクッと終わらせて次のステップに進もう
Progateはプログラミングの基礎や面白さを学ぶツールとして活用し、技術力は実践練習で高めるという考え方で進めていきましょう。
ゆきだるまProgateはゼロから簡単に始められますが、最初のうちはわからないことだらけだと思います。
そんな場合は、飛ばしちゃって大丈夫です！こういう技術があることを知るのが一番の学習です。
わからなくなったら、答えを見ちゃいましょう！学校のテストとは違って、プログラミングは、カンニング全然アリです！
諦めなければ、必ずプログラマーになれます！
ちょっとずつ新しいことを学びながら、次のステップに進んでいきましょう！
コメント