mito

こんにちは、久々のJavaScriptの投稿です。

momo

今回はsortについてわかりやすく解説していくよ！

私自身sort関数を使う際に出てくるa,bやreturnの条件が毎回「どういう意味だっけ？？」となるのでわかりやすく図解も含めて解説していきます。

それではいってみましょう～。

やりたいことの概要

mito

エクセルで例えると、リストデータを昇順にしたり降順にして見え方を変えるイメージです。

使用するJavaScriptの組み込みオブジェクト

Array.prototype.sort()

このまま引数なしで以下のようにソートすると昇順に並びます。

const originalAry = [2, 8, 3, 100, 70];
originalAry.sort();
console.log("originalAry引数なし", originalAry);
// 結果：2,3,8,70,100

mito

引数なしだと、昇順にしか並ばないため、降順にしたいや要素が文字の場合文字数で並び替えたいといった場合の並び替え方法を見ていきます。

sortの引数に関数を持たせる

sortは引数に関数を持たせることができます。

momo

このようなsortのようなオブジェクトを高階関数と呼ぶよ！

mito

map、filter、reduceなどの組み込みオブジェクトが同じ仲間です！

const originalAry = [2, 8, 3, 100, 7];
originalAry.sort((a, b) => {
  //昇順に並べたいとき
  if (a - b < 0) {
    return -1;
  } else if (a - b == 0) {
    return 0;
  } else if (a - b > 0) {
    return 1;
  }
});
console.log("originalAry", originalAry);
//結果：2,3,7,8,100

momo

sortの引数の中はアロー関数で記載しています。またいきなりアロー関数にaとbという引数がでてきてびっくりしたと思うのでまずはここから解説していくよ！

参考：MDN webDocs Array.prototype.sort()

つまり、昇順に並べたい場合は、aからb減算し、マイナスであれば、前に並べたいので-1を返し、プラスであれば、aはbより大きいということになり、bの後ろに並べたいので1を返します。

momo

文字だけだとわかりずらいと思うので、図を使って解説していくよ！

sortでは実際何が行われているのか？(図解)

次は、コンソールに出した結果を図解しながら解説します。

originalAry.sort((a, b) => {
  //昇順に並べたいとき
  console.log("比較開始ーーー");
  console.log("a", a);
  console.log("b", b);
  console.log(a - b);
  console.log("比較終了ーーー");
  if (a - b < 0) {
    return -1;
  } else if (a - b == 0) {
    return 0;
  } else if (a - b > 0) {
    return 1;
  }
});
console.log("originalAry", originalAry);
//結果：2,3,8,70,100

つまり　、、、

というような順番で並び換えが行われているようでした。

降順に並び替えてみる

momo

もし、降順に並べかえたい場合hどうなるかな？

const originalAry = [2, 8, 3, 100, 7];
originalAry.sort((a, b) => {
  //降順に並べたいとき
  console.log("比較開始ーーー");
  console.log("a", a);
  console.log("b", b);
  console.log(a - b);
  console.log("比較終了ーーー");
  if (a - b < 0) {
    return 1;
  } else if (a - b == 0) {
    return 0;
  } else if (a - b > 0) {
    return -1;
  }
});
console.log("originalAry", originalAry);
//結果：100,8,7,3,2

mito

retunの値を入れ替えればOKです。

もっと簡潔に書く

昇順の場合

ということなので、

originalAry.sort((a, b) => {
  //昇順の場合
  return a - b;
});
console.log("originalAry", originalAry);
//結果：2,3,4,8,100

降順

ということなので、

originalAry.sort((a, b) => {
  //降順の場合
  return b - a;
});
console.log("originalAry", originalAry);
//結果：100,8,7,3,2

図解してみると、

おまけ

const items = [
  { name: "banana", cost: 100 },
  { name: "suger", cost: 580 },
  { name: "chocolate", cost: 450 },
  { name: "milk", cost: 125 },
  { name: "egg", cost: 250 },
];

items.sort((a, b) => {
  let costA = a.cost;
  let costB = b.cost;
  return costB - costA;
});

console.log("値段の降順", items);

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。

30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何？どうやって始めるの？といった疑問をお持ちの方、こちらをご覧ください。

mito

30DAYSトライアルの2ndステージ。より実践レベルのトライアルです！

momo

2ndのDAY1~3はprogateを使ってJavaScriptを学んでいくよ！

JavaScriptの基本の書き方

• 文字列は、シングルクォーテーション（ ‘ ）かダブルクォーテーション（ ” ）で囲む
• 数値はクォーテーションで囲まない
• 文の最後はセミコロン（;）
• %を使うと割ったときの余りを求めることができる
• +を用いると文字の連結ができる

console.log(3+3);
console.log(9%2);
console.log("hello");
console.log('こんにちは')；
console.log("hello"+"こんにちは");

変数の定義

そもそもなぜ変数を使うのか？

1. 同じ値を繰り返し使える
2. 変更に対応しやすい
3. 値の意味がわかりやすい

momo

コーディングのボリュームが増えるほど効果を発揮するよ！

momo

letを忘れないようにしよう！

変数の命名ルール

• 英単語を用いる
• 2語以上の場合は大文字で区切る

momo

例えば”lessonItem”など。ローマ字表記はあまり望ましくなく、数字開始の変数はエラーが出るので注意が必要だよ！

定数の定義

変数は1度代入した値を更新することができますが、定数は値を更新することはできません。

momo

後から値を変更できないということをメリットとして使うよ！

テンプレートリテラル

テンプレートリテラルとは、文字列や定数の連結方法の一つです。
文字列の中に定数（変数）を埋め込むことができます。

mito

「+」での連結とは別の方法です。

• ${定数}とすることで、文字列の中に定数や変数を含めることができる
• 文字列全体をバッククォート（`）で囲む

const name = "momo";
const age = 10;

console.log(`ぼくの名前は${name}です`);
console.log(`今は${age}歳です`);

比較演算子の書き方

比較演算子には、左と右の値が等しいかを調べるものです。

momo

3つ記号が必要だよ！

for文の書き方

for文は「変数の定義」「条件式」「変数の更新」の3つを括弧の中に書きます。括弧の中ではそれぞれをセミコロン（;）で区切ります。

// for文を用いて、1から100までの数字を出力する場合

for(let number=1; number<=100; number++){
  console.log(number);
}

配列

配列のメリットは複数の値をまとめて扱えることです。

momo

例えば果物の名前や野菜の名前をまとめて扱いたい時に使うよ。

const animals=["dog","cat","sheep"];

また、上記の内容を順番に表示させたいときは以下のように書きます。

for (let i = 0; i < animals.length; i++) {
  console.log(animals[i]);
}

オブジェクトとは

配列と同じく複数のデータをまとめて管理するのに用いられます。

const characters = {name: "いぬ", age: 14};

オブジェクトを要素にもつ配列

配列の要素には、文字列や数値だけでなく、オブジェクトも使うことができます。

const characters = [
  {name: "いぬ", age: 14},
  {name: "ねこ", age: 4}
];

console.log(characters[0]);
console.log(characters.name);

関数の定義

「function()」と書き、その後ろの中括弧「{ }」の中にまとめたい処理を書くことで関数を用意することができます。

const greet = function() {
  console.log("こんにちは！");
  console.log("hello!");
};

// 関数呼び出
 greet();

アロー関数

「function()」の部分を「() =>」とすることです。
functionと書くよりよりシンプルなコードになります。

momo

この関数の書き方のことを、特別にアロー関数と呼びます。

const greet= ()=>{
  console.log("こんにちは！");
}

// 関数呼び出してください
greet();

まとめ

JavaScriptの書き方の癖を理解して、あとはひたすら実践します。

今回は、jQueryとCSSだけでハンバーガーメニューを作りたいと思います。

HTMLでの記載

<header>
 <div id=“navToggle”>
  <div>
   <span></span> <span></span> <span></span>
  </div>
 </div>

 <nav id=“menu”>
  <ul>
   <li><a href=“#”>HOME</a></li>
   <li><a href=“#taitle-gaiyou”>開催概要</a></li>
   <li><a href=“#taitle-program”>プログラム</a></li>
   <li><a href=“#taitle-contact”>お問合わせ</a></li>
  </ul>
 </nav>
</header>

CSSでの記載

ハンバーガーメニュー表示の制御です。

#navToggle {
 display:none;
 position:absolute; /*bodyに対しての絶対位置指定*/
 right:13px;
 top:13px;
 width:30px;
 height:25px;
 cursor:pointer;
 padding: 12px 0;
}
#navToggle div {
 position:relative;
}
#navToggle span {
 display:block;
 position:absolute; /*#navToggle div に対して*/
 width:100%;
 border-bottom:solid 3px #fff;
 -webkit-transition: .35s ease-in-out;
 -moz-transition: .35s ease-in-out;
 transition: .35s ease-in-out;
}
#navToggle span:nth-child(1) {
 top:0;
}
#navToggle span:nth-child(2) {
 top:11px;
}
#navToggle span:nth-child(3) {
top:22px;
}
header nav {
 position: absolute;
 right:0;
 top: -800px;
 background-color: #fff;
 width:50%;
 padding:0 10px;
 -webkit-transition:.5s ease-in-out;
 -moz-transition:.5s ease-in-out;
 transition:.5s ease-in-out;
 text-align:left;
}

以下のようなハンバーガーメニューを作りました。

momo

header navのところで、top -800pxとしているので、このままでは実際には見えない状態だよ。

jQueryでの記載

mito

jQueryではハンバーガーメニューの三本線をクリック時に×に変形させたいので、指定した要素にアクションと連動させて名前を付けたり消したりする処理を書いています。

.toggleClassメソッド

指定した要素に指定したクラス名を付けたり消したりできる。
clickファンクションで使うと、クリックするたびにクラス名を付けたり消したりできる。

   $('#navToggle').click(function(){
           $('header').toggleClass('openNav');
   });

momo

今回はクリックに連動させて、headerに .openNav を付加・削除しているよ！

再びCSSの記載（メディアクエリの設定）

画面横幅が768px以下の場合の設置を記載します。

1. ハンバーガーメニューのメニュー内容の表示制御
2. クリック時に横棒を45度傾け×にする処理
3. ハンバーガーメニューが表示されるようにする
4. ハンバーガーメニューのメニュー内容が表示されるようにする

header ul {
	margin:0;
}
header ul li {
    display:block;
 	margin-left:3px;
    border-bottom:dotted 1px #2c9caf;
    line-height:3;
}
header ul li a {
	display:block;
	color:inherit;
	padding-left: 3px;
}
header ul li::after {
	content:'';
}
header ul li:last-child {
	border-bottom:none;
}
/*レスポンシブのメニューのお申し込みのみ背景色をかえる*/
header nav .nav-buy{
	background-color: #cc2e4c;
	margin-top: 4px;
	color: #fff;
}
#navToggle {
	display: block;
}
.openNav #navToggle span:nth-child(1) {
    top: 11px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg);
}
.openNav #navToggle span:nth-child(2),
.openNav #navToggle span:nth-child(3) {
	top: 11px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
}

/*header menu*/
.openNav nav {
    -moz-transform: translateY(876px);
    -webkit-transform: translateY(876px);
    transform: translateY(876px);
}

ハンバーガーメニューが表示され、クリックするとメニュー内容が表示されます。

こちらを参考にさせていただきました。

ーEndー

今回は、モーダルウィンドウの作り方と、モーダルウィンドウ表示時に親画面がページ上部に戻ってしまうときの対処法について書きます。

全体的な動き

以下の3ステップを実装していきます。

1. リンクもしくはボタンを押す
2. モーダルウィンドウが表示される
3. 閉じるもしくは×を押すと閉じる

HTMLでの記載

モーダルウィンドウを作る。

<div class="modal-wrapper" id="map-modal">
<!-- モーダル全体の枠　-->
　<div class="modal">
<!-- 右上に配置する×ボタン　-->
　　<div class="close-modal">
　　　<i class="fa fa-2x fa-times"></i>
   </div>
　　<div class="modal-main">
　　　<div class="picture">
　　　　<img src="images/map.jpg">
　　　</div>
　　　<div>
　　　　<p class="map-detail">詳しい地図の内容を記載する</p>
　　　</div>
　　</div>
<!-- 閉じるボタン　-->
　　<div class="closebutton">
　　　<button class="close">閉じる</button>
　　</div>
　</div>
</div>

モーダルウィンドウへの遷移元を作る。

<div>													 
 <p class="mapinfo" href="">												 
   <a class="mapinfo-show1">詳しい地図はこちら</a>												 
 </p>
</div>

CSSでの記載

モーダルウィンドウの装飾部分を記載する。

.modal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: none;
}
.modal {
  position: absolute;
  top: 20%;
  left: 24%;
  background-color: #e6ecf0;
  padding: 20px 20px 20px;
  border-radius: 10px;
  width: 650px;
  height: auto;
}
.fa-times {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(128, 128, 128, 0.46);
  cursor: pointer;
}

.closebutton{
	text-align:center;
	margin-top:10px;
}

.close {
  display: inline-block;
  padding: 10px 140px;
  background-color: #0091a7;
  border: none;
  border-radius: 3px;
  color: white;
  margin: 10px auto;
  cursor: pointer;
}

JavaScriptでの記載

モーダルウィンドウを開くときの制御を作る。

モーダルウィンドウを開いたときの親画面の位置を記憶しておく。

//グローバル変数
var sX_syncerModal = 0 ;
var sY_syncerModal = 0 ;

function scrollposition(){
	//スクロール位置を記録する
	var dElm = document.documentElement , dBody = document.body;
	sX_syncerModal = dElm.scrollLeft || dBody.scrollLeft;	//現在位置のX座標
	sY_syncerModal = dElm.scrollTop || dBody.scrollTop;	//現在位置のY座標
}

momo

この記載をして、位置をずらさないように制御しないと、モーダルウィンドウを閉じる時に親画面のトップに戻ってしまうよ。

モーダルウィンドウを表示するためにクリックされた時の制御を作る

$(function() {
 	// モーダル表示を行うclickイベント
 	$('.mapinfo-show1').click(function(){ 
 		scrollposition();
		$('#map-modal').fadeIn();
	});
});

モーダルウィンドウを閉じる時の制御を作る

//「Close」ボタンクリックした際に閉じる処理
$('.close').on('click', function() {
 //スクロール位置を戻す
 window.scrollTo( sX_syncerModal , sY_syncerModal );
 $('#map-modal').fadeOut();
});

//×ボタンをクリックした際に閉じる処理
$('.close-modal').click(function(){ 
　window.scrollTo( sX_syncerModal , sY_syncerModal );
　$('#map-modal').fadeOut();
});

mito

これでモーダルウィンドウを閉じると親画面の元の位置に戻ります。

まとめ

mito

href=””を残していて、モーダルウィンドウへ遷移した際にページ上部に戻ってしまい、悩みました。

momo

hrefを消してしまうと、デフォルト設定のカーソルや下線などはなくなるのでCSSで設定する必要があるよ。

a.mapinfo-show1{
　color: #0091a7;	
　text-decoration: underline;	
　cursor: pointer;
}

ーEndー

今回は、メニューヘッダーを固定して、メニューのリンクからページ内の他の場所へ移動するにはどう実装するか？書きます。

mito

position:fixedを使ってヘッダーを固定した場合、ページ内リンクの位置がヘッダーの高さ分ずれてしまったので、JavaScriptを使ってズレを調整しました。

momo

JavaScriptで実装するとリンク先への移動にアニメーションをつけることが可能になるよ！

HTMLでの記載

<!--ヘッダー部分 -->
<header>
 <div class="header">
  <a href="#taitle-program" >プログラム</a>
 </div>
</header>

<!--ページの途中のタイトル部分 -->
<div class="program">
 <h3 class="title-about" id="taitle-program">プログラム</h3>
</div>

<a>タグは他のページへのリンクだけでなく、ページ内のリンクを作ることもできる。

1. リンクの飛び先にidを指定
2. <a>タグのhref属性に”#id名”

momo

<a>タグをクリックすると、そのidの要素が表示されている場所まで移動するという動きになるよ！

CSSでの記載

ヘッダーの高さは90pxで固定しています。

header {
  height: 90px;
  width: 100%;
  background-color: rgba(0, 145, 167, 0.9);
  position :fixed;
  top: 0;
  z-index: 10;
}

JavaScriptで調整する

//ナビゲーションからのページ内移動
//固定したヘッダ分だけ下げて表示
$('header a').click(function(){
　headerHight = 90;
　var id = $(this).attr('href');
　var position = $(id).offset().top;
　$('html, body').animate({'scrollTop': position-headerHight }, 500);
});

scrollTopメソッド

$(‘html, body’).scrollTop(値); のように指定し、ページ最上部から値pxの位置に移動することができる。

momo

scrollTopは通常$(‘html, body’)に対して用いるので、セットで覚えておくとよいよ！

animateメソッド

CSSの値だけでなく、scrollTopなどの値も変更できる。
$(‘html, body’).animate({‘scrollTop’: 0}, 時間); のように指定する。

momo

変更するプロパティ、値、アニメーションの速さの順で、animateの引数を書くよ！

offsetメソッド

要素の表示位置を取得することができます。offsetメソッドは、ページの上端からの距離とページの左端からの距離が連想配列の形で返ってくる。
offset().topとすると、ページの上端からの距離が取得できる。

HTMLで記載しているh1のプログラムの位置が知りたい場合
$(‘h1’).offset();とすると　{top:50,left:100}という連想配列が返ってくる。$(‘h1’).offset.top();とすると、ページ上端からの距離のみなので50という値が返ってくる。

attrメソッド

href属性の値を取得し、offsetメソッドでその要素の位置を取得することでページ内リンクを実装できる。

var id = $(this).attr('href');
var position = $(id).offset().top;

1. idにクイックしたボタンの飛び先を取得
2. 飛び先の最上部からの距離を取得

今回はヘッダーの高さ分引き算をしています。