みんなの「作ってみた」

RxJSの各Subjectの挙動の違いを試せるデモを作った

2019/02/02

rena_m
rena_m
大学で翻訳や通訳の勉強をしたのち、就職してからプログラミングでのものづくりの楽しさに目覚めました。しばらくは通訳スキル・翻訳スキル・技術力向上のために色々学んでいきたいです。可愛くて役に立つものを作りたいです。

一言で説明

Angular歴半年あるかないかの私がRxJSのsubjectと触れ合えるデモページを作成しての感想と反省、抱負を述べます。初心者の方におすすめの本や役に立ったサイトも併せて紹介します。

Hello,Subjects!

RxJSには四種類のSubjectがありますが、きちんと使いこなせているでしょうか？
検索すればいくらでも説明やわかりやすいマーブルダイアグラムが出てきます。でも、勉強したての時に一気に読んだって覚えられないし、そんなにまだRxJSを使ったコード書いてもいないとピンと来なかったりします。ということで、それぞれのSubjectの違いをビジュアル的に理解するためのデモサイトを作ってみました。

：Hello,Subjects

まだまだ追加したい内容や直したいところはたくさんありますが、抱え込んで全てを消化するまで待っているとどんどん時間が経ってしまうと思ったので一度区切りをつけて公開することにしました。そこまで複雑な機構のあるものではありませんが、ぜひsubjectと触れ合いに来ていただければと思います。ちなみにもしRxJS初心者の方がいれば、前回の記事では具体的にRxJSのsubjectの取り扱い方をまとめたのでよければそちらもどうぞ:snowflake:

反省 (アニメーション編)

「かわいくて、わかりやすくて、役に立つ」が作れるエンジニアを目指しているので、今回も色々可愛い要素を取り入れたつもりです。結構ガーリーなかわいさに寄った印象ですね。知識としては多少知っていたものの、これまでほとんど実際に手を動かしてアニメーションを使ったことがなかったので、そこそこ苦戦しました。

アニメーションをもっと思い思いにかけるようになると一段上のクオリティを目指せるのではないかと感じるので100DaysCssとかを地道に続けてアニメーションに強くなりたいです。今回はちょうどforwardsでアニメーションを2つ繋げることに挫折したので、目下スムーズにアニメーションを繋げることができる、を目標にしたいと思います。

以前Youtubeで見た講演で、「認知的負荷を減らすためのアニメーション」について知りました。ただ可愛さを出すためだけでなく、こうして役に立つアニメーションの利用もマスターしたいです。

反省 (制作時間)

本当は昨年末には一旦目処をつけたいと思っていたのですが、だんだん実装したい内容が増えたり、単純に忙しかったりで長引いてしまいました。個人開発だと人を巻き込む納期が存在しないので、あれもこれもとつい進めてしまい、満足するまで着地できなくなりがちで良くないですね。次回以降この反省はきちんと生かしていきたいです。

途中でIssueによる管理をはじめてから、ラベルをつけたりするときに「これは今すぐやらなくても最低限の動きは担保できるな」とか「これはbugだからenhancementのものより優先してやらないとな」などの整理がしやすくなったのでよかったです。個人開発だとしても、頭の中に構想をまとめておくのではなく、アウトプットして整理した方が捗ると感じました。ということで、Issue管理おすすめです。

感想(AWS Amplify)

デプロイにはAWS Amplifyを使いました。以前cliを使ってデプロイしたことがあったのですが、今回はコンソールのGUIから行いました。個人的にはcliよりこっちの方がスムーズでした。cliも驚くほどスムーズではありますが、一度作成した後の管理はコンソールの方が楽な印象です。私はcliの時は東京リージョンで作成したのですが、2019年2月現在コンソール経由ではアジアを選択できないので、デプロイしたアプリ一覧などで確認することができません。最初はそれを知らなくてあれ！？ない！！と焦ってしまいました。

それから、cliの時は実行した後に手元に色々なaws関連のファイルが増え、正直どれをpushしていいものなのかと結構不安になりました。(アカウント名っぽいものが入っていたりしたので)普通に乗っかって進めたときに自動デプロイのような設定にも出会いませんでしたし、初心者の方であればコンソール経由の方が安心できるのではないかと感じました。

感想 (Sass)

これを作っている最中で、Sassの教科書という本を読みました。これが結構わかりやすくて、サクサク読めておすすめです。これを読んでから自分のスタイルを見たら修正したいことだらけで大変でしたが、sassの機能を積極的に使うようになったおかげで連動して変わって欲しい部分を一気に変更できたり、後から見てわかりやすい計算式で値を記述しておくことができたりしてとても捗りました。まだsass,lessを使ったことがない！という方やそこまで変数や関数を積極的に使ったことがないという方には全力でオススメします。

次回への抱負

今回はほぼウェブサイトのような内容になったので、あまり複雑なロジックを書くことがありませんでした。次回はもう少し外部とのやり取りや綿密なロジックを必要とするものを作ってみたいです。今の所は編み図エディタが作りたいなあと思っています。編み図と聞いて「知ってる、便利だよね！」と思う方はよかったら一緒に作りましょう。
以上です。最後まで目を通していただきありがとうございます:dog2: