はじめに こんにちは。サーバーサイドエンジニアの mokuo です。 最近、ミニマムな React アプリを実装する機会がありました。 社内のメンバーにアドバイスをもらいながら、今（2024年前半） React アプリをミニマムに作るならこんな感じかな、という構成になった気がするので、ご紹介したいと思います。 実例の1つとして参考にしていただけますと、幸いです。 はじめに 本文 📝 機能要件 ⚒️ 採用したツール (npm モジュール) 📁 ディレクトリ構成 👨💻 プロトタイピングの実施 🍩 おまけ コンポーネント設計について フロントエンドに DDD のエッセンスを取り入れてみたい おわりに 本文 📝 機能要件 社内の限られた CS メンバーのみが利用する、管理画面を開発しました。 バックエンドは Golang で実装される API サーバーで、認証機能以外だと、2つの機能
はじめに こんにちは。カナリーでソフトウェアエンジニアをしている @yoshi-jr です。 私たちは 【もっといい「当たり前」をつくる】 をミッションに掲げている不動産テックカンパニーです。弊社では、現在下記のプロダクトを運用しています。 「Canary」: BtoC の部屋探しポータル（アプリ/Web） 「Canary Cloud」: BtoB SaaS（不動産の仲介会社様向けの顧客管理システム） この記事では、 CANARY のウェブ版（以降 CANARY Web）で利用している技術スタックをまとめています。 この記事を読んでわかること CANARY Web について技術スタックの全体像・概要が理解できる 話すこと CANARY Web のアーキテクチャ CANARY Web で利用しているモジュールとその歴史 話さないこと CANARY Web 視点以外でのアーキテクチャ 各モジュ
Vitest 2.0 is here! This release page lists all changes made to the project during the beta. For the migration guide, please refer to the documentation. 🚨 Breaking Changes Simplify mock function generic types and align with jest - by @hi-ogawa in #4784 (a0c1d37) Remove --segfault-retry - by @sheremet-va in #5514 (ed60e) This flag was introduced to combat threads segfaults. Our current recommendat
Storybookにおいて、Reactコンポーネントを使ったstoryを作成する際、単なるボタンのようなシンプルなコンポーネントであればcomponentプロパティに指定するだけで良い。 なおこの記事での解説は、Storybookのバージョン8.1.1に基づいたものである。 Button.tsx: import { MouseEvent, ReactNode } from 'react'; export interface ButtonProps { children?: ReactNode | undefined; onClick?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined; } export function Button({ children, onClick }: ButtonProps) { ret
【輪読会レポート】［入門］Webフロントエンド E2E テスト PlaywrightによるWebアプリの自動テストから良いテストの書き方まで 第3章「Playwrightのテスト用ツールセット（1）ロケ｜たぐち
【輪読会レポート】［入門］Webフロントエンド E2E テスト PlaywrightによるWebアプリの自動テストから良いテストの書き方まで 第3章「Playwrightのテスト用ツールセット（1）ロケーター」 はじめにこんにちは。ラクス フロントエンドチームのたぐちです。 今回は輪読会の実施レポートvol.1です。 書籍と読書範囲［入門］Webフロントエンド E2E テスト PlaywrightによるWebアプリの自動テストから良いテストの書き方まで(画像はこちらより引用)今回の読書範囲は第3章 Playwrightのテスト用ツールセット（1）ロケーターのP41～P62です。 議論・意見交換議論の様子(jamboard)付箋の内容を左上から順に読んで議論していきました。実際の議論順で内容を確認していきます。 getByLabel()でラベルからInput要素を探す 「getByLabel
初学者が、Vite, Cloudflare D1, Drizzle, Remix で個人開発してみてよかったこと・わるかったこと - Qiita
初学者が、Vite, Cloudflare D1, Drizzle, Remix で個人開発してみてよかったこと・わるかったことcloudflareReactRemix未経験エンジニア個人開発 ラジオ好きの方に向けたサービスを作りましたので、ぜひ使ってほしいという一心で記事を執筆しました。また、未経験初学者のなかではすこし珍しめな技術スタックを採用してみて感じた「よかった点、むずかしかった点」についても記載しました。（技術面での採用というよりかは初心者の個人開発における苦労ポイントとなっています、ご了承ください） Reactを中心に学んでいる初学者の人 個人開発におけるReactフレームワーク悩み中の人 ラジオ、お笑い好きの人 にぜひ読んでいただきたいです。 開発したのは、ラジオの切り抜きシェアプラットフォームサービスです。 コードはこちらです サービスの説明 利用イメージ ラジオの切り抜
はじめに 今回はユニットテストとE2Eテストを実装していきます。 前回の記事はコチラ この記事で制作したコードはコチラ ユニットテスト セットアップ jestと@nestjs/testingはあらかじめインストールされているのですぐにテストを書くことが可能ですが、一つだけ追加でパッケージをインストールしておきます。 import { Test, TestingModule } from '@nestjs/testing'; import { mock } from 'jest-mock-extended'; import { User } from '@prisma/client'; import { CreateUserUseCase } from '../createUser.usecase'; import { FirebaseService } from 'src/util/fir
こんにちは、crowdworks.jpの開発エンジニアをしている得能です。 クラウドワークスへの入社以来バックエンド開発のみ行ってきましたが、今年に入りフロントエンド開発の機会をいただけることになり、Vue.jsを使い新規画面実装などを行いました。 その際に、今後新しくcrowdworks.jpのフロントエンド開発を行う方々がスムーズに開発業務に入れるようにフロントエンド開発チュートリアルを作成しました。今回はその取組みについてお話したいと思います。 背景 crowdworks.jpはバックエンドはRuby on Rails、フロントエンドはERB、Vue.jsで開発されており、少しずつVue.jsで開発した画面への置き換えを進めています。 Ruby on Rails × Vue.jsの実装といえば、Vue.jsで画面実装、Ruby on RailsはAPIサーバーにする、がよくある構成か
Google App Scriptを自分のマシンで開発できる google clasp を使ってみる・前編 - Qiita
社内向け発表資料をQiitaに投稿。 GAS (Google App Script) とは GASの特徴 ChatGPTさんに尋ねてみるとこんな事いってきます。 Google App Script（グーグルアプスクリプト）とは、Googleが提供しているプログラミングツールです。 これを使うと、Googleのさまざまなアプリ（たとえば、Gmail、Googleドライブ、Googleスプレッドシートなど）をもっと便利にするためのプログラムを書けるようになります。 定期的にスクリプトを実行でき、決まった処理を自動化することができる スプレッドシートに格納されたデータを処理することができる ウェブブラウザとGoogleのアカウントがあれば簡単に始められる 利用は基本的に無料 Googleのサービスと簡単に連携することができる GASのデメリット 実行時間に制限がある スクリプトの実行時間は１回の
サービスワーカーとは何ですか？ サービスワーカーは、ウェブアプリケーション、ブラウザ、および（利用可能な場合）ネットワーク間のプロキシサーバーとして機能します。サービスワーカーは、ソースとパスについて登録するイベントベースのワーカーであり、JavaScriptファイルの形式を取ります。サービスワーカーは関連するウェブページ/サイトを制御し、ナビゲーションとリソースリクエストを傍受して修正し、リソースを非常に詳細にキャッシュすることができます。これにより、ウェブアプリがどのような状況でどのように動作するかを完全に変更することができます （最も代表的な状況はネットワークが使用できない場合です)。 サービスワーカーのライフサイクル ダウンロード インストール アクティベーション ユーザーがサービスワーカーが制御するサイト/ページに初めてアクセスする瞬間、サービスワーカーは即座にダウンロードされま
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ミニマムな React Web アプリケーションの技術スタックを大公開！ - inSmartBank
2024年｜CANARY Web の技術スタック
Release v2.0.0 · vitest-dev/vitest
Storybookでcontrolledなコンポーネントを操作可能にしつつ引数をモックする
NestJS + graphQL + Prisma + Firebase でToDOリストを作ろう！〜テスト編〜
フロントエンド開発チュートリアルを作成し開発ハードルを下げた話 - クラウドワークス エンジニアブログ
BEサーバーを通さず、FEをテストする方法 - Qiita