システム全体構成

Express(TypeScript) + Nuxt.js(Vue.js): フロントとサーバーサイドをあえて一緒にしてNuxt.jsをテンプレートエンジンとして使用
ECS + Fargate + ECR + DynamoDB + CloudFront + Amazon ElastiCache + CodePipeline: 全部AWS内で完結かつスケーラブルになるように構成

フロントエンド

ツリー作成部分

スクリーンショット 2019-08-27 14.13.53.png

上記のTree構造を作成する部分は完全自作。map, filter, reduce, sortの魔界になっておりここが一番苦労しました。

テキストエディタ部分

スクリーンショット 2019-08-27 14.16.30.png

nhn/tui.editor を使用。

エディタ選定の理由として自分がcontenteditableのエディタの入力体験があまり好きじゃないためそれ以外で選定。一番入力が好みのエディタを選びました。

ただスマホ対応が微妙らしく、リバースエンジニアリングのコスト感や1からエディタ開発するコストを考えスマホ対応は断念。挑戦はしてみたが中途半端なもの出すぐらいならと思い非対応に振り切りました。

トップページのロゴアニメーション

AfterEffectでロゴアニメーション作ってもらってairbnb/lottie-webでwebに描画。

サーバーサイド

開発環境

Express(+ Nuxt.js)はそのままでRedisとDynamoDB、DynamoDBLocalはDocker内に構築。DynamoDBのクエリ叩くラッパーみたいなの自作してそこが死にそうだった。あとから知り合いに聞くとawslabs/dynamodb-data-mapper-js使うと良かったらしい。無念。リプレースする機会があれば導入したいです。

ちょっとこだわったところ

SSRもしつつルーティングの速さ

Nuxt.jsのasyncDataでなんでもかんでもAPI叩くとページ遷移がクソ遅くて体験が最悪なのでSSRのときはasyncDataでExpressからチョクでデータとってきてブラウザルーティングの場合はmountedでAPI叩くようにしてる。そのmountedのためにわざわざAPI生やしたり生やさなかったりした。

virtual-scrollerの自作

動画

leafが増えるとDOMのノード数が1500個以上になってしまうので画面で見えない部分は削除するなどしました。ライブラリもあったんですけど使い勝手が悪く自分で自作したほうがよくね？ってなりました。現在はleafの作れる上限は50ですが数百個作られてもブラウザ重くなりにくいと思います。

テンキーで移動 + Enterでエディタ開く + ESCで保存&閉じる

動画

お知らせ

開発経緯とか感想とか

技術関連

Q&A