桐生あんずです

日常やプログラミングについて書いています。

JavaScript研修を受けて身に付いたこと

入社してから2週間ほどJavaScriptメインで研修を受けさせていただいて大変勉強になったので、印象に残った出来事や参考になった文献を書き残しておきます。

ESLintの使い方を覚えた

簡単に説明すると規約に沿っていないJavaScriptのコードの記述に対して指摘してくれたり--fixオプションを叩くだけで自動整形してくれる超絶便利なツール。

qiita.com

今まではあまり使う機会がなかったのだけれど、今回の研修のカリキュラムでESLintの導入を丁寧に解説していただいて使い方を覚えることができた。ちなみに今の所はJavaScript Standard Styleのルールを適用して使っています。

Node.jsでCLIツールを作れるようになった

研修の課題では、CLI上でカレンダーを表示できるアプリケーション(要はcalコマンドみたいなやつ)や、CLI上でecho '"hoge" | node memo.jsと打つとsqlite3のDBに保存されて、node memo.js -r といったようなコマンドライン引数の内容によってメモの一覧・詳細・削除が実行できるアプリケーションを作った。

CLI上で標準入力を読み込んだりコマンドライン引数の中身をチェックする処理はJavaScriptではあまり書いた事がなくて調べながらやっていたのだけれど、処理を用意する上で便利なライブラリがそこそこ用意されていて面白かった。

例えば、コマンドライン引数のオプション処理の中身を簡単にチェックしたい時はminimistというモジュールを使うなどしていた。

github.com

対話形式のインターフェースを用意したくなった場合も、inquierやcacjsなどといったライブラリを使うことで簡単に実装できる。

www.npmjs.com

qiita.com

最初は分からないことも多かったけれど、便利なライブラリを使いつつCLIでのアプリケーション作成ならではの利点として比較的短めのコードですぐ動かす事もできるのでJavaScriptを改めて学ぶのに良い学習方法だったと思う。

Promise/Async Functionの概念をじっくり学ぶ事ができた

また、CLI上のメモアプリを作る上で使用したNode.jsのsqlite3モジュールのDB処理は非同期処理で用意されているので、処理を指定した通りの順番で動かすようにする必要があり、その際にPromiseとasync/awaitの概念について格闘しながら勉強して実装することができた。

苦しい闘いだったけれど確実に身になる経験だったと思う……。 学ぶ上ではJavaScript PrimerとPromise本が非常に役立った。

jsprimer.net

azu.github.io

JavaScript Primerは書籍版がもうすぐ発売なので気になる人はぜひ買いましょう。

JavaScript Primer 迷わないための入門書

JavaScript Primer 迷わないための入門書

自作npmをpublishした

個人的にはこれが一番楽しかった課題で、「自作npmをアイデアを用意して作ってみよう」というお題を最後の課題として出していただき、CLI上で動くスロットゲームを作ってnpmライブラリとして出してみた。

kiryuanzu.hatenablog.com

数日経ってチェックしてみたら全世界から204回ほどDLしてびっくりした。先ほど見たら合計DL回数が300回以上になっていてどの界隈の人々が触ってくれているのかめちゃくちゃ気になっている。

また、研修中にかなり丁寧にレビューしていただきどんどんとコードがブラッシュアップされていって本当にありがたかった。

例えば、今まで文字列の結合を行う際に頑張って+を使って連結させていたのだけれど、テンプレート文字列という便利構文があることを教えていただいたのでこれからはこっちを使おうと思った。

テンプレート文字列 - JavaScript | MDN

まとめ

今までJavaScriptというと個人開発やバイト先で感覚で頑張って書く事が多かったのだけれど、研修を受けたことでかなり理解度が上がって本当に良い体験だった。

上記の話以外でも、追加課題としてVue.jsの基本的な書き方や設計などにも改めて触れることができたりと、一気にインプットが進んだと思う。

ただ、業務に関わっていくにはまだまだ基本の分野ではあると思うので、今回研修で受けた事を思い出しつつ今後も学習を続けていきたいです。

先週作って公開したnpmのライブラリがなぜか全世界から200以上DLされていた

桐生あんずです。

会社のフロントエンドエンジニアの方々とオンラインランチをしている際に自分が先週作ったライブラリ(https://www.npmjs.com/package/cli-slot)について言及していただくことがあり、画面共有しながらnpmのサイトを眺めていたら全世界から204回ほどDLされていることに気付いた。

www.npmjs.com

どこから引っかかったのか謎ではあるのだけれど、Twitterやブログから辿ってくれたり、完全な想像の話だけどnpmのサイトで新しいパッケージをウォッチし続けている界隈がもしかしたら存在していてそこの人々がDLして遊んでくれたのかもしれない。

 

数日前に最初のバージョンで起きていた不具合をいくつか修正して少しだけ遊びやすくなってるので、簡単なゲームではありますがもし興味ある人は遊んでみてください。

 

「楽々ERDレッスン」を読んだ

会社のデータベース設計研修の課題図書として「楽々ERDレッスン」を紹介していただいたので1日でザッと読んでみた。

楽々ERDレッスン (CodeZine BOOKS)

楽々ERDレッスン (CodeZine BOOKS)

第一部、第二部でデータベース設計の基礎知識、RDBMSSQLの総論について学びつつ第三部では病院の受付表や電気料金の請求書といった具体的な事柄をテーマにしてテーブル設計を進める上での流れや気を付けることについてまとめられていて分かりやすかった。

特に第三部に関しては研修で重点的に読むように勧められていたこともあって、実践的に学べてすぐに活かせそうな情報が多かったように感じた。この章の中では、8つほどの問題がテーマ別で紹介されており最初のページでリアルな注文票や受付表を紹介した後に実際にテーブル設計を考えていく上でどういう手順を踏むべきか解説する構成になっている。

でも、ただ読むだけだとどういったテーブル設計をすべきなのかすぐに答えを知れてしまって自分で考える力が身につかなそうだったので最初のページ(リアルな注文票、受付表の画像)を見てどういったテーブル設計をすべきか書き出したりしてみながら後で解説を読むと更に納得度が増してとても勉強になった。(ただ読むだけでも十分面白いとは思う)

この本の中で取り上げられているテーブル設計を考えていく手法として、イベント系(予約・注文・受付など)のテーブルを見出してからリソース系(顧客・商品など)のテーブルを用意して正規化を行っていく というフローがすごくイメージしやすくて良かったので今後テーブル設計を行う際にはこの流れを意識しながら進めていこうと思った。


これは余談だけど、文中では作者の年齢について1968年生まれで30台後半と述べてあって一瞬混乱してしまい、本の発行年を確認したら2006年で納得した。 それを考えるとこの本が約14年間もDB設計の参考書として勧められているということなので、めちゃくちゃ凄い話な気がする。

6年間ほど在籍していたサークルクラッシュ同好会を卒業しました

桐生あんずです。(最近この前置きを忘れていた気がする)

この記事はサークルクラッシュ同好会の新歓リレーブログ企画に参加する上で書かれたものです。

am6.hatenablog.com

前回は藍鼠(id: indigomou5e)くんの「誕生日に生き方の転換ができた話」でした。

誕生日おめでとうございました。

1, 前置き

実はちょうど2年前に原型となる新歓企画を自分がやっていて「あなたはなぜサークルクラッシュ同好会に入ったのか」というテーマで以下のような記事を出していました。

circlecrash.hatenablog.com

その企画を今回後輩のろくじ(id: gozen_rokuzi_am6)ちゃんが引き継いでくれて大変嬉しかったので、1ヶ月ほど前に卒業した身であるのは承知ですが参加させていただくことにしました。

今回のお題は「あなたにとってサークルクラッシュ(同好会)とは?」です。3月に追いコンに参加した際の思い出と今現在の心境を小出しにしつつ書いていこうと思います。

 

2, 追いコンに参加した日のこと

コロナウィルス関連で本格的にざわつき始める少し前の時期にサークラ同好会の追いコンは行われた。

「追い出す側」としてサークルの追いコンに参加することも幹事をやることはこの6年間で何度も経験したけれど、「追い出される側」になったのはこれが初めてで不思議な心境だった。

メディア芸術の研究サークルやラーメンを研究するサークル、合唱サークルなど色々なサークルに入っていた。

6年も大学に居残っていると、幽霊部員になって関係が自然消滅してしまったりサークル自体が消滅していたり、社会人サークルとして存続していても皆生活が忙しくて集まれなかったりで、追い出される側として「サークルの追いコン」という儀式自体に参加できたのはサークルクラッシュ同好会だけなのがちょっぴり面白いなあとなった。(人間関係を長期的に続かせる才能がないだけかもしれないけど……)

追いコンの日の前にちょうどサークラ同好会の後輩の子と会う用事があって、帰り際にプレゼントが入った紙袋をいただいた。

追いコン会場に向かう前に一旦家に戻って中身を見た所、プレゼントと一緒に手紙が入っていた。内容を読むと今まで自分がサークル内でやってきた活動について言及されつつお礼の言葉が書いてあって感動してしまい涙目になってしまった。

そういえば自分も合唱サークルにいた時に先輩へのお礼のメッセージをを送ったことがあったな、と思い出してそういうことをしてもらえる側にやっとなれたんだな、と「追い出される側」になった実感がじわじわと湧いてきた。

 

追いコン中も、ホリィ・センが今年で卒業したサークラ同好会元会長のかしぱんの為に会員・元会員・関係者からかき集めてきた電報を約9分間ずっといつもの口調で読み上げるイベントがあったり3,4年ぶりに遭遇したサークラ会員の子とまた話すことができて面白かった。

追いコンが終わった後は、10人以上の人たちと一緒に夜の鴨川を眺めながら出町柳を北上してサクラ荘10号館で深夜までだらだらして疲れを感じ始めた頃にタクシーで帰った。

そんな時間を過ごした後、「飲み会の後に鴨川と京大のそばにあるシェアハウスでだらだらする行為、人生で後何度やれるんだろうな」とふと思ったりした。

 

3, 今の自分とこれからのサークルクラッシュ同好会との付き合い方

そんなことを思ってから約1ヶ月が経ち、社会人という立場になってから既に2週間が経過している。

社会人生活が始まった直後、実家のテレビで録画されていたNHKの新日本風土記の「京都 青春物語」をふと見たのだけれど、つい1ヶ月前は「同じ側」だったはずの学生たちが「向こう側」にいるような遠い存在として目に映ってしまったのが印象的だった。*1

まだ京都を去ってからそんなに時間が経っていないはずなのに、「あの6年の学生生活はもしかして夢だったのか?」と思うぐらい手には届かない出来事になりつつある。

 

ただ、今の社会人生活の方が学生の時よりも心穏やかな環境で過ごせている実感がある。その理由の一つは明確で、会社という一つの共同体に所属し「やるべきこと・勉強すべきことが明確に決まっている」状況下に置かれるようになったからだと感じている。

大学生になりたての頃は自由を与えられすぎた結果、何をしたらいいのか全く分からなくなり、その結果とにかく様々なサークルに入ることで人間関係を作るようになって、その一つがサークルクラッシュ同好会の人間関係だった。

そこの繋がりから様々なきっかけが生まれてDTPやプログラミングを始めるようになって、今このような状況になっているのでサークルクラッシュ同好会に所属しなかった世界線では自分がどう生きているか分からない所がある。その面では本当に感謝すべきのように思う。

 

ということもあり、恩返しも兼ねて老害にならない程度に今後も現会員の活動はできるだけ応援していきたい気持ちです。

 

新歓の宣伝っぽいやつ

物理的な場所で新歓の実施は自粛している模様ですが、Discordを利用してリモート上で新歓活動を行なっているみたいです。

昨日は「怒られるのが苦手」というテーマで当事者研究を行なっていたみたいです。楽しそうですね。

 

気になった人は入ってみてはいかがでしょうか。

discordapp.com

そんな感じです。6年間本当にありがとうございました。

*1:ちなみにこの放送は既に3年前のもので、取材を受けていた大学生たちさえもそのように思っているのではないかとなんとなく想像している

Node.js製のCLI上で動くスロットゲームをnpmにパッケージ公開した

経緯

kiryuanzu.hatenablog.com

新卒研修で自作npmを作ろうという課題があり、CLI上で動くスロットゲームのライブラリを作ろうと思い先週の木曜から作成に着手し始めていた。

イデア図の一部

f:id:kiryuanzu:20200415005500j:plain

そして今日、無事パブリックに公開することができた。

www.npmjs.com


見た目は以下のような感じです。

主に頑張ったこと

  • keypressというnpmパッケージを利用してキー入力を検知するようにし、タイミングに合わせてEnterボタンを押すと数字を取得して配列に入れるようにした

www.npmjs.com

 

  • setTimeout()とclearTimeout()を駆使してループ処理・終了の実装を用意した。timeoutIDを変数に保存してゲーム終了時にclearTimeout(timeoutID)してループ処理を終了させるようにした。

developer.mozilla.org

 

まとめと反省点

3回までゲームを続けることができて最後まで続けると点数とそれに合わせたメッセージが表示される作りになっている。

そのようにCLI上でゲームっぽい作りを用意することができ、新卒研修の目標課題として設定されていた初めてnpmパッケージを公開するという行為も達成できたので一応満足ではある。

だけれども、ゲーム面の処理は雑な箇所もいくつか残っており機会があれば知っている人たちに直でコードレビューしてもらいたさがある。

 

ちなみに、参考になりそうな実装がないかnpmのサイトで調べてみたけれど、名前はそれっぽい名前のnpmパッケージもあっても、スロットの中身を用意するライブラリやHTML上でスロットゲームを生成するライブラリばかりで自分がイメージしていたライブラリはなさそうだった。

www.npmjs.com

 

ただ、CLI上でテトリスができるnpmパッケージを出している人がいてかなり興味深かった。

www.npmjs.com

実際に触ってみた所、すごく見た目がちゃんとしていて処理もそれっぽく動いててここまでやれるとめっちゃ良さそうなので今後CLI上でゲームを作りたくなったら参考にしたい。(このnpmパッケージもkeypressライブラリを導入してキー入力を検知している)

gyazo.com

(テトリス久々にやってみたらできなさすぎて全く消せてなくて悲しい)

Zoom飲み会に参加した

Zoomの背景カスタムでまだ遊んだことがなかったので、集中線の画像のフリー素材を見つけて使ってみた。

最初うまく背景画像として登録できなくて困っていたら、元の画像サイズがでかすぎるのが原因で400px × 225pxまで小さくしたら登録できた。

 

これはビデオ通話自体の話なのだけれど、就活の時によく利用するリアルコミュニケーションよりはどうしてもうまく喋れなくて辛い思いをすることが多かった。

そういった感じであまり良い思い出がなかったのだけれど、会社の研修や飲み会で毎日使い始めるようになったのと、AirPodsを買ったことで声を頑張って張らなくても話せることが可能になったおかげで苦手意識はなくなってきたような気がする。

この状況だと、インターネットの人と飲みたくなった時はビデオ通話がメインになることがしばらく続きそうなのでもっと慣れていけると良さそう。

 

あと、Zoom背景にソフマップや例のプールの画像使うのめちゃくち面白いなとなっているんだけど、リアルアバターのまま何気なく使うと気まずい感じになりそうな予感がするのでバーチャルアバターを手に入れて使ってみたい(そういう問題ではないと思うけど)

 

ノートPC用のスタンドを買って作業環境を改善しつつある

以下の記事に紹介されていたノートPC用スタンドが良さそうなので早速Amazonで注文して昨日届いたので今日から使い始めた。

note.com

www.amazon.co.jp

 

今まではどうしても首の角度を下げがちでつられて姿勢も悪くなってしまい退勤後に身体の疲れを感じることも少しあったのだけれど、このアイテムを導入して視線をまっすぐにしたままPCの画面を見れるようになったことで疲労が軽減されたような気もする。

そして首を曲げなくても良くなったことで、以前より疲れずに画面を見続けることもできて作業もしやすくなった感覚がある。

 

今まではMac内蔵のキーボードとトラックパッドでずっと操作をしていたのだけれど、スタンドでPCを立てるようになったので会社から支給されたMacアクセサリのキーボードとマウスを使うようになった。

www.apple.com

キーボードの方は慣れるか心配だったけれど、触り始めると柔らかめな質感が癖になってきて違和感はなくなってきている。

 

リモートグッズ、そのほかにもAirPodsを先週から使い続けているのだけれど基本的に使い心地は良い。(以下の記事で購入したときのことを書いている)

kiryuanzu.hatenablog.com

イヤホンマイクだと小声で話しがちでもちゃんと聞き取ってもらえることが分かる安心感があって、以前よりもボイスチャットをする際の心理的ハードルが下がったかもしれない。

ただ、昼休みの時にリビングでご飯を食べていて一瞬テーブルに置いていたら母親にゴミだと勘違いされて捨てられそうになる事件があったので管理には注意が必要そう。

(自分の場合、親の干渉がなかったとしても気が抜いたらすぐに無くしそうな危うさがあると思うので気を付けたい……)