Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Blogを作った話 -Zli x DeNA-
Search
uzimaru0000
January 22, 2020
Programming
1
190
Blogを作った話 -Zli x DeNA-
uzimaru0000
January 22, 2020
Tweet
Share
More Decks by uzimaru0000
See All by uzimaru0000
OGPを使いたい
uzimaru0000
0
170
git入門
uzimaru0000
1
340
Webフロントエンド入門
uzimaru0000
1
440
WebフロントエンジニアはOSの夢を見る
uzimaru0000
0
360
BrainFuckをつくった
uzimaru0000
0
510
Elmで作るCLI
uzimaru0000
0
130
Compression Vue App
uzimaru0000
0
130
好きなライブラリ_OSS
uzimaru0000
0
230
Other Decks in Programming
See All in Programming
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
1
310
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
310
技術同人誌をMCP Serverにしてみた
74th
0
290
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
460
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
570
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1k
CursorはMCPを使った方が良いぞ
taigakono
1
170
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
160
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
350
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
A Tale of Four Properties
chriscoyier
160
23k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Code Review Best Practice
trishagee
68
18k
Designing for Performance
lara
609
69k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Producing Creativity
orderedlist
PRO
346
40k
Agile that works and the tools we love
rasmusluckow
329
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Side Projects
sachag
455
42k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Transcript
Blogを作った話 うじまる (大庭 周士)
- 名前 - 大庭 周士 - 好きな物 - フロントエンド -
TS - Elm - SNS - uzimaru0000 自己紹介
突然ですが・・・
Blogを作りました
なんで作ったのか - 冬休み中に何か作りたかった - 自分のドメインのブログが欲しかった そうだブログを作ろう
構成 - フロントエンド - React + TypeScript - バックエンド -
Node.js + TypeScript - フレームワーク : Micro - データベース : FaunaDB - ホスティング先 - now.sh
Microって? - https://github.com/zeit/micro - ZEIT社が作ったサーバサイドフレームワーク - Simpleに書ける - (個人的に)使いやすい
FaunaDBって? - ACID特性を持ちつつスケーラビリティも備えた分散データ ベース - 標準でGraphQLに対応してる - ドキュメント指向のデータベース
now.shって? - https://now.sh - $ now でデプロイできる - HPに “World-Class
Static Hosting” とあるがServerもデプロ イできる - 独自のドメインも設定できる
なんでこの構成なの? - AWS, GCPよくわからない、now.shしか使えない - now.shにはDBサービスが無いので外部のDBサービスを使 わないといけない - TwitterのプロモーションでFaunaDBが出てきてて良さげだっ た
ディレクトリ構成 - now.json ← now.shの設定 - package.json - main/ ←
クライアントサイドのソースコード - public/ ← faviconとかrobots.txtとかの静的ファイル - api/ ← APIサーバーのソースコード - cli/ ← CLI(後述) のソースコード - common/ ← 型定義とか
now.json - どうルーティングするかなどを書いておく
API Client Static
API Client Static Client??
ひよこだってSSRしたい
SSRって? SSレア?
SSRって? SSレア ServerSideRendering サーバサイドでレンダリングして結果(HTML)を返却する Next.jsとかNuxt.jsを使うと楽に実装できる
CSR (クライアントサイドレンダリング) 鯖 HTML JS HTML, JSをクライアントに渡す
CSR (クライアントサイドレンダリング) 鯖 JS 動的にDOMを構成
CSR (クライアントサイドレンダリング) 鯖 JS データを取得
SSR (サーバサイドレンダリング) 鯖 HTML JS HTML, JSをクライアントに渡す
SSR (サーバサイドレンダリング) 鯖 HTML JS
どうしてサーバで描画できるの? - ブラウザでHTMLを表示しているのはDOM <h1>Title</h1> <img src=”...”>
どうしてサーバで描画できるの? - Reactさんが操作しているのは仮想DOM <h1>Title</h1> <img src=”...”>
どうしてサーバで描画できるの? - 仮想DOMをHTML文字列にすればOK
なんでSSRするの? - SEO対策 - クローラーがJSを解釈しないから - 初期描画を早くする - サーバでHTMLを生成しているから早い -
OGPを設定したい
なんでSSRするの? SEO対策 & 初期描画を早くする
ひよこはnow.shを推したい
なんで推したいのか - 使いやすい - 開発しやすい - 無料!
使いやすい - now.json の設定がそんなに複雑じゃない - 基本的に `$ now` を打てばデプロイしてくれる -
デプロイごとに一意なURLを発行してくれる - ドメインのaliasも `$ now alias` でできる
開発しやすい - `$ now dev` というサブコマンド - 実際の環境と同じようにサーバを立ててくれる - ファイルを更新したら再起動してくれる
- 環境変数を.envから勝手に読み取ってくれる File Watch
開発しやすい 今回の環境 Watch Watch Build Edit Parcel
開発しやすい 何が良かったか - サーバを複数立てなくていい - 今まではAPIとクライアントのサーバを別々で - URLが相対Pathで指定できる - DevとProdでPathを変えなくていい
ひよこはCLIで投稿したい
ディレクトリ構成 - now.json ← now.shの設定 - package.json - main/ ←
クライアントサイドのソースコード - public/ ← faviconとかrobots.txtとかの静的ファイル - api/ ← APIサーバーのソースコード - cli/ ← CLI(後述) のソースコード
なんでCLI - 長文書いてるとブラウザのエディタではUXが良くない - 結局ブラウザで書くよりローカルで書いたほうがいい - 別で管理画面を作るのが面倒 & そこまでいらない -
CLIがすき
使ったpackage - https://github.com/tj/commander.js/ - CLIのフレームワーク的なやつ - https://github.com/terkelg/prompts - 入力をいい感じにやってくれるやつ -
password入力 - セレクト - etc...
commander.js 自分なりにちょっとアレンジ こんな感じの 型定義を作成
commander.js - name - サブコマンドの名前 - args - 引数 -
`<>` で囲むと必須 - `[]` で囲むと任意 - description - コマンドの説明 - action - コマンドの内容
commander.js
prompts - Promiseで入力値を受け 取れる - 複数連続して入力を受け 付けれる - 入力値にメッセージがつ けれる
DEMO
まとめ - now.sh とてもいい - 開発モードもあるので開発がしやすい - Micro とてもいい -
ちょっとしたサーバならこれで十分 - Parcel とてもいい - webpack.config.js 書きたくないじゃん - SSR の勉強になった - フレームワークなしでSSRしたので勉強になった - prompts とてもいい - 簡単にインタラクティブな入力処理を書ける
Q&A
ありがとうございました