JavaScript | 1 日 30 分 × 7 日アプリ学習：超初級編

APP JavaScript
スポンサーリンク

この 7 日間で目指すゴール

この「超初級編」では、
たった 7 日 × 1 日 30 分で「自分の手で動くミニアプリ」を作れるところまで行きます。

難しい理論は一旦置いておき、次の三つだけを大事にします。

自分の手でコードを書く
書いたら必ず動かして結果を見る
よく分からなくても、とりあえず最後まで真似して動かしてみる

最終日のゴールは「おみくじ or ランダム一言メッセージ」のような、
超シンプルな JavaScript ミニアプリです。
ブラウザの中だけで完結するので、インストールは不要です。

Day 1: 「JavaScript が動く」体験をする

開発環境をゼロから用意する

まずは「JavaScript をどこで書いて動かすか」です。
一番簡単なのはブラウザの「コンソール」です。

  1. Chrome や Edge などのブラウザを開く
  2. 適当なページ（Google でも Yahoo! でも OK）を開く
  3. 画面のどこかで右クリック → 検証（または「開発者ツール」）
  4. 右側や下に出てきたパネルの上のタブから「Console（コンソール）」を押す

この黒い（または白い）画面に JavaScript を書いて Enter を押すと、その場で動きます。
ここがこの 7 日間の「練習ノート」です。

最初の一行を書いてみる

コンソールに次を打って、Enter を押してください。

console.log("はじめての JavaScript");
JavaScript

下に

はじめての JavaScript

と表示されれば成功です。

ここで一つずつ意味を分解します。

console
ブラウザに「メッセージを出すための道具箱」の名前です。

.log
その道具箱の中の「メッセージを表示する」機能の名前です。

("はじめての JavaScript")
表示したい中身です。
ダブルクォーテーション " で囲まれたものを「文字列」と呼びます。

;
この行はここで終わり、という印です（初心者のうちは付けておく方が安心です）。

今は「全部覚えよう」としなくて大丈夫です。
ただ一つ、「自分が打った文字が画面に出る」という感覚だけ覚えてください。

数を計算させてみる

同じコンソールで、次も試してください。

console.log(3 + 5);
JavaScript

8 と表示されます。

もう少し試します。

console.log(10 - 2);
console.log(4 * 3);
console.log(20 / 5);
console.log(2 + 3 * 4);
JavaScript

ここで感じてほしいのは、「JavaScript は電卓みたいに計算してくれるんだな」ということだけです。
Day 1 は「コンソールで遊ぶことに慣れる」が目的です。

Day 2: 変数（情報に名前をつける）

変数とは何かをイメージでつかむ

変数は「値をしまっておくラベル付きの箱」です。
例えば「年齢」という箱をつくって、その中に 20 という数字を入れる、というイメージです。

コンソールで次を打ってみてください。

let age = 20;
console.log(age);
JavaScript

20 と表示されれば OK です。

ここで大事な 3 つのポイントをしっかり押さえます。

let
「これから変数を作りますよ」という合図です。

age
その箱の名前です。好きな名前でよいですが、意味が分かる名前にするのがおすすめです。

=
「右側の値を左側の変数に入れる」という意味です。
数学の「＝」と似ているけれど、「同じ」というより「代入する」というニュアンスです。

値を変えてみる（変数が「変わる」感覚）

同じコンソールで続けてこう書きます。

age = 25;
console.log(age);
JavaScript

今度は 25 と表示されます。
同じ age という箱の中身が 20 から 25 に変わったわけです。

「変数」という名前の通り、中身が「変わる箱」だとイメージしてください。

文字と数字の違いを体験する

次の 2 つを見比べてください。

console.log(10 + 20);
console.log("10" + "20");
JavaScript

上は 30
下は "1020" と表示されます。

なぜかというと、

数字だけ → 足し算
クォーテーションで囲んだ文字 → つなげる

という違いがあるからです。

超重要ポイントはこれです。

数字として扱いたいときはクォーテーションを付けない
文字として扱いたいときはクォーテーションを付ける

この区別が身につくだけで、初歩的なバグをかなり減らせます。

例題：自己紹介メッセージを作る

コンソールで次を書いてみてください。

let name = "Taro";
let age2 = 22;

let message = "私の名前は " + name + " です。年齢は " + age2 + " 歳です。";

console.log(message);
JavaScript

age という名前はさっき使ったので、ここでは age2 にしています。
表示された文章を見て、「文字列」と「変数」を + でくっつけると、
一つの長い文章が作れることを感じてください。

Day 3: 条件分岐 if（状況によって動きを変える）

if の基本形を覚える

「もし 〜 なら 〜 する」というのが if 文です。
形だけ先に見てください。

if (条件) {
  // 条件が true のときに実行される部分
}
JavaScript

この「条件」は、結果が true（真）か false（偽）になる式です。

コンソールで次を書いてみてください。

let age = 18;

if (age >= 18) {
  console.log("大人です");
}
JavaScript

>= は「以上」という意味です。
この場合、age は 18 なので age >= 18 は true になり、
中の console.log("大人です"); が実行されます。

if と else で二択を作る

「大人か、未成年か」の二択にしてみましょう。

let age = 16;

if (age >= 18) {
  console.log("大人です");
} else {
  console.log("未成年です");
}
JavaScript

ここでは age が 16 なので、条件 age >= 18 は false になり、
else の中が実行されて「未成年です」と表示されます。

ここで感じてほしいのは、
「JavaScript が自分で判断して、どっちの道を通るか決めている」ということです。

例題：60 点以上なら合格、それ以外は不合格

次を試してみてください。

let score = 72;

if (score >= 60) {
  console.log("合格です！");
} else {
  console.log("不合格です…");
}
JavaScript

score の値を 30 や 100 に変えて、それぞれどうなるか試してみてください。
数字を変えるだけで結果が変わる感覚が「プログラムらしさ」です。

Day 4: 関数（よく使う処理に名前をつける）

関数のイメージをつかむ

関数は「手順のまとまり」に名前を付けたものです。
例えば「挨拶する」という処理に名前を付けておいて、呼びたいときに呼ぶ、というイメージです。

基本の形はこうです。

function 関数名() {
  // 実行したい処理
}
JavaScript

まずはシンプルな挨拶関数を作ります。

function greet() {
  console.log("こんにちは！");
}

greet();
greet();
JavaScript

ここで大事なのは、

上の部分は「関数の定義」
下の greet(); が「関数の呼び出し」

ということです。
ただ「作っただけ」では実行されず、「呼び出したとき」に動きます。

引数（ひきすう）で入力を渡す

今度は「誰に挨拶するか」を変えられるようにしてみましょう。

function greet(name) {
  console.log("こんにちは、" + name + " さん！");
}

greet("Taro");
greet("Hanako");
JavaScript

この name が「引数」です。
greet("Taro") と書くと、"Taro" という値が関数の中の name に渡されます。

「関数に入力を渡すと、処理の中で使えるようになる」という感覚をつかんでください。

return で結果を返す

次は「足し算の結果を返す関数」を作ってみます。

function add(a, b) {
  let result = a + b;
  return result;
}

let sum = add(3, 5);
console.log(sum);
JavaScript

超重要ポイントです。

return は「関数の外に値を返す」ためのキーワードです。
return の行に来た時点で、その関数の処理はそこで終わります。

関数の中で計算をして、その結果だけ外に返す、という考え方は、
これからアプリを作るときに何度も出てきます。

Day 5: prompt と alert で「ユーザーと会話」する

ここから少し「アプリっぽさ」が出てきます。
ユーザーから入力をもらったり、ポップアップでメッセージを出したりします。

alert でメッセージを出す

コンソールに次を書いてみてください。

alert("JavaScript の世界へようこそ！");
JavaScript

ブラウザに小さなダイアログが出てくるはずです。
これが alert です。「ポップアップでお知らせを出す」イメージです。

prompt で入力をしてもらう

次は、ユーザーに名前を入力してもらいます。

let name = prompt("あなたの名前を教えてください");
console.log("入力された名前: " + name);
JavaScript

ダイアログに名前を入力して OK を押すと、
コンソールにその名前が表示されます。

ここでのポイントは、

prompt(...) の結果（文字列）が、そのまま変数 name に入る

ということです。
つまり「ユーザーの入力を、プログラムの中で使えるようになる」ということです。

例題：名前を聞いて挨拶するミニアプリ

ここまでを組み合わせて、小さなアプリにしてみましょう。

function askNameAndGreet() {
  let name = prompt("あなたの名前を教えてください");
  alert("こんにちは、" + name + " さん！");
}

askNameAndGreet();
JavaScript

実行の流れはこうです。

関数 askNameAndGreet を定義する
askNameAndGreet(); で関数を呼び出す
prompt で名前を入力してもらう
その名前を使って alert で挨拶する

ここまでできたら、もう立派に「簡単なアプリ」を作ったことになります。

Day 6: ランダムと配列で「おみくじ」の材料を作る

最終日のミニアプリを作るために、
「ランダムに一つ選ぶ」というテクニックを身に付けます。

Math.random でランダムな数を作る

コンソールで何回か次を打ってみてください。

console.log(Math.random());
JavaScript

毎回、0 以上 1 未満の小数がランダムに出てきます。
これを少し工夫すると、「0, 1, 2 のどれか」をランダムに作れます。

let r = Math.random() * 3;
console.log(r);
JavaScript

0〜3 の間の小数 が出てきます。
ここで Math.floor という「小数点以下切り捨て」を使います。

let index = Math.floor(Math.random() * 3);
console.log(index);
JavaScript

何回か実行すると、0 か 1 か 2 がランダムに出てくるのが分かるはずです。

配列を使って「候補の中から選ぶ」

ランダムにインデックス（番号）が作れるようになったので、
今度は「候補の一覧」を配列で用意します。

let fortunes = ["大吉", "中吉", "小吉"];

let index = Math.floor(Math.random() * 3);
let result = fortunes[index];

console.log("今日の運勢は " + result + " です！");
JavaScript

ここでの流れはこうです。

fortunes という配列に 3 つの候補を入れる
0〜2 のどれかのインデックスをランダムに作る
そのインデックスを使って、配列から 1 つ取り出す

これが「おみくじアプリ」の一番大事な部分です。

重要ポイントの再確認

ランダムの作り方を整理します。

0〜1 の小数を作る → Math.random()
0〜3 の小数を作る → Math.random() * 3
0,1,2 のどれかの整数にする → Math.floor(Math.random() * 3)
配列 fortunes から 1 つ選ぶ → fortunes[その数字]

ここが分かると、
「ランダムで一言メッセージを出す」「ラッキーアイテムを選ぶ」など、
いろいろ応用できるようになります。

Day 7: 超シンプル「おみくじアプリ」を完成させる

いよいよミニアプリを作ります。
やることは、ここまでの要素の組み合わせだけです。

ステップ 1: おみくじを引く関数を作る

コンソールに次をまとめて書いてください。

function drawFortune() {
  let fortunes = ["大吉", "中吉", "小吉", "末吉", "凶"];

  let index = Math.floor(Math.random() * fortunes.length);

  let result = fortunes[index];

  alert("今日の運勢は「" + result + "」です！");
}
JavaScript

ここでのポイントを丁寧に見ていきます。

fortunes.length
配列の要素数です。今は 5 なので fortunes.length は 5 になります。
こうしておけば、配列の中身を増やしたときにも自動で対応できます。

Math.floor(Math.random() * fortunes.length)
0〜1 の小数
→ 0〜5 の小数（* fortunes.length）
→ 0〜4 の整数に切り捨て（Math.floor）
という流れです。

alert(...)
結果をポップアップで表示します。

ステップ 2: 関数を呼び出して動かす

関数を書いただけでは動かないので、最後に一行追加します。

drawFortune();
JavaScript

これで、今日の運勢がポップアップで出るはずです。
何度か上下キーで drawFortune(); を呼び出して、
毎回結果が変わるのを楽しんでみてください。

応用 1: メッセージを増やして遊ぶ

fortunes の中身を、自分好みに変えてみてください。

let fortunes = [
  "今日は新しいことを始めるチャンス",
  "ゆっくり休むといいアイデアが出る",
  "身近な人を大事にすると運気アップ",
  "いつもより 5 分早く動いてみよう",
  "失敗しても一歩前進している証拠"
];
JavaScript

こんなふうに、自分へのメッセージツールとして使うのも面白いです。
超初級の段階でも、「実用っぽいもの」がちゃんと作れます。

応用 2: 名前を聞いてから占う

Day 5 の prompt を組み合わせてみましょう。

function drawFortuneWithName() {
  let name = prompt("あなたの名前を教えてください");

  let fortunes = ["大吉", "中吉", "小吉", "末吉", "凶"];
  let index = Math.floor(Math.random() * fortunes.length);
  let result = fortunes[index];

  alert(name + " さんの今日の運勢は「" + result + "」です！");
}

drawFortuneWithName();
JavaScript

これで、「名前を入力 → 占い結果が出る」という、
完全にアプリっぽい流れができあがります。

この 7 日間のあとにやると良いこと

ここまで来たら、すでに

変数
if 文
関数
配列
ランダム
alert / prompt

といった、アプリづくりの土台を一通り触っています。

次のステップとしておすすめなのは、

HTML でボタンを作る
JavaScript からボタンのクリックに反応する
結果をポップアップではなく、画面の中（文字として）に表示する

といった「画面付きアプリ」に進むことです。

次へ
1234
スポンサーリンク
タイトルとURLをコピーしました