システムを開発するときに、すべてのプログラムをゼロから作る場合もありますが、より効率的に開発するための手段もあります。
この記事では、JavaScript開発の効率を大幅に上げられる、ライブラリというものについて紹介します。

「ライブラリ」を一言でいうと、「ある特定の機能を再利用できる形でまとめられた、他のプログラムから引用できるプログラム」です。
カレーを例に考えてみると、よりイメージがつきやすいかと思います。

カレーを作るとき、皆さんはどうしていますか？
もちろん、スパイスをゼロから集めて、独自の配合で作る本格的にカレーを作ることもできます。
でも、とにかく手軽にササッと作りたい！というときは、カレールーに頼る方も、結構多いのではないでしょうか。
既製品のカレールーさえあれば、ゼロからスパイスを調合する必要がなく、ルーを加えるだけでおいしい味付けにできます。

開発の中でのライブラリの役割は、カレールゥに近いです。
プログラムの開発で、見た目をキレイにしたりグラフを表示させたりなど機能を追加するとき、時間をかけてゼロから開発することもあるでしょう。
しかし、カレールーを加えることと同じように、ライブラリを使って既製の機能を追加すると、開発の効率を大幅に上げることができます。

ライブラリの入門編として、今回の記事では、よく使われるライブラリやライブラリを使うときの注意点について紹介します。

kintoneのカスタマイズ開発でもよく利用するライブラリを、2つ紹介します。

kintoneのカスタマイズで、データを登録した日の日付もレコードに自動保存させたいなど、日付操作に関連する処理はよくあります。
基本な日付操作はJavaScriptに用意されている Date オブジェクト で対応できますが、日付操作ライブラリを利用すると処理をより簡単に記述できます。
たとえば、「先月の値」をJavaScriptのDateオブジェクトを使って取得する場合、次のように、かなり長い記述になってしまいます。

1
2

const date = new Date();
new Date(date.getFullYear(), date.getMonth() - 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());

dayjsを利用すれば、先月の値を取得できるsubtract()というメソッドが用意されています。
複雑なコードを書かずに、次のようなシンプルなコードで対応できるので、とても便利です。 ほかにもいろいろ便利なメソッドがあります。
dayjsの詳細については、 dayjs を参照してください。

1

dayjs().subtract(1, 'month');

カスタマイズで、確認フォームを表示させるために「window.confirm()を使いたいけど、見た目をもっといい感じにしたい…」という方も多いと思います。
その場合、 SweetAlert というライブラリを使えば、window.alert()やwindow.confirm()をよりスタイリッシュに表示できます。

JavaScript の標準のアラート

1

window.alert('Oops, something went wrong!');

SweetAlert で表示するアラート

1

swal('Oops', 'Something went wrong!', 'error');

SweetAlert の demo を確認する

シンプルな書き方ですが、JavaScriptが標準サポートしているアラートよりも、よりよい感じに表示できました。
フォームのアイコンやボタンなど、より詳細な指定もでききます。
オリジナルのアラートや確認フォームをカンタンに作りたいときは、SweetAlertを活用してみましょう。
SweetAlert を試してみる

日付操作やアラートのデザインで使える、便利なライブラリを2つ紹介しました。
ほかにも、グラフを作成できたり地図を表示できたりなど、いろいろな機能を提供するライブラリが存在します。
利用実績が多く、頻繁にメンテナンスされているライブラリを利用すれば、開発の効率を上げられるだけではなく、プログラムの品質を高めることにもつながります。
JavaScriptでの開発にとって、ライブラリは欠かせない存在と言っても過言ではありません。

ライブラリを利用するメリットをいろいろ説明しましたが、ライブラリを利用する際の注意点も実はあります。
間違った使い方をしてしまうと、開発したプログラム全体に悪影響を与える可能性もあります。
ライブラリを利用する前には、次の注意点をしっかり確認しておきましょう。

ライセンスの確認

「著作物」といえば、本や絵などの作品のことを思い浮かぶ方が多いかもしれません。
実は、「プログラム」も法律上「著作物」として扱われています。
つまり、ライブラリは著作物です。
そのため、ライブラリを利用するときには、著作権違反にならないようにあらかじめ決められた「利用規約」、いわゆるライブラリの「ライセンス」を確認する必要があります。

無償利用できるライブラリで多く使われているライセンス形態として、「オープンソースライセンス（OSS）」があります。 「無償利用」といっても、「無制限に利用できる」という意味ではないです。
オープンソースライセンスのプログラムは、「著作者が提示した一定の条件を守るならば、その著作物（ソフトウェア）を利用してよい」という制限のもとで、公開されたものになります。

OSSライセンスの中でも、制限の条件によっていろいろな具体的なライセンスがあり、有名のライセンスの例として、MITというライセンスがあります。
「著作権表示」と「MITライセンスの全文（またはURL）」を記載することで、「商用利用、修正、配布、サブライセンス」が許可される、比較的に制限が緩いライセンスです。
たとえば、さきほどの例で紹介したdayjsも、 MIT License です。
そのため、kintoneの日付操作のカスタマイズでは多く活用されています。

MIT以外にも、より厳しい利用規約が決められているライセンスも多く存在します。
OSSライセンスについてもっと知りたい方は、 OSS ライセンスについて記事を参照してください。

繰り返しとなりますが、ネット上では、多くのライブラリが公開されています。
ライブラリも「著作物」なため、正しく利用するためには、著作権や利用規約の内容を確認することがとても重要です。
ライセンスに違反した場合、コードの作者によって差止請求権が行使され、利用を停止させられるリスクなどもあります。
利用する前には、ライセンスをしっかり確認しましょう。
また、利用中のライブラリでも、ライセンスが変更となる可能性もあります。
利用する前に一度確認するだけではなく、ライブラリのバージョンアップなどのときにも、ライセンスを確認するように気を付けてください。

適用時の読み込みの順序

ライブラリ利用するために、ライブラリのファイルやリンクを開発環境に適用する必要があります。
ファイルを適用する際に順番を間違ってしまうと、エラーが出たり、正常に動作しない場合があるので、読み込みの順序に気を付けましょう。

kintoneカスタマイズの場合、カスタマイズのJavaScriptファイルからライブラリを呼び出して利用します。
そのため、次のように先にライブラリを読み込む必要があります。

kintoneアプリにJavaScriptファイルを適用する詳細の手順は、次の記事を参照してください。
JavaScriptやCSSでアプリをカスタマイズする

補足

CDN

ライブラリを利用するときに、ライブラリファイルを自前のサーバーにアップロードして参照できますが、より簡単にライブラリを利用できる、CDNというしくみもあります。
CDNで提供されているパスから、ライブラリを直接参照できるので、手軽にライブラリを使うことができます。

CDNとは、コンテンツ・デリバリー・ネットワーク（Content Delivery Network）の略です。 CDNは、世界中に分散した配信拠点でコンテンツをキャッシュして、効率的に届けるというしくみです。

CDNサービスで提供されているライブラリを利用すると、キャッシュが有効となり、高速化を期待できます。
さらにバージョンごとのライブラリファイルの管理や、ファイルをダウンロードやアップロードする手間などが省けるので、開発や動作のテストにはとても便利です。
ただし、CDNからファイルが削除される可能性もあるので、プログラムに予期せぬ影響を与える変更が発生する恐れもあります。
外部のCDNに公開されているライブラリを、カスタマイズの本番環境に適用しないように気を付けましょう。

ライブラリを使うと、開発を効率化できたり見た目を簡単に整えることができたりします。
適切な場面で適切なライブラリを使って、効率的に開発しましょう。
次回は Promise と async/awaitについて学習しましょう。