2019年11月2日SHAREツイートシェアはてブLINEPocket目次JavaScriptで動きをつけていこう!HTMLからJavaScriptを読み込もう!JavaScriptのライブラリjQueryを使ってアニメーションをつけよう!JavaScriptの学習方法オススメ参考書JavaScriptのオススメの勉強法こんにちは!Webエンジニアのたけです!前回はコーダーのスキルを身につける編の記事でHTMLとCSSの編集方法を学習しました!これで静的な(動きのない)サイトを作ることができる様になりました!では、ページにアニメーションなどの動きを加えるためにはどうしたら良いのでしょうか?そうです!JavaScriptの出番です!皆さん、「Javaなら聞いたことあるよ!」と仰るのですがサーバサイド言語のJavaとは全く異なるプログラミング言語です。JavaScriptはJavaScriptです!JavaScriptで一体何ができるようになるかと言えば、ユーザーのアクションでサイトの表示を変えるといったことができるようになります!例えば、クリックされた時に画面上に表示されている数字を切り替えるといったことなどです!百聞は一見に如かずということで、早速書いていきましょう!JavaScriptで動きをつけていこう!HTMLからJavaScriptを読み込もう!前の章で使用したHTML/CSSファイルを利用します。studyディレクトリ(フォルダ)に「index.js」ファイルを作成し、index.htmlに下の画像のようなスクリプトを書き込んでください。ファイル構成も以下の画像を参考にしてください。JavaSriptに書き込んでいきます!いよいよプログラミングの始まりです!(*基本的に記法はES6を用います。ES6についてはこちらで詳しく書かれているので気になる方は参照ください)先ほど作成した、「index.js」ファイルに以下のように書き込んでみてください!ではブラウザで確認してみます!特に何も変わってない・・と思いましたよね。現段階では表示は変更されていません。プログラミングで扱う概念を説明したいのですが、ここでは長くなってしまうので割愛します。詳しく学びたい方は、僕が学習する際に使った参考書を後半で紹介しますのでそちらをご覧ください!これで、JavaScriptの導入は完了です!JavaScriptのライブラリjQueryを使ってアニメーションをつけよう!JavaScriptにはjQueryというライブラリがあります。JavaScriptのライブラリとは、簡単にいうとJavaScriptの機能を詰め合わせにしたものであり、少ない記述で簡単に実装をできるようになるものです。jQueryはアニメーションの実装を楽にしてくれるライブラリです!では実際に使ってみましょう!jQueryの導入方法はざ大まかにダウンロードして使う方法とネットワーク経由で通信して使う方法(CDN)があるのですが、今回は後者を採用したいと思います。src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>では、実際にアニメーションをつけていきたいと思います!今回はslickと言うjQueryのプラグインを使って、前回作成した動物のカードリストを自動でスライドするカルーセルにして見たいと思います!プラグインも先ほど説明した、CDNを使っていきたいと思います。href=”https://cdn.jsdelivr.net/npm/slick-carousel@1/slick/slick-theme.min.css”>ここで、注意点はindex.jsを読み込むコードを追加したスクリプトの下に書き直すことを忘れないでください!読み込まれる順番でエラーが発生してしまうからです。プログラミングをする上で、処理が実行される順番を心がけているとエラーをすぐに見つけられたり、構造理解に役立ちます!では、index.jsを書き直します。下記のコードを書いて見てください!ここではcard-containerと言うクラスに先ほど読み込んだslickを使うように命令しています。id名).メソッド名(引数)といった書き方をします。わからない単語があれば調べて見てください!今回は、slick()の引数にはオブジェクト型でオプションを設定しています。僕はこれの第1版を使いましたが、第2版でいいと思います(評価高いし)!変数や、関数、オブジェクトなどプログラミングに必要な基本的な概念をここで押さえましょう。先ほど紹介した参考書か、入門書を読み終えたらとにかく動くものを作りましょう。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。