Amazon Web Services ブログ

Category: Front-End Web & Mobile

AWS Amplify JavaScript バンドルサイズの縮小および改良された TypeScript と Next.js のサポート(Developer Preview)

本日 (2023 年 9 月 28 日)、AWS Amplify JavaScript Library の v6 Developer Preview を発表しました。これは、AWSクラウドバックエンドを使用した Web 開発へのアプローチ方法を改善するマイルストーンリリースです。私たちは皆様からのフィードバックに耳を傾けており、本日の発表では GitHub で皆様から寄せられていたバンドルサイズや、TypeScript と Next.js のサポートに対するリクエストのいくつかに対応しました。それでは早速、Amplify JavaScript v6 developer preview の新機能をご紹介します!

AWS Amplify Studio が GraphQL API をフルサポート

AWS Amplify は、AWS Amplify Studio で GraphQL API をフルサポートすることを発表しました。これによって、DataStore の有無に関わらず、Connected Forms や Data Manager のような、Amplify Studio の既存のデータ駆動の機能が、すべての新規および既存の Amplify アプリで利用できるようになりました。

DynamoDB JavaScript リゾルバのための新しい AWS AppSync モジュールと関数の紹介

本日 (2023 年 8 月 31 日)、DynamoDB データソースと対話するための新しいモジュールと関数をリリースし、Amazon DynamoDB 用のリゾルバをさらに書きやすくしました。新しいモジュールは、put、get、delete、update、scan、sync、queryといった一般的な操作の DynamoDB リクエストを作成するのに必要なコードを簡素化します。さらに、更新時にアイテムの属性を細かく変更するための操作ヘルパーも提供します。このモジュールは、TypeScript を使用する場合に開発者がローカルで型安全なコードを記述できるようにするための型定義とともに、パブリックな @aws-appsync/utils パッケージで利用可能です。

Amazon Location Service を使ったサーバーレス店舗検索サイトの構築

本記事では、Amazon Location の Maps、Places、および Routing API を使用して、営業時間や住所などの適切な店舗情報とともに、顧客にとって最もアクセスしやすい実店舗をリストアップするシンプルな店舗検索 Web ページを実装する方法を紹介します。

AWS AppSync が GraphQL API のすべてのリゾルバで JavaScript をサポート

AppSync は JavaScript のサポートをユニットリゾルバに拡張しました。開発者は、単一のリゾルバで JavaScript の単一データソースアクセスパターンを扱えるようになりました。開発者は、複雑なアクセスパターンを処理したり、 パイプラインリゾルバで JavaScript 関数と Velocity Template Language (VTL) 関数を混在させたりすることができます。本記事では、独自の API で JavaScript リゾルバを使用する方法について説明します。

Next.js Web アプリケーションにおける SSG とSSR の比較: 正しいレンダリングアプローチの選択

人気の React フレームワークである Next.js は、開発者がモダンな Web アプリケーションを構築する方法を変えました。Next.js は、Static Site Generation (SSG) や Server Side Rendering (SSR) といった強力な機能を提供し、アプリケーションのパフォーマンスとユーザー体験を最適化します。本記事では、SSG と SSR の主な違い、利点、いつどちらかを選択するか、それぞれのアプローチで AWS Amplify を使ってデプロイする方法を説明します

Share code between Next.js apps with Nx on AWS Amplify Hosting

Nx と AWS Amplify Hosting を用いて Next.js アプリ間でコードを共有する

この記事では、AWS Amplify Hosting がモノレポ、特に Nx と連携し、モノレポで管理されているフロントエンドアプリケーションをデプロイする機能を探ります。銀行の仕様に合わせてブランディングできるライブラリやコンポーネントで構成された、同じ住宅ローン計算機を使用する複数の銀行のウェブサイトの例を通して、モノレポを使用する利点を学びます。このシナリオの例では、私たちがいくつかの銀行ブランドを所有する大規模な金融機関で働いているとしましょう。この金融機関を BankCorp と呼び、このブランドの下にある銀行の例を BankA と BankB とします。

AWS Amplify JavaScript Library がより少ないバンドルサイズとより少ないロード時間に

AWS Amplify JavaScript Library において、Auth, Storage, Notifications, Analytics などの重要なカテゴリのバンドルサイズが大幅に縮小されたことをお知らせできて嬉しく思います。これは、ユーザーがアプリを使用する際のロード時間の短縮につながります。バンドルサイズの縮小は、コミュニティからの要望に応えたものです。