jQueryの使いかた
こんにちはizumiです。久しぶりの更新になってしまいました。進捗としてはJSの基礎の基礎とjQueryの基礎あとはSassを学びました。JSであんなに悩んでましたが、とりあえずは本当に基礎の基礎レベルがわかればいいのだと感じました。実際の使いどころがわからないのに知識だけ詰め込んでもわからないのはあたりまえですね。実装しながら学んでいくスタイルが一番身につくと改めて感じます。JQueryとJSはどのくらい学習が必要?!具体的にいうとJSはprogateの無料版でとりあえずは十分です。あとはドットインストールなんかも流し見するくらいでもいいかもしれません。ドットインストールは難易度高めなのでへぇ〜こんな風にするんだ〜くらいの軽い気持ちで大丈夫です!JQueryのほうがProgateでも実務で使うような感じで進んでいくのでイメージが湧きやすいです。こちらもProgateの中級編くらいまででとりあえずはいいんじゃないでしょうか。結局は自分のエディタででいざ書こう!となったときに何をどうすればいいのかわからなくなると思うので中級まで行ったらそのあたりの学習に進むといいです!実際のエディタで学習する方がより理解しやすいと思います。実際のJQueryの使いかたでは実際にどうやって使えばいいのかを説明していきたいと思います。jQueryは、JavaScriptのライブラリですので拡張子は. js となります。cssファイルと同じようにhtml 内で<script src="ファイルのURL"></script>という感じで読み込みますが、WEBページの表示速度をより早めるためcssと違い<head></head> 内ではなく</body>の直前に書くことが一般的です。また、jQueryを使用するには、jQueryライブラリを読み込む必要があります。インターネット経由で読み込むのが一般的でこちらは<head>タグの中でにURLを読み込むことで、jQueryが使用できるようになります。こんな感じで↓=================================<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="/favicon.ico"> <link rel="stylesheet" href="/css/reset.css"> <link rel="stylesheet" href="/css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><title>タイトル</title></head><body>・・<script src="/jquery.js"></script></body>=================================Sassを学んでさらにコーディングが楽しくなったHTML CSS を学び始めた時の楽しさは今でもよく覚えていますがまぁまぁ書けるようになってくると今度は効率よく書きたいとかきれいにコードを書きたいという思いが出てくると思います。Sassの利点は以下の5つ 入れ子形式で書ける 変数を使用できる 関数が使える レスポンシブが劇的に早くなる ファイルを分割管理できるよってかなり効率よくコードが書けますし変数や関数が使えることによって保守性も上がります。Sassは学ぶのも楽しいですしたぶんもうCSSは使わなくなるので早めに取り入れたほうが絶対にいいです!ただ、ブラウザ表示にはSassファイルからCSSファイルへの変換が必要なのでVSコードを使用されている方はEasySassの拡張機能を追加してくださいね!学習が楽しい日も行き詰まって嫌になる時もありますがわからないことを分解して一つづつクリアにしていくと案外前に進めるものだと実感しています。なかなかブログの更新にまで手が回りませんが学習記録はなるべくマメにつけたいと思います。それでは!