JavaScript①(関数,jQuery,DOM,Ajax,CDN,プラグイン,swiper)

JavaScriptの基本的な書き方

関数とは

「処理のまとまり」
ある処理をひとまとまりにして、あとで何度でも使えるようにした「命令のセット」

JavaScriptでは、function で関数（処理のまとまり）を作る。

function 関数名(引数・受け取るデータ){
  処理内容
}

例

function ごはんをたべる() {
  箸をもつ();
  ごはんを口に入れる();
  噛む();
}

レシピだと…

function makeTamagoyaki() {
  breakEgg();
  addSalt();
  mix();
  fry();
}

• makeTamagoyaki が関数の名前
• 中に「実行したい命令」がまとまって入っている
• 呼び出せば何度でもその手順をやってくれる

function sayHello() {
  console.log("こんにちは！");
}

sayHello(); // ← 関数を実行 → 「こんにちは！」と表示される

---

jQueryとは

JavaScriptライブラリの１つ。JavaScriptの処理を簡単に使えるプログラム。
jQueryを使うと。簡単に文字色や背景色を変更できる。

ライブラリってなんだっけ？（復習）

ライブラリ

他のプログラムから呼び出されるものの総称。
特定の機能を提供するプログラムの集合。（必要な機能のみ）
便利な機能を集めた道具箱。
開発者が呼び出して使うことができるコードの集まり。

便利な機能を再利用しやすくまとめたもの！

プログラムの特定の機能（例：グラフ描画、データ処理）を簡単に利用できるようにする。
JavaScriptを加工して使いやすくしている。

• React（UIライブラリ）
• jQuery（JavaScriptのDOM操作ライブラリ）

---

https://zenn.dev/eliri/articles/4e238cb8eb449f

jQueryを使用するメリット

• ブラウザの種類関係なく使える
• JavaScriptで書くと難しいことを簡単に書ける！
  • DOM操作
  • Ajaxによるサーバー通信

---

DOM（Document Object Model・ドキュメントオブジェクトモデル)とは

HTML・XMLドキュメントなどのマークアップ言語で書かれた文書を
JavaScriptなどのスクリプトからアクセス・操作できるようにするためのAPI。

要は「HTML・CSSを簡単に操作できる」
画像・文字などをHTMLで書かれたものを、オブジェクトとして表現して、アニメーションをつけて表示させたりなどの操作ができる。

JavaScriptだと10行ほど書かなきゃいけないことを、jQueryだと３行とか短めで済む。

Ajax（Asynchronous JavaScript and XML）通信とは

HTMLの一部を追加で読み込む通信方法

• ページ全体を再読み込みせずに、一部だけを非同期で読み込む通信手法
• JavaScript を使って、裏側でデータを取得・送信し、ページの一部に反映する
• 従来のHTML通信ではページ全体が再読み込みされるが、Ajaxでは必要な部分だけ更新できる

具体例

• SNSや動画サイトなどで、スクロールすると新しい投稿や動画が自動で表示される仕組み
• 読み込み中に「ぐるぐるマーク」などが表示される
• この追加読み込みが Ajax による非同期通信

Ajaxではない例

• 「次へ」ボタンをクリックしてページ遷移するGoogle検索などの挙動は、Ajaxではない
• ページ全体が再読み込みされる通常のHTML通信

---

参考文献

https://www.youtube.com/watch?v=Xz4t0C9j0tc
https://www.youtube.com/watch?v=V89nh3UCBbM
https://www.kagoya.jp/howto/it-glossary/web/jquery/
https://hnavi.co.jp/knowledge/blog/jquery/#title1
https://udemy.benesse.co.jp/development/dom.html
https://www.gpol.co.jp/blog/286/
https://hnavi.co.jp/knowledge/blog/markup-language/
https://cuvno.com/programming-language-difference/

---

jQueyの使用例

jQueryは下記のような書き方をする。

$(function(){
    $(a).b();
});

• function は JavaScript にもともとある構文
• $(function() { ... }) の書き方は jQuery 独自の使い方
  「DOMの読み込みが完了したら実行」 という意味

$(function(){
 // DOMが読み込まれたあとに実行される
  $('.box1').mouseover(function(){
    $('.box1').css({'background-color': '#0000FF'});
  });
});

---

イベント処理

$('.セレクタ名').on('イベント名', function(){
  イベント発生時に行われる処理
});

https://api.jquery.com/on/
https://www.sejuku.net/blog/38774

ショートハンドメソッド

一部のよく使うイベントは ショートハンドメソッド（短く書ける便利メソッド）が用意されている

$('.btn').on('click', function(){
  alert('クリックされた');
});

// 下記のように省略👇
$('.btn').click(function(){
  alert('クリックされた');
});

this

クリックされた要素だけ
下記の場合、クリックしたものだけスライドアップさせる。

$(this).slideUp();

---

プラグイン

JavaScriptの拡張機能。swiper（スワイパー）はその１種。

下記ページに紹介されてる色んなプラグインを見たところ、画像がアニメーション付きででてきたり…などがあった。
こういう動きを簡単に作れるのが「プラグイン」
https://www.sejuku.net/blog/104046

---

swiper（スワイパー）

スライドショーを簡単に作成できる。jQueryが不要のプラグイン。
CDNで実装する。

SwiperでCDNを実装することもできる！

---

CDN（コンテンツデリバリーネットワーク）とは

ウェブコンテンツ（画像・CSS・JavaScriptなどの静的ファイル）を効率的に配信するための仕組み。

世界中に分散配置されたサーバー（キャッシュサーバー）を使い、ユーザーの物理的に近い場所からデータを届ける。

海外サイトにアクセスするとき、物理的に近いサーバーからアクセスした方が速い。
また、大量アクセスがあった時も、同じコンテンツを複数のサーバーから配信できるので、大元のサーバーの負荷が軽減される。

参考文献

https://www.youtube.com/watch?v=fbAtpcv25vE
https://www.ntt.com/bizon/glossary/e-c/cdn.html

Swiperの実装方法

下記公式ドキュメントから
https://swiperjs.com/

Use Swiper from CDN に書かれてるコードを自分のHTMLに貼り付ける。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

https://swiperjs.com/get-started#use-swiper-from-cdn