Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
今年お世話になったnpm module
yudppp
November 22, 2018
Technology
1
590
今年お世話になったnpm module
yudppp
November 22, 2018
Tweet
Share
More Decks by yudppp
See All by yudppp
2019年 HRBrainの技術的挑戦 / hrbain technology challenge 2019
yudppp
3
850
Web開発を支えるマイグレーションツールについて / sqldef introduction for psql users
yudppp
2
1.8k
ISUCON向けのツールを作った話 / isutools
yudppp
1
140
Row Level Securityはマルチテナントの銀の弾丸になりうるのか / Row Level Security is silver bullet for multitenancy?
yudppp
18
11k
Webサービス開発に必要な統計学入門 / study of statistics for web developers
yudppp
1
150
メジャーな Live Reloaderの違いをちゃんと調べて見た / Compare major live reloader of Go
yudppp
1
1.6k
Goで社内向け管理画面を楽に作る方法
yudppp
5
8.9k
カバレッジ95%以上を実現した テストコードの書き方
yudppp
0
2.2k
Other Decks in Technology
See All in Technology
Lessons Learned from Scaling Infrastructure as Code
joatmon08
0
800
SlackBotで あらゆる業務を自動化。問い合わせ〜DevOpsまで #CODT2022
kogatakanori
0
980
今どきのLinux事情
tokida
44
36k
UIKitのアップデート #WWDC22
akatsuki174
4
350
GeoLocationAnchor and MKTileOverlay
toyship
0
110
Strategyパターン
hankehly
0
160
ノーコードで Stripeを使いこなす3つの方法 / jp-stripes-online-vol-4
stripehideokamoto
0
310
Meet passkeys
satotakeshi
1
130
Rethinking how distributed applications are built
tillrohrmann
0
110
【Pythonデータ分析勉強会#33】「DearPyGuiに入門しました」の続き~Image-Processing-Node-Editor~
kazuhitotakahashi
0
180
EKSの運用あれこれ バージョンアップ編
tetsunosato
0
100
Data in Google I/O - IO Extended GDG Seoul
kennethanceyer
0
160
Featured
See All Featured
Docker and Python
trallard
27
1.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
How GitHub (no longer) Works
holman
296
140k
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
Documentation Writing (for coders)
carmenhchung
48
2.6k
Bootstrapping a Software Product
garrettdimon
296
110k
Agile that works and the tools we love
rasmusluckow
319
19k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
StorybookのUI Testing Handbookを読んだ
zakiyama
5
2.3k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Transcript
今年お世話になった npm modules Frontend de KANPAI! #5 LT(5mins)
⾃⼰紹介 • @yudppp • 株式会社HRBrain CTO • 好きな⾔葉: 冪等性 •
好きなキーボード: HHKB • メインはGoエンジニア • ◦△□ - https://blog.yudppp.com/
⼈事評価クラウドHRBrainと いうものを作ってます。
新規開発を⾏っていてそこで お世話になったnpm module を紹介していきます。
今年作った主なもの(レポジトリ単位) • 新規SaaSプロダクト • 上記のためのヘルプページ • 上記のための弊社向け管理画⾯
SaaSプロダクト • 中規模以上なサービス(現状30ページくらい) • → • フルSPAでとにかく型が欲しい • 当初はフロント専任担当者がいなかった。
SaaSプロダクトで使ったnpm • React • TypeScript • React Router • Redux
• Redux thunk • TypeScript FSA • Webpack • Storybook • styled components • tslint / Prettier
SaaSプロダクトで使った概念 • Atomic Design • ducks → Re-ducks
ヘルプページ • カテゴリーが設定できる • タグが複数設定できる • 記事本⽂で検索ができる • PMにマークダウンであらかじめ書き溜めてもらった。 •
→ • Hugo? Gatsby?
ヘルプページで使ったnpm • Nuxt • Marked • Front Matter • Skelton
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> " }, ]
弊社向け管理画⾯ • ⼤した事はする予定ない • サーバーサイドのエンジニアでも書けるよう にしたい • → • No
Script!
管理画⾯で使ったnpm • Bulma
使ったがやめたもの達 • Parcel 悩んだが使わなかったもの達 • Hyperapp