やなぎにっき

学んだことの記録

コマンドライン上でGitHubの草を生やすnpmを作った

f:id:yana_g:20210602142503p:plain フィヨルドブートキャンプではJavaScriptのプラクティスとしてnpmを作る課題があります。

自分はGitHubの草をコマンドライン上で表示するnpmを作りました。

www.npmjs.com

作ったもの

ユーザー名を指定すると草を表示させることができます。

1回でもコントリビューションすれば草🌱を生やします。

$ emoji-grass <username>
    🌱  🌱🌱🌱    🌱🌱🌱    🌱    🌱  🌱🌱🌱🌱          🌱  🌱        🌱🌱              🌱      🌱  
  🌱  🌱        🌱          🌱🌱            🌱    🌱          🌱    🌱  🌱      🌱      🌱🌱🌱      
    🌱        🌱🌱      🌱      🌱🌱  🌱        🌱    🌱      🌱        🌱  🌱    🌱      🌱  🌱    
        🌱        🌱            🌱    🌱🌱🌱              🌱    🌱              🌱    🌱  🌱        
          🌱              🌱      🌱    🌱  🌱🌱🌱            🌱  🌱🌱🌱🌱🌱🌱  🌱🌱🌱🌱  🌱  🌱  🌱
🌱🌱🌱    🌱    🌱                    🌱  🌱  🌱  🌱        🌱  🌱        🌱  🌱        🌱  🌱  🌱🌱
  🌱      🌱🌱  🌱    🌱      🌱  🌱      🌱                  🌱        🌱🌱🌱  🌱    🌱🌱    🌱  🌱

デフォルトでは草🌱ですが、オプションで好きな文字を指定することもできるようにしてみました。

$ emoji-grass -c 🍺 <username>
    🍺  🍺🍺🍺    🍺🍺🍺    🍺    🍺  🍺🍺🍺🍺          🍺  🍺        🍺🍺              🍺      🍺  
  🍺  🍺        🍺          🍺🍺            🍺    🍺          🍺    🍺  🍺      🍺      🍺🍺🍺      
    🍺        🍺🍺      🍺      🍺🍺  🍺        🍺    🍺      🍺        🍺  🍺    🍺      🍺  🍺    
        🍺        🍺            🍺    🍺🍺🍺              🍺    🍺              🍺    🍺  🍺        
          🍺              🍺      🍺    🍺  🍺🍺🍺            🍺  🍺🍺🍺🍺🍺🍺  🍺🍺🍺🍺  🍺  🍺  🍺
🍺🍺🍺    🍺    🍺                    🍺  🍺  🍺  🍺        🍺  🍺        🍺  🍺        🍺  🍺  🍺🍺
  🍺      🍺🍺  🍺    🍺      🍺  🍺      🍺                  🍺        🍺🍺🍺  🍺    🍺🍺    🍺  🍺

1文字ならなんでも表示できるようにしているので絵文字に限らず文字を指定できます。

文字通り(?)草を生やすことも可能です。

$ emoji-grass <username> -c 草
    草  草草草    草草草    草    草  草草草草          草  草        草草              草      草  
  草  草        草          草草            草    草          草    草  草      草      草草草      
    草        草草      草      草草  草        草    草      草        草  草    草      草  草    
        草        草            草    草草草              草    草              草    草  草        
          草              草      草    草  草草草            草  草草草草草草  草草草草  草  草  草
草草草    草    草                    草  草  草  草        草  草        草  草        草  草  草草
  草      草草  草    草      草  草      草                  草        草草草  草    草草    草  草

使い方

追記(2021/06/11)

インストールの詳細を同じフィヨルドブートキャンプ生であるトミーさん(id:eatplaynap329)に分かりやすくまとめていただきました!ありがたい〜!

eatplaynap329.hatenablog.jp

JavaScriptやnpm、トークンのことを分かっていなくても、こちらの手順を見ればどなたでも使うことができると思います!!


グローバルインストールをします。

$ npm install -g emoji-grass

実行するにはトークンの設定が必要です。

https://github.com/settings/tokens でアクセストークンを発行してください。

権限のスコープは何も設定しなくても実行できます。

privateリポジトリを含めた結果を表示したい場合はrepo:statusにチェックを入れてください。

個人アクセストークンを使用する - GitHub Docs

トークンを発行したら、以下のコマンドを実行してトークンを設定します。

$ emoji-grass settoken <token>

~/.grass_envトークンを書く方法でも設定できます。

$ echo 'GITHUB_TOKEN = <token>' > ~/.grass_env

設定が完了したら

$ emoji-grass <username>

で実行できます🌱

-c オプションを付ければ表示する文字を変更できます。

$ emoji-grass -c 🍺 <username>

苦戦したこと

contributionの取得

もともとほとんどAPIを使ったことがなかったんですが、草の情報(contribution)を取得するAPIはREST形式がなくGraphQL形式のみ提供されていたためGraphQLの使い方に苦戦しました。

GraphQLを使った手順のことは別の記事に書いてみました。

yana-g.hatenablog.com

1文字の判定

$ emoji-grass -c 🍺 <username>のように他の文字を表示するコマンドでは表示する文字を1文字にするバリデーションをつけています。 この「1文字」の判定が思った以上に難しく苦戦しました。

単純に'🌱'.lengthをしてみると1じゃなくて2が表示されてしまうことに気づき、文字コードに関する記事を読んでlengthは「カーソルが 1 つ移動する分」ではなく「コードポイントの数」を取得していることを知りました。

文字コードのことは全然理解できていないです……。)

結果的には「カーソルが 1 つ移動する分」として見えている文字の数をカウントできるライブラリを使う方法で解決しました。

参考

JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io

graphemesplit - npm

作った感想

今までフィヨルドブートキャンプの課題では決められた仕様のアプリを作るのが中心だったので、今回のように自分でアプリや仕様を考えて作るのは初めてのことでした。 もちろん決められた仕様のものを作る楽しさもあるんですが、自分で考えたアプリを作るのは考える段階からわくわくするほど楽しかったです!

自分が欲しいと思うもの・あったら面白いなと思うものを形にすることは、絵を描くことや工作をするものづくりに通づる面白さがありますね。

自分はカリキュラムが後半の方で卒業まで残すプラクティスはチーム開発は自作サービス作りなのですが、そこでチーム開発や自作サービスだからこそ得られる楽しさを感じることができたらいいな〜と思っています。

追記(2021/06/11)

この記事を書いてフィヨルドブートキャンプのDiscordやTwitterで宣伝したところ、たくさんの人に使っていただきました!

Twitterに投稿していただいた方のツイートを抜粋。



自分が欲しいなと思うものを作ったら、作るのが楽しい→完成したら達成感がある→使って貰えて嬉しい……と全ての過程でいいことばかりでした。

上記に書いたGraphQLや文字コードに苦戦したり、プラクティスの想定される所要時間以上に時間を使ってしまったりと苦労したこともあったんですが、いろんな方に使って貰えた喜びを得られたので良しとします。

仕様が決まっていない、不確定要素の多いものを作る側の苦労というものも知り、サービスやOSSを作る人の立場も少しだけですが知ることができました。

自分が作ったもの・関わったに対して反応がくるというのは何ものにも代えがたい嬉しさがあるので、自分もこれから何かしらの形で作り手に敬意を伝えることもしていきたいです。