今年お世話になった npm modules Frontend de KANPAI! #5 LT(5mins)

⾃⼰紹介 • @yudppp • 株式会社HRBrain CTO • 好きな⾔葉: 冪等性 • 好きなキーボード: HHKB • メインはGoエンジニア • ○△□ - https://blog.yudppp.com/

⼈事評価クラウドHRBrainと いうものを作ってます。

新規開発を⾏っていてそこで お世話になったnpm module を紹介していきます。

今年作った主なもの(レポジトリ単位) • 新規SaaSプロダクト • 上記のためのヘルプページ • 上記のための弊社向け管理画⾯

SaaSプロダクト • 中規模以上なサービス(現状30ページくらい) • → • フルSPAでとにかく型が欲しい • 当初はフロント専任担当者がいなかった。

SaaSプロダクトで使ったnpm • React • TypeScript • React Router • Redux • Redux thunk • TypeScript FSA • Webpack • Storybook • styled components • tslint / Prettier

SaaSプロダクトで使った概念 • Atomic Design • ducks → Re-ducks

ヘルプページ • カテゴリーが設定できる • タグが複数設定できる • 記事本⽂で検索ができる • PMにマークダウンであらかじめ書き溜めてもらった。 • → • Hugo? Gatsby?

ヘルプページで使ったnpm • Nuxt • Marked • Front Matter • Skelton

hooks build:before → Front Matter → Marked → posts/**.md posts.json ---
 id: 1
 title:ヘルプページの作り⽅ category: help
 ---
 ## はじめに
 { 
 "attributes": {
 "id": 1,
 "title": "ヘルプページの作り⽅", "category": "help"
 },
 "body": "## はじめに¥n "
 } { 
 "id": 1,
 "title": "ヘルプページの作り⽅", "category": "help",
 “body": "

はじめに

"
 } [{ 
 "id": 1,
 "title": "ヘルプページの作り⽅", "category": "help",
 “body": "

はじめに

"
 }, ]

弊社向け管理画⾯ • ⼤した事はする予定ない • サーバーサイドのエンジニアでも書けるよう にしたい • → • No Script!

管理画⾯で使ったnpm • Bulma

使ったがやめたもの達 • Parcel 悩んだが使わなかったもの達 • Hyperapp