ライブラリ

ライブラリとは

システムを開発するときに、すべてのプログラムをゼロから作る場合もありますが、より効率的に開発するための手段もあります。
この記事では、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