今年お世話になった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