このサイトについて

開発や仕事で役立つオンラインツールサイトです

自分で欲しいなーと思ったツールを足していきつつ、便利・かっこいい・使いやすいオンラインツールサイトを目指します。

制作者について

このサイトは東京のウェブエンジニアである@koniが開発しています。

プロフィール

本業では、Twitter アカウント SaaS「SocialDog」を運営するスタートアップである株式会社 AutoScaleの代表をやっています。

新しい技術を習得するため、たまにこのサイトをゼロから作り直していて、今回で3回目になります。SocialDogは React による Single Page Application で動いており、最近は React + TypeScript にハマっています。

このサイトの構成

このサイトは今回リニューアルするまで、2015年 に AngularJS + Angular Material で作った構成で動いていましたが、 せっかくAngularJS使っていたのにSPAではありませんでした。

業務では Angular ではなく React を使い始めたこともあり、React の SPAにしたく思っていました。 そこで今回は以下のような構成にしました。

React + TypeScript

最近はずっとTypeScriptでReactを書いているので、この2つは外せませんでした。

Next.js

React のフレームワークである、Next.jsを使って構築しました。 Next.js は以下のような特徴があり、このようなサイトをサクッと作るには非常に相性が良かったです。

• シンプルなルーティング（ファイルシステムと同じ）
• Next.js 自体に API 機能があり、外部APIを使ったAPIなども入れられる
• 静的サイトにするための書き出し、必要なページだけSSRにする
• 後述する Vercel との相性が非常に良い

Blueprint

React ベースのUIフレームワークとして、Blueprintを利用しました。

このフレームワークはデフォルトのボタンなどのスタイルが割といけてて気に入って採用しました。 ちなみに同名の別のCSSフレームワークがあるので注意。

Vercel

ホスティングには、Next.js の開発元が作っている静的サイトホスティングサービス「Vercel」を利用しました。

• 開発元だけあってNext.jsとの相性が抜群
• GitHub などと連携し、プッシュするだけでビルド・デプロイしてくれる
• Serverless Function 機能があり、NodeJS, Go, Pythonなどのコードが動くAPIを設置可能

更新履歴