フロントエンド系の開発の比重は近年高くなる一方です。コンシューマー向けだけでなく、エンタープライズでも生産性向上のために良いユーザー体験が求められるようになってきました。フロントエンド技術は、移り変わりが激しくキャッチアップが大変な分野でもあります。
ここでは、定番フレームワークの使いこなしポイントや、注目技術についてご紹介します。
Nuxt
#Vue は React と人気を二分する UI フレームワークで、Nuxt は Vue をベースとした アプリケーションフレームワークです。ここでは Nuxt の導入や各機能の利用方法をご紹介します。
Nuxt3入門
#- Nuxt3入門(第1回) - Nuxtがサポートするレンダリングモードを理解する
- Nuxt3入門(第2回) - 簡単なNuxtアプリケーションを作成する
- Nuxt3入門(第3回) - ユニバーサルフェッチでデータを取得する
- Nuxt3入門(第4回) - Nuxtのルーティングを理解する
- Nuxt3入門(第5回) - アプリケーションの設定情報を管理する
- Nuxt3入門(第6回) - アプリケーションで発生するエラーに対応する
- Nuxt3入門(第7回) - Nuxt3のプラグイン・ミドルウェアを使う
- Nuxt3入門(第8回) - useStateでコンポーネント間で状態を共有する
- Nuxt3入門(第9回) - Nuxt3アプリケーションをサーバーレス環境にデプロイする
ブログ
#- Nuxt3で導入されたハイブリッドレンダリングとNuxt版ISG/ISRを試してみる
- Nuxt版のServer Componentsでサーバー環境限定でレンダリングする
- Piniaを使ってNuxtアプリの状態を共有をする
- AWS AmplifyにNuxt3のSSRアプリをゼロコンフィグでデプロイする
- Nuxt3 - 単体テスト前編 - セットアップ・コンポーネントをマウントする
- Nuxt3 - 単体テスト後編 - モック・スタブ用のユーティリティを使う
プリレンダリング
#クライアントでの応答性が重要な Web アプリでは SPA(Single Page Application) が発展してきました。一方、コンテンツが重要なサイトでは事前ビルドした静的コンテンツによる MPA(Multi Page Application) が注目されています。ここではプリレンダリングフレームワークに関する記事を紹介します。
Eleventy(11ty)
#- Eleventy入門(第1回) - 11tyで手早く静的サイトを作成する
- Eleventy入門(第2回) - テンプレート・コードを部品化する
- Eleventyで生成したマークダウン記事の画像を拡大する
- Eleventyで生成したサイトでNetlify Edge Functionsを使ってみる
Astro
#- コンテンツ重視の静的サイトジェネレーター Astro でドキュメントサイトを構築する
- Astro 2.0 + MDX + Recharts で Markdown ページにインタラクティブなチャートを描画する
- Astro 2.1 で実験的サポートされた Markdoc Integration を触ってみる
Fresh
#Lume
#- Lume入門(第1回) - Denoベースの静的サイトジェネレーターLumeで静的サイトを手早く作る
- Lume入門(第2回) - テンプレートエンジンとしてJSXとMDXを使う
- Lume入門(第3回) - ページをタグ管理して検索性を高める
- Lume入門(第4回) - ページ部品をコンポーネント化して再利用する
JavaScript ランタイム
#Deno や Bun といったポスト Node.js を狙う JavaScript ランタイムが複数登場し競争する時代になりました。ネイティブ TypeScript サポート、CLI 1つで開発からテスト・デプロイまでカバーするオールインワンなど開発体験も向上しています。
Deno
#Deno は高速でセキュアな JavaScript ランタイムです。ここでは、Deno の導入や活用についてご紹介します。
Denoを始める
- Deno を始める - 第1回 (開発環境とランタイム)
- Deno を始める - 第2回 (外部ライブラリの利用)
- Deno を始める - 第3回 (SSR)
- Deno を始める - 第4回 (OS 機能と FFI の利用)
- Deno を始める - 第5回 (WebAssembly の利用)
- Deno を始める - 第6回 (Deno Deploy で静的ファイルを配信)
- Deno を始める - 第7回 (All in one な deno のサブコマンド)
ブログ
- Deno による Slack プラットフォーム(オープンベータ)
- Deno 1.31で安定化されたプロセス起動 API Deno.Command を使ってみる
- Deno 1.37 でリリースされた Jupyter Notebook の Deno カーネルを使う
- Deno Fest(ディノフェス)参加メモ
- Deno Tui でユニバーサルな TUI アプリを作る
Bun
#Bun は高速性と Node.js 互換が特徴の JavaScript ランタイムです。
ブログ
TypeScript
#今やバックエンドでも使用される TypeScript。静的型付けを特徴とし、Deno や Bun などの JavaScript ランタイムでは第一級言語として扱われています。
Javaエンジニアが始めるTypeScript入門
#Java エンジニア向けの TypeScript 入門。連載開始しました。New!!
- Javaエンジニアが始めるTypeScript入門（第1回：イントロダクション）
- Javaエンジニアが始めるTypeScript入門（第2回：変数）
- Javaエンジニアが始めるTypeScript入門（第3回：プリミティブ型）
- Javaエンジニアが始めるTypeScript入門（第4回：その他の基本型）
- Javaエンジニアが始めるTypeScript入門（第5回：集合を扱う型）
- Javaエンジニアが始めるTypeScript入門（第6回：特殊な型）
- Javaエンジニアが始めるTypeScript入門（第7回：関数）
- Javaエンジニアが始めるTypeScript入門（第8回：オブジェクト）
ブログ
#- Valibot: 超軽量＆型安全なスキーマバリデーションライブラリ
- TypeScript 向けの軽量ORマッパー Drizzle を使う
- TypeScript v5.2で導入されるusing宣言とDecorator Metadataを使ってみる
- TypeScript5で導入されたStage 3のDecoratorを眺めてみる
エッジ環境
#コンテンツの配信先を CDN にしてホスト管理プロセスを無くす Jamstack なアーキテクチャが普及してきています。さらに静的コンテンツのみならず、データベース機能も各サービスから提供され始めました。ここでは Netlify[1] をはじめとするエッジ環境の活用についてご紹介します。
Netlify
#- Deno Deploy を基盤とする Netlify Edge Functions を試す
- Netlify CMSのワークフローでコンテンツ管理をする
- Netlify Identityを使ってNetlify CMSのユーザー認証をする
- NetlifyのLighthouseプラグインでWebサイトのメトリクスを継続的に評価する
- Netlify Split TestingでGitブランチベースのA/Bテストをする
Deno Deploy
#デスクトップアプリ
#フロントエンドの技術は Web アプリだけでなくデスクトップアプリにも応用されています。ここでは、定番の Electron をはじめとするデスクトップアプリケーションのフレームワークの活用についてご紹介します。
Electron
#- Electron - WebView から BrowserView に移行する
- electron-quick-start のコミット履歴で見る Electron プログラミングモデルの変遷
- Electron v20 で有効化された Renderer プロセスサンドボックス化に対応する
Tauri
#豆蔵デベロッパーサイトのホスティングにも使っています。 ↩︎
