ホーム > 記事一覧 > 【初心者向け】JavaScriptの基本を徹底解説｜変数・関数・条件分岐の書き方

【初心者向け】JavaScriptの基本を徹底解説｜変数・関数・条件分岐の書き方

投稿日：2025/3/16

最終更新日：2025/3/16

　JavaScriptとは、WebサイトやWebアプリなどに動作をつけることができるプログラミング言語です。 HTMLがページの構造を、CSSがデザインを担当するのに対し、JavaScriptはユーザーの操作に応じて画面を変化させたり、処理を実行したりする役割を持っています。

　HTMLとCSSに加えてJavaScriptを活用することで、よりクオリティが高く、使いやすいWebサイトを作ることが可能になります。 JavaScriptでできることの例としては、ボタンをクリックしたときの反応や、画面の切り替え、入力内容のチェックなどがあります。例えばショッピングサイトで、ボタンを押すと合計金額を自動で表示させるといった処理も、 JavaScriptによって実現できます。

　またJavaScriptは、Webサイト開発だけでなく、スマートフォンアプリ開発やサーバーサイド開発にも利用されており、現在では非常に需要の高いプログラミング言語です。

本記事では、プログラミング未経験者や初心者の方に向けて、 JavaScriptの基本的な書き方を1から分かりやすく解説していきます。

今回の記事では以下の項目について解説します。

JavaScriptの基本的な文法
変数の考え方と使い方
演算子と比較の使い方

JavaScriptとは？基本の特徴と役割

JavaScriptとは、Webページに動きや対話性を与えるためのプログラミング言語です。HTMLが「構造」、CSSが「見た目」を担当するのに対し、JavaScriptは「振る舞い」を制御する役割を持ちます。

たとえば、ボタンをクリックしたときの処理や、入力内容のチェック、画面の一部を動的に更新するなど、ユーザーの操作に応じた動作を実現できます。Web開発をする上では欠かせないプログラミング言語となっています。

JavaScriptの大きな特徴は、ブラウザ上でそのまま動作する点です。特別な環境を用意しなくても、Webブラウザさえあれば実行できるため、Web開発の標準技術として広く使われています。また、近年ではNode.jsの登場により、サーバーサイド開発やアプリケーション開発にも利用範囲が広がりました。

Yama

Web開発ではよく使われる言語であるため使えるようになると非常に便利です。

このようにJavaScriptは、Webサイトをより便利で使いやすいものにするために欠かせない存在であり、現代のWeb開発において中心的な役割を担っています。

では実際にファイルを作ってみましょう。前回のCSS基本と同様の「テスト」を使ってJavaScriptファイルを作っていきます。

※その記事を見ていないという方でも大丈夫です。自身でフォルダを作り、その中にJavaScriptファイルを作って頂ければ問題ありません。

現在の「テスト」フォルダの中身はこのようになっているはずです。

では早速JavaScriptファイルを作っていきましょう。名前は一般的に「main.js」というのが普通です。作った後のフォルダはこのようになっているはずです。

では次にJavaScriptファイルをHTMLファイルに接続させる作業が必要です。

なぜ繋げる必要があるかというと、HTMLはWebページの表を担う役割があり、JavaScriptは裏を担う役割があります。そのためそれぞれを繋げる必要があるのです。

現在HTMLファイルはこのようなコードになっているはずです。JavaScriptを繋げるコードはbodyタグの中かheadタグの中に記述することが可能です。

              
      <!DOCTYPE html>
      <html lang="ja">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="/style.css" type="text/css">
      </head>
      <body>
        <h1 class="main-title">唐揚げ</h1>
        /* ここにJavaScriptファイルを繋げるコードを記述 */ 
      </body>
      </html>

以下のコードが記述した後のHTMLファイルとなっています。

              
      <!DOCTYPE html>
      <html lang="ja">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="/style.css" type="text/css">
      </head>
      <body>
        <h1 class="main-title">唐揚げ</h1>
        <script src="/main.js"></script>
      </body>
      </html>

これでJavaScriptを書く準備ができました。では実際に書いていきましょう。

変数の基本：宣言・代入・データ型

変数とは、プログラム内でデータを一時的に保存しておくための箱のようなものです。言葉だけではイメージがしにくい部分があると思うので、実際のコードをみてみましょう。

                
        let HP = 100;
        console.log(HP);

上記のコードの「let」は今から変数を記述しますという宣言のために書いています。HPとは変数の名前です。名前はなんでもつけることができます。「100」とは「HP」という変数の中に入れる数値を表しています。数値以外にも文字列(String)を入れることも可能です。

そして最後にconsole.log(HP)についてです。console.logはWebページのコンソールにかっこ内の変数を表示させることを意味します。
つまり今回の場合はconsole.logを用いてHPという変数を表示させるという意味になっています。

Yama

ではVSCodeのLive Serverを使用し、このコードがどんな結果をもたらすのかをみてみましょう。

前回の続きであるため以下のような画面が表示されています。ではどこにJavaScriptで書いたコードの実行結果をみることができるのでしょうか？

実行結果は開発者ツールにあるコンソールに表示されています。そのコンソールを見るためには「Google Chrome」を使用する必要があります。

以下は「Google Chrome」を使用している前提で話を進めています

Webページ内でショートカットキーを使用し表示させてみましょう。

Macの場合は「option + command + i」
Windowsの場合は「Ctrl + Shift + i」
を押すことで開発者ツールを開くことができます。

ショートカットキーを実行した後の画面はこのようになっているはずです。右下部分の「コンソール」を選択することでjavaScriptの実行結果を見ることができます。

実行結果を見るとしっかりと先ほど「HP」という変数に入れた「100」という数字が表示されているはずです。

JavaScriptでの変数は3つの種類があります。

「let」は一度設定した値を決めた後に、その値を変えることができます。つまり再代入が可能です。

「const」は一度設定した値を決めたら、その値を変えることができません。つまり再代入が不可能です。

「var」でも変数を記述することができますが非推奨なので使わないことをお勧めします。

JavaScriptの変数ではどんな値を入れることができるかというと「数値、文字列、真偽値、配列、オブジェクト」が可能です。

真偽値とは「True」か「False」のことを意味します。

配列とはリストのようなものです。[0, 1, 2, 3, 4, 5]のような値の集まりを表します。

最後のオブジェクトとは以下のようなものを指します。↓

              
      const user = {
        name: "Shota",
        age: 30,
        favoriteFood: "唐揚げ"
        isStudent: true
      };

これらの実践的な使い方については中級編の記事にて説明いたします。ですので「これどういう意味なんだろう」という部分があっても問題ありません。中級編の記事にて例とともに理解を深めていきます。

関数の作り方と呼び出し方

関数とは、特定の処理をひとまとめにして、必要なときに何度でも呼び出せる仕組みです。同じ処理を繰り返し書く必要がなくなり、コードの可読性や保守性が向上します。関数が書けるようになるととっても便利です。では早速コードを書いてみましょう。挨拶をする関数を書いてみました。

                
        function greet(){
          console.log("おはよう");
          console.log("こんにちは");
          console.log("こんばんは");
        }

        greet();

上記のコードの説明をいたします。

「function」は関数を記述する際に必要となってくる宣言です。そのため最初に「function」と書いています。

1行目にある「greet()」はその関数の名前であり、そのため自由に決めることができます。

最後の行にある「greet()」は関数の呼び出しです。よって関数は書いたら呼び出すことが必要です。

Yama

私の場合はよく関数を呼び出すことを間違えていました。
初心者の方は忘れる可能性があるので注意しましょう。

この書き方以外にもアロー関数といった関数の書き方もあります。それが以下のコードです。

                
        const age = () => {
            console.log(30);
          }

        age();

関数を理解することで、効率的で整理されたJavaScriptコードが書けるようになります。関数の実践的な書き方使い方は「中級編」にて説明をする予定です。

演算子と比較の使い方

演算子とは、数値の計算や値の比較、論理的な判断を行うための記号です。JavaScriptでは、四則演算に使う「＋」「−」「＊」「／」などの算術演算子が基本となります。これらを使うことで、合計や差、割合といった計算処理を簡単に行えます。

では実際にコードをみてみましょう。

                
        let total = 0

        function add(){
          total = 10 + 10
          console.log(total)
        }

        add();

比較演算子は、値同士を比べて真か偽かを判定するために使われます。「==」は値のみを比較し、「===」は値とデータ型の両方を比較します。JavaScriptでは予期しない型変換を防ぐため、「===」を使うのが一般的です。

また、「>」「 <」「>=」「<=」などを使えば大小関係も判定できます。これらの演算子は、if文などの条件分岐と組み合わせて使われることが多く、プログラムの動作を制御する重要な役割を担っています。

まとめ

これらがJavaScriptの基本でした。JavaScriptを使うことができるようになれば、Webサイトを作る際により本格的なものを作ることができます。また情報がとても豊富なので「ここを深掘りしたい」という部分を見つけた場合は是非自身で調べてみてください。たくさんの情報を得られるはずです。

また次回のJavaScript中級ではJavaScriptを使って実際にWebサイトを作っていきます。といっても簡単なものなので是非気負いせず挑戦してみてください。