2024.03.24

JavaScriptって何？レベルの初心者がとりあえず触ってみるハンズオン

とりあえずJavaScriptを触ってみよう

JavaScriptとは、ウェブブラウザ上で動作するプログラミング言語です。ボタンを押すとアニメーションが動いたり、ゲームを作ったりと、ウェブサイトにインタラクティブな体験を提供することができます。

このハンズオンを通じて、プログラミング初心者やJavaScriptに苦手意識を持つ方でも、JavaScriptの使い方を基礎から簡単に学べます。特別な経験や知識は一切必要ありません。パソコンとインターネットの基本操作ができれば、準備は完了です。わからないことがあっても大丈夫。一旦はこういうものだと思って進めてみてください。

対象者

この記事は、次のような皆さんを対象としています。

プログラミングをこれから始めたいと考えている方
JavaScriptを使ってウェブ開発を学びたい初心者
コーディングの基礎を理解しているが、JavaScriptの知識を深めたい方
プログラミング経験が全くない方でも心配はいりません。このガイドは、最初の一歩から丁寧に説明していきます。

必要なもの

JavaScriptを学ぶために必要なものは以下の通りです。

パソコン

ウェブ開発を行うための基本的なツールです。Windows、Mac、Linuxのいずれのオペレーティングシステムでも大丈夫です。
インターネット接続

オンラインのリソースにアクセスしたり、ウェブアプリケーションをテストするために必要です。
テキストエディタ

コードを書くためのソフトウェアです。Visual Studio Code など、無料で使えるテキストエディタが多数あります。初心者にはVisual Studio Codeを推薦します。その使いやすさと機能性は、学習プロセスを大きくサポートしてくれます。
ウェブブラウザ

コードが期待通りに動作するかを確認するために使用します。Google Chrome や Mozilla Firefox など、開発者ツールが豊富なブラウザが推奨されます。これらのツールは、コードが期待通りに動作するかを確認するのに役立ちます。

あとはちょっとしたやる気と時間があれば大丈夫です！

JavaScriptの魅力と基本概念

まずは少しJavaScriptと仲良くなりましょう。生い立ちなどを知ってみてください。

JavaScriptの歴史と役割

1995年、インターネットはまだ赤ちゃんのような存在でした。その頃、Netscape Navigatorというブラウザを開発していたNetscape社は、ウェブページをもっと「生き生き」とさせたいと考えていました。そこで、Brendan Eich（ブレンダン・アイク）というエンジニアがたった10日間でJavaScriptを発明しました。当時はまさに「速さは正義」の時代。JavaScriptは、ウェブページに動きを与えることで、インターネットを根本から変えることになります。

そして今日、JavaScriptはウェブ開発における三大技術の一つ（他の二つはHTMLとCSS）であり、ウェブブラウザだけでなくサーバーサイドでも動作する万能な言語となりました。フェイスブックのような複雑なウェブアプリケーションから、あなたが今使っているブラウザのタブを動かす簡単なスクリプトまで、あらゆる場所でJavaScriptが活躍しています。

基本的なJavaScriptの魔法

JavaScriptを学ぶ魅力は、コードを書いたその瞬間から、ウェブページを思い通りに操れる点にあります。例えば、こんな簡単なコードを見てください。ここではまだ見るだけで大丈夫です！

alert("こんにちは、世界！");

これは、ウェブページに訪れた人に「こんにちは、世界！」と挨拶するポップアップを表示させるJavaScriptのコードです。たったこれだけで、ウェブページにインタラクションを加えることができました。もう少しコードに手を加えてみましょう。

// ボタンを押すとメッセージを表示する
function sayHello() {
  alert("こんにちは！");
}

// ボタンにイベントを設定
document.getElementById("button").addEventListener("click", sayHello);

今度はユーザーがボタンを押すと「こんにちは！」というメッセージを表示します。

JavaScriptの基本的な構文は、非常に直感的で学びやすいです。変数を使ってデータを保存したり、条件分岐で「もし〜ならば」のロジックを作ったり、ループで同じ操作を繰り返したり... これらはすべて、皆さんのアイデアを形にするためのツールです。

// 1から10までの数を足し合わせる

let sum = 0;

for(let i = 1; i <= 10; i++) {

  sum += i;

}

console.log(sum); // 出力: 55

この例では、1から10までの数を足し合わせる簡単なループを作っています。このように、JavaScriptを使えば、単純な計算から複雑なウェブアプリケーションまで、あらゆることが可能になります。

実践ハンズオン

JavaScriptの基本から始めて、実際に手を動かしながら学んでいきましょう。このセクションでは、初心者でもステップバイステップでフォローできるように、実践的なプログラミング体験を提供します。

1. 環境設定と最初のプログラム

まずは、プログラミングに必要な環境を整えましょう。テキストエディタとしては、Visual Studio Codeがおすすめです。

https://code.visualstudio.com/

インストールが完了したら、新しいファイルを作成し、以下のコードを入力してみてください。

console.log("Hello, World!");

ファイルを「hello.js」として保存し、コマンドラインやテキストエディタの統合ターミナルからnode hello.jsを実行すると、「Hello, World!」が表示されます。

node.jsがインストールされてない場合は次のURLから、お使いのOSを選んでインストールしてください。

https://nodejs.org/en/download

2. 基本的なJavaScriptの構文と操作

では、ここからはJavaScriptの基本的な構文を理解することから始めましょう。

変数

まずこれは覚えなければ何もできないと言って過言ではありません。データを保存するための名前付きの容器です。 messageという変数にこんにちは！という値を入れてみました。

let message = "こんにちは！";
console.log(message);

条件分岐

値によって答えを変えたい場合などに使用します。条件に応じて異なる処理を行います。先ほどのhello.jsに上書きしてもいいですし、新しくファイルを作っても構いません。 node ファイル名で実行してみてください。

# ここの値を変えてみてください
let hour = 10;
if (hour < 12) {
    console.log("おはようございます！");
} else {
    console.log("こんにちは！");
}

ループ

何度も同じことを書くのは面倒なので、同じコードを繰り返し実行します。

# 変数iに代入する値を変えてみてください
for (let i = 1; i <= 5; i++) {
    console.log(i);
}

このコードは、i という変数を 1 から 5 までループさせるものです。

各部分の解説
- let i = 1;: i という名前の変数を宣言し、初期値を 1 に設定します。
- i <= 5;: i の値が 5 以下であるかどうかを条件として評価します。
- i++: i の値を 1 加算します。

3. 関数を使ってみよう

関数を使うことで、コードを再利用可能な部品に分けることができます。以下は簡単な関数の例です。

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

greet("世界");

この関数は、引数として受け取った名前に挨拶をします。

関数に引数を与える方法

関数を呼び出す際に、括弧内に引数を指定します。引数はカンマで区切って複数指定することができます。

// 名前と年齢を受け取って挨拶する関数
function greet(name, age) {
    console.log("こんにちは、" + name + "さん！あなたは" + age + "歳ですね！");
}

// 関数を呼び出し、引数を指定
greet("山田太郎", 30);

この例では、greet 関数は2つの引数を受け取ります。

1つ目は名前
2つ目は年齢

関数を呼び出す際には、greet("山田太郎", 30) のように、引数をカンマで区切って指定します。

4. ミニプロジェクト：簡単なアプリケーションの開発

これまでに学んだ知識を活かして、実際に小さなプロジェクトに挑戦してみましょう。例えば、ユーザーからの入力を受け取ってクイズに答える小さなアプリケーションを作成することができます。

クイズアプリ

次のコードをquiz.htmlと名前をつけて保存してください。Web３大技術の一つhtmlとJavaScriptの組み合わせです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript クイズアプリ</title>
</head>
<body>
    <script>
        let answer = prompt("日本の首都は？");
        if (answer === "東京") {
            alert("正解！");
        } else {
            alert("不正解！");
        }
    </script>
</body>
</html>

ファイルのパスをコピーしてブラウザに貼り付けて実行すると、クイズのプロンプトが出力します。とはいえ、この書き方だと問題ごとにコードを書く必要があるため、とてもじゃないけど使えません。

問題ごとにコードを書き換える必要がないようにするには、以下の方法があります。

問題文と答えを配列に格納する
問題文と答えをオブジェクトに格納する
問題文と答えをデータベースに格納する

これらの方法を使うと、コードを1回書くだけで、さまざまな問題を出題することができます。

例：問題文と答えを配列に格納する

次のコードを、先ほど作成したquiz.htmlファイルの<script></script>の間に保存して、ブラウザで実行してみてください。

// 問題文と答えの配列
let questions = [
    {
        question: "日本の首都は？",
        answer: "東京"
    },
    {
        question: "フランスの首都は？",
        answer: "パリ"
    },
    {
        question: "2023年のノーベル賞受賞者は？",
        answer: "村上春樹"
    }
];

// 問題をループで処理
for (let i = 0; i < questions.length; i++) {
    let answer = prompt(questions[i].question);
    if (answer === questions[i].answer) {
        alert("正解！");
    } else {
        alert("不正解！");
    }
}