今年お世話になったnpm module

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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": "はじめに "

    }
    [{ 

    "id": 1,

    "title": "ヘルプページの作り⽅",
    "category": "help",

    “body": "はじめに "

    }, ]
    

    View Slide

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

    View Slide

13. 管理画⾯で使ったnpm
    • Bulma
    

    View Slide

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

    View Slide