このブログについて

2022-08-13
モノづくりが好きなアーキテクトがフロントエンドとサーバレスについて書いてます。 実用面から技術の価値を考え、デザインからインフラまで一貫性を持ったうえで実例を交えた技術情報を提供します。プロダクションを意識した「実際の見た目」と「動くサンプル」も一緒に公開していきます。

フロントエンドとサーバレスを中心にアーキテクチャを考えるブログ

もう少し文章にしてみると以下のようなイメージです。

  • リアクティブな構成を採用したWebフロントエンドが主役となるアプリケーションにおいて
  • ビジュアルリグレッションテストをはじめとするフロントエンドの維持運用を考えながら
  • インフラ構築と運用にかかるコストを最小限に抑えるべくクラウドファーストで考えて
  • その中でも特に手がかからないサーバレスアーキテクチャを検討したうえで技術を選択する

フロントエンドの具体例

  • HTML/CSS(SASS・SCSS)/JavaScript(TypeScript)の書き方や設計手法
  • VueやReactをはじめとするReactiveでComposableなWebフロントエンド
  • SPA, SSR, SSG, ISR対応の最適化をゼロコンフィグで実現するNuxtやNextなどのフレームワーク
  • 静的解析や自動整形など、それらの効率化・保守性向上を支える技術や開発環境
  • FigmaのデザインカンプをStorybookを使ってコンポーネント駆動開発
  • StorybookやChromaticを活用したビジュアルリグレッションテスト

最高のUX（ユーザーエクスペリエンス）を届けることを目的に良いUI（ユーザーインターフェイス）を作る・支える技術を突き詰めることが、このブログの関心事です。

構築しやすく、変更に強く、維持が容易なフロントエンドアーキテクチャを目指して記事を書いていきます。

サーバレスの具体例

  • Amazon S3, CloudFrontなどWebサーバの用意が不要なフルマネージドなWEBホスティング環境
  • AWS Lambda、Amazon API Gateway、DynamoDBなどフルマネージドなクラウド技術
  • Serverless FrameworkやZappaをはじめとするサーバレスアプリケーションの構成管理
  • インフラストラクチャとプロビジョニングをコード管理するIaC (Infrastructure as Code)

フルマネージドなクラウドであるサーバレスを使えば、そうでないクラウドと比べて圧倒的に手間がかからないことを、実際に数年運用してみて痛感しています。

インフラの構築と運用はサーバレスアーキテクチャを使ってなるべく楽をするをコンセプトに、扱う技術を選択します。生みの苦しみで敬遠しがちな「インフラのためにコードを書くこと」も前提として考えます。

実用面から技術の価値を考える

技術の使い方だけでなく、その技術を使うことで「得られること」を伝える文章を心がけています。

特にフルスタックな技術要素においては、その選択が制約（後々の負債）になってしまうこともしばしば見受けられます。また、アプリケーションのコアと成り得る技術であれば、将来的な柔軟性・拡張性を持たせたて開発した方が良いケースもあります。

実用を意識し、どのようなケースでどのような技術を採用すべきか、その価値は何かを問うことを忘れないように、記事を書いていきます。

一貫性を持ち、実例を交えた技術情報の提供

プロダクション（実際に公開して動かすプロダクト）を意識した情報発信を心がけています。

ZennやQiitaで書いた技術記事の「実際の見た目」と「動くサンプル」をこのブログで確認できるようにしています。

フロントエンドだけ、インフラだけ、といった領域限定的な情報でなく、デザインから公開環境までを一貫性を持ってカバーした情報提供をします。ブログに書かれたことをそのまま実践すれば「実際に公開して動かせるサイトやプロダクト」がつくれるような技術ブログを目指します。

そのためにまず、記事を読んで実践すればこの技術ブログのクローンがそのまま作れるような情報発信を行っていきます。

扱う技術の偏りについて

このブログ自体は以下の技術を使って構築しています。

Frontend

  • TypeScript
  • Vue3
  • Nuxt3
  • Vite

Frontend Dev Support

  • Storybook
  • Chromatic
  • ESLint
  • Stylelint
  • Prettier

Backend(BFF)

  • TypeScript
  • Node.js

Infrastructure

  • Amazon S3
  • Amazon CloudFront
  • Serverless Framework

フロントエンドはReactも多少経験がありますが、実務はVueが中心です。

バックエンド（BFF: backend for frontend）は特段理由が無い限りはフロントエンドとの親和性を考慮してTypeScript（Node.js）を採用します。

クラウドはAWSが多めですが、無料枠などコストメリットが出る場合はGoogleやその他のWebホスティングサービス（VercelやNetlifyなど）も検討します。ちなみに、コンポーネントガイドはGitHub Pagesを使って公開しています。

その他、過去2年内で実務で何かしら取り扱ったことがある技術は以下の通りです。

  • NestJS
  • Java/Spring
  • Ruby/Rails
  • Python/Flask/Zappa

おまけ：名前の由来

もともとは「Designer * Blue * Engineer（デザイナぶるエンジニア）」というサイト名で、フロントエンド中心の個人的な技術メモ・備忘録としてサイト準備していました。そんな中で、公私共に技術の情報発信をしていかねばならないタイミングも重なって、覚悟を持って情報発信していこうと思い直しました。

自分にとって業務やビジネスを包括して設計する「アーキテクト（Architect）」という役割が最もしっくり来ていたのと、所属組織（Business Architect）と語呂を合わせてBlue * Architectとしました。

世の中一般では（IT）アーキテクト＝ビジネス要求を満たすシステム全体像を「描くこと」という役割認識があるかもしれません。しかし実態は少しずつ変わってきていると言いますか、技術を広く、そしてある程度まで深く理解し、正しい選択をできる必要性が年々増しているように感じます。

ここまでお読みいただきありがとうございました。アーキテクト目線から実用・実例を意識した技術発信していきます。引き続きよろしくお願いします。

© 2022 archt.blue