Upgrade to Pro — share decks privately, control downloads, hide ads and more …

今年お世話になったnpm module

yudppp
November 22, 2018

今年お世話になったnpm module

yudppp

November 22, 2018
Tweet

More Decks by yudppp

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide