はじめに こんにちは、KINTO FACTORY のフロントエンド開発を担当しているきーゆのです。 今回は Visual Studio Code(以下 VS Code)で React プロジェクトをデバッグするための環境を構築した件について、まとめてみたいと思います。 これまで VS Code は優秀なメモ帳程度にしか使って来なかったので、結構苦戦しました(主に言語の壁)。 今まさに VS Code にデバッグの環境を構築しようとしている皆さん。 どうぞ私の屍を超えていってください。幸あれ。 環境情報 O

こんにちは、UITサービス開発部の板井です。普段はLINEスキマニのフロントエンド開発担当や、フロントエンド開発に関するイベントの運営をしています。 UITでは社内のフロントエンドエンジニアのトレンド...

はじめに

こんにちは。GSです。 Visual Studio CodeとGitHub Copilotの組み合わせは非常に強力です。多くの人が「GitHub Copilotを使う＝コード自動補完を使う」と考えているかもしれませんが、Visual Studio Codeのアップデートにより、さらに便利な機能が使えるようになっています。これらの機能を駆使することで、Visual Studio Codeだけでより多くの作業が完結するようになりました。 これらの便利で強力な機能を踏まえ、AIと共に開発を行うための手順と実例を

こんにちは。フロントエンド開発課所属の koki _matsuraです。 今回はPlaywrightの コンポーネント テストについて個人的な意見を書いています。 目次は以下の通りになっています。 はじめに 導入方法 Playwright Component Test Runner のスゴい点 コンポーネントが実際にレンダリングされる 画面のサイズを指定できる タイムゾーンや言語を指定できる コンポーネントの振る舞いを見るテストに対応できる まとめ 参考 はじめに Playwrightは Microsof

こんにちは、広野です。 以前、以下の記事で AWS AppSync に Mutation をかける AWS Lambda 関数コードを以下の記事内で紹介していたのですが、Node.js で書いたものでした。先日 Node.js 16 が EoL になったことを受けて、AWS Lambda 関数を Python 3.12 で書き換えたので書き残しておきます。 AWS AppSync を使って React アプリからキックした非同期ジョブの結果をプッシュ通知で受け取る 非同期ジョブを実行した後、結果をどう受け

こんにちは、広野です。 React アプリに Amazon Bedrock に問い合わせる画面をつくってみたのでコードを紹介します。よくある生成系 AI チャットボットのように、回答文が作成されながら表示されるやつです。↓ アーキテクチャ 生成系 AI の基盤モデルには、Amazon Bedrock の Anthropic Claude 2.1 を使用しています。 Amazon Bedrock に問い合わせるのは AWS Lambda 関数 (Node.js 20) です。 AWS Lambda 関数は関

こんにちは！「SHIFTGroup技術ブログ」編集部です。 いつもご覧いただきありがとうございます！ 本年もどうぞよろしくお願いいたします！ ■トピックス

Amazon Web Services (AWS) re:Invent 2023 での思い出は、ジャカルタで AWS Community Day Indonesia 参加後の作業を終えつつある今も鮮明です。チョークトークや、AWS サービスチームとの思慮に富んだディスカッションから、 AWS ヒーロー 、 AWS コミュニティビルダー 、そして AWS ユーザーグループ のリーダーたちとの出会いまで、実に素晴らしい体験でした。AWS re:Invent では、学び、つながり、イノベーションからインスピレー

こんにちは！「SHIFTGroup技術ブログ」編集部です。 いつもご覧いただきありがとうございます。 年末のご予定はお決まりですか？ 年の瀬、忙しくお過ごしの方も多いのではないでしょうか。 皆さまにとって、年末年始がよりよいお時間となりますように。 さて、早いもので年内ラストの週間ランキングとなりました！ 本日もこの一週間でもっとも読まれた記事の週間ランキングと、編集部が特にオススメする記事をピックアップして紹介します！

こんにちは、クラウドエース SRE ディビジョン所属の荒木です。 この記事では、JavaScript のパッケージ管理ツール「pnpm」についてご紹介します。 pnpm とは pnpm は Performant NPM を略したもので、JavaScript のパッケージ管理ツールです。npm や yarn と似ていますが、主にディスク容量の節約とインストール速度の向上、node_modules の厳格さに焦点を当てています。 これは pnpm の公式サイトのトップをスクリーンショットしたものなのですが、ペ

はじめに こんにちは、クラウドエース フロントエンドディビジョン所属の金です。 本記事では End to End テスト (E2E テスト) のツールの一つである Playwright について基本的な機能を中心にご紹介します。 本記事の対象者 E2E テストの初心者 Playwright を軽く試してみたい人 End to End (E2E) テストとは Playwright のご紹介を始める前に、E2E テストについて簡単にご説明します。 E2E テストは、アプリケーションが意図通りに動作するかどうか

本記事は TechHarmony Advent Calendar 12/23付の記事です。 こんにちは、広野です。 以前、別の記事で MUI から React のサンプルアプリが公開されていると紹介したことがあります。MUI をどのように使用するのか具体的なイメージを掴んでもらうためのサンプルだと思うのですが、なにげに React の学習用としても利用価値があると考えています。 今回は、その MUI 提供の React サンプルアプリを AWS Amplify 上で立ち上げる方法を紹介します。データベース

概要 Next.js14がリリースされたので、CRUDの動作確認までやってみました。 安定版になったServerActionsもお試しで使ってます。 内容はNext.js × microCMSでシンプルなTodoAppの作成です。 環境 macOS: 14.1 Next.js: 14.0.2 Node.js: 18.18.2 プロジェクトの作成 下記のコマンドを実行してプロジェクトを作成します。 npx create-next-app@latest ServerActionsを試すため、AppRouter