JavaScriptを勉強していると、「ライブラリ」という言葉をよく耳にしませんか？
でも、フレームワークとどう違うの？何をしてくれるの？と思う方も多いのではないでしょうか。
僕自身、いまいち理解してなくて良い機会だったのでまとめてみました。
この記事では、JavaScriptのライブラリとは何か、そしてよく使われているライブラリの例について、初心者の方でも分かるようにまとめてみました！
✅ そもそもライブラリって？
ライブラリとは、ある目的のために使える便利なコードの詰め合わせのことです。
たとえば、
- 難しい処理をもっと簡単に書けるようにしたり、
- よく使う機能を一つにまとめてくれていたり
と、「道具箱」のような存在なんです。
開発者は、必要なときにその「道具（＝ライブラリ）」を取り出して使います。自分が主導で操作する、という点が特徴です。
📦 代表的なJavaScriptライブラリを見てみましょう！
🔹 jQuery（ジェイクエリ）
- どんなライブラリ？
Webページの要素（HTML）を簡単に操作できるライブラリです。 - 昔はとっても人気で、今も多くの既存サイトで使われています。
例
$('#btn').on('click', function () {
alert('クリックされました！');
});
🔹 Lodash（ローダッシュ）
- どんなライブラリ？
配列やオブジェクトを操作するための関数がたくさん入ったライブラリです。 - JavaScriptでちょっと面倒な処理も、一発でキレイに書けるようになります。
例
import _ from 'lodash';
const nums = [1, 2, 2, 3];
const uniq = _.uniq(nums); // [1, 2, 3]
🔹 Axios（アクシオス）
- どんなライブラリ？
APIとの通信（データの取得など）を簡単にしてくれるライブラリです。 - ネット上の情報を取得したいときに、よく使われます。
例
import axios from 'axios';
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
console.log(response.data);
});
🔹 Chart.js（チャートジェーエス）
- どんなライブラリ？
グラフをかんたんに描けるライブラリです。 - 棒グラフや円グラフなど、見た目もきれいなチャートが作れます。
例
new Chart(ctx, {
type: 'bar',
data: {
labels: ['A', 'B', 'C'],
datasets: [{ label: '得点', data: [10, 20, 30] }]
}
});
🧰 ライブラリを使うメリットと注意点
🌟 メリット
- 複雑な処理がシンプルに書けるようになります
- 時間の節約になります（車輪の再発明をしなくていい！）
- 信頼性の高いコードを利用できます
⚠️ 注意したい点
- 多用しすぎると、何をしているかわからなくなることも
- 古くて更新が止まっているライブラリは避けるのが無難です
🗂 JavaScriptライブラリ比較表
📝 まとめ
- JavaScriptのライブラリは、特定の処理を便利にしてくれるツールです。
- jQuery、Lodash、Axios、Chart.js などが有名です。
- 正しく使えば、開発がぐっと効率的になります！
しっかり調べてみてライブラリは今まで使いこなせてなかったんだなーと実感しました。
ほとんどjQueryしか使った覚えがない。
勉強不足でした。笑
