//tips
//js理解
jQueryも絡めて実装を行なっていく。
ナビゲーションメニューをクリックするとサブメニューが開くUIを作成していく。
流れとしては、HTMLではサブメニューが開いた状態で作成し、CSSではサブメニューが閉じた状態で作成。jQueryはその間に入りサブメニューの開閉を手助けするようにする。
<section>
<div class =“sidebar”>
<h2>サポートページ</h2>
<div class=“submenu”>
<h3>1.初めて使う</h3>
<ul class =“hidden”>
<li><a href=“”>- 概要</a></li>
<li><a href=“”>- インストール</a></li>
<li><a href=“”>- アカウント登録</a></li>
<li><a href=“”>- アンインストール</a></li>
</ul>
</div>
<div class = “sabmenu”>
<h3>2.基本的な使い方</h3>
<ul class =“hidden”>
<li><a href=“”>-操作方法</a></li>
<li><a href=“”>-復元</a></li>
<li><a href=“”>-プラグイン追加</a></li>
</ul>
</div>
</div>
</section>
次にcssを作成。
<style>
.submenu h3{
margin : 0 0 lem 0;
font-size: 16px;
coursor:pointer;
color:#5e78c1
}
.submenu h3:hover{
color:#b04188;
text-decoration:underline;
}
.submenu ul{
margin: 0 0 lem 0;
list-style-type:none;
font-size:14px;
}
.hidden{
display:none;
}
</style>
一番最後の.hiddenの部分で<ul class =“hidden”>以下の項目を非表示にしている。
ここからjQueryの実装に移る。
まずは<script src=“../../_common/scripts/jquery-3.4.1.min.js”></script>でファイルの読み込みを行い、スクリプトを描いていく。
<script src=“../../_common/scripts/jquery-3.4.1.min.js”></script>
<script>
‘use strict’;
$(document).ready(function(){
$(‘.submenu h3’).on(‘click’,function(){
$(this).next().toggleClass(‘hidden’);
});
});
</script>
これで初めて使う時などをクリックしたときにその子要素が開けるようになる。
jQueryのプログラムでは、多くの場合、イベント設定要素の取得、イベント設定、イベント発生処理という流れで実装を行う。
今回はhtmlの<h3>がクリックされたらその子となる<ul>の表示切り替えを行なっている。この表示の切り替えは、<ul>に適用されるCSSのdisplayプロパティをnoneなどにすることで実現できる。
jQueryの中身を見ていくと
$(document).ready(function(){
でHTMLが読み込まれたらfunctionの処理を実行するとしている。
下記ではh3がクリックされた時のイベントを設定している。h3のクリック時にulの追加・削除を操作できるようにしている。
$()メソッドは()内のCSSセレクタにマッチする要素をHTMLから取得する。以前記載したdocument.querySelectorAllメソッドと同様な働きとなる。
ただ、$()の方は取得した要素全てをjQueryオブジェクトに変換し、jQuery特有のメソッドが使用できるようになる。
<dic class =“submenu”>のh3を取得し、onメソッドを実行している。onはイベントを設定するjQueryのメソッドで、最初の引数に「イベント名」を指定(onclickイベントはclick、onsubmitイベントはsubmitとonをとったもの)、二つ目の引数にfunctionを下記、イベント発生時の処理内容を書く。
$(‘.submenu h3’).on(‘click’,function(){
配列とは違いforeachで要素を取得する必要がないので一度に全ての要素にイベント設定できる。
$(this)にすることでh3の要素をjQuerryオブジェクトに変換し、$(this).next()でイベントが発生した次の要素を取得している。
今回はh3を取得しているので、その次のul class = “hidden”が取得されることとなる。
取得したulに対してtoggleClassメソッドを実行し、取得した要素に()のクラス名が付いていれば削除、付いていなければ追加とする。
$(this).next().toggleClass(‘hidden’);
});
});
これによりCSSの.hiddenが適用されたり、されなかったりするので実質的には表示の切り替えとなっている。
次は、ボタンをクリックするとナビゲーションメニューが横から出てくる形を考えていく。
今まで見てきてわかるようにCSSの方も理解していないとページ表示はうまくいかない。今回はよりCSSに重点を置いた構成になっている。
まず、ページと横から出すメニューを作成し、メニューをページの右横かつウィンドウの外側に配置させる。そこから、クリックでページとメニューを横にスライドさせる。メニューが映る代わりにページの左端はウィンドウに映らなくなる。
<head>
…
<link href=“../../_common/css/style.css” rel=“stylesheet”>
<link href=“css/special.css” rel=“stylesheet”>
</head>
Specialsの方のCSSの中身を記述。
@charset”UTF-8”;
.container{
max-width:100%;
}
img{
max-width:100%;
}
再びhtmlに戻り、idやclassなど操作可能ポイントを設置していく。
<body>
<div id=“wrapper”>
<header>
<div class=“container”>
<div class=“title-block”>
<h1>ナビゲーション</h1>
<h2>ヘッダーボタン設置</h2>
</div>
<div class =“hamburger” id=“open_nav”>
<img src=“hamburger.png” alt=“”>
</div>
</div><!—/.container—>
</header>
</div>
<nav id=“nav”>
</nav>
</body>
これを踏まえ、css側を編集。
.header{
padding: 16px 0;
}
header .container{
display:flex;
justify-content:space-between;
}
.title-block{
flex: 1 1 auto;
}
.hamburger{
flex: 0 0 32px;
align-self:center;
margin-left:16px;
text-align:center;
color:#fff;
}
これでメニューボタンの設置が完了。ここからページのコンテンツとメニューの中身を記載する。
<section>
<div class=“key”>
<img src=“key.jpg” alt=“”>
</div>
<div class = “content”>
<h1>リフレッシュ</h1>
<p>特集は一人旅<br>
週末に行ける小さな旅行<br>
充実おひとり様プラン</p>
</div>
<div class=“archive”>
<h3>特集アーカイブ</h3>
<div class=“archive-box”>
<figure>
<img src =“thumb1.jpg” alt=“”>
<figcaption>レトロな街</figcaption>
</figure>
<figure>
<img src=“thumb2.jpg” alt=“”>
<figcaption>建築物をめぐる</figcaption>
</figure>
</div>
</div>
</section>
…
<nav id=“nav”>
<div class =“logo”><img src=“logo.svg” alt=“”></div>
<ul>
<li><a href =“#”>Home</a></li>
<li><a href =“#”>今月の特集</a></li>
<li><a href =“#”>ホテル検索</a></li>
<li><a href =“#”>カフェ検索</a></li>
<li><a href =“#”>お問合せ</a></li>
</ul>
</nav>
現段階ではメニューがページ下部に表示されているため、こちらをページの右側に変更し、さらにメニューの幅を固定していく。
これらはCSSの調整で実現できる。
#nav{
position:fixed;
right:-270px;
top:0;
width:270px;
height:100%;
}
widthをマイナスの値に設定することでページの右横の表示されない部分に移動させることができる。
メニューが開いた時の状態を作るために、
<div id=“wrapper” class=“show” >
…
</div>
<nav id=“nav” class=“show” >
…
</nav>
このshowクラスに適用されるcssを記述。
.show{
transform:translate3d(-270,0,0);
}
この段階でHTMLに記述したclass=“show”を削除して元のメニューが見えない形に戻す。
上記のメソッドでは横、縦、奥行きの形で調整できる。
transform:translate3d(x方向の移動量,y方向の移動量,z方向の移動量);
Div class=“hamburger” id=“open_nav”がクリックされたらshowを追加、再度クリックされたら削除するイベントを差し込めば良いので、
<script>
<script src=“../../_common/scripts/jquery-3.4.1min.js”></script>
<script>
‘use strict’
$(document).ready(function(){
$(‘#open_nav’).on(‘click’,function(){
$(‘#wrapper, #nav’).toggleClass(‘show’);
});
});
</script>
Cssに開閉のアニメーションを付記する。
#wrapper,#nav{
transition:transform 0.3s;
}
これで完成。コードは複雑に見えるがやっていることは極めてシンプルなので記号のパターンなどを覚えるだけでなんとかなりそう。
CSSは、セレクタ、プロパティ、値の3つで構成されており、それぞれを記述することで、どの要素（セレクタ）の、何を（プロパティ）、どのように（値）するという命令を行える。
セレクタの対象には色々なものが取れ、下記に例をあげていくことにする。
<p>pタグの内容</p>
p {
color: #F80206;
}
のようにすればpタグの内容が赤字で表示される。
* {
color: #F80206;
}
と、アスタリスクを使用するとhtmlで表示が行われる全ての要素に適用される。
.クラス名と記述することで、指定のクラスに装飾できる。
<p>pタグの内容</p>
<p class="example">クラス名exampleのpタグ内容</p>
.example {
color: #F80206;
}
# ID名 と記述することで、指定のIDに装飾できる。
<p>pタグの内容</p>
<p id="example">ID名exampleのpタグ内容</p>
p#example {
color: #F80206;
}
Classはドット.、idはシャープ#で対象セレクタを記載すると覚えておけば問題なさそう。
今度は遂にAjaxを使いjson形式のものを読み込んでhtmlに表示させていく。
空き席状況を確認し、テキスト表示を行うページを考える。
<section>
<ul class =“list”>
<li class=“seminar” id=“js”>
<h2>JavaScript勉強会</h2>
<p class=“check”>空席状況を確認</p>
</li>
<li class =“seminar” id=“security”>
<h2>セキュリティ対策</h2>
<p class=“check”>空席状況を確認</p>
</li>
<li class =“seminar” id=“ajux”>
<h2>AIを利用したUX設計</h2>
<p class=“check”>空席状況を確認</p>
</li>
</ul>
</section>
関連するcssも記載していく。
<style>
.list{
overflow:hidden;
margin:0;
padding:0
List-style-type:none;
}
.list h2{
Margin:0 0 2em 0;
font-size:16px;
text-align:center;
}
.seminar{
float:left;
margin:10px 10px 10px 0;
border:1px solid #23628f;
padding:4px;
width:25%
}
.check{
margin:0;
padding:8px;
font-size:12px
color:#ffffff;
background-color:#23628f;
text-align:center;
cursor:pointer;
}
.red{
background-color: #e33a6d;
}
.green{
background-color: #7bc52e;
}
</style>
</head>
data.jsonは下記とする。
[
{“id”:”js”,”crowded”:”yes”},
{“id”:”security”,”crowded”:”no”},
{“id”:”ajux”,”crowded”:”no”},
]
このデータをjqueryに読み込む前にコンソールに内容を出力させる。
<script src =“../../_common/scripts/jquery-3.4.1.min.js”></script>
<script>
‘use strict’
$(document).ready(function(){
$.ajax({url:’data.json’, dataType:’json’})
.done(function(data){
console.log(data);
})
.fail(function(){
window.alert(‘読み込みエラー’);
});
})
</script>
基本的にはブラウザで遷移が発生した際にはサーバにリクエストし、サーバからのリスポンスを受け取るが、Ajaxはブラウザではなく、javascriptからサーバにデータをリクエストし、返されたデータをjavascript自身で受け取る仕組みとなっている。
なので、ブラウザがデータの送受信に、介在せず、画面表示が書き換わることがない。
ブラウザから行うのは、ボタンクリック発生のようなイベント通知をjavasciptに送り、javascriptからその後送られてくるデータを反映することである。
この特性を利用して、ページの一部だけを最新情報に書き換えている。
Ajaxの基本形は、
$.ajax({url:’data.json’, dataType:’json’})
.done(function(data){
データがダウンロードできた時の処理
})
.fail(function(){
データがダウンロードできなかった時の処理
})
であり、
$.ajax({url:’データのURL’,dataType:’json’,その他の設定:’設定値’…})部分では、データの送受信に必要な設定を行なっている。
データの取得のためにurlとdataTypeを使用しており、urlにはダウンロードしたいデータのURL(data.json)を指定。ダウンロードするデータの形式はjsonなのでjsonを値に指定している。
$.ajaxメソッドが実行されると、パラメータのデータがダウンロードされ、ダウンロードが完了すると、.done以降のfunctionが実行される。このファンクションにはダウンロードされたデータがパラメータとして渡される。ここではダウンロードした内容をdataに格納している。
.done(function(data)){
ここから取得したdata.jsonの内容をもとに表示を変化させていく。
