どうも、まさとらん（@0310lan）です！
今回は、Webアプリやサービスなどを開発する際に簡単な記述でさまざまな機能を組み込めるJavaScriptライブラリをご紹介します。
画像、ファイル、音楽、オートコンプリート機能など、高度な技術をできるだけ簡単に実現してくれるJavaScriptライブラリを厳選し、その基本的な使い方も合わせて解説しているのでぜひ参考にしてみてください！
なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。
■画像の圧縮機能を組み込めるライブラリ！
【 Compressor.js 】
ブラウザに標準で提供されているtoBlob()を応用して、カスタマイズ可能な非可逆圧縮を手軽にWebページへ組み込めるJavaScriptライブラリです。
さまざまなフレームワークにも組み込みやすく、オブジェクト形式でオプションを指定すれば出力画像を細かくカスタマイズできるのも魅力的です。
導入方法としては以下の2パターンになります。
1．npmからインストールする方法
$ npm install compressorjs
2．CDN経由でscriptタグを使う方法
https://cdn.jsdelivr.net/gh/fengyuanchen/compressorjs/dist/compressor.min.js
使い方は簡単で、まずはHTMLに画像ファイルを選択できるようにinputタグを設置します。
<input type="file" id="file" accept="image/*">
そしてユーザーが選択した画像をJavaScriptから制御できるようにイベント処理を記述します。changeイベントを利用すると画像を選択した瞬間に実行できるので便利でしょう。
const file = document.getElementById('file'); file.addEventListener('change', (e) => { const data = e.target.files[0]; //ここに画像圧縮の処理を書く });
e.target.files[0]にユーザーが選択した画像情報が格納されているので、これを変数dataへ保持するようにしておきましょう。
あとは、Compressor.jsを使って圧縮処理を記述すればOKです！
プログラムは非常にシンプルで、Compressorのインスタンスを作成する際にオプションをオブジェクト形式で指定するだけです。
const img = new Compressor(data, { quality: 0.6, success(result) { //圧縮が完了した時の処理を記述する }, maxWidth:1000, maxHeight: 400, mimeType: 'image/png' error(err) { //エラー処理 }, });
オプションとしては、画像圧縮の品質、出力画像のファイルタイプ、サイズ、エラー処理などを記述することができます。
successプロパティの引数resultには、圧縮された画像の情報が格納されているのでこれを編集したりサーバに送信するような処理を記述するといいでしょう。
Compressor.jsを使うと非常に簡単な記述で画像圧縮の機能が組み込めるので、さまざまなWebサービスに応用できます。
＜参考リンク＞
■GUIのファイルアップロード機能を組み込めるライブラリ！
【 Uppy.js 】
ユーザビリティの高いGUIで操作できる「ファイルアップローダー」の機能を簡単に組み込めるJavaScriptライブラリです。
プラグインによる拡張も可能なうえ、DropboxやGoogleドライブなどのサービス連携もできるので活用範囲はかなり広いでしょう。
導入方法としては、以下の2パターンがあります。
1．npmからインストールする方法
※本体ファイルだけをインストール
$ npm install @uppy/core
※プラグインも一緒にインストール
$ npm install @uppy/core @uppy/xhr-upload @uppy/dashboard
本体ファイルは@uppy.coreだけですが、任意で必要なプラグイン機能だけを一緒にインストールすることもできます。
2．CDN経由でscriptタグを使う方法
https://transloadit.edgly.net/releases/uppy/v0.30.3/uppy.min.css
https://transloadit.edgly.net/releases/uppy/v0.30.3/uppy.min.js
uppy.min.jsファイルには最初からプラグイン機能が一緒に含まれているので、npmのインストールみたいな任意の機能だけを追加することはできません。
使い方ですが、まずはアップローダーを表示する場所をHTMLに記述します。
<div id="img-area"></div>
そして、Uppyのプラグインでもあるダッシュボード機能を使うことで、GUIによるファイルアップロードが簡単に実現します。
var uppy = Uppy.Core(); uppy.use(Uppy.Dashboard, { inline: true, target: '#img-area' });
use()メソッドの第1引数にDashboardを指定して、第2引数へオプションを設定するだけで以下のようにファイルを選択できるようになります。
さらに、ファイルアップロードに最適化されたtusプロトコルを使ったサーバーへの送信もプラグインでサポートしています。
uppy.use(Uppy.Tus, { endpoint: 'https://master.tus.io/files/' });
他にも、Webカメラの利用やUIのカスタマイズからAWSの活用まで、プラグインを追加するだけでさまざまな機能を簡単に利用できるのは魅力的でしょう。
（※プラグインリスト参照）
Uppyは主要なブラウザをサポートしていますが、もしPromiseやFetchなどをサポートしていないブラウザを使う場合でも、ポリフィルを利用した使い方が紹介されているので参考にしてみてください。
＜参考リンク＞
■カスタマイズ可能なSVGアイコンを組み込めるライブラリ！
【 Vivid.js 】
さまざまなWebサイトやサービスに利用できるシンプルなSVGアイコンを簡単に組み込めるちょっと変わったライブラリです。
HTMLのdata属性を変更するだけで、JavaScript側で自動的にアイコンをカスタマイズしてくれるので非常に扱いやすいのが特徴です。
導入方法としては、以下の2パターンがあります。
1．npmからインストールする方法。
$ npm install vivid-icons
2．CDN経由でscriptタグを使う方法
https://unpkg.com/vivid-icons@1.0.9
基本的にVivid.jsはライブラリを読み込んだらすぐに使える状態になっています。
そこで、HTMLに以下の記述をしてみましょう！
<i data-vi="van"></i>
すると、車のアイコンが次のように表示されます。
iタグのdata属性に設定した文字列がアイコンを意味しており、多彩なジャンルのアイコンが標準で搭載されています。（※アイコンリスト参照）
https://webkul.github.io/vivid/cheatsheet.html
さらに、自分のWebサイトに合わせてカラーやサイズを自由に変更することができます。カラーについてはベースとなる「primary」「accent」「prop」の3種類を指定できます。
<i data-vi="van" data-vi-size="192"></i> <i data-vi="van" data-vi-primary="#008000" data-vi-accent="#FF0000" data-vi-prop="#FFFFFF"></i>
このようにdata属性値を変更するだけで簡単にカスタマイズできます。
また、独自のSVGアイコンを追加したり、Node.jsでデフォルトのアイコンセットをカスタマイズすることもできるようになっているので便利です。
学習用やプロトタイプ向けにも最適でしょう。
＜参考リンク＞
■シンセのように音を生成・再生できる機能を組み込めるライブラリ！
【 Tone.js 】
このライブラリを1つ読み込むだけで、音の生成・発音・シーケンス・音源・エフェクト…など、音楽を作成する環境が一通り準備できるのが大きな特徴。
可能な限りシンプルな記述で音楽を作ることが可能で、さまざまな音源を重ねたりサンプラーで独自の音を取り込むことも簡単に実現できます。
導入方法としては、以下の2パターンがあります。
1．npmからインストールする方法
$ npm install tone
2．CDN経由でscriptタグを使う方法
https://cdnjs.cloudflare.com/ajax/libs/tone/13.0.1/Tone.min.js
使い方ですが、Tone.jsには10種類以上のシンセ音源があらかじめ提供されており、例えばAMSynthを使いたければ次のように記述します。
const synth = new Tone.AMSynth().toMaster();
toMaster()につなげることでマスター出力に接続されたことになり、音が再生されるようになるわけです。
このシンセを使って音を鳴らす方法ですが、モバイル環境はもちろん、最近のPCブラウザもユーザーが何らかのアクションをしないと音が再生されない仕様に変わりつつあります。
そこで、以下のようにボタンのクリックイベント内で発音処理を記述するのがいいでしょう。
btn.addEventListener('click', function() { synth.triggerAttackRelease('C4', '4n'); });
これでドの音が四分音符の長さで発音されます。
メロディを発音したい場合は、音名を配列に格納してSequence()メソッドを使えば再生することができます。
const melodyLists = ['G3', 'A3', 'G3', 'C4', 'B3']; const melody = new Tone.Sequence(toPlay, melodyLists).start(); function toPlay(time, note) { synth.triggerAttackRelease(note, '4n', time); }
Sequence()を使う場合は、音を再生するときにTransport.start()を使います。
btn.addEventListener('click', function() { Tone.Transport.start(); });
メロディはオブジェクト形式で組み立てれば、さらに細かい制御も可能です。
このように簡単な記述で音を生成して音楽を奏でることができるので、Webアプリなどにも組み込みやすいでしょう。
他にも、音源自体を独自にカスタマイズしたりエフェクトを接続して音を変化させるのも得意です。
ちなみに、Tone.jsの基本的な使い方から簡単なサンプルの作り方までを次の記事で解説しているので合わせて参考にしてみてください！
＜参考リンク＞
■検索ボックスにオートコンプリート機能を組み込めるライブラリ！
【 autoComplete.js 】
Googleの検索ボックスのように、何かキーワードを入力しようとすると候補が表示されるようなオートコンプリート機能をとても簡単に構築できるライブラリです。
JSON形式のデータを用意するだけなので非常にお手軽なうえ、依存関係が無いのでさまざまなフレームワークと相性がいいのも魅力的でしょう。
導入方法としては、以下の2パターンあります。
1．npmからインストールする方法
$ npm install @tarekraafat/autocomplete.js
2．CDN経由でscriptタグを使う方法
https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@4.0.0/dist/js/autoComplete.min.js
※専用のCSSファイルも提供されているので合わせて利用してみてください。
使い方ですが、まずはサジェスト候補となるデータリストをJSONで用意しておきます。
例えば、ユーザー名・エリア・年齢を含めたJSONだと次のようになるでしょう。
const json = [{ "name": "田中 太郎", "area": "東京都", "age": "30" },{ "name": "田中 三郎", "area": "愛知県", "age": "22" },{ "name": "伊藤 次郎", "area": "福岡県", "age": "25" }, ・ ・ ・ ]
このJSONデータを元にしてオートコンプリートが構築されるわけです。
次に、HTMLへ検索ボックスを配置します。
<input type="text" id="autoComplete">
あとは、autoCompleteのオプションを設定するだけですぐに利用することができます。
const ac = new autoComplete({ data: { src: json, key: ["name"] }, placeHolder: "名前を入力してください", selector: "#autoComplete", resultItem: data => {return `${data.match}`}, highlight: true, });
dataプロパティの「src」に先ほど作成したJSONデータを指定します。
「key」にはオートコンプリートで表示したいJSONのプロパティを指定します。例えば、「name」だけを指定すればユーザー名だけに反応するというわけです。
実行すると以下のようにオートコンプリートが機能していることが分かります。
前準備としてJSONデータを用意するだけなので、すぐにWebページへ組み込めるのはお手軽で非常に便利だと思います。
Webアプリだけでなく個人のブログやサイトなどにも応用すれば、ユーザビリティの高いページが構築できるでしょう。
＜参考リンク＞
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
■まとめ
今回は、Webへさまざまな機能を組み込めるJavaScriptライブラリをまとめてご紹介しました。
JavaScriptライブラリを活用することで、Webアプリやサービスなどを短時間でカタチにできます。GitHubには今回ご紹介したライブラリ以外にも、毎日のように便利なものが公開されているのでぜひチェックしてみてください。
みなさんもライブラリを活用してオリジナルのWebアプリを開発してみましょう！
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
