#8 変数を使う
「変数」という便利な機能を使ってみましょう。
変数とは簡単に言えば値(数値や文字列)を入れておく箱のようなものです。
const 変数名 = 1; /*数値*/
const 変数名 = "CRI"; /*文字列*/
変数名は、htmlのクラス名と同じ様に自分で好きな名前や英単語などをつけます。
constという文字を変数名の頭につけることで変数宣言したことになります。変数という箱には、数値や文字列、計算結果の答えなどを入れておき、のちに計算や表示させることに使っていきます。
宣言する方法はconst以外に
宣言名 | 再代入 | 再宣言 |
const | ☓ | ☓ |
let | ◯ | ☓ |
var | ◯ | ◯ |
const apple = 1;
apple = 2; (再代入)×
const apple = 'a'; (再宣言)×
let orange = 1;
orange = 2; (再代入)○
let orange = 'a'; (再宣言)×
var grape = 1;
grape = 2; (再代入)○
let grape = 'a'; (再宣言)○
普段はconstで変数を宣言して問題ないでしょう。varはあえて使わなくてもよいですが、書き方が不慣れでどうしてもうまく動かないときには使ってみましょう。
※const(
※let(
※var(
足し算してみる
+
=
$(function(){
$('#calc').change(function(){ /* changeメソッド = #calc内のinputが入力されたら */
const numA = parseInt( $('.number_A').val() ); /* $(クラス名).val() でinput内の文字を取得できる */
const numB = parseInt( $('.number_B').val() ); /* parseInt(文字) parseIntで文字が数値になる */
$('#number_total').text(numA + numB); /* textメソッドで対象のidに文字列を出力 */
});
});
+
=
ここで出てきたchange()は、エクセルで出てきたsum()やtext()関数のようなものですが、jsではメソッドと呼ばれます。よくあるメソッドは#6で
問題:上記を踏まえて、整数の円周を計算できる計算機を作ってみましょう。
cm × 3.14 =
cm
#9 関数を使う
自分で作った方法論や数式を使い回す
関数(独自関数)とは、自分で作った数式やロジックをひとまとめにしたものです。ある数式を考えたとして、このページでもあのページでも、そういえばあの式にも使える...といった具合に、 一度作った数式は何度も使い回せることがあります。そのようなシーンを想定して数式を関数化しておくことが多くあります。
例えば、家計簿アプリを作ろうとしたとします。

しかし商品の一つ一つに消費税の計算を入れるのは面倒です。消費税の計算は価格 × 0.08で簡単に求められますが関数化してみましょう。
/*関数*/
function tax(price) {
const tax = 0.08; /* 税率の初期設定 */
const floatTax = price * tax; /* 取得された値に設定された消費税率をかける */
return Math.round(floatTax); /* 四捨五入された値がreturnで出力 */
}

関数名のあとのカッコ()の中にいれる
計算するのは数字なのに、なんで文字になっているかというと、 例では「price」という引数の名前にしてますが、関数には必ず引数をどこかの計算で(複数回)利用します。(引数が利用されないのであれば関数である必要がありません) このpriceという場所は入力される値によって、100だったり150だったり1,000だったりしますし、princeという名前をつけておくことで、関数内の計算式に何度も登場させることができます。
このように、関数では具体的な数値を入れるのではなく文字記号にしておくことで、どんな数値が入ってきても対応できるようにしておきます。
最後に、入ってきた値が計算を経てどんな値になって帰ってくるかをreturnで指定します。※関数のreturnは基本的にはひとつのみです。

function tax ()
const TAX = 0.08;
const floatTax = * TAX;
ちなみに現在のfloatTaxの値は、
return 四捨五入した値→
あとはhtml内に関数を使って以下のような式を書いていきます。const TAX = 0.08;
const floatTax = * TAX;
ちなみに現在のfloatTaxの値は、
return 四捨五入した値→
<script>
/* 消費税を計算するtax関数 */
function tax(price) {
const TAX = 0.08;
const floatTax = price * TAX;
return Math.round(floatTax);
}
$(function(){
$('#tax').change(function(){ /* ← 文字入力を検知したら起動 */
const num = parseInt( $('.ex_price').val() ); /* ← inputタグに入力された値を変数numに代入 */
const 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(){
const TAX = 0.08;
$('#tax').change(function(){
const num = parseInt( $('.ex_price').val() );
const floatTax = num * TAX;
const t = Math.round(floatTax);
$('.ex_tax').text(t);
});
});
ただ、最初のうちはどこを関数化したらよいかわからないことも多いです。まずは式を書いていく中で、
同じ処理を何度も書いていて「面倒だな...」と思ったときに関数化してみるという手順でも良いと思います。
#10 コンソールでデータの確認
デバッグの第一歩console.log
JavaScriptを書いている際に、思ったとおりの数値が出ないなど度々エラーがおきます。変数や関数に今どんなデータが入ってるんだろう? そういったときに役に立つのがconsoleメソッドです。例えば、#9で消費税の計算を行いましたが、最終的に四捨五入して出力する前に「引数×0.08」という計算を行いましたが、 この値は表面上はどこにも出てきません。
function tax(price) {
const TAX = 0.08;
const floatTax = price * TAX; /* ←この部分 */
return Math.round(floatTax);
}
たとえばこの関数をつくるときに、変数名を間違って出力できなかったとします。
function tax(price) {
const TAX = 0.08;
const floatTax = price * FAX; /* TAXの記述ミス */
return Math.round(floatTax);
}
この場合、変数floatTaxには何も数値が入らないため、returnは何も出力されません。
console.logをブラウザの開発ツールを使って確認
Macの場合は「⌘+option+i」WindowsはF12でブラウザの開発モードウィンドウが出てきます。コンソールタブをクリックしてみましょう。


本題に戻って、floatTaxの値をconsole.log(引数);で確認してみましょう。まず、以下の内容を記述します。
消費税: 円
$(function(){
$('#tax_console').change(function(){
const num = parseInt( $('.ex_price_console').val() );
const floatTax = num * 0.08; /* コンソール用の式 */
console.log(floatTax);
const 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(){
/* ウィンドウの幅と高さを取得し、変数に入れる */
const w = $(window).width();
const h = $(window).height();
/* モーダルの幅と高さ(事前にcssで指定済み)を取得し、変数に入れる */
const cw = $('クラス名').outerWidth();
const 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(){
const w = $(window).width();
const h = $(window).height();
const cw = $('.modal-content').outerWidth();
const ch = $('.modal-content').outerHeight();
$('.modal-content').css({
'left' : ((w - cw)/2) + 'px',
'top' : ((h - ch)/2) + 'px'
});
}
});
});
</script>