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