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
450
WebフロントエンジニアはOSの夢を見る
uzimaru0000
0
360
BrainFuckをつくった
uzimaru0000
0
520
Elmで作るCLI
uzimaru0000
0
130
Compression Vue App
uzimaru0000
0
130
好きなライブラリ_OSS
uzimaru0000
0
230
Other Decks in Programming
See All in Programming
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
4
1.9k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
300
testingを眺める
matumoto
1
130
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1k
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
150
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
RDoc meets YARD
okuramasafumi
4
160
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
4
1.6k
🔨 小さなビルドシステムを作る
momeemt
3
660
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
AWS発のAIエディタKiroを使ってみた
iriikeita
1
160
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
2
1.2k
Featured
See All Featured
Faster Mobile Websites
deanohume
309
31k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Practical Orchestrator
shlominoach
190
11k
We Have a Design System, Now What?
morganepeng
53
7.8k
Designing for Performance
lara
610
69k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Documentation Writing (for coders)
carmenintech
73
5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
The Cult of Friendly URLs
andyhume
79
6.6k
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
ありがとうございました