NPMパッケージを探る！フロントエンドの大冒険 〜chalk編〜

何よりもまず、何かをやりなさい
フランクリン・D・ルーズヴェルト(アメリカ合衆国第３２代大統領)

はい、やります。ルーズヴェルト先輩。

こんにちは、フロントエンドエンジニアのザワです。

最近思うんですよ。興味・好奇心が薄れることが一番の恐怖だと……。ということで今回から、今まで注目していなかったNPMパッケージの世界に足を踏み入れることで自身の好奇心を煽っていきたいと思います。

記念すべき第1回目にご紹介するNPMパッケージは、chalk。

なぜchalkを選んだかって？ NPMのサイトを見ると、「Most depended-upon packages」に名を連ねているからです。いろいろなNPMパッケージに頼りにされているパッケージということですよね、きっと。

そして、パッケージ名がchalk。「チョーク」といえば、黒板とチョークと日直の画が頭に浮かびます。もしくはチョークスリーパー。どちらもWeb開発とはかけ離れたアナログな印象があるので、一層に興味が湧きますよね。

……さて、前置きはこれくらいにして、さっそく冒険を始めましょう。
※Node.jsはマシンにインストールされている前提で進めていきます。何卒ご了承ください
 

chalkとは

https://www.npmjs.com/package/chalk

ターミナル文字列のスタイリングをしてくれるパッケージです。

どうやら、冒頭に話した黒板とチョークはあながち間違っていなかったようです。ターミナルの黒い画面が黒板、タイプして表示される文字はチョークで描かれる、ということですね。

chalkの目的はこれではっきりしたと思います。習うより慣れろ、ということでデモを進めていきましょう。

デモ

ターミナルを開きましょう。

今回のプロジェクト名はkokuban（黒板）としましょうか。プロジェクトを作成、ディレクトリに移動します。

$ mkdir kokuban
$ cd kokuban

package.jsonを作成します。

$ npm init -y

chalkパッケージをインストールします。

$ npm install -D chalk

index.jsを作成します。

$ touch index.js

ここまでで、ファイル構成はこのようになっていると思います。

node_modules
index.js
package-lock.json
package.json

npm run kokubanコマンドでindex.jsを実行できるように、package.jsonのscriptsに追記します。

{
  "name": "kokuban",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "kokuban": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chalk": "^2.4.1"
  }
}

index.jsを開いて編集します。まずは、index.jsでchalkを使えるように読み込みましょう。

const chalk = require('chalk');

ここから、ターミナルに文字をスタイリングして表示していきます。
※筆者のターミナル環境は、黒背景に緑の文字色がデフォルト設定です

文字色

console.log(chalk.blue('青文字だよ！'));

記述したら、npm run kokubanコマンドを実行してみましょう。

黒背景に青文字は視認性が極悪ですね！ 続けてどんどんいきます。

背景色

console.log(chalk.bgRed('背景色は最初にbgってつけるんだよー'));

太文字

console.log(chalk.bold('太いよ！'));

下線

console.log(chalk.underline('下線っていぶし銀だよね'));

文字列連結

console.log(chalk.white('文字くっ') + 'つく' + chalk.red('!'));

ネスト

console.log(chalk.red(chalk.underline('ネストもできるよ')));

文字色をキーワードで指定

console.log(chalk.keyword('orange')('オーレンジ！'));

chalk.blue()のように呼べる色はかぎられています。そのため、keyword()、rgb()、hex()でも色を指定できるようになってます。

文字色をRGBで指定

console.log(chalk.rgb(123, 45, 67).underline('R・G・B! R・G・B!'));

文字色を16進数で指定

console.log(chalk.hex('#DEADED').bold('16進数ってちょっとお堅くない？'));

 
ここでご紹介したものはchalkができることの一部なので、全貌は公式サイトをご覧ください。

最後に

NPMって本当にいいものですよね。NPMパッケージは星のようにたくさんあるので、これからどんなパッケージに出会えるか楽しみです。

自分の経験値にない領域を冒険すると、刺激を受けたり、アイディアが浮かんだり、自分に足りない部分が見えてきたりするもの。旅から帰ってきた子供を見ると、急にたくましくなった感じがしますよね。子供いたことないけど。

また刺激を欲したら、NPMパッケージ探しの旅に出たいと思います。それではよき制作ライフを！

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。