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

今年お世話になったnpm module

D68ec2463959a924ada156a278743228?s=47 yudppp
November 22, 2018

今年お世話になったnpm module

D68ec2463959a924ada156a278743228?s=128

yudppp

November 22, 2018
Tweet

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