JavaScriptで変数を使う方法【初心者向け】

プログラミング初心者向けに【JavaScriptで変数を使う方法】を解説した記事です。変数を使うと、文字列や数値をプログラムの中で何度も繰り返して使うことができます。サンプルコードもあるので、自分で書いてみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

JavaScriptの使い方を初心者向けに紹介した記事です。

今回は、JavaScriptで変数を使う方法について解説します。JavaScriptに限らずプログラミングを学習する中で変数は必須の知識なので、ぜひ覚えておきましょう。

他の知識を身につける上でも必ず役に立つはずです。

また、入門向けのJavaScripを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

変数とは

プログラムを書くときには、さまざまなデータをさまざまなところで使います。

ときには、長い文字列や、同じ数値・計算式を何度も繰り返し使うこともあります。とはいえ、その都度同じデータを書き込むのは面倒ですよね。そんなときに役立つのがです。

 

変数とは、さまざまな文字列や数値を入れておく箱とイメージしていただくとわかりやすいでしょう。

その箱に便宜上の名前(変数名)をつけ、中身のデータの代わりに変数名を書き入れ使い回すことで、同様の処理が簡単におこなえるようになります。

変数

 

変数の書き方

JavaScriptでは、変数はこのように書きます。

var 変数名 = “値、文字列”;

変数の宣言をvarでおこなったら、代入演算子「=」で、右側の「” ”」で囲まれた値や文字列のデータを左側の変数に代入します。

 

ですので、 nameという変数にYamadaという文字列を入れたいときは、次のように書きます。

var name = "Yamada"

基本はこれだけです。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

変数を使って実際に出力してみよう

実際にプログラムを書いてみましょう。

今回は例として、「Yamada」を変数に定義して、document.writeメソッドを使って呼び出してみます。document.write( )という命令分を使うことで( )内の数値や文字列を表示させることができます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>はじめてのJavaScript</title>
  </head>
  <body>
    <script>
      var name = "Yamada";
      document.write(name);
    </script>
  </body>
</html>

 

Webブラウザで読み込むと、変数で定義した「Yamada」が出力されました。

スクリーンショット 2015-02-11 17.38.51

今回は、「Yamada」と簡単な文字列の出力だったので、変数に入れずそのまま出力することもできますが、プログラミングの作業をする中で繰り返り使用する文字列や数値があります。

長文であったり、何度も利用するものは変数としてまとめておくと使いやすいでしょう。

 

ポップアップ通知を表示させる

他にもGoogleなどでよく見るポップアップ通知を表示させることも可能です。

ポップアップ通知は、JavaScriptで簡単に実現できるので覚えておくと実行結果を確認する際などに役立つでしょう。通知を表示させるメソッドは以下の通りです。

alert(変数);

ちなみに今回は計算式を変数に入れて出力してみます。数字の場合は、文字列ではないので「” “」は利用しません。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>はじめてのJavaScript</title>
  </head>
  <body>
    <script>
      var i = 1 + 100;
      alert(i);
    </script>
  </body>
</html>

スクリーンショット 2016-07-25 18.48.23

「1 + 100」が変数iに代入され、その合計が出力されました。数式も変数で利用できるので、ぜひ活用してみてください。

 

今回は以上です。

JavaScriptの基礎となるので、覚えておきましょう。

 

JavaScriptの他にPHPの変数についての記事もあるので、合わせてご覧ください。

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。