フロントエンド系の開発の比重は近年高くなる一方です。コンシューマー向けだけでなく、エンタープライズでも生産性向上のために良いユーザー体験が求められるようになってきました。フロントエンド技術は、移り変わりが激しくキャッチアップが大変な分野でもあります。
ここでは、定番フレームワークの使いこなしポイントや、注目技術についてご紹介します。
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アプリケーションをサーバーレス環境にデプロイする
ブログ
#プリレンダリング
#クライアントでの応答性が重要な 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
#Deno
#Deno は高速でセキュアな JavaScript ランタイムです。Node.js に比べ開発体験も向上しています。ここでは、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 のサブコマンド)
ブログ
#エッジ環境
#コンテンツの配信先を 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
#豆蔵デベロッパーサイトのホスティングにも使っています。 ↩︎
