JavaScript初心者が最初に学ぶべき3つの基礎：変数・関数・条件分岐

2025-10-20

JavaScriptを学び始めたとき、「どこから手をつければいいのか」と悩む方は多いです。
専門用語も多く、複雑に見えるかもしれません。

でも実は基本の3つ「変数」「関数」「条件分岐」を理解すれば、しっかりとした土台が作れるんです。

この3つを習得することで、ボタンを押すと画像が切り替わるような、動きのあるWebサイトも作れるようになります。
焦らず基礎を固めることが、長く使えるスキルへの近道です。

読みたい場所にジャンプ

変数を理解してデータを扱えるようになろう

変数とは「データを入れる箱」のようなものです。
ユーザーの名前や入力内容、数値などを一時的に保存し、必要なときに取り出して使います。

たとえばlet name = "Maho"; と書けば、「name」という箱に「Maho」という文字列を保存できます。
この仕組みを理解すると、同じデータを何度も入力する必要がなくなり、コーディングが効率的になりますよ。

JavaScriptでは変数の宣言に「let」「const」「var」の3種類があります。

現代の開発では「let」と「const」を使うのが一般的です。

「let」は値を後から変更でき、「const」は変更できません。

定数（変わらない値）は「const」、変更が必要な値は「let」を使うと、コードのミスを防ぎやすくなります。
まずはこの2つを使い分けることを意識しましょう。

関数は、よく使う処理をまとめて再利用できる仕組み。
たとえばボタンをクリックしたときに特定のメッセージを表示する処理を何度も書くより、関数としてまとめておくとすっきりします。

一度作れば何回でも呼び出せるので、作業の時短にもつながりますね。
小さな動きを作るときも、関数を使うとコードが整理されて見やすくなります。

関数は以下のように書きます。

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

この例では「sayHello」という名前の関数を作り、呼び出すと「こんにちは！」と表示されます。

関数名を決め、波かっこの中に実行したい処理をまとめて書くのが基本。
慣れてくると「アロー関数（()=>{}）」という短い書き方も使えるようになりますよ。

Webサイトに動きをつける上で欠かせないのが「条件分岐」です。

「もしボタンが押されたら」「もし入力が正しければ」など、状況に応じて処理を切り替えることができます。
JavaScriptでは「if文」を使って次のように書きます。

let score = 85;

if (score >= 80) {
  console.log("合格です！");
} else {
  console.log("もう少し頑張りましょう");
}

条件が真（true）の場合だけ特定の処理を実行する仕組みです。
こうした分岐を組み合わせることで、サイトに「考える」動きを与えられます。

if文を理解すると、ユーザーの行動に応じた反応を作れるようになります。
たとえば、入力フォームで未記入なら警告を出す、特定のボタンを押したら画像を切り替える、といった動きも実現できます。
「動的なWebサイト」の第一歩は、条件分岐にあります。

変数・関数・条件分岐の3つを組み合わせると、簡単な仕組みを自作可能です。
たとえば次のようなコードです。

let count = 0;
function addCount() {
  count++;
  if (count >= 5) {
    console.log("5回クリックしました！");
  }
}

ボタンを押すたびにカウントを増やし、5回目にメッセージを出すシンプルな例です。

でもこの実装だと6回目も7回目も「5回以上クリックしたら」の条件に当てはまるので、「5回クリックしました！」とでてしまいます。

実装の意図によって適切に書きかえることが大切です。

実際に動かしてみると、JavaScriptの仕組みがスムーズに理解できるようになります。

新しいライブラリやフレームワークに飛びつく前に、まずは基礎を固めましょう。

変数・関数・条件分岐を理解しておくことで、どんな技術を学んでも応用が利くようになります。
焦らず少しずつ確実に進むことが、結果的に最速の成長につながります。

JavaScriptは難しそうに見えても、基本の3つ「変数・関数・条件分岐」を理解すれば、確かな土台が作れます。
基礎を大切にすることで、自分でコードを書けるようになり、コーディングの時短にもつながりますよ。

今日から少しずつ学びを積み重ねていきましょう。

XでWeb制作のヒントを日々投稿しています。あなたの学びのきっかけになれば嬉しいです。

よかったらシェアしてね！