JavaScriptで動きのあるサイトを作ろう!

こんにちは!Webエンジニアのたけです!

前回はコーダーのスキルを身につける編の記事でHTMLとCSSの編集方法を学習しました!

これで静的な(動きのない)サイトを作ることができる様になりました!では、ページにアニメーションなどの動きを加えるためにはどうしたら良いのでしょうか?そうです!JavaScriptの出番です!

皆さん、「Javaなら聞いたことあるよ!」と仰るのですがサーバサイド言語のJavaとは全く異なるプログラミング言語です。JavaScriptはJavaScriptです!JavaScriptで一体何ができるようになるかと言えば、ユーザーのアクションでサイトの表示を変えるといったことができるようになります!

例えば、クリックされた時に画面上に表示されている数字を切り替えるといったことなどです!百聞は一見に如かずということで、早速書いていきましょう!

JavaScriptで動きをつけていこう!

HTMLからJavaScriptを読み込もう!

前の章で使用したHTML/CSSファイルを利用します。studyディレクトリ(フォルダ)に「index.js」ファイルを作成し、index.htmlに下の画像のようなスクリプトを書き込んでください。ファイル構成も以下の画像を参考にしてください。JavaScript導入

そして、JavaSriptに書き込んでいきます!いよいよプログラミングの始まりです!(*基本的に記法はES6を用います。ES6についてはこちらで詳しく書かれているので気になる方は参照ください)

先ほど作成した、「index.js」ファイルに以下のように書き込んでみてください!

JS_HelloWorld

ではブラウザで確認してみます!

カードリスト

特に何も変わってない・・と思いましたよね。大丈夫です。現段階では表示は変更されていません。じゃあ何が変わったんだという話ですが、Google Chromeでページを開いて右クリックして、「検証」を押してみてください(macOSの場合command + option + i でも表示できます)!

devtool

このような画面が表示されましたか?これは、Googleが提供しているDev Toolsというものです!プログラミングでは非常に重宝するので、扱い方は各自調べてみてください!

では、Dev Toolsの「Console」タブをクリックしてみて下さい!

Hello World

ちゃんと「hello world」と表示されていますね!

「index.js」で記述したconsole.log()とは、consoleに()の中の文字を出力するものと覚えておけば大丈夫です。

変数、定数、関数などプログラミングで扱う概念を説明したいのですが、ここでは長くなってしまうので割愛します。詳しく学びたい方は、僕が学習する際に使った参考書を後半で紹介しますのでそちらをご覧ください!

これで、JavaScriptの導入は完了です!

JavaScriptのライブラリjQueryを使ってアニメーションをつけよう!

JavaScriptにはjQueryというライブラリがあります。JavaScriptのライブラリとは、簡単にいうとJavaScriptの機能を詰め合わせにしたものであり、少ない記述で簡単に実装をできるようになるものです。jQueryはアニメーションの実装を楽にしてくれるライブラリです!

では実際に使ってみましょう!

jQueryの導入方法はざ大まかにダウンロードして使う方法ネットワーク経由で通信して使う方法(CDN)があるのですが、今回は後者を採用したいと思います。(詳しく知りたい方はこちらに丁寧にまとめられています)

まずは、以下のようにHTMLに記述してみてください!

スクリプトはこちら:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>

jQuery導入

では、実際にアニメーションをつけていきたいと思います!

今回はslickと言うjQueryのプラグインを使って、前回作成した動物のカードリストを自動でスライドするカルーセルにして見たいと思います!

プラグインも先ほど説明した、CDNを使っていきたいと思います。以下の四行を追加してください!

プラグイン

スクリプトはこちら

<script src=”https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/slick-carousel@1/slick/slick.min.js”></script>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/slick-carousel@1/slick/slick.min.css”>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/slick-carousel@1/slick/slick-theme.min.css”>

ここで、注意点はindex.jsを読み込むコードを追加したスクリプトの下に書き直すことを忘れないでください!読み込まれる順番でエラーが発生してしまうからです。プログラミングをする上で、処理が実行される順番を心がけているとエラーをすぐに見つけられたり、構造理解に役立ちます

では、index.jsを書き直します。下記のコードを書いて見てください!

slick

ここではcard-containerと言うクラスに先ほど読み込んだslickを使うように命令しています。

jQueryでは$(クラス名 or id名).メソッド名(引数)といった書き方をします。わからない単語があれば調べて見てください!

今回は、slick()の引数にはオブジェクト型でオプションを設定しています。自動再生と、ドットを表示すると言う設定にしました!オプションはまだ沢山ありますのできになる方は公式ドキュメントを参照してください!

それでは仕上げです!CSSを修正する必要があるので、少し修正します!以下のようにしてください!

CSS修正

ではブラウザで確認して見ましょう!

スライダー

ちゃんと自動でスライドされるようになり、ドットも表示されていますね!jQueryの導入に関してはここまでにしたいと思います!

JavaScriptの学習方法

オススメ参考書

確かな力が身につくJavaScript「超」入門 第2版

JavaScript僕はこれの第1版を使いましたが、第2版でいいと思います(評価高いし)!変数や、関数、オブジェクトなどプログラミングに必要な基本的な概念をここで押さえましょう。実際に、自分の手を動かし制作しながら学べ丁寧に解説されているのでオススメです!jQueryの扱いについても後半で少し触れられていました!

JavaScriptのオススメの勉強法

先ほど紹介した参考書か、入門書を読み終えたらとにかく動くものを作りましょう。TODOアプリを作ることをオススメします!配列の扱い方を意識して制作してみましょう!forEach、map、reduce、filterあたりの使い方もここで押さえましょう!

またMVCの概念についても調べてみてください!大いに役立ちます!

こちらのサイトのTODOアプリの機能(見た目も含む)を実装して見てください!確実に実力がつきます!


いかがでしたか?

今回はJavaScriptを使って簡単に動くサイトの実装をしてみました!動くサイトのイメージを掴んでいただけましたか?

この技術の応用で簡単なWebアプリが作れます!ぜひトライして見てください!後半の学習方法を参考にしていただければ確実に実力がつくはずです!頑張ってTODOアプリを制作して見てください!

次回はPHPを使ってサーバサイドに軽く触れます!それではお楽しみに〜👋

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です