ショートストーリー：「東京プログラマのコード遊び場」
主人公、翔太は東京に住む若手プログラマ。彼はコードを操ることに情熱を注いでいたが、最近JavaScriptの理解が深まらず、悩んでいた。毎日、目の前にある膨大なドキュメントやチュートリアルを読み込み、サンプルコードを実行しては失敗し、再挑戦を繰り返していた。
ある夜、「コードの遊び場」に出会った。それは、好きなようにコードを入力し、すぐに結果が目の前に表示される、魔法のような場所だった。
「これなら、遊ぶように学べるかもしれない」
翔太はテキストボックスにサンプルコードを入力した。
let sum = 0;
for (let i = 1; i <= 10; i++) {
sum += i;
}
console.log('1から10までの合計は: ' + sum);
「1から10までの数を足し合わせるだけの単純なコードだけど、基本を固めるのは大事だ」と、翔太は自分に言い聞かせた。
実行ボタンを押すと、結果が即座に画面に表示された。
「1から10までの合計は: 55」
その瞬間、翔太は幼い頃に夢中になったゲームのような感覚を思い出した。小さな挑戦をクリアし、そのたびに結果が目の前に現れる。その繰り返しが、学ぶことを楽しく感じさせてくれた。
翌朝、翔太は仕事に向かう電車の中で、また「コードの遊び場」にアクセスしていた。彼は次の挑戦を思いついた。
「今度はもっと複雑な計算をしてみよう」
テキストボックスにコードを入力した。
let sumEven = 0;
let sumOdd = 0;
for (let i = 1; i <= 30; i++) {
if (i % 2 === 0) {
sumEven += i;
} else {
sumOdd += i;
}
}
console.log('偶数の合計: ' + sumEven);
console.log('奇数の合計: ' + sumOdd);
再び実行ボタンを押すと、結果はすぐに画面に現れた。
「偶数の合計: 240」
「奇数の合計: 225」
翔太はその結果を見て、少しずつ自分がJavaScriptを理解していく感覚を実感した。以前はただの「勉強」だったものが、この「遊び場」ではまるでゲームのように、次々と課題をクリアしていく感覚が新鮮だった。
数週間後、翔太は友人のエンジニア仲間にこの「遊び場」を教え、みんなで楽しみながらコードを書き、改善策を考える時間が増えた。彼は次の大きなプロジェクトに向けて、JavaScriptの知識をしっかりと身に付けていった。遊びのように学んだことで、彼のコードは効率的かつ創造的なものに進化した。
翔太は東京の喧騒を感じながら、こう思った。
「勉強は遊びに変わる。遊びの気持ちが力を生む。遊びが新しい道を開く」
彼は次の大きな挑戦に向けて、またテキストボックスに指を伸ばした。
JavaScriptを学ぶプロセスを楽しく、遊び心を持って進める「遊び場」
テキストボックスには、初期状態として1から10までの数の合計を計算するコードが表示され、実行ボタンを押すと結果がブラウザに表示されます。eval()関数を使用して、ユーザーが入力したJavaScriptコードを実行してます。コードをデータとして扱うメタプログミング技法です。
コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Execute JavaScript from Textbox</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
textarea {
width: 100%;
height: 150px;
}
button {
margin-top: 10px;
padding: 10px 20px;
}
.result {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h2>JavaScript Code Executor</h2>
<p>Enter JavaScript code in the textbox below and press "Run Code" to execute it.</p>
<!-- テキストボックスにサンプルコードを表示 -->
<textarea id="code-input">
// 1から10までの合計を求めるJavaScriptコード
let sum = 0;
for (let i = 1; i <= 10; i++) {
sum += i;
}
document.getElementById('result').innerText = 'The sum of numbers from 1 to 10 is: ' + sum;
</textarea>
<!-- 実行ボタン -->
<button onclick="runCode()">Run Code</button>
<!-- 結果を表示するエリア -->
<div class="result" id="result">Result will be displayed here.</div>
<script>
// テキストボックスに入力されたコードを実行する関数
function runCode() {
const code = document.getElementById('code-input').value;
try {
// コンソールの出力を result エリアに表示するため、console.log() をオーバーライド
console.log = function(message) {
document.getElementById('result').innerText = message;
};
// eval()でコードを実行
eval(code);
} catch (error) {
// エラーハンドリング
document.getElementById('result').innerText = 'Error: ' + error.message;
}
}
</script>
</body>
</html>
JavaScriptの学習に役立つサンプルコードを5つ用意しました。それぞれ基本的な概念を学ぶのに適したものです。
サンプル1: 条件分岐
// 条件分岐の例: 数字が偶数か奇数かを判断する
let number = 7;
if (number % 2 === 0) {
console.log(number + 'は偶数です');
} else {
console.log(number + 'は奇数です');
}
説明: このコードでは、if文を使って、数が偶数か奇数かを判断します。学習者は条件分岐の基本を学べます。
サンプル2: 配列の操作
// 配列を操作して合計を計算する
let numbers = [1, 2, 3, 4, 5];
let total = 0;
for (let i = 0; i < numbers.length; i++) {
total += numbers[i];
}
console.log('合計は: ' + total);
説明: このコードは、forループを使用して配列内のすべての要素を合計します。配列とループの使い方を理解するのに役立ちます。
サンプル3: 関数の定義
// 引数を受け取る関数を定義する
function greet(name) {
return 'こんにちは、' + name + '!';
}
console.log(greet('太郎'));
説明: このコードは、名前を引数として受け取り、挨拶を返す関数を定義しています。関数の作成と呼び出し方を学ぶことができます。
サンプル4: オブジェクトの操作
// オブジェクトを作成してプロパティを操作する
let person = {
name: '花子',
age: 25,
greet: function() {
return 'こんにちは、私の名前は ' + this.name + ' です。';
}
};
console.log(person.greet());
説明: オブジェクトのプロパティやメソッドの使い方を学ぶためのコードです。thisキーワードについても理解できます。
サンプル5: DOM操作
// DOM操作でHTMLの要素を動的に変更する
document.getElementById('myButton').addEventListener('click', function() {
document.getElementById('myText').innerText = 'ボタンがクリックされました！';
});
説明: このコードでは、ボタンがクリックされたときにHTMLのテキストを変更します。DOM（ドキュメントオブジェクトモデル）の操作方法を学べます。