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

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

使ったがやめた技術、使おうか悩んだ技術

最後、これはもう別になんでもないんですけど。

弊社向けの管理画面はたいしたことする予定はまったくなくて、一覧で見れて普通にホームでサブミットできればいいと思っています。

サーバーサイドのエンジニアでも書けるようにしたかったのと、JavaScriptでは何も書きたくなかったのでスクリプト0でいけるところまでいこうと思っています。

管理画面はBulmaっていうCSSライブラリも好きなので使ってやっています。

使ったけどやめたものがここらへんです。

使ったがやめたのものがParcelです。Webpackでコードを分割したくなったのでやめました。もしかしたら最新のParcelではできるかもしれませんが細かい所に手が届かなかったため断念しました。

悩んだのが、Hyperappもすごく使いたかったんですけど、Storybookとか対応してなくて、一から作るのに気が折れたのでやめました。

懇親会にいるので、何かあったら質問してください。 以上です。ありがとうございました。

(会場拍手)

Published at

Frontend de KANPAI!

Frontend de KANPAI!に関するログをまとめています。コミュニティをフォローすることで、Frontend de KANPAI!に関する新着ログが公開された際に、通知を受け取ることができます。

スピーカーをフォロー

関連タグ

人気ログ

人気スピーカー

人気コミュニティ

ピックアップ

編集部のオススメ

ログミーTechをフォローして最新情報をチェックしよう!

人気ログ

人気スピーカー

人気コミュニティ

ピックアップ

編集部のオススメ

そのイベント、ログしないなんて
もったいない!
苦労して企画や集客したイベント「その場限り」になっていませんか?