SvelteKit、Newt、Vercelで簡単なプロフィールサイトをリリースしてみた
動機
普段はバックエンドエンジニアとしてAPI開発等を行っています。
久々になにかフロントのある制作物を作りたいなと思い立ち、プロフィールサイトを作成してみました。
また、今まで触ったことのない技術を試してみたい、なるべく無料枠で抑えたいと思い、今回はSvelteKit、Newt、Vercelを使ってみることにしました。
手の込んだ実装は行っていません。
詳細な実装手順も記載を省いていますので、ご承知ください。
プロフィールサイト
以下のプロフィールサイトを作成しました。
Code
今回のコードは以下GitHubに公開しています。
SvelteKit
SvelteKitはWebフレームワークです。 前述した通り、初めてSvelteKitを使用するので、簡単に公式のチュートリアルでSvelteとSvelteKitのキャッチアップを行いました。
ページ構成は以下の通りで、とても簡単なサイトです。
- About
- Career
- Work
- Article
- 外部リンク
- Github
- 外部リンク
デザインはザックリとデザインツールであるFigmaで作成し、草案を具現化しました。
CSSフレームワークに関しては新たな挑戦はせず、使い慣れているTailwindCSSを使用して実装しています。
SvelteKitへのTailwindCSSのインストールは以下を参考にて実施しました。
Typescriptは、以下コマンドのSvelteKitプロジェクト作成時に選択することによって簡単に導入できました。
pnpm create svelte@latest my-app
コード詳細はGithubよりご覧ください。
CodeRabbit
CodeRabbitはプルリクに対して、AIがレビューをしてくれるツールです。 今回は不慣れな技術を使用するため、構文等の実装方法が不安ということもあり、AIにコードレビューを行ってもらいながら進めてみました。
サインアップして対象のリポジトリを登録。
そしてプルリクするだけでAIがコードレビューしてくれます。
添付画像のように、AIに指摘を受けなければ見過ごしたままマージしてしまうところでしたが、防ぐことができました。
ただ、既に修正済みのコードに対して再度指摘を受けたり、実装ミスが見過ごされており後で修正し直したりということも多少ありました。
でもAI相手なのでレビューに対して気を使うこともないですし、導入するべきツールだと感じました。
レビュー時間も数分程度なので「納期が迫っているのにレビューを何日もしてもらえない、、。」といったこともなくなりそうです。
Newt
Newtは日本製のヘッドレスCMSです。 いくつか候補がありましたが、その中でもUIが良いと感じ直感的で、無料枠の充実さから選択しました。
実際、ドキュメントにザッと目を通しただけで、簡単に実装することができました。
各フレームワークごとのチュートリアルもありました。
今回は以下の手順にてAppを追加して、各モデルを作成していきました。
ダッシュボード > Appを追加 > タイプを選択して追加 > CMS App
Newtでプロフィールに記載する情報を管理し、フロントからNewtAPIを叩いてその情報を取ってきて表示するようにしています。
Vercel
Vercelはホスティングサービスです。
対象のリポジトリを選択して、環境変数を定義して、デプロイポタンを押すだけ、とビックリするくらい簡単にホスティングが完了してしまいました。
ドメインも取得できるようだったので、ついでに課金して取得して設定しました。
取得したいドメインを検索して、とても簡単に購入できます。
ついでにSpeed Insightsを設定するとサイトのパフォーマンスが確認できるようになるらしいので設定しました。
（ページがかっこいい！）
設定手順は以下の通り。
- パッケージをインストール
pnpm install @vercel/speed-insights - コードを追加src/routers/+layout.svelte
+ import { injectSpeedInsights } from "@vercel/speed-insights/sveltekit"; + injectSpeedInsights();
GoogleTagManager / GoogleAnalytics
GoogleTagManagerはタグ管理システムです。
せっかくならと、GoogleAnalyticsを導入したく、GoogleTagManagerでタグを管理しやすいようにしました。
GoogleAnalyticsはアクセス解析ツールです。
設定については先人の方々のブログを見ながら行ったのですが、ダッシュボードのUIが変わっていたりで少し手こずりました、、。
感想
一言、楽しかったです！
使ってみたい技術を選定して、0から実装して、自由に工夫して、目に見えるものと作り上げていく・・・。
何か日々の実務では忘れかけていた気持ちを取り戻した気がしました。
Discussion