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

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

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

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

今回は、JavaScriptで変数を使う方法について解説します。

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

 

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

 

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

 

変数とは

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

 

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

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

変数

 

変数の書き方

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

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

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

 

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

var name = “Yamada”

基礎はこれだけです。

 

 

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

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

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

今回は例として、「Yamada」を変数に定義して、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

他にも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講座)を開催しています。プログラミングの初心者でも受講可能です。