【2026年版】JavaScript入門｜10分で動くプログラムを作ろう
ブラウザだけで今すぐJavaScriptを動かせる体験型記事。環境構築不要、インストール不要で「Hello World」から条件分岐まで、10分で動くプログラムを作りながら学べます。
執筆者
チョットデキルの編集部です。プログラミング学習に役立つ情報をお届けします。
取材協力
1993年、山梨県生まれ。東京理科大学を卒業後、大手ITコンサルティングファーム（フューチャーアーキテクト）へ入社。その後2018年に株式会社vicusを創業。上場企業向けIT研修事業では、1000人以上のエンジニアを育成。
プログラミングを始めようとして、「環境構築」で挫折した経験はありませんか？
実は、プログラミング学習者の90%が挫折を経験し、その最大の原因は「エラーが解決できなかった」「何が正解かわからなかった」というもの。
でも安心してください。この記事では、ブラウザだけで今すぐJavaScriptを動かせます。
インストール不要、特別な準備も不要。記事を読みながら、実際にコードを書いて、動かして、「できた！」を体験してください。
では、初めてみましょう！
JavaScript とは
Web ブラウザが標準でサポートするスクリプト言語で、追加インストール不要で動かせます。ボタンのクリック反応・アニメーション・データ取得などのインタラクションを実現し、サーバーサイド (Node.js) でも広く使われています。
TL;DR 早わかりサマリー
- JavaScript は Stack Overflow の調査で 10 年以上連続トップを記録する、世界で最も広く使われているプログラミング言語のひとつです
- Web ページの動的な動き、サーバーサイド (Node.js)、モバイルアプリ (React Native) まで一つの言語でカバー可能
- 10 分で動くプログラムが書ける学習コストの低さと、奥深さを兼ね備えています
- Webエンジニア / フロントエンドエンジニアを目指すなら 100% 必須の言語
JavaScriptは「ブラウザの言語」だから始めやすい
プログラミング言語の選び方
JavaScriptは世界で最も使われているプログラミング言語のひとつ。特別な理由があります。
すべてのWebブラウザに実行環境が内蔵されているのです。
PythonやJavaを始めるには開発環境のセットアップが必要ですが、JavaScriptならブラウザを開くだけ。今この記事を読んでいるブラウザで、すぐにプログラミングを始められます。
| 言語 | 環境構築 | 学習難易度 | 主な用途 |
|---|---|---|---|
| JavaScript | 不要 | Web開発全般 | |
| Python | 必要 | AI・データ分析 | |
| Java | 必要 | 大規模システム | |
| Swift | 必要 | iPhoneアプリ |
最初の一歩：画面にメッセージを表示してみよう
では、実際にコードを書いてみましょう。下のコードブロックはそのまま実行できます。「実行」ボタンを押してみてください。
▶ 実行ボタンを押すと結果がここに表示されます
実行結果に2行のメッセージが表示されましたか？
おめでとうございます！ これがあなたの最初のプログラムです。
console.log() は「括弧の中身を画面に表示する」という命令。プログラマーが最も頻繁に使う機能のひとつです。
上のコードを編集して、あなたの名前を表示させてみましょう。
"Hello, World!" の部分を "こんにちは、〇〇さん！" に変えてみてください。
変数を使って情報を保存する
次に、プログラミングの基本概念「変数」を学びます。
変数とは、データに名前をつけて保存する箱のようなもの。
▶ 実行ボタンを押すと結果がここに表示されます
letはJavaScriptで変数を宣言するキーワードlet name = "田中"で「nameという箱に"田中"を入れる」と読みます
Uncaught SyntaxError → 記号（" や ;）の閉じ忘れをチェック
undefined → 変数名のスペルミスを確認
条件分岐：プログラムに判断させる
プログラミングの醍醐味は「自動で判断させる」こと。
if文 を使えば、条件によって動きを変えられます。
▶ 実行ボタンを押すと結果がここに表示されます
これが「条件分岐」の力です。
age を 15 に変更して、もう一度実行してみてください。メッセージが変わるはずです！
ここまでの学習内容を整理しよう
JavaScript学習ロードマップ
10分で3つの重要な概念を学びました。
console.log()で画面に出力- 変数（
let）でデータを保存 if文で条件分岐
これだけで、簡単なプログラムが書けるようになっています。
10 分で動く最初のプログラム
ブラウザの「F12 → Console」を開き、次のコードを試してみてください。
JavaScript
// 基本: 画面に文字を表示
console.log("Hello, World!");
// 計算
const taxRate = 0.1;
const price = 1000;
const total = price * (1 + taxRate);
console.log(`合計: ${total}円`);
// 条件分岐
const age = 25;
if (age >= 20) {
console.log("成人です");
} else {
console.log("未成年です");
}
// 繰り返し
for (let i = 1; i <= 5; i++) {
console.log(`カウント: ${i}`);
}
// 配列とループ
const fruits = ["りんご", "バナナ", "みかん"];
for (const fruit of fruits) {
console.log(fruit);
}
// 関数
function greet(name) {
return `こんにちは、${name}さん`;
}
console.log(greet("山田"));これで JavaScript の主要な基本構文をひと通り体験したことになります。
JavaScript で何ができるか — 5 つの活用領域
1 つの言語でこれだけの幅が広がります。
1. Web フロントエンド ブラウザでの動的な動き。React / Vue / Svelte などのフレームワークも全て JavaScript。
2. サーバーサイド (Node.js) バックエンド API、サーバーサイドレンダリング、CLI ツール、各種スクリプト。
3. モバイルアプリ (React Native / Expo) iOS / Android アプリを 1 つのコードベースで開発。
4. デスクトップアプリ (Electron) VS Code / Slack / Discord はすべて Electron 製。
5. ゲーム (Phaser / Three.js) ブラウザで動く 2D / 3D ゲーム。
「JavaScript ができれば、Web のあらゆる領域に進める」と言える時代になっています。詳しくは Webエンジニアロードマップ で各領域への進め方を確認できます。
ハンズオン Step-by-Step
ブラウザの DevTools コンソールだけで、JavaScript の基本動作を 1 分で体験できます。
Step 1. Chrome の DevTools を開く
Chrome で任意のページを開き、F12 (Mac は Cmd + Option + I) を押して Console タブを選びます。
Step 2. alert を出してみる
次を実行するとダイアログが出ます。これだけで「ブラウザ上で JavaScript が動いた」ことになります。
JavaScript
alert("こんにちは JavaScript");Step 3. ページの背景色を変える
現在見ているページの背景色を一時的に変えてみます。
JavaScript
document.body.style.background = "lightyellow";Step 4. 簡単な計算
JavaScript はそのまま計算機としても使えます。
JavaScript
1234 * 5678Step 5. 関数を定義して呼ぶ
関数を定義して呼び出すまでが 2 行で書けるのが JavaScript の手軽さです。
JavaScript
function greet(name) {
return `こんにちは ${name} さん`;
}
greet("生田");次は DOM 操作の基本 で、ボタンクリックでページが動く感覚を掴みましょう。
関連リソース
- JavaScript で Web ページを動かす
- TypeScript vs JavaScript
- Python vs JavaScript
- React とは
- Webエンジニアロードマップ
- JavaScript 入門コース
よくある質問
Q. Java と JavaScript の違いは
A. 名前は似ていますが全くの別言語です。Java はサーバー / 業務システム向けのコンパイル型言語、JavaScript はブラウザで動くスクリプト言語です。歴史的な命名事故で名前だけ似ています。
Q. JavaScript の学習にどれくらいかかりますか
A. 基本文法は 1-2 週間、DOM 操作まで 1 ヶ月、フレームワーク (React) まで 3 ヶ月が標準ペースです。仕事で使えるレベルなら半年が一つの目安です。
Q. TypeScript を最初から学ぶべきですか
A. JavaScript を 1-2 ヶ月学んでから TypeScript に移行するのが効率的です。型エラーを読み解く力には JavaScript の基礎理解が必要です。詳しくは TypeScript vs JavaScript を参照してください。
Q. Python と JavaScript、どちらを学ぶべきですか
A. AI / データ分析が興味分野なら Python、Web 開発 / フロントエンドが興味分野なら JavaScript です。詳しくは Python vs JavaScript で目的別に整理しています。
Q. ES6 / ES2020 / ES2024 って何ですか
A. JavaScript の言語仕様のバージョンです。2015 年の ES6 (ES2015) で大幅にモダン化され、その後毎年小さなアップデートが行われています。基本は最新仕様を学んで構いません。
Q. JavaScript 学習の最初の一歩は
A. ブラウザの DevTools (F12 → Console) で console.log を書くのが最も低コストです。インストール不要で即実行できます。詳しくは JavaScript で Web ページを動かす で DOM 操作に進めます。
次のステップへ進もう
この記事でJavaScriptの第一歩を踏み出しました。
でも、ここで学習を止めてしまうと、挫折率90%の仲間入りです。
チョットデキルでは、この続きを体系的なカリキュラムで学べます。
- 環境構築不要：ブラウザだけで本格的なプログラミング学習
- 即時フィードバック：書いたコードがすぐ動く
- ステップバイステップ：挫折しない設計
チョットデキルでJavaScriptを始める（無料）
はい、全く別の言語です。名前は似ていますが、メロンとメロンパ ンほど違います。JavaScriptはWeb開発、Javaは大規模システムやAn droidアプリ開発に使われます。 ::
この記事はプログラミング未経験者向けに書かれています。専門用 語も最小限に抑え、実際に手を動かしながら学べる構成になってい ます。 ::
記事内のコード実行はスマホでも可能ですが、本格的な学習にはパ ソコンをおすすめします。キーボードでコードを書く体験が上達の 近道です。 ::
次に読むべきリソース
- 学習を始めたい方 — JavaScript 入門コース
- 深く理解したい方 — JavaScript の DOM 操作
- 無料相談したい方 — LuaGate 無料相談
出典・参考リンク
本記事の主張・数値・仕様に関する根拠は、以下の一次情報・公式ドキュメントを参照しています。リンク先の更新により内容が変わる場合があるため、最新情報は各公式サイトで確認してください。
- MDN Web Docs: JavaScript
- ECMAScript 仕様 (ECMA-262)
- Node.js 公式ドキュメント
- WHATWG DOM Standard
- MDN Web Docs
- React 公式ドキュメント (react.dev)
この記事について
- 監修: 生田 陸人 (LuaGate エンジニア / 大手 IT 企業現役エンジニア)
- 公開: 2026-05-28
- 最終更新: 2026-05-28
- カテゴリ: フロントエンド
- 検証環境: ECMAScript 2024 / Chrome 124 / Node.js 20
- 編集ポリシー: 公式ドキュメント・公的統計を一次情報として優先し、社内エンジニアが実機検証した内容のみを掲載しています。修正提案や事実誤認の指摘は チョットデキル運営 までお寄せください。