JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 1日目

JavaScript JavaScript
スポンサーリンク

1日目のゴールとテーマ

1日目のテーマは「JavaScriptで“コンピュータに命令する”感覚をつかむ」です。
いきなり難しいことはやりません。今日は、

JavaScriptってそもそも何者なのか
最小限の環境（ブラウザ＋開発者ツール）でコードを書く
変数・値・計算・メッセージ表示という“超基本”を体験する

ここまで行ければ十分です。
「JavaScriptって、思ったより怖くないな」と感じてもらうのが、1日目のゴールです。

JavaScriptはどこで動いているのか

ブラウザの中の“頭脳”としてのJavaScript

JavaScriptは、主に「ブラウザの中で動くプログラミング言語」です。
Chrome、Edge、Firefox、Safari…あなたが普段使っているブラウザの中には、
JavaScriptを実行する“エンジン”が入っています。

Webページがボタンを押したら動いたり、
フォームに入力した内容をチェックしたり、
アニメーションしたりするのは、ほとんどJavaScriptの仕事です。

つまり、JavaScriptは「Webページをただの紙から“動くアプリ”に変えるための言語」と言えます。

1日目の開発環境は「ブラウザだけ」でいい

まずはエディタもNode.jsもいらない

本格的にやるならVS CodeやNode.jsも使いますが、
1日目は「ブラウザだけ」で十分です。

理由はシンプルで、

インストール不要
すぐに試せる
失敗してもページをリロードすればリセットできる

からです。

開発者ツールのコンソールを開く

Chromeを例にしますが、他のブラウザでもほぼ同じです。

  1. ブラウザを開く
  2. 適当なWebページを開く（Googleでも何でもOK）
  3. キーボードで F12 を押すか、右クリック → 「検証」を選ぶ
  4. 画面の下か右に「開発者ツール」が出る
  5. 上のタブから「Console（コンソール）」を選ぶ

この「Console」と書かれたところに、JavaScriptのコードを直接打ち込んで実行できます。
今日はここを“練習場”として使います。

最初の一歩：コンソールにメッセージを出してみる

console.logで「しゃべらせる」

コンソールに、次の1行を打ってみてください。

console.log("こんにちは、JavaScript！");
JavaScript

Enterを押すと、その下にこう表示されるはずです。

こんにちは、JavaScript！

これが、あなたの「JavaScriptでコンピュータに命令した」最初の一歩です。

ここで押さえておきたいポイントは3つです。

console.log(...) は「コンソールにメッセージを出す命令」
"..." で囲まれた部分は「文字列」と呼ばれる“文字のデータ”
命令は1行書いてEnterを押すと、その場で実行される

この console.log は、今後も「確認したいときの相棒」として何度も使います。

変数とは「名前をつけた箱」である

値を一時的に覚えておく場所

プログラミングでは、「値（数字や文字など）を一時的に覚えておく場所」が必要です。
それが「変数」です。

JavaScriptでは、変数を作るときに let をよく使います。

let name = "たろう";
console.log(name);
JavaScript

Enterを押すと、こう表示されます。

たろう

ここで起きていることを、かみ砕いて説明します。

let name = "たろう";
「name という名前の箱を作って、その中に ‘たろう’ という文字列を入れる」という意味です。

console.log(name);
「name という箱の中身をコンソールに表示して」という命令です。

重要なのは、「変数には名前がある」ということです。
この名前を通じて、あとから何度でもその値を使えます。

数字を扱ってみる：計算もできる

JavaScriptは計算機としても使える

コンソールで、次のように打ってみてください。

1 + 2
JavaScript

Enterを押すと、こう出ます。

3

これは「1 + 2 を計算して、その結果を表示した」だけです。
ここに変数を絡めてみましょう。

let price = 120;
let count = 3;
let total = price * count;

console.log(total);
JavaScript

結果はこうなります。

360

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

let price = 120;
price という箱に 120 という数字を入れています。

let count = 3;
count という箱に 3 を入れています。

let total = price * count;
price と count の中身を取り出して掛け算し、その結果を total に入れています。

console.log(total);
total の中身（計算結果）を表示しています。

このように、「変数に意味のある名前をつけて、計算に使う」というのが基本パターンです。
いきなり難しい式を書かなくていいので、「箱に入れて、取り出して、計算する」という感覚を大事にしてください。

文字列と数字を組み合わせて表示する

「合計は360円です」と言わせてみる

さっきの total を使って、もう少し“人間っぽい”メッセージを出してみましょう。

let price = 120;
let count = 3;
let total = price * count;

console.log("合計は" + total + "円です");
JavaScript

結果はこうなります。

合計は360円です

ここで重要なのは、「文字列と数字を + でつなぐと、1つの長い文字列になる」ということです。

"合計は" は文字列
total は数字（360）
"円です" も文字列

JavaScriptは、"合計は" + total を見たときに、
total を文字列に変換して "合計は360" にしてくれます。
さらに "合計は360" + "円です" で "合計は360円です" になります。

この「文字列と数字をつなげてメッセージを作る」というのは、
アプリを作るときにめちゃくちゃよく使うパターンです。

ちょっとだけ“アプリっぽく”：ユーザーから入力をもらう

promptで「入力してもらう」体験

ブラウザでは、prompt という関数を使うと、
小さな入力ダイアログを出して、ユーザーから文字を入力してもらえます。

コンソールに、次のように打ってみてください。

let name = prompt("あなたの名前を入力してください：");
console.log("こんにちは、" + name + "さん！");
JavaScript

Enterを押すと、ブラウザに小さなダイアログが出てきて、
「あなたの名前を入力してください：」と表示されます。

名前を入力してOKを押すと、コンソールにこう表示されます。

こんにちは、○○さん！

ここで起きていることを分解します。

prompt("あなたの名前を入力してください：");
ブラウザに入力ダイアログを出し、ユーザーが入力した文字列を返します。

let name = ...
その返ってきた文字列を name という変数に入れています。

console.log("こんにちは、" + name + "さん！");
name の中身を使って、挨拶メッセージを作って表示しています。

これだけで、「ユーザーから入力をもらって、それに応じてメッセージを変える」という
“アプリっぽさ”が一気に出てきます。

数字の入力を扱うときの注意点

promptの結果は「文字列」である

次のコードを試してみてください。

let a = prompt("数字を1つ入力してください：");
let b = prompt("もう1つ数字を入力してください：");

console.log(a + b);
JavaScript

例えば、最初に「2」、次に「3」と入力すると、
結果はこうなります。

23

「5」じゃないの？と思ったら、ここが大事なポイントです。

prompt は「文字列」を返します。
つまり、a も b も「数字っぽい見た目の文字列」です。

JavaScriptは "2" + "3" を「文字列の結合」として扱うので、
“23” という文字列になります。

数字として計算したいときはNumberで変換する

数字として足し算したいときは、
文字列を Number に変換する必要があります。

let aText = prompt("数字を1つ入力してください：");
let bText = prompt("もう1つ数字を入力してください：");

let a = Number(aText);
let b = Number(bText);

let sum = a + b;

console.log("合計は " + sum + " です");
JavaScript

ここでの重要ポイントを深掘りします。

Number(aText) は、「aText を数字として解釈しようとする」関数です。
“2” なら 2 になりますが、もし “abc” のような文字列だと NaN（Not a Number）という特別な値になります。

a と b は「本物の数字」なので、a + b はちゃんと足し算になります。
その結果を sum に入れて、メッセージとして表示しています。

1日目の時点では、「promptの結果は文字列」「数字として使いたいならNumberで変換する」
この2つだけ覚えておけば十分です。

1日目の小さな“ミニアプリ”を作ってみる

「お会計ミニアプリ」をコンソールで作る

ここまでの要素を組み合わせて、
コンソール上で動く小さな“お会計ミニアプリ”を書いてみましょう。

やりたいことはこうです。

単価を入力してもらう
個数を入力してもらう
合計金額を計算して表示する

コードはこうなります。

let priceText = prompt("商品の単価を入力してください（円）：");
let countText = prompt("個数を入力してください：");

let price = Number(priceText);
let count = Number(countText);

let total = price * count;

console.log("合計金額は " + total + " 円です。");
JavaScript

実行の流れを追ってみます。

  1. 単価を文字列として受け取る（priceText）
  2. 個数を文字列として受け取る（countText）
  3. Numberで数字に変換する（price, count）
  4. 掛け算して total を求める
  5. console.log でメッセージとして表示する

ここまでできたら、もう立派に「JavaScriptで小さなアプリを書いた」と言っていいです。

1日目で一番大事な感覚

「コンピュータは“箱”と“命令”で動く」

今日やったことを、あえてざっくり言い直すと、

値を入れる“箱”（変数）を作る
その箱に数字や文字を入れる
箱の中身を使って計算したり、メッセージを作ったりする
console.log で結果を確認する

という流れを何度も繰り返しただけです。

プログラミングは、難しい呪文ではなく、

「どんな箱が必要か」
「その箱に何を入れるか」
「その中身をどう組み合わせたいか」

を考えて、それをコードにしていく作業です。

1日目でここまで体験できていれば、
もうJavaScriptは“完全な未知のもの”ではなくなっているはずです。

1日目のまとめ

今日のポイントを短く整理すると、

JavaScriptはブラウザの中で動く言語で、開発者ツールのコンソールからすぐ試せる
console.log で「コンピュータにしゃべらせる」ことができる
let で変数（名前付きの箱）を作り、数字や文字列を入れて使い回せる
文字列と数字を + でつなぐと、メッセージを作れる
prompt でユーザーから入力をもらい、Number で数字に変換して計算できる

というところまで来ました。

次のステップ（2日目）では、
「条件分岐（もし〜なら）」や「繰り返し」を使って、
もう少し“アプリらしい動き”を作っていきます。

もし余裕があれば、
今日の「お会計ミニアプリ」に「税込み計算」や「割引」を足してみるのも、
とても良い練習になります。

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