見出し画像

へっぽコーダー日記06jQueryライブラリ

どうもNaokiです!今回はjQueryライブラリについて書いていこうと思います!僕自身もかなり初心者なのでここ間違ってるよやこうしたほうが良いよ等ありましたらコメントでお教え下さい!

そもそもjQueryライブラリとは??

jQueryライブラリとは料理に例えるおレトルト食品やお一人様用鍋セットのような物で必要な物は全て入っている非常に便利で使いやすい物です!

実際にどうつかうの??

まずはどのライブラリを使うかを調べます!ライブラリごとに公式HPが存在するのでそちらから必要な物をダウンロードして下さい!

ライブラリがわかりやすくまとめられたサイト

下準備

ライブラリをダウンロードする事が出来たらまずは今作っている最中のフォルダにcssはcssフォルダに、jsはjsフォルダに入れて下さい!こうする事によって<link>タグでindx.htmlと紐付ける事が出来ます!

html側の準備

僕が思うにここでの細かな間違いがjsが効かない原因と大きく関係してくると思うので焦らず丁寧にして行きましょう!

ダウンロードしたフォルダには###.cssと言ったものや###.min.jsと言ったものなのがあると思うのでまずは各公式サイトを見ながらどこに何をリンクすればいいかを確認して下さい!

htmlとダウンロードしたファイルを紐付ける

ここが今日の一番のポイントかもしれません!htmlと紐付ける際には<link>タグを使うのですが上下関係や位置を間違えてしまうと機能してくれなくなってしまいます!下には特に注意すべき点を抑えて置きます!

reset.cssは他のcssよりも上に書く

これはreset.cssが下にある場合全てこれが適応されてしまう事があるので本来何をしなくてもかかっているcssを一度reset.cssで打ち消してからstyle.cssでcssを新たに適応させていくと考えると理解しやすいと思います!

<!--html-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/###.css">
    <link rel="stylesheet" href="css/###.###.min.css">
</head>

jQuery cdnを必ず読み込む(超重要)

jQueryライブラリを使う際には必ずこれを読み込んで下さい!僕自身もかなり初心者なので専門的な事は詳しくは無いのですが説明書的な物だと思います!とりあえずこれは必ず必要な物なのでコードを書いて置きます!そして位置は必ずこの後から書くものよりも上に来るようにしましょう!

<!--html-->
<body>

    <!--jquery cdn *必ずjquwryが先-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

</body>

使うライブラリのJsを読み込む

これは先程書いたcdnの下に書くようにしましょう!###.min.jsや###.###min.js等と言うファイルがあればその可能性が高いです!

<!--html-->
<body>
<!--jquery cdn *必ずjquwryが先-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!--slicke.ライブラリ-->
    <script src="js/###.min.js"></script>
    <script src="js/jquery.#######.min.js"></script>
</body>

spp.jsをjsフォルダの中に作り<body>タグの一番下に

皆さんはwabページ等を見ている時にあまりにも遅くてイライラする事はありませんか?app.jsはjsの起動スイッチのような物でこれを一番下に置くことによりページの表示速度を上げ一番最後にjsを読み込ませます!(html等は基本的に上から読み込んで行くため一番下にすると先にhtmlとcssを読み込む)

<!--html-->
<body>
<!--jquery cdn *必ずjquwryが先-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <!--slicke.ライブラリ-->
    <script src="js/slick.min.js"></script>
    <script src="js/jquery.pagepiling.min.js"></script>

    
    <!--一番下-->
    <script src="js/app.js"></script>
</body>

app.jsにライブラリのオプション機能を書く

app.jsはjsを起動させるためのスイッチだと先程言いましたがここにはライブラリの様々な機能を追加することが出来ます!是非調べて様々な機能を試して見て下さい!以上でjsの導入は終了です!

まとめ

今回はjsの基礎と導入方法について書いて見ました!一見複雑そうに見えますが大半がダウンロードとコピー・ペーストなのでどこに何を書くかさえ気をつければ意外に簡単だったりします!これによりよりきれいで面白いページが出来ると思うのでぜひ試してみて下さい!