2018年にお世話になったnpm modules
@yudppp氏（以下、yudppp）：よろしくお願いします。今日は『今年お世話になったnpm modules』について話したいと思います。5分なので、急ぎめでいきます。
yudにpがいっぱいの名前でTwitterとかやってます。
株式会社HRBrainというところで働いていて、冪等性がすごく好きです。ブログをやっているので良ければ見ていってください。
作っているものなんですけど、人事クラウドのHRBrainというものを作っていまして。「人事評価を最もカンタン、シンプルに」っていうクラウドツールをSaaSで作ってます。
いま新規開発を行っていて、そこでお世話になったnpm moduleを紹介していけたらと思います。
SaaSプロダクトの構成
今年作ったものは大きく3つあって。
新規のSaaSプロダクトと、SaaSプロダクトのためのヘルプページ、次が上記2つの、うちの会社が使う管理画面。うちの営業が使う管理画面ですね。この3つを作りました。
まず、SaaSのプロダクト。これがメインなので、一番大変なんですけど。中規模以上なサービスで、30ページくらいのフルSPAになるのでとにかく型がほしかったです。型も大好きです。
当初フロントエンドの専任がいなくてどうしようかなと思って、このように作りました。
Reactで、TypeScriptで、React Routerのバージョン4を使っています。またReduxとRedux thunkも使って、これらをTypeScriptで使いたいのでReduxの型はFSAで作っています。WebpackでStorybookでコンポーネント管理して、CSSはstyled-components入れて、linterはこんな感じで使っています。
業界の標準に寄せたつもりです。標準が何かわかんないですけど。奇は衒ってないつもりで作りました。
構成としてはAtomic Designっぽく作っていて、最初はducks使ってたんですけど、最終的にはRe-ducksを使って作っています。全部スライドにリンクを貼っていてnpmに飛ぶので、リンクを見てください。
ヘルプページの要件
次にヘルプページです。ヘルプページはいろいろ要件があって、カテゴリーが設定できること。タグが複数設定できること。ヘルプの記事の本文を検索できること。
あらかじめPMにマークダウンでヘルプの内容を書き留めてもらっていて、それをインポートするだけでなんかうまいことできたらなと思っていました。
HugoとかGatsbyを使おうかなと思ってたんですけど、結局Nuxtで、あとMarkedっていうマークダウンをHTMLにパースするやつとか、YAML Front Matterみたいな。これはあとで説明します。CSSは一旦アテとしてSkeletonっていう大好きなやつを使いました。
YAML Front Matterはどんな感じかと言うと、最初にposts以下に、こういう変なヘッダー行を付けて、これをFront Matter通すといい感じにjsonにしてくれます。
そのjsonにしたのを、例えばidとかtitleとかって記事の内容以外にもtitleとして使いたかったり、categoryとかtagとかも記事の内容として使いたかったので、それをFront Matter通してjsonにして。それをHTMLにして、それを1個の配列を全部まとめてposts.jsonみたいなものにして作りました。
それらをposts.jsonにしたので、ここから検索やフィルターをかけることができていい感じです。
使ったがやめた技術、使おうか悩んだ技術
最後、これはもう別になんでもないんですけど。
弊社向けの管理画面はたいしたことする予定はまったくなくて、一覧で見れて普通にホームでサブミットできればいいと思っています。
サーバーサイドのエンジニアでも書けるようにしたかったのと、JavaScriptでは何も書きたくなかったのでスクリプト0でいけるところまでいこうと思っています。
管理画面はBulmaっていうCSSライブラリも好きなので使ってやっています。
使ったけどやめたものがここらへんです。
使ったがやめたのものがParcelです。Webpackでコードを分割したくなったのでやめました。もしかしたら最新のParcelではできるかもしれませんが細かい所に手が届かなかったため断念しました。
悩んだのが、Hyperappもすごく使いたかったんですけど、Storybookとか対応してなくて、一から作るのに気が折れたのでやめました。
懇親会にいるので、何かあったら質問してください。 以上です。ありがとうございました。
（会場拍手）
