omae wo kesu houhou （SEARCH）
はじめに
こんにちは！ これはフィヨルドブートキャンプ Part 1 Advent Calendar 2022 - Adventarの17日目の記事です。 昨日のエントリーは、
- pachikuriiiさんの「チーム開発が怖かったときの話をしようか🍵 - 👀pachikuriii’s diary👀」
- tomonariさんの「フィヨルドブートキャンプに参加して1年経ちました。 - tomonariのblog」
でした！
本日のエントリーでは、LEF（自分）の作ったイルカのnpmについてご紹介しようと思います。
概要
こんな感じで動きます。これはテスト用に作成したアニメーションで、実際のnpmとは異なります。
実際のnpmパッケージでは、もう少し凝った動きをします。
下の画像のように、y/nで選択肢を選んだ後に、それに沿ったアニメーションが流れます。
そう、イルカを消すのも消さないのも、あなた自身の選択に委ねられています。運命はいつも一つです。
ネタバレ防止の為、y/n選択後のアニメーションについては、この記事には掲載していません！！
最初はソースコードを覗かずに、何も前情報がない状態でこのnpmを使うことをオススメします。
インストールと実行方法
まずnpmが動くようにします。npmを使えるようにする手順は、とほほさんのこちらのページで確認してください。
npmが使えるようになったら、あとは次のコマンドを打つだけで使えるようになります。
npm install -g please-delete-me npx please-delete-me
npmの紹介ページ
GitHub
GitHub - lef237/please-delete-me: When you want to erase an interfering dolphin, you can erase it.
作ろうと思った動機
自分は現在フィヨルドブートキャンプでJavaScriptについて学んでいるのですが、そのプラクティスの一つに「自分でnpmパッケージを作ってそれをリリースしよう」というものがあります。
さて、何を作ろうか……色々なアイデアが思い浮かんだのですが、どれもあまりピンと来ませんでした。
JavaScriptの特徴の一つに非同期処理というものがあります。
これによって、JavaScriptでは「時間」というファクターを扱うことができ、これらを組み合わせるとインタラクティブな処理を実装したり、アニメーションを作ったりすることができます。
せっかくJavaScriptを使うのだから、この非同期処理を活かしたnpmを作りたい。どうせならアニメーションを作りたい。と思ったときに思いついたのが、アスキーアートを動かすことでした。💡
アスキーアートとは、ascii文字で構成されたイラストのことを指します（厳密にはシフトJISアート）。
例えばこんなやつです。
こうしたアスキーアートを文字列としてターミナル上に表示して、一定時間ごとに差分のある別の文字列へと切り替わるようにしたら、アニメーションを作ることができるのではないだろうか？
そして、できたものが上のnpmパッケージになります。
実装する上で難しかった点
- 別のJSファイルから
index.jsへの変数の読み込み - 文字の標準入力によってその後の処理を分岐させること
setTimeout()とsetInterval()を組み合わせて、段階的な画面の遷移後に、切り替え表示へと処理を移したこと- アスキーアートの差分データを手打ちしたこと
- 非同期処理
- 標準出力で画面をリセットすること。一連の処理が終わった後にプロセスを終了させること
- npmパッケージのリリース方法
GitHubのソースコードを読んで頂けると、自分が苦しんでそうなポイントがより分かりやすく見えてくると思います。
まとめ
実際に作り始めるまでは、本当に自分で想像していたものが作れるのか、とても不安でした。
しかし、実際に調べながら手を動かしてみると、ちょっとずつ自分の頭に思い浮かんでいた処理が実現していき、とても嬉しく感じました。
一番大切だと思ったのは、問題を分割することです。最初はもっと単純な文字列……例えばone,two,threeといった単語をターミナル上に表示させて、それを画面上で切り替えることで手応えを掴んでいきました。
初めから完璧なコードを書くのではなく、「画面に文字を表示する方法」「画面の文字を消す方法」「一定時間ごとに処理を遷移する方法」「一定時間ごとに交互に処理をする方法」……とそれぞれの方法を確認して確かめてから、それらを組み合わせていった感じです。
問題を分割し、すぐに実装できるくらいに単純化してみる。処理の多いプログラムを書く第一歩は、これが適しているように思いました。
皆さんもイルカを消して、日々のストレスを発散してみてください。🐬
これがLEFから皆さんへの、クリスマスnpmプレゼントです。🎄🎅🎁✨
※ちなみに、このnpmにはイースターエッグも用意されているので、暇な方はぜひ探してみてください！
明日のアドベントカレンダー
明日のエントリーは、Part1がParuさん、Part2がmasuyama13さんです！ おふたりともフィヨルドブートキャンプの大先輩です！ 楽しみ🎉
