Hugoで構築したサイトのデータをJavaScriptから利用できるように、JSON形式で書き出す。例えばサイトやページ、タグといった情報をJSON形式で読めるように書き出せたら、JavaScriptから利用できます。 こういうのはいろんな方がやっておられて、ネットの情報…

Vue.jsで、親子関係のコンポーネントを作って親から子へデータを渡すってのはpropsで指定する方法とかいろいろ入門書に書かれている。 ただ、ローカルで定義した親コンポーネントの中に子コンポーネントを使っていて、親コンポーネントを使っているVueインス…

オートプレイ（自動的にスライドする） jQueryのスライダープラグインslickで画像スライダーを作るの続き。今度は画像を自動的にスライドするオプション。 といっても簡単で、slickのオプションにautoplay: trueを渡すだけ。 3枚表示のサンプルを使ってやっ…

遅延読み込みオプション jQueryのスライダープラグインslickで画像スライダーを作るの続き。今度は画像を遅延読み込みするオプション。 DEMO画像の枚数を9枚にして、３枚表示で１枚ずつスライドにしてある。

複数枚の画像を表示するスライダー jQueryのスライダープラグインslickで画像スライダーを作るの続き。今度は別パターン。 画像を3枚づつ表示させてクリックすると3枚ずつスライドしていく。

画像スライダーの続き。今度はjQueryのスライダープラグインを使ってみる。何種類かあるみたいだが、一番人気そうなslickを使ってみよう。 slickのサイトからプラグインをダウンロードする。 slick - the last carousel you'll ever need

スライドショーの応用続き。 画像の両側に「戻る」「進む」機能をもたせた矢印マークを付けて、クリックしたら画像が切り替わる。 よく見られるアレ。

スライドショーの若干応用的なやりかた。 画像をクリックするのではなく、 一定時間が過ぎると勝手に次の画像に切り替わる。 setTimeoutで一定の時間経過後（この例では５秒きざみ）で勝手に切り替わる

JavaScriptで画像のスライドショーを実装する一番初歩的なやりかた。 まずは、画像をクリックすると次の画像に切り替わる単純な仕組みから。

for...in文に対して ES2015で新しく追加された構文にfor...of文がある。 for...ofは、配列などの列挙可能なオブジェクト（NodeList, argumentsなど）、イテレーター／ジェネレーターなどを処理できる。 ■ for...ofの構文 for (仮変数 of 列挙可能なオブジェ…

配列を列挙して何かの処理をする場合、for...in命令を使うべきではないというのが前の記事。 配列を順に処理する最もシンプルな方法は、昔ながらのfor文である。

for...in命令 オブジェクトの要素を先頭から順に取り出して処理する。 ■ for...inの構文 for (仮変数 in オブジェクト) { 命令 }