ENGINEER BLOG

かわいちのエンジニアぶろぐ！

プログラミングに役立つ記事を投稿しているブログです

WEB:

https://kawaichiblog.com/

かわいちのエンジニアぶろぐ！
使用技術
フロントエンドNext.js 13, TypeScript, SCSS(CSS Modules)
バックエンドNode.js, GraphQL, microCMS, SendGrid
インフラAWS(AppSync / Lambda / DynamoDB / EventBridge 等)
モニタリングCloudWatch, SNS, Chatbot
プロビジョニングAmplify, Terraform
主要パッケージ等Tailwind CSS, Font Awesome,cheerio(HTMLパーサ),highlight.js(コードシンタックスハイライト), React Hook Form, [GraphQL]aws-amplify, Apollo, [外部API取得]Axios
ビルドSSG
コーディング規約 ESLint & Prettier
その他reCAPTCHA(v3), GoogleTagManager, GoogleAnalytics(GA4), GoogleSearchConsole, Illustrator
実績
「vscode 型 表示」でGoogle検索順位1位を獲得

「vscode 型 表示」の検索ワードで、【TypeScript】型を調べる方法「VSCodeのホバー表示」の記事がGoogle検索順位1位(※)を獲得しました。

※: 2024年5月時点

そのほかGoogle検索順位1位を獲得した記事

各種図面
インフラ構成図

AWS Amplifyでホスティング・デプロイしています。コメント機能は、AppSync(GraphQL)・Lambda(Node.js)・DynamoDBで構築および実装しています。 また、IaCであるTerraformを用いてインフラの一部(モニタリング等)をコード化しています。

ワークフロー図

ブランチおよびAmplify環境は開発と本番で分け、microCMS管理画面からコンテンツ更新した際のWebhook通知、リポジトリへのプッシュをトリガーにデプロイしています。

工夫した点
Jamstackによる静的サイト構築
Jamstackによる静的サイト構築

アーキテクチャとして、フロントエンドとサーバーコンテンツ(データ)を分離し、静的サイトジェネレーターを使用してWebサイトを構築するJamstackを採用しています。


技術選定の候補としてWordPressがありましたが、Jamstackのほうがコストが安い、高速表示できるパフォーマンスがある、また、Next.jsを使ってなにかサイトを作ってみたい、という欲求があったため、こちらを採用しました。


また、コンテンツ(ブログ記事など)管理システムとして、日本製のヘッドレスCMSである「microCMS」を利用しています。

Tailwindを導入

サイトのスタイリングには「Tailwind」を導入しています。開発を始めようとした当時に、注目され流行していたCSSフレームワークだったため、「面白そうだし最新の技術を使ってみよう」というのが検討のきっかけでした。


色々調べていくうちに、デザインにオリジナリティを持たせつつも実装の時間が短縮できる、というメリットがあると知り、案としてイメージしていた「私のプロフィールアイコンを活かした、デザインにこだわりのあるかわいいサイトにしたい」「でも、お仕事しながらだから時間がない...」という課題を解消してくれそうだったので、導入しました。

Tailwindを導入
そのほか工夫した点
  • Illustratorを用いたロゴの作成
  • コメント投稿時、Webhook通知による運営者への通知・IPブラックリスト判定・NGワード判定
  • お問い合わせフォームの実装
  • reCAPTCHA(v3)によるスパム対策
  • バッチ処理による定期的な注目記事の更新 および Webhook通知による運営者への処理成功/失敗の通知
  • コンテンツ更新時、Webhook通知による自動デプロイ
  • SEO対策として、カテゴリー・タグ・検索結果等の一覧ページをnoindexによって検索エンジンからインデックス除外
  • セキュリティ対策として、FWのバージョン情報を隠蔽

  • パーマリンクの最適化 (参考: Google における URL 構造のベスト プラクティス)

  • GoogleTagManager および GoogleAnalytics(GA4)を導入 ※内部トラフィックは「Google アナリティクス オプトアウト アドオン」によって除外
  • OGP対応

など...