こんにちは、サイオステクノロジーの遠藤です。 今回は、WebフレームワークであるRemixとルーティングライブラリであるReact Routerが統合されたReact Router v7のルーティングについてまとめていきます。 ルーティング方法 React Router v7では、Configuring Routes、Component Routes、File Route Conventionsの３種類のルーティング方法があります。 Configuring Routes React Router v7のデ

Introduction Hello! JSConf JP 2024 recently took place, and we were proud to support it as a premium sponsor! In this post, we’d like to share a session report from our team members who attended the event firsthand! ITOYU You Don’t Know Figma Yet - Hackin

こんにちは、サイオステクノロジーの遠藤です。 今回は、 JavaScript Rising Stars で2023年、2024年と二年連続で１位に輝いたUIコンポーネントコレクションであるshadcn/uiについてまとめていきます。 では始めていきましょう！ shadcn/uiとは？ shadcn/uiはRadix UIとTailwindCSSを用いて作成されたUIコンポーネントコレクションです。 shadcn/uiの一番の特徴は公式ドキュメントにも This is not a component lib

マイナビジョブサーチ WebチームのK.Kです。 今回は、Next.jsの画像最適化のお話をしたいと思います。 先日インフラ担当の方からこんな指摘をされました。 「Acceptヘッダーを転送していないから、画像の最適化が活かされていない。」 最初よくわからなくて「？」となったので、これをきっかけにNext.jsの画像最適化について調べてみました。 Next.jsの画像最適化とは？ Next.jsではimgタグ、または、next/imageのImageコンポーネントを使用して画像を描画します。 この内、ne

はじめに こんにちは、クラウドエースの第3開発部に所属している金です。 本記事の前半では OAuth 2.0 の仕組みを軽く解説し、Next.js のコードを書きながらその動作を理解していきます。 対象読者 OAuth 2.0 の仕組みを知りたい方 Next.js で OAuth 2.0 を実装したい方 NextAuth.js の経験はあるが、OAuth 2.0 の仕組みを理解したい方 Next.js を経験したことがある方 事前準備 Next.js プロジェクトの作成 (本記事では ver. 14.1.

はじめに こんにちは、クラウドエースの第3開発部に所属している金です。 本記事の前半では OAuth 2.0 の仕組みを軽く解説し、Next.js のコードを書きながらその動作を理解していきます。 対象読者 OAuth 2.0 の仕組みを知りたい方 Next.js で OAuth 2.0 を実装したい方 NextAuth.js の経験はあるが、OAuth 2.0 の仕組みを理解したい方 Next.js を経験したことがある方 事前準備 Next.js プロジェクトの作成 (本記事では ver. 14.1.

今日、 AWS Amplify Hosting は、AWS Amplify アプリケーションの IAM Compute Roles を導入しました。これにより、コンピュート実行時から AWS サービスへの安全なアクセスを可能にし、サーバーサイドレンダリング機能を拡張できるようになりました。IAM Compute Roles を使えば、開発者はサーバーサイドレンダリングアプリに特定の権限を付与でき、Amplify が他の AWS サービスへの承認された呼び出しを行えるようになります。この新機能により、セキュ

はじめに 初めまして！新卒一年目のけに、後藤、塚崎です。 本記事では、私達が参加したエンジニア定例合宿で開発した飲食店に関する投稿を行うサービス「ふーどぴあ」について紹介します。 エンジニア定例合宿の詳細につきましては以下の記事をご覧ください。 今年もリアルハッカソン合宿に行ってきました！＠ノジマ大磯スクウェア チームメンバー紹介 けに 今回の担当：バックエンド全般、DB構築、ログイン処理 一言：お金が貯まりません 後藤 今回の担当：API実装、SQL文作成 一言：散歩マスターになりました。 塚崎 今回の

はじめに こんにちは、計測システム部フロントエンドブロックの平田です。 私が所属する計測フロントエンドブロックでは ZOZOMETRY というスマートフォンを用いて身体計測し、計測結果を3Dモデルやデータとして可視化し、Web上で管理できるtoBサービスを開発しています。 このサービスのフロントエンドではReact（Next.js）を採用しています。更にそれらの知見を深めるために、NYで開催されたJSNation、React Summit US 2024、そしてWorkshopに参加してきました。 この記

こんにちは、サイオステクノロジーの遠藤です。 近年、AIを活用したコード生成ツールが急速に発展しています。その中でも、Vercelが提供するv0は、プロンプトを入力するだけでNext.jsアプリのコードを自動生成できるWebアプリとして注目を集めています。本記事ではv0を実際に試し、どのような形でNext.jsアプリが生成されるのかを確認していきます。では始めていきましょう！ v0とは？ Next.jsを開発しているVercelが提供しているAIを活用した生成型ユーザーインターフェースシステムです。プロン

LINEヤフーでは、2024年の10月に社内のWebフロントエンド開発に携わる社内のメンバーを対象に、昨今のWebフロントエンド関連のトレンドや周辺ツールの利用状況について調査するアンケート「Stat...

こんにちは、AGESTでエンジニアをしているタカです。 今回は、最近話題のAI活用型コードエディタ「Cursor」のComposer機能を使って、簡単なNext.js製Webアプリケーションを開発し、CI/CDパイプラインを構築してGoogle Cloudの環境にデプロイする、という一連の流れに挑戦します。 目的は、個人的にCursorの操作に慣れることと、直近で触れていなかったGoogle Cloudの設定やCI/CD周りの知識を思い出すことです。実践を通して、これらのスキルをブラッシュアップできればと

こんにちは、ミイダステックオフィスです。今回の社内勉強会ではフロントエンドの豊富な経験をお持ちの古川陽介さんをお招きし、フロントエンドの技術やエンジニアとしてのキャリア形成や働き方、そして日々の技術への向き合い方についてお話しいただきました。 本記事ではその概要と学びの一部を皆様に共有いたします。

SCSKの畑です。10回目の投稿です。 今回は 6回目 のエントリで記載した、aws-amplify のSSR (Nuxt3）対応の詳細もとい補足について記載します。小ネタです。 対応の背景などは同エントリに記載しているのでここでは省略します。   aws-amplify 用のコンフィグファイル実装 aws-amplify モジュールを使用するにあたり、AppSync や Cognito など、モジュールが使用する各種サービスの情報が必要となります。言い換えると、Amplify.configur

SCSKの畑です。9回目の投稿です。 今回は、 6回目 のエントリで少し言及したアプリケーションの初期化処理について、詳細について記載してみます。 アーキテクチャ概要 そろそろ食傷気味かもしれませんがいつもの図を。今回はほとんどアプリケーション側の話題ですが、一部 Amazon Cognito 認証の話が出てきます。 背景 これまでのエントリで説明した通り、本アプリケーションではテーブルのステータス（編集状態）管理が重要となりますが、中でもステータスの初期化をどのタイミングで実施するかというのが特に重要と