#8 変数を使う

「変数」という便利な機能を使ってみましょう。

変数とは簡単に言えば値(数値や文字列)を入れておく「箱」のようなものです。
htmlで枠を作るのに<div>などのタグという記号を使ったのと同様、varvariable変数)という文字を付けて表現します。 =(イコール)をつけて右の値を変数に入れます(代入する)。

var 変数名 = 1;     /*数値*/
var 変数名 = "CRI"; /*文字列*/
変数名は、htmlのクラス名と同様自分で好きな名前や英単語などをつけます。 「var」という文字を変数名の頭につけることで変数宣言したことになります。
変数という箱には、文字列や数値、計算結果の答えなどを入れておき、のちのち計算などにつかっていく事ができます。
※宣言するときにはvar以外にも、letやconst、var無しというのもありますがここでは説明を省略します。

足し算してみる

+ =

$(function(){
  $('#calc').change(function(){       /* changeメソッド = #calc内のinputが入力されたら */
    var numA = parseInt( $('.number_A').val() );  /* $(クラス名).val() でinput内の文字を取得できる */
    var numB = parseInt( $('.number_B').val() );  /* parseInt(文字) parseIntで文字が数値になる */
    $('#number_total').text(numA + numB);         /* textメソッドで対象のidに文字列を出力 */
  });
});

+ =
ここで出てきたchange()は、エクセルで出てきたsum()やtext()関数のようなものですが、jsではメソッドと呼ばれます。
よくあるメソッドは#6で

問題:上記を踏まえて、整数の円周を計算できる計算機を作ってみましょう。

cm × 3.14 = cm

#9 関数を使う

自分で作った方法論や数式を使い回す

関数(独自関数)とは、自分で作った数式やロジックをひとまとめにしたものです。
ある数式を考えたとして、このページでもあのページでも、そういえばあの式にも使える...といった具合に、 一度作った数式は何度も使い回せることがあります。そのようなシーンを想定して数式を関数化しておくことが多くあります。

例えば、家計簿アプリを作ろうとしたとします。
家計簿には消費税の計算を入れてみようと思います。(税率は古いですが8%とします)。
しかし商品の一つ一つに消費税の計算を入れるのは面倒です。消費税の計算は価格 × 0.08で簡単に求められますが関数化してみましょう。


/*関数*/
function tax(price) {
  var tax = 0.08;                 /* 税率の初期設定 */
  var floatTax = price * tax;     /* 取得された値に設定された消費税率をかける */
  return Math.round(floatTax);    /* 四捨五入された値がreturnで出力 */
}

関数を作る場合はfunctionと宣言したあとにtaxなど自分で考えた関数名をいれます。
関数名のあとのカッコ()の中にいれる引数ひきすうには、その関数内で使われる入るであろう値を総称する自分で考えた適当な名前をいれます。
どういうことかといえば、例は「price」という名前にしてますが、このpriceという場所は入力される値によって、100だったり150だったり1,000だったりします。
関数では具体的な数値を入れるのではなく 文字記号にしておいて、どんな数値が入ってきても対応できるようにしておきます。
最後に、入ってきた値が計算を経てどんな値になって帰ってくるかreturnで指定します。※関数のreturnは基本的にはひとつのみです。

先程の消費税計算での引数とreturn
function tax ()
 var TAX = 0.08;
 var floatTax = * TAX;
 ちなみに現在のfloatTaxの値は、
return 四捨五入した値→
あとはhtml内に関数を使って以下のような式を書いていきます。

<script>
/* 消費税を計算するtax関数 */
function tax(price) {
  var TAX = 0.08;
  var floatTax = price * TAX;
  return Math.round(floatTax);
}

$(function(){
  $('#tax').change(function(){    /* ← 文字入力を検知したら起動 */
    var num = parseInt( $('.ex_price').val() );    /* ← inputタグに入力された値を変数numに代入 */
    var t  = tax(num);      /* ← tax関数で計算した値を変数tに代入 */
    $('.ex_tax').text(t);   /* ← <span class="ex_tax">に変数tの値を出力 */
  });
});
</script>

<div id="tax">
  <input class="ex_price"> 消費税:<span class="ex_tax"></span> 円
</div>
以下の部分に計算した結果が出力されます

<span class="ex_tax">〜この部分〜</span>
もし、上記のように同じ内容の式を関数化して分けておかない場合、以下の悪い例のように同じ式を出現箇所全てに入れることになり、 消費税率が変わったときなどメンテナンスが大変になります。

/*悪い例*/
$(function(){
  var TAX = 0.08;
  $('#tax').change(function(){
    var num = parseInt( $('.ex_price').val() );

      var floatTax = num * TAX;
      var t = Math.round(floatTax);

    $('.ex_tax').text(t);
  });
});
ただ、最初のうちはどこを関数化したらよいかわからないことも多いです。まずは式を書いていく中で、 同じ処理を何度も書いていて「面倒だな...」と思ったときに関数化してみるという手順でも良いと思います。

#10 コンソールでデータの確認

デバッグの第一歩console.log

JavaScriptを書いている際に、思ったとおりの数値が出ないなど度々エラーがおきます。変数や関数に今どんなデータが入ってるんだろう? そういったときに役に立つのがconsoleメソッドです。
例えば、#9で消費税の計算を行いましたが、最終的に四捨五入して出力する前に「引数×0.08」という計算を行いましたが、 この値は表面上はどこにも出てきません。

function tax(price) {
  var TAX = 0.08;
  var floatTax = price * TAX;  /* ←この部分 */
  return Math.round(floatTax);
}
たとえばこの関数をつくるときに、変数名を間違って出力できなかったとします。

function tax(price) {
  var TAX = 0.08;
  var floatTax = price * FAX;  /* TAXの記述ミス */
  return Math.round(floatTax);
}
この場合、変数floatTaxには何も数値が入らないため、returnは何も出力されません。

console.logをブラウザの開発ツールを使って確認

Macの場合は「⌘+option+i」WindowsはF12でブラウザの開発モードウィンドウが出てきます。
コンソールタブをクリックしてみましょう。
コンソールタブがでたところで、先程のエラーの見つけていきましょう。
consoleするまでもなくに変数名が違う場合はエラー内容が表示されます。右側のxxx.php: 193:7というエラー箇所のリンクも張ってありますので、 間違った場所も確認しやすいです。

本題に戻って、floatTaxの値をconsole.log(引数);で確認してみましょう。まず、以下の内容を記述します。

消費税:

$(function(){
  $('#tax_console').change(function(){
    var num = parseInt( $('.ex_price_console').val() );

      var floatTax = num * 0.08; /* コンソール用の式 */
      console.log(floatTax);

    var t = tax(num);
    $('.ex_tax_console').text(t);
  });
});
関数で指定していますが、関数に掛ける前に入力されたnumに0.08をかけてどうなるかをコンソールしてみます。 以下のinputに数値を入力してみましょう。
消費税:

すると、入力するたびにコンソール欄にこのように表示されます。
変数名の間違いなどはきちんとエラーがでるので大丈夫ですが、式の途中の変数の値がどうなっているのかを確認することで エラー解消に役立ちます。

#11 モーダルウィンドウを作ろう

モーダルウィンドウを作ろう

テスト:画面の中央にモーダルを出してみましょう

/*ボタン*/
.modal-open{
  padding:20px;
  border: 1px solid #000;
  display:inline-block;
}
/*モーダル*/
.modal-content {
  display: none; /*最初は隠しておく*/
  position: fixed;
  width: 80%;
  height:200px;
  padding: 10px 20px;
  color: #333;
  background: #ccc;
  overflow-y: auto;
  border-radius: 1em;
  z-index: 100;
}
/*モーダルの背景の黒い部分*/
.modal-overlay {
  display: none; /*最初は隠しておく*/
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99;
}

<div class="modal-open">モーダル起動!</div>
<div class="modal-content">モーダルウィンドウ</div>

$(function() {
  /*モーダルを起動するボタンのクラス「modal-open」をクリックしたら */
  $('.modal-open').on('click', function(){ 
      /* bodyにモーダル背景の黒い要素を追加させる(append() メソッド)*/
      $('body').要素追加メソッド('<div class="modal-overlay"></div>');
      
      /* モーダルコンテンツ要素とオーバーレイ要素の2つをフェードインで表示 */
      $('クラス名1, クラス名2').フェードインメソッド('速度指定');

      /* オーバーレイ部分をクリックしたらすべて削除する機能 */
      $('クラス名').on('click', function(){
        /* モーダルコンテンツ要素とオーバーレイ要素をフェードアウトし、*/
          $('クラス名1, クラス名2').フェードアウトメソッド('速度指定',function(){
            /* オーバーレイ要素を削除*/
            $('クラス名').削除メソッド() ;
          });
      });

      /* モーダルが起動したときや、ウィンドウをリサイズしたら再計算させる*/
      modalResize();

      function modalResize(){
        /* ウィンドウの幅と高さを取得し、変数に入れる */
        var w = $(window).width();
        var h = $(window).height();

        /* モーダルの幅と高さ(事前にcssで指定済み)を取得し、変数に入れる */
        var cw = $('クラス名').outerWidth();
        var ch = $('クラス名').outerHeight();

        /* 取得した数値をモーダルのcssに追加する */
        $('クラス名').css({
         /* モーダル要素のcssにleftとtopプロパティを追加 */
          'left' : ((w - cw)/2) + 'px',  /*(全体幅-モーダル幅)÷2 */
          'top'  : ((h - ch)/2) + 'px'
        });
      }

  });
});
独自関数modalResizeでcssプロパティ「left: ◯◯px」の◯◯値を求める計算をさせています。
(ウィンドウ幅 - コンテンツ幅)/ 2 という計算で求めた値を入れるとセンターに配置されるロジックです。 例えば現在のウィンドウ幅が1,200pxでモーダルコンテンツが1,000pxだった場合、(1,200-1,000)/2 = 100。 つまりleft:100px;というわけです。よくでてくるので覚えておきましょう。

フェードイン fadeIn('slow');
フェードアウト fadeOut('fast');
要素追加 append()
要素削除 remove();
他にもたくさんのメソッドが用意されているので、jQueryメソッドというキーワードで検索してみましょう。
答え

<script>
$(function() {
  $('.modal-open').on('click', function(){
    $('#contents').css('filter', 'none');
    $('body').append('<div class="modal-overlay"></div>');
    $('.modal-content, .modal-overlay').fadeIn('slow');

    $('.modal-overlay').on('click', function(){
      $('.modal-content, .modal-overlay').fadeOut('slow',function(){
        $('.modal-overlay').remove() ;
      });
    });

    modalResize();

    function modalResize(){
      var w = $(window).width();
      var h = $(window).height();
      var cw = $('.modal-content').outerWidth();
      var ch = $('.modal-content').outerHeight();
      $('.modal-content').css({
        'left' : ((w - cw)/2) + 'px',
        'top'  : ((h - ch)/2) + 'px'
      });
    }
  });
});
</script>
powerd by