アドベントカレンダー私が担当する最後の記事は、アプリの品質を保つ上で最も重要なテストについてです。 以下の記事の続きという前提なので、React+AWSで作成したWebアプリ（SPA）に自動テストのフローを追加するという流れで今回の解説を行います。 AWS Amplify / AppSyncで画像投稿webアプリのサーバサイドを実装する テストと聞くと「あんまやる気でねー」となるかもしれませんが、テストがないとリリース時に常に肝を冷やしながら作業をするはめになるので、そんなリスクを犯すくらい...

アドベントカレンダーも中盤に差し掛かってきました。 今回は画像投稿アプリのサーバサイド（ユーザー認証・GraphQLによるAPI通信）をAWSのサービスAmplify・AppSyncを主に活用して実装していきます。 一応、以下記事の続編という形で投稿を行っていますが、途中まではAmplifyとAppSyncの概要説明を比較的シンプルな実装例を用いて行います。 React Hooks ✕ AtomicDesignで画像投稿webアプリのフロントエンドを実装する AWS Amplifyとは ...

FigmaとStorybookで作成したプロトタイプを実際にReactで実装していきます。 （プロトタイプ、アプリイメージについてはこちらの記事に詳細を投稿しています。） Figma ✕ React Storybook で作るプロトタイピング & スタイルガイド Reactに関しては、技術の入れ替わりが激しく「3ヶ月前に採用したモジュールがすでにdeplicatedになっている」なんてことはざらにあります。 そんななかReact 16.8から導入されたのが、Hooksです。公式曰く ...

アプリを開発する前に予め、開発の全体像を把握するためにプロトタイプを作成します。 プロトタイピングツールで作成したUIは、実際のアプリ開発にも流用できるため効率的です。 今回は簡単な写真共有Webブラウザアプリを制作すると仮定して、 プロトタイピングツールFigmaでプロトタイプ作成 Reactコンポーネントへの落とし込み Storybookでの管理 という一連の流れを実際に実装しながらFigmaやStorybookを導入することでどういったメリットがあるのか・どういったことができ...

開発の現場で働いていると、お客様からの要望をどれだけ早く安全にシステムに反映させるかが重要になってきます。ここで重要になってくるのがDevOpsの概念ですが、この考え方はシステム開発のみだけでなく何かを生産するという工程を挟む仕事をして...

最新の技術トレンドは年々変化が早く、昨年までは主流だった技術が今年にはすでに廃れているという時代になってきました。新しい技術を常にキャッチアップしていかないと、すぐに時代遅れになってしまい、技術負債を抱えてしまうという。ある意味大変ではあ...