NPMによるインストール推奨！開発時によく利用するjavascriptライブラリ5選

今回は、javascript開発時に特に入れておくと便利なパッケージを紹介します。

ここで紹介するパッケージは開発時にほぼ使う可能性が高いパッケージとなります。

自身の環境にあったパッケージをインストールすること推奨します。

＼自身のスキルを向上するには技術書で！！／

月額¥980で技術書が読み放題！！

ビジネススキルとマインド向上したい！！
決断や行動を先送りにしてしまう方！！

Kindle Unlimitedでは30日間無料体験実施中！登録はこちら！

npmのインストール
開発時によく利用するjavascriptパッケージ
最後に

npmのインストール

まずはnpmのインストールを行います。今回はHomebrewを利用してインストールを行います。

基本的にHomebrewを利用してnodebrewをインストールするのですが、このnodebrewを使ってNode.jsをインストールすることでnpmも自動で利用できるようになります。

'Homebrew Install'
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

'nodebrew install'
$ brew install nodebrew

'Node.jsのバージョンを確認'
$ nodebrew ls-remote

'バージョンを指定してインストール'
$ nodebrew install-binary {version}

'インストールしたバージョンを有効化'
$ nodebrew use {version}

'npmインストール確認'
$ npm -v

上記が簡単なインストール手順となります。

開発時によく利用するjavascriptパッケージ

dayjs

dsyjsライブラリは日時を扱うためのライブラリとなります。とても軽量で2kb程度のサイズとなります。

npm install dayjs

import dayjs from 'dayjs'
dayjs().format('YYYY-MM-DD HH:mm');
let odate = dayjs('2022-11-23 10:06').toDate()

console.log(odate)
// 2022-11-23T01:06:00.000Z

qs

URLのクエリを解析し、文字列化する便利なjavacriptライブラリです。parseを利用すると、javascriptのオブジェクトに自動的に変換してくれます。stringifyを利用するとオブジェクト形式を文字列に変換してくれます。

npm install qs

import qs from 'qs'  

let val = qs.parse('user=kunisura&age=22')
// { user: 'kunisura', age: '22' }

js-cookie

js-cookieライブラリは文字通り、cookieの操作をすることができるライブラリです。期限付きのCookie保存処理など一通りの機能が備わっています。

npm install js-cookie

import Cookies from 'js-cookie'  

// 7日間の期限付きcookieの設定
Cookies.set('myName', 'Kunisura', { expires: 7 }) 
Cookies.get('myName') 
// value => 'Kunisura'

flv.js

flv.jsはフラッシュプラグインなしでブラウザ上でFLVビデをを再生することができるプラグインとなります。

npm install flv.js

import flvjs from 'flv.js'

// レンダリング後の設定 
if (flvjs.isSupported()) {
  var myVideo = document.getElementById('myVideo')
  var flvPlayer = flvjs.createPlayer({
    type: 'flv',
    url: 'http://localhost:8080/example.flv'
  })
  flvPlayer.attachMediaElement(myVideo)
  flvPlayer.load()
  flvPlayer.play()
}

Chart.js

グラフを簡単に作成することができるライブラリが、このChart.jsです。かなりのユーザがこのライブラリを利用していますので、グラフ系処理は本ライブラリを利用することを推奨します。

npm install chart.js

import Chart from 'chart.js/auto'
const ctx = document.getElementById('myChart')
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [
      {
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }