JavaScriptでグローバル変数を取得する方法とは【メンターが回答】

「JavaScriptでグローバル変数を取得する方法とは。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。ぜひ理解しておきましょう。

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

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

JavaScriptでグローバル変数を取得する方法だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

CSVから取得した値を基に計算するプログラムを下記に書いていますが、実行するとjuryogetが取得できる時とできないときがあります。

以下のように正しくCSVを取得したいのですが、どう書けば良いのでしょうか?

csv
商品名,商品コード,商品の重さ

ex
コカ・コーラ,co-21,2
ペプシ,pe-21,3

 

該当のソースコード

<!doctype html>
<html>
  <head>
    <meta charset="shift_jis">
    <title>送料計算</title>
    <script src="jquery-1.10.2.min.js"></script>
  </head>
  <style>
    form{
      width:auto;
      background-color:white;
      border:2px solid black;
      margin:0 auto;
      padding:3%;
    }
 
    .skuf{
      width:30%;
      float:left;
      margin:0 10px;
    }
 
    .quantityf{
      width:30%;
      float:left;
      margin:0 10px;
    }
 
    .address{
      width:30%;
      float:left;
      margin:0 10px;
    }
 
    .submit{
      width:30%;
      margin:5px;
    }
 
    h2{
      font-size:18px;
      margin-bottom:5px;
    }
 
    input{
      width:100%;
      padding:8px 0;
      margin-bottom:1%;
    }
 
    select{
      width:100%;
      padding:8px 0;
      margin-bottom:1%;
    }
 
  </style>
  <script type="text/JavaScript">
 
  //CSV読み込んで配列に入れるスクリプト
  window.onload = function loadcsv(){
    $.ajax({
      //読み込むcsv
      url:'data.csv',
      //読み込むファイルの形式
      dataType:'text',
      //shift-jisを読み込むため
      beforeSend: function(myData){myData .overrideMimeType("text/html;charset=Shift_JIS");
    },
      //読み込み成功時の行動
      success: function(data){
        //改行ごとに区切って
        var tempArray = data.split("\n");
        csvArray = new Array();
        //カンマごとに区切る
        for(var i = 0; i<tempArray.length;i++){
          csvArray[i] = tempArray[i].split(",");
        }
      }
    })
  }
 
 
 
  //送料計算スクリプト
  function keisan(){
    //SKU取得
    var sku = document.form.sku.value;
    //数量
    var qua = document.form.quantity.value;
    //都道府県
    var add = document.form.address.value;
 
    //重量取得スクリプト
    var juryo = csvArray.filter(function(item, index){
      if (item[1] == sku){
        juryoget = item[2];
      }
    });
 
   //重量と数量を掛けた物
   var soryo = juryoget * qua;
 
    document.form.result.value = soryo;
  }
  </script>
  <body>
    <form name="form">
    <h1>送料検索フォーム</h1>
    <!--SKU入力-->
    <div class="skuf">
      <h2>商品のSKU</h2>
      <input type="text" name="sku">
    </div>
    <!--数量入力-->
    <div class="quantityf">
      <h2>購入する数量</h2>
      <input type="text" name="quantity">
    </div>
 
    <!--都道府県入力-->
    <div class="address">
      <h2>お住まいの都道府県</h2>
      <select name="address" size="1">
        <option value="">未選択</option>
        <option value="1">北海道</option>
        <option value="2">青森</option>
        <option value="2">岩手</option>
        <option value="2">宮城</option>
        <option value="2">秋田</option>
        <option value="2">山形</option>
        <option value="2">福島</option>
        <option value="3">茨城</option>
        <option value="3">栃木</option>
        <option value="3">群馬</option>
        <option value="3">埼玉</option>
        <option value="3">千葉</option>
        <option value="3">東京</option>
        <option value="3">神奈川</option>
        <option value="3">新潟</option>
        <option value="3">富山</option>
        <option value="3">石川</option>
        <option value="3">福井</option>
        <option value="3">山梨</option>
        <option value="3">長野</option>
        <option value="3">岐阜</option>
        <option value="3">静岡</option>
        <option value="3">愛知</option>
        <option value="3">三重</option>
        <option value="4">滋賀</option>
        <option value="4">京都</option>
        <option value="4">大阪</option>
        <option value="4">兵庫</option>
        <option value="4">奈良</option>
        <option value="4">和歌山</option>
        <option value="3">鳥取</option>
        <option value="3">島根</option>
        <option value="3">岡山</option>
        <option value="3">広島</option>
        <option value="3">山口</option>
        <option value="3">徳島</option>
        <option value="3">香川</option>
        <option value="3">愛媛</option>
        <option value="3">高知</option>
        <option value="5">福岡</option>
        <option value="5">佐賀</option>
        <option value="5">長崎</option>
        <option value="5">熊本</option>
        <option value="5">大分</option>
        <option value="5">宮崎</option>
        <option value="5">鹿児島</option>
        <option value="6">沖縄</option>
      </select>
    </div>
 
    <!--送信ボタン-->
    <input type="button" class="submit" value="計算する" onClick="keisan();">
 
    <!--結果-->
    <input type="text" name="result" size="8" value="0"> 
    </form>
  </body>
</html>

 

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

メンターからの回答

実行するとjuryogetが取得できる時とできないときがあります。

CSVを取得するようリクエストを送る際、SKUや数量、都道府県などパラメータの値が正しく入力されていない場合はCSVを正しく取得することができません。

なので、パラメータの値を検証(バリデーション)するように変更してあげる必要があります。

以下のコードは、juryogetという変数をグローバルスコープにして、上手く重量取得ができた場合はjuryogetの値を書き換えるようにしています。

そして、juryogetが書き換わっていない場合は、「SKUを確認してください。」というアラートが出るようにエラー処理をしています。

 var juryoget = -1;

    // 重量取得スクリプト
    var juryo = csvArray.filter(function(item, index){
        if (item[1] === sku){
            juryoget = item[2];
        }
    });

    if (juryoget === -1) {
        // 取れていない。
        alert('SKUを確認してください。');
        return;
    }

以上、JavaScriptでグローバル変数を取得する方法について解説しました。

TechAcademyでは、現役JavaScriptエンジニアのメンターが質問にすぐ回答します。

 

回答してくれたメンター

武田 勝輝(たけだ しょうき)

HaskellやLispなど関数型プログラミング言語を使用した数値計算システム開発業務に従事。

 

大石ゆかり

回答分かりやすかったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

他にもJavaScript内でdocument.writeを使わずにHTMLを書く方法についてメンターが回答しています。

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

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

独学に限界を感じている場合はご検討ください。