Webサイトの模写を実践してみた　JavaScript編

Javascript

2020.01.04

こんにちは朱夏です。

今回も模写していきたいと思います。
こちらの案件の参考サイトの模写になります。

今回はJavaScriptの模写になります。
ここで新たにjQueryというものが出てきました。

jQueryとは

JavaScriptをより便利に使いやすくするために作られた、ライブラリと呼ばれるものです。
良く使う機能や便利な機能が予め用意されていて、JavaScriptで直接コードを書くよりも短いコードで機能を実装できるといったものです。

詳しい説明などはこちらのサイトが参考になると思います。

新しい情報

そもそも使われているのがjQueryな時点で新しいものだらけだったのですが、以下の2つの機能を実装する方法はちょっと特殊だったので書き残しておきます。

スライダー機能

スライダー機能はjQueryで用意されている様です。
それを使用するには、更にプラグインを使用して実装することになります。

今回模写したサイトで使用していたものはこちらで紹介されていました。

実装にはjQueryのコードを書くのとは別に、”slick.min.js”というファイルを用意して読み込んでいます。
紹介したサイトでは以下のファイルを用意する必要があると書いてありましたが、今回模写したサイトでは、マーカーを引いているもののみ使用されていました。

- ajax-loader.gif
- fonts（フォルダ）
- slick-theme.css
- slick.css
- slick.min.js

見た感じ、動作に必要なものだけ使って、見た目に関係するものは排除したといった感じでしょうか。
今後の課題としてjQueryを使ったスライダー実装も試してみようと思います。

画像のレスポンシブ対応

ピクチャーフィルというものを使用している様です。
指定のブレイクポイントで画像を切り替えることで対応する機能の様です。

こちらの公式サイトからDLして使用できます。

HTMLの模写をしていた時に出てきた<picture>タグがこの機能を使うためのものだったようです。

あとがき

というわけで、一通りのコードの模写を終えました。
CSSの分量がえぐいことになっていましたが、もしかするとどこかで提供されているコードをそのまま使っているだけで、コピペする必要がなかったものもなるかもしれません。

全体の見た目などを修正していくのは次回に回します。

今回はここまでです。
次回もよろしくお願いします。