ライブラリー

ライブラリーとは

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

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

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

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

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

よく使うライブラリー

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

dayjs

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');

sweetAlert

カスタマイズで、確認フォームを表示させるために「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 について学習しましょう。

はじめよう JavaScript