NPMでの利用方法

shuffle-textはnpmでも公開しています。npmでモジュールを管理するフロントエンドエンジニアはこちらから利用するのがいいでしょう。

Node.jsをマシンに導入していれば、npmコマンドを使ってJSライブラリをインストールできます。コマンドライン(Windowsではコマンドプロンプト、macOSではターミナル)で、次のコマンドを入力してインストールください。

npm install shuffle-text

もしくは、npmの代わりにYarnでインストールするのもいいでしょう。Yarnについては記事「npm互換のJavaScriptパッケージマネージャーYarn入門」を参照ください。

yarn add shuffle-text

モジュールのバンドル方法

モジュールとしてバンドルすれば、一つのJavaScriptファイルとしてまとまるので、サーバーリクエストの回数が減り読み込み時間を短縮できます。モジュールバンドラーにはいろんな種類が存在しますので、それぞれ紹介します。

一般的な方法として、JavaScriptにrequire()メソッドを記載してモジュールを読み込みます。構成はサンプル(Broserify版)を参考ください。

const ShuffleText = require('shuffle-text');

// 要素を取得
const element = document.querySelector('#my-element');
// インスタンスを生成
const shuffleText = new ShuffleText(element);
// エフェクトを再生
shuffleText.start();

もしくは、モダンなES2015のimport文でモジュールを読み込むのもいいでしょう。shuffle-textはpackage.jsonファイルのjsnext:mainmoduleなどの新しい方式にも対応しています。この方法で利用する場合の構成はサンプル(Webpack2版)サンプル(Rollup版)を参考ください。

import ShuffleText from 'shuffle-text';

// 要素を取得
const element = document.querySelector('#my-element');
// インスタンスを生成
const shuffleText = new ShuffleText(element);
// エフェクトを再生
shuffleText.start();

TypeScriptで利用する場合は、定義ファイルも自動的にインストールされるようになっているので、d.tsファイルを持ち込まなくても利用できます。

最後に

実はこのライブラリは2012年に公開していたものを新しくしたものです(参照「HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog」)。TypeScript化したことや、npmjsで公開した点など、時代の流れに即して更新してあります。ぜひ気軽に利用ください!