今年お世話になったnpm module

Transcript

1. 1.

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

2. 2.

   ⾃⼰紹介 • @yudppp • 株式会社HRBrain CTO • 好きな⾔葉: 冪等性 •

   好きなキーボード: HHKB • メインはGoエンジニア • ◦△□ - https://blog.yudppp.com/
3. 3.

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

4. 4.

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

5. 5.

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

6. 6.

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

7. 7.

   SaaSプロダクトで使ったnpm • React • TypeScript • React Router • Redux

   • Redux thunk • TypeScript FSA • Webpack • Storybook • styled components • tslint / Prettier
8. 8.

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

9. 9.

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

   → • Hugo? Gatsby?
10. 10.

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

11. 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. 12.

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

    Script!
13. 13.

    管理画⾯で使ったnpm • Bulma

14. 14.

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