JavaScriptのライブラリ「Chart.js」でグラフ・チャートを表示
複雑な定量のデータは、チャートやグラフを使えば視覚的に分かりやすく直観的に理解できますよね。 そんな時に便利なのは、JavaScriptのライブラリ「Chart.js」です。 かなりメジャーなライブラリなので、既にご存知 …
JavaScriptのdataTransfer.setData()で要素をドラッグして順番の並び替え
今やパソコンを使う時に当たり前の操作となっている「ドラッグしてファイルをフォルダに入れる」のような、ドラッグ操作で並び替えが可能なUIをネイティブなJavaScriptで作ってみます。 是非、最後までご覧いただけると嬉し …
JavaScriptのopenBDでISBNから検索をして書籍の情報を表示
やや思いつきに近いですが、Qiitaの記事にあるopenBDのjQueryのコードを、ネイティブなJavaScriptに置換してみます。 関連するopenBDについてもご紹介していくので、是非最後までご覧いただけると嬉し …
JavaScriptのGrid.jsでテーブルにソートや検索機能を追加
テーブル（表組み）を使い、複数の情報を一覧で表示することで、データを見やすく・かつ効率よく比較することができます。ですが、そんなテーブルを、イケてないUIで作ってしまうと、逆に見づらく・なんかダサい感じになりやすくもあり …
JavaScriptのYouTube Player APIでYouTube動画を複数設置してマウスオーバーで再生
スマホでは「マウスオーバー」の概念がないので、複数のYouTube動画が並び再生ボタンタップで再生される普通のものになります。 是非、最後までご覧いただけると嬉しいです。 目次YouTube Player APIマウスオ …
JavaScriptの.childrenで指定要素の子要素にclass名を一括付与
要素が階層になっている「親要素・子要素・孫要素」で、JavaScriptを使って子要素に一括でclass名を付与します。 こんな時、.children プロパティが便利です。 是非、最後までご覧いただけたら嬉しいです。 …
JavaScriptの.addEventListener()のマウスオーバーで画像の切り替え
この記事では、マウスオーバーで画像の切り替えを、JavaScriptの .addEventListener() メソッドで実装します。 サンプルもあるので、最後までご覧いただけると嬉しいです。 目次.addEventLi …
JavaScriptの.createElement()で都道府県を選択可能なセレクトボックス
HTMLで、47都道府県を option タグで書いてもいいですが、見やすく・メンテナンスしやすいようにJavaScriptの .createElement() メソッドで記述することが可能です。 サンプルとあわせて参考 …
JavaScriptのwindow.scrollでボタンクリックすると一番上・一番下にスムーススクロール
CSSだけで、色々できるようになりましたよね。位置の細かい調整はできませんが、「スムーススクロール」もCSSだけで実装可能です。 そんなCSSのスムーススクロールにJavaScriptのコードを追加して、「一番上・一番下 …
JavaScriptの.URL .domain .title でページのURL・ドメイン・ページタイトルを表示
JavaScriptのコードを使って、ページのURL・ドメイン・ページタイトルの3つを取得して表示させます。 少し用途が限られそうなコードですが、参考にしてみてください。 目次.URL .domain .titleページ …
