「プログラミングを始めてみたいけれど、難しそう……」「黒い画面に英語を打ち込むのは怖い……」そう思っていませんか？
実は、プログラミングを始めるのに特別なソフトを買ったり、難しい設定をしたりする必要は一切ありません。いま使っているパソコンに入っている「メモ帳」と、インターネットを見る「ブラウザ（ChromeやEdgeなど）」さえあれば、今日この瞬間から誰でもプログラミングを始められます！
このシリーズでは、ゲーム感覚で遊べる『おみくじガチャボタン』を作りながら、プログラミングの基礎（変数・配列・関数・条件分岐・ループ）を小学生でもスッキリわかるように解説していきます。
「なんだか難しそうな言葉ばかり……」と感じるかもしれませんが、これらはどんなゲームやWebアプリ作りにも、いえどんなプログラミング学習にも共通する大切な“基本の道具”たちです。実際に手を動かしながら、ひとつずつ楽しくマスターしていきましょう！
もちろんそれぞれをマスターするには、それなりの時間がかかります。
基礎を理解し使いこなせるようになるまでには、何年もの時間がかかるでしょう。しかし、まずは、ざっくりと、それらの意味を知っておくことで何を行っているのか、何が行われているのか？が見えてくるので、ぐっと理解が深まります。
そして、最も重要なのが、分からなかったら、すっ飛ばして進めてください！
理解してから次に…、なんて考えは絶対に捨ててください。
立ち止まって前に進めなくなることが一番のリスクです、まずは、気楽に最後までやってみましょう！
プログラミングって、そもそも何をするの？
プログラミングとは、ひとことで言うと「パソコンにお願いする『命令書（指示書）』を書くこと」です。
パソコンはものすごく頭が良いように見えますが、実は自分からは何もできません。「ボタンが押されたら、文字を画面に出してね」「サイコロを振って、出た数字を教えてね」と、人間が順番に細かく手順を教えてあげて、はじめて動いてくれます。
この他にも、あなたがインターネットで様々なページを閲覧しているとき、あるいはネットで買い物を楽しんでいる時、見ている画面の裏側では、たくさんのプログラムが動いています。
Webページを動かす「3人の仲間たち」
私たちが普段見ているWebサイトやWebツールは、主に3つの役割分担で作られています。
あなたも一度は聞いたことがあるかもしません！
- HTML（エイチ・ティー・エム・エル）：【骨組み】ボタンや文字、入力枠などを画面に置く係。
- CSS（シー・エス・エス）：【見た目・お化粧】色を塗ったり、文字を大きくしたり綺麗に並べる係。
- JavaScript（ジャバスクリプト）：【頭脳・魔法】ボタンが押されたときに計算したり、画面を書き換える係。
今回学ぶのは、一番おもしろい「JavaScript」という頭脳・魔法の部分です！
ステップ1：メモ帳を開いて、最初のコードを書いてみよう
では早速、最初のファイルを作ってみましょう。パソコンの「メモ帳（テキストエディタ）」を開いて、以下の文字をそのままコピーして貼り付けてみてください。
早速以下👇のコードをコピーしてメモ帳に張り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのプログラミング</title>
</head>
<body>
<h1>おみくじガチャの部屋</h1>
<p id="result">ボタンを押すと、ここに結果が出るよ！</p>
<button onclick="alert('大吉が出たよ！')">おみくじを引く</button>
</body>
</html>
※メモ帳ではなく、VisualStudioCodeなどの高機能なエディタ（IDE）を使うと、コードが色分けされてわかりやすいですし、その他にも様々な拡張機能などを利用できます。今後もプログラミングを続けてみたいと思う方は導入を検討してみてください。
Visual Studio Codeはこちらから無料でダウンロードできます。https://code.visualstudio.com/
ステップ2：ファイルを保存して、ブラウザで開いてみよう
メモ帳に貼り付けたら、名前をつけて保存します。
- ファイル名：
omikuji.html（最後の.htmlが大切です！） - 保存した
omikuji.htmlのファイルをダブルクリックするか、いつも使っているブラウザ（Google ChromeやEdge）の画面の中にドラッグ＆ドロップして放り込んでみてください。
すると……どうでしょう！画面に「おみくじガチャの部屋」という見出しと、「おみくじを引く」というボタンが表示されたはずです。
ボタンをポチッと押してみよう！
画面の「おみくじを引く」ボタンをクリックしてみてください。
画面の上にポンッと小さな窓（ポップアップ）が現れて、「大吉が出たよ！」と表示されたはずです！
これこそが、あなたが書いた最初のJavaScriptプログラムです。onclick="alert('大吉が出たよ！')" という部分で、「ボタンがクリックされたら、アラート（お知らせ窓）を出してね」とパソコンに命令したのです。
これが何になるのよ！？と思われるかもしれませんが、これでも立派なプログラミングです。alert()という命令を、パソコンに正しく渡すことができたのです。これを、もっと複雑な命令を渡せるようにするのが、これからの学習の目標になります。
※注意いただきたいのが、今回はクリックを契機にポップアップで答えを出すことでプログラミングの第一歩を踏み出しましたが、クリックが重要なのではありません、命令を正しく記述してパソコンに渡すことができるかが重要なのです。この感覚を忘れずに次の学習に進んでください。
第1回のまとめ
- プログラミングは、パソコンへの「順番通りの命令書」。
- ブラウザとメモ帳さえあれば、今すぐ誰でも動かせる！
.htmlファイルに書くことで、ボタンを置いてJavaScriptを動かせる。
でも、今のままだとボタンを押すたびに毎回「大吉」しか出ませんよね。次回は、おみくじに「中吉」や「凶」の文字を用意して、パソコンに覚えてもらう『変数』と『配列（リスト）』の魔法を学びます。お楽しみに！