サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

JavaScriptでデータを格納→確認する方法

JavaScriptでデータを格納→確認する方法

この記事にはプロモーションが含まれています。

JavaScriptはプログラムなので、様々なデータを取り扱うことが可能であり、HTMLやCSSでは真似できない特徴です。
※プログラムとHTML/CSSの違いについては、こちらをご参照ください。

プログラムでデータを扱うというと、何十桁に及ぶような膨大かつ複雑な数値の計算を思い浮かべる方もいるかもしれませんが、意外にも(?)小〜中学生レベルの計算をプログラムにさせることも多いです。

例えばECサイトでお買い物をするとき、買い物かご(カート)に入れた商品の値段の合計値が表示されますよね。
こういった機能もプログラムによって計算されるものですが、基本的にはカートに追加された商品の値段を足し、カートから削除された商品の値段を引くという、計算自体は単純なものです。

もちろん、プログラムを扱う上で複雑な計算など出てこないというわけではありませんが、少なくともプログラムの基本を押さえる上では、複雑な計算式は必要ないので、計算が苦手という方でも安心してください。

そもそも、データは数値だけでなく文字列など、数字ではないものも含まれます。(詳しくは本記事で解説します)

この記事では、まず簡単なデータを格納して取り出すことができるようになることを目標とします。

 用語解説:データを格納するとは?

– 目次 –

データの種類

JavaScriptで取り扱うことができるデータには様々な種類があり、種類別に分類したものをデータ型(data type)と呼びます。

データ型には色々あるのですが、ここではプリミティブと呼ばれる、最初に押さえておきたい最も基本的な種類をご紹介します。

データ型説明
number
数値型
10、-5、3.42…といった数値
string
文字・文字列型
「こんにちは」「りんご」といった文字の羅列
boolean
論理型
真(true)・偽(false)
null
空の状態
特殊なデータ型。空白(ホワイトスペース)や0と違い、データが空っぽであることを示す。

まずは、表に記載したレベルのざっくりとした理解でも全く問題ありません。

少し補足説明をしておくと、数値型の1と、文字型の”1″は違うデータ型という点は注意が必要です。

どういうことかと言うと、計算できる数値として数字を扱いたい場合と、何かの名称として数字を扱いたい場合があります。
表記は同じ1でも、計算できる数値(数値型)の場合と、文字として表示させる1の場合(文字型)があると言うことです。

数字を文字(列)型として取り扱いたい場合、数値を” “(クォーテーション)で囲むことにより、それは数値型ではなく文字列型とみなされます。

※数字に限らず、文字列型のデータはクォーテーションマークで囲む必要があります。

JavaScriptはHTMLか.jsファイルに書き込む

また論理型のデータであるtrue/falseや、データが空っぽであることを示すnullは、条件分岐(if構文)などでよく使われるデータです。

ただ、ここで条件分岐のことまで説明し始めると話が本筋から逸脱してしまうため、本記事(解説動画)では数値型文字列型を使ってデータの格納・取り出し方について説明していきます。

    POINT!
  1. ・JavaScriptで扱うデータには、数値型、文字列型、論理型、nullなどがある!
  2. ・数字を「文字」として表示させたい場合もあるので、数字=数値型とは限らない!
  3. ・文字列型のデータはクォーテーションマークで囲む必要がある!

定数と変数

データには色々な種類があるということが分かったところで、さっそくデータの出し入れをしていきたいところですが、そもそも何にデータを入れて、何からデータを取り出せばよいのでしょうか?

その答えがこの章で紹介する、定数と変数と呼ばれるものです。

数学では、答えが分からない数を” X “と定義しておき、Xという入れ物に数字や計算式を代入して答えを導き出しますよね。
プログラムの世界の定数・変数も考え方は同じで、データを入れておくための箱=定数・変数に名前をつけて、そこに数字や文字列といったデータを入れておく…という仕組みになっています。

定数と変数の違いは言葉(漢字)の違いから考えると分かりやすいです。

定数とは、値が一定で変化しない(変化させたくない)場合に使う箱のことです。
例えば1日は24時間ですが、これは全世界共通のルールとして決まっているため、24という数字が勝手に置き換わってしまうようなことがあると困りますよね。
このような場合は定数を使い、定数を宣言する時はcostを使います。

一方、変数とは、商品の値段のように状況によって上下する(変化させたい)場合に使用するデータの入れ物のことです。
商品には定価がありますが、割引セールなどでは商品の値段が下がりますよね。
そういった場合は値段が変わるのでデータも書き換えられるようにしておく必要があり、変数の宣言にはletを使います。

定数は値が一定、変数は値が変化する

データを入れる箱(定数や変数)の名前に関しては、プログラム設計者が任意で名づけることができます。
ただし、JavaScriptが予め『この単語は使えませんよ〜』と定めた英単語(予約語と言います)や、使えない記号もあります。

変数名に使えない予約語の例

  • new
  • for
  • break
  • let
  • var
  • class
  • this
  • function
  • return

また、変数名に数字を使うことはできますが、数字から始めることはできません。

例えば、変数名 = data10…はOKですが、変数名 = 10data…はNGです。

JavaScriptの変数名はCSSのクラス名と同様、会社(チーム)やプロジェクトによって名付けのルールが決められていることが多いので、実務的にはそれに従って名前をつけることになるでしょう。
一般的には、データの中身や機能を表す英単語で定数・変数の名前をつけることが多いです。
たとえば商品の値段を入れるデータの箱であれば、price(値段)という単語を使って、商品名+Price…というような名前をつけたりします。

次の章ではいよいよ、定数や変数にデータを格納していきます!

    POINT!
  1. ・データを収納しておくための箱を定数・変数という!
  2. ・定数は中身が変わって欲しくない場合に、変数は状況に応じて中身を変化させたい場合に使う!
  3. ・変数の名前は任意でつけることができるが、データの中身や機能を表す英単語から名付けることが多い!

データを格納する方法

データの種類やデータを入れる箱(定数/変数)について学んだら、準備は万端です。
実際に手を動かしながらデータを格納してみましょう。

記事を読むだけでなく、テキストエディタを立ち上げて実際に入力してみることをおすすめします!

まずHTMLファイルを適当に作り、script要素内にプログラムを書き込んでいきます。
プログラムの世界ではどういうわけか、最初の一歩としてHello world!…という文字列を表示させてみるというのがお約束になっているので、『Hello world!』という文字列を定数に格納してみましょう。

データを定数に格納するには、以下のようにプログラムを書き込みます。

const 定数名 = データの中身(数値や文字列など);

定数の宣言(const 定数名)と、データの格納(定数名 = データの中身)は、分けて書くことも可能です。(下記参照)

const 定数名;
定数名 = データの中身(数値や文字列など);

ただ、この書き方だと無駄にプログラムコードの行数が増えて冗長になってしまうため、定数(変数)の宣言とデータの格納を同時に行う方法に最初から慣れておく方がおすすめです。

『Hello world!』という文字列型のデータを、定数 greetingに格納するには、以下の記述になります。

const greeting = ” Hello world! ” ;

HTMLコードを含めた全体的なコードは以下のようになります。

 <!DOCTYPE html>
 <html lang="ja" dir="ltr">
   <head>
     <meta charset="utf-8">
     <title>JavaScriptでデータを格納する方法</title>
   </head>
   <body>
     <script>
       {
         const greeting = 'Hello world!';
       }
     </script>
   </body>
 </html>

細かい部分ですが、データを文字列型にするには、”(ダブルクォーテーション)で文字列を囲っても良いですが、’(シングルクォーテーション)で囲ってもOKです。

また、プログラムの終わりには ; セミコロン をつけます。
さらに、今回は値をコロコロ変える必要がないので定数を宣言するconstを使っていますが、変数を使いたければconstをletに変えるだけでOKです。

何はともあれ、これでgreetingという箱に、『Hello world!』という文字列のデータを格納することができました。
ですが、このHTMLファイルをブラウザで開いてみても何も表示されません。
それもそのはずで、現段階ではデータを入れる箱(定数)にデータを入れただけの状態だからです。

格納したデータを確認したり表示させたりするには、そのためのプログラムを書き込む必要があります。
その方法を次の章で解説していきます。

    POINT!
  1. ・データを定数/変数に格納するには、定数/変数の宣言とデータの代入を記述する!
  2. ・定数/変数の宣言とデータの代入は分けて書くことも、同時に書くことも可能(同時がおすすめ)!
  3. ・データを格納しただけでは、ブラウザ上では何も表示されない!

格納したデータを確認

前章では、定数greetingに文字列型のデータ(Hello world!)を格納しました。
このままではデータが箱に入ったままの状態なので、次の段階として、格納したデータを確認する方法を解説します。

格納したデータを確認する方法は色々ありますが、プログラムを組んでいく段階で最も頻繁に使われる方法をご紹介します。

格納したデータを確認するには、以下のプログラムを追記します。

console.log(定数/変数名);

ということで、定数greetingに格納したデータを確認するためのプログラムは、次のようになります。

console.log(greeting);

HTMLを含めた全体的なコードは以下の通りです。

 <!DOCTYPE html>
 <html lang="ja" dir="ltr">
   <head>
     <meta charset="utf-8">
     <title>JavaScriptでデータを格納する方法</title>
   </head>
   <body>
     <script>
       {
         const greeting = 'Hello world!';
         console.log(greeting);
       }
     </script>
   </body>
 </html>

これでgreetingに入れたデータを確認できるはずですが、上記のコードをブラウザで開いてみてもページには何も表示されていないことが分かります。(▼下の画像を参照)

何も表示されていないWebページ

実は、console.log()を使ってデータの確認するには、ブラウザの検証機能を使う必要があります。

ブラウザの検証機能画面を開くには、ページ上で右クリック→検証をクリックするか、Ctrl + Shift + Iのショートカットでいけます。
※MacPCの場合は、Ctrl→Commandになります。

PCの設定やブラウザの設定、キーボード入力設定によっては、上記の方法で検証画面が開かない可能性もあります。

ブラウザの検証画面が開いたら、Consoleタブをクリックしてください。
すると、そこにgreetingに入れたデータ(Hello world!という文字列)が表示されていることが確認できます。

consoleタブにデータが表示されている画像

JavaScriptを学ぶ上で、ブラウザの検証機能のConsole画面を開く機会はものすごく多いです。

プログラムにはエラーが付き物ですが、プログラムがどこで(何行目で)エラーを起こしているか、何が原因でエラーになっているかなども、このConsole画面で分かるようになっています。
なので、ブラウザのConsole画面を開くショートカットキー(Ctrl+Shift+I)は覚えておくと良いでしょう。

話が少し逸れましたが、格納したデータの確認は、このようにconsole.log()を使ってブラウザの検証機能から行うことができます。

console.log()は、プログラムを組んでいる途中段階で開発者がデータを確認したい時に使うものなので、プログラムが完成したら消しておくものです。
というのも、データの中身は一般のユーザーにはできるだけ見えないようにしておきたい場合が多いです。
一般のユーザーはブラウザの検証機能を使うことはほとんどありませんが、検証画面を開くとデータの中身が表示されるのは好ましい状態とは言えませんよね。

定数や変数に格納したデータは、console.log()を使って検証画面に出力することで確認可能ですが、Webページに表示させる(=ユーザーに知らせる)ためのものではない…というのがポイントです。

また、console.log()のかっこ()の中に、直接数値や文字列を書き入れて表示させることも可能です。
下はscript要素のJavaScriptプログラムコードの部分を抜粋したものです。

JavaScript

const greeting = 'Hello world!';
console.log('挨拶を表示:' + greeting );

このように記述することで、Console画面に表示される結果は、
挨拶を表示:Hello world!
となります。

console()に文字列を付け足した画像

今回は定数もデータも1つだけなので問題ないのですが、定数/変数やデータの数が増えると、単にデータを表示させるだけではそれが何のデータなのか判別しづらい場合もあります。
そういった場合は、”○○のデータ:”というふうに、定数/変数の前に一言付け加えて表示させると分かりやすくなります。

    POINT!
  1. ・格納したデータの確認には、console.log(定数/変数);のコードを追加する!
  2. ・console.log()は、ブラウザに表示される形でデータが確認できる訳ではない!
  3. ・ブラウザの検証機能を使って、Consoleタブを開いてデータの中身を確認しよう!
– 関連記事 –

今回の動画で紹介したコード!

今回の解説動画で使用したコードです。学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JavaScriptでデータを格納する方法</title>
  </head>
  <body>
    <script>
    {
      const greeting = 'こんにちは';
      console.log(greeting);

      let num = 10;
      let str = '10';

      console.log(num + 10 );//20
      console.log(str + '10');//1010

      window.alert(num);
    }
    </script>
  </body>
</html>

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン