JavaScriptで変数を使う方法【初心者向け】
プログラミング初心者向けに【JavaScriptで変数を使う方法】を解説した記事です。変数を使うと、文字列や数値をプログラムの中で何度も繰り返して使うことができます。サンプルコードもあるので、自分で書いてみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptの使い方を初心者向けに紹介した記事です。
今回は、JavaScriptで変数を使う方法について解説します。JavaScriptに限らずプログラミングを学習する中で変数は必須の知識なので、ぜひ覚えておきましょう。
他の知識を身につける上でも必ず役に立つはずです。
また、入門向けのJavaScripを学習できるサイトも紹介しているので、合わせてご覧ください。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
変数とは
プログラムを書くときには、さまざまなデータをさまざまなところで使います。
ときには、長い文字列や、同じ数値・計算式を何度も繰り返し使うこともあります。とはいえ、その都度同じデータを書き込むのは面倒ですよね。そんなときに役立つのが変数です。
変数とは、さまざまな文字列や数値を入れておく箱とイメージしていただくとわかりやすいでしょう。
その箱に便宜上の名前（変数名）をつけ、中身のデータの代わりに変数名を書き入れ使い回すことで、同様の処理が簡単におこなえるようになります。
変数というのは、数値や文字列を入れる箱という考え方ていいですか？
その通り！後で加工したり、表示したりするために保管しておくんだよ。本当はメモリに領域を確保して、場所に名前を付けたものなんだけど。気にしなくていいよ。
あ！そういえばそうですね。CPUってメモリにあるデータしか読み込めないんでしたっけ。
そうそう。では、JavaScriptの変数の書き方を見てみよう！
変数の書き方
JavaScriptでは、変数はこのように書きます。
var 変数名 = “値、文字列”;
変数の宣言をvarでおこなったら、代入演算子「=」で、右側の「” ”」で囲まれた値や文字列のデータを左側の変数に代入します。
ですので、 nameという変数にYamadaという文字列を入れたいときは、次のように書きます。
var name = "Yamada"
基本はこれだけです。
変数にはvarの他にletという宣言方法もあります。
また、変数以外にconstを利用した定数の宣言も可能です。
ここでは、簡単にvarとletとconstの違いを例示します。
JavaScriptで書く「var,let,const」の違いと使い分け方法の記事も参考にしていただくと良いですよ。
varとは
varでは再宣言、再代入が可能です。
var techacademy = '初期値OK'; techacademy = '再代入OK'; var techacademy = '再宣言OK';
letとは
letでは再宣言が禁止されています。
let techacademy = '初期値OK'; techacademy = '再代入OK'; let techacademy = '再宣言NG';
constとは
constでは、再宣言、再代入が禁止されています。
const techacademy = '初期値OK'; techacademy = '再代入NG'; const techacademy = '再宣言NG';
varを使って変数を実際に出力してみよう
実際にプログラムを書いてみましょう。
今回は例として、「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」が出力されました。
今回は、「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>
「1 + 100」が変数iに代入され、その合計が出力されました。数式も変数で利用できるので、ぜひ活用してみてください。
今回は以上です。
JavaScriptの基礎となるので、覚えておきましょう。
JavaScriptの他にPHPの変数についての記事もあるので、合わせてご覧ください。
変数に入っている値を表示させることが出来ました！PHPでは変数の名前に$(ドル)を使っていたんですが、JavaScriptは変数宣言があるだけで、いらないんですねー。
そうそう。変数を表す文字を使うほうが例外かな。
足し算の+も他のプログラミング言語と共通なんですねー。
共通している部分がけっこう多いんだよね。なので、何か1つのプログラミング言語をしっかり学ぶと他の言語の使い方もある程度マスターしたことになるんだよ。
[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。
| この記事を監修してくれた方
中本賢吾（なかもとけんご） 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 |
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
