今年お世話になったnpm module

Transcript

1. 今年お世話になった npm modules Frontend de KANPAI! #5 LT(5mins)
2. ⾃⼰紹介 • @yudppp • 株式会社HRBrain CTO • 好きな⾔葉: 冪等性 • 好きなキーボード: HHKB • メインはGoエンジニア • ◦△□ - https://blog.yudppp.com/
3. ⼈事評価クラウドHRBrainと いうものを作ってます。
4. 新規開発を⾏っていてそこで お世話になったnpm module を紹介していきます。
5. 今年作った主なもの(レポジトリ単位) • 新規SaaSプロダクト • 上記のためのヘルプページ • 上記のための弊社向け管理画⾯
6. SaaSプロダクト • 中規模以上なサービス(現状30ページくらい) • → • フルSPAでとにかく型が欲しい • 当初はフロント専任担当者がいなかった。
7. SaaSプロダクトで使ったnpm • React • TypeScript • React Router • Redux • Redux thunk • TypeScript FSA • Webpack • Storybook • styled components • tslint / Prettier
8. SaaSプロダクトで使った概念 • Atomic Design • ducks → Re-ducks
9. ヘルプページ • カテゴリーが設定できる • タグが複数設定できる • 記事本⽂で検索ができる • PMにマークダウンであらかじめ書き溜めてもらった。 • → • Hugo? Gatsby?
10. ヘルプページで使ったnpm • Nuxt • Marked • Front Matter • Skelton
11. 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": "<h2>はじめに</h2> "
 } [{ 
 "id": 1,
 "title": "ヘルプページの作り⽅", "category": "help",
 “body": "<h2>はじめに</h2> "
 }, ]
12. 弊社向け管理画⾯ • ⼤した事はする予定ない • サーバーサイドのエンジニアでも書けるよう にしたい • → • No Script!
13. 管理画⾯で使ったnpm • Bulma
14. 使ったがやめたもの達 • Parcel 悩んだが使わなかったもの達 • Hyperapp