こんにちは、FjordBootCamp(以下FBC)でプログラミングを勉強しているsadanoraです。

FBCに「npmを作る」という課題があり、その名の通り自分で考えて何かひとつnpmを作るプラクティスです。

自分はターミナルに🐣(ひよこ)を降らせるnpmを作ったので、npmの紹介と学びを書きます。

作ったnpm

前述の通りターミナルにひよこが降ります。

-eオプションでひよこに限らず好きな文字を降らせることができます。

使い方

npmが入っていればターミナルで$ npx hiyoko-rainで使えます。*1
-eオプションで好きな文字列を指定できます。
- e.g.)
  - 🍺を降らせる
    - $ npx hiyoko-rain -e 🍺
  - 圧倒的感謝...！を降らせる
    - $ npx hiyoko-rain -e 圧倒的感謝...！
-iオプション(interval)で文字の落下する速さを変えられます。
- デフォルトは150です。0に近づくほど速くなります。

npmサイト上のURL

hiyoko-rain - npm

使い方に書いたことと同じような説明が書いてあります。

なぜ作ったか

プログラミング学習やPC作業に疲れたときに和みたい

プログラミング学習に励んでいるとどうにもわからん、詰まった、という時はよく訪れるのでちょっと馬鹿馬鹿しく和むようなコマンドが欲しいと思いました。

他に検討した案

radikoの番組表を取得するnpm
IMDBから映画の情報を拾ってきて何かするnpm

などがありましたが、ボツにしました。

理由は費用や権利の考慮が面倒だったためです。*2

その結果、外部サービスに依存しない自分の書いたスクリプト内で完結するアイディアに絞ることにし、冗談みたいなアイディアだったひよこを降らせるnpmを作ってみることにしました。

工夫した点など

余計な機能はつけない

当初ひよこを降らせるだけではシンプルすぎるかなと思い、ポモドーロタイマー機能をつけようと思っていました。

しかしこのnpmの目的は「プログラミング学習やPC作業に疲れたときに和みたい」なのでポモドーロタイマー機能は余計な機能だと思い、途中でやめました。

文字が溢れないようにした

文字を降らせる処理は、配列に文字をプリントする行と列の情報をひたすら追加していくのですが、放っておくと要素が増えすぎてターミナルが文字で埋め尽くされます。

画面の下端に到達した要素は取り除くことで解決しました。

const run = (emoji, interval) => {
  let positions = []
  const startingLine = 3

  setInterval(() => {
    const [column, line] = process.stdout.getWindowSize()
    //要素を削除する位置
    const vanishingLine = line - 1
    const printingColumn = Math.floor(Math.random() * column)
    console.clear()

    positions.push([printingColumn, startingLine])
    // Array.prototype.filter()でvanishingLineに到達済みの要素を省いた新しい配列を作る
    positions = positions.filter(position => position[1] < vanishingLine)
    positions.forEach((position) => {
      ++position[1]
      process.stdout.write(`\x1b[${position[1]};${position[0]}H${emoji} \x1b[0;0H`)
    })
  }, interval)
}

元ネタ

このnpmには元ネタがあります。

ターミナルに文字を縦に降らせるってどうやって実装するんだ？と思い文字を縦に降らせる系のコード*3を色々ググっていたところ、ターミナルに🍣を降らせるシェルワンライナーが昔流行ったらしいという情報をみつけました。

Macのターミナル画面から寿司を降らせる至高のコマンドが話題 - KAI-YOU.net

Ruby！

自分にも頑張れば読めそうということで、ここで紹介されているコードたちを読み解いてJavaSciptで実装し直すという方針が固まりました。

Rubyコミュニティの先達に感謝です🙏🙏🙏

まとめ

ちょっとしたスクリプトでも、「作るものを自分で考えてリリースする」という体験にたくさんの学びをもらいました。

良かったらターミナルに好きな文字を降らせて遊んでみてください🐣

*1:一応npmにnpxがプリインストールされるようになったのはnpm5.2.0以降みたいなので、npmが古い場合はnpmのアップデートが必要かもしれない

*2:APIが有料だったり、APIは存在するが公式に利用が許可されているわけではないっぽいなど

*3:マトリックスコードとか

のらブログ

sadanoraが思ったことを書きます

ターミナルに🐣を降らせるnpmを作りました

目次