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
Select API from Kotlin Coroutine
jmatsu
1
190
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
300
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
590
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
210
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
ふつうの技術スタックでアート作品を作ってみる
akira888
0
200
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
170
GoのGenericsによるslice操作との付き合い方
syumai
3
690
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
330
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
We Have a Design System, Now What?
morganepeng
53
7.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Facilitating Awesome Meetings
lara
54
6.4k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Automating Front-end Workflow
addyosmani
1370
200k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
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
ありがとうございました