SaaSプロダクトのフロントエンド開発で活躍したnpm modules

リンクをコピー

記事をブックマークブックマーク解除

画像・スライド一覧

2018年11月22日、DeNAにて、Frontend de KANPAI!が開催されました。今回のテーマは「2018年わたしはこれにお世話になりました！」。ライブラリ・フレームワーク、設計思想など、フロントエンドに関する3つのテーマセッションとLTが行われました。プレゼンテーション「今年お世話になったnpm modules」に登壇したのは、yudppp氏。自社のフロントエンド開発において利用したnpm moduleについて紹介します。講演資料はこちら

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にしたので、ここから検索やフィルターをかけることができていい感じです。