Wallaby.jsを使ってフロントエンド開発のテストを効率化しよう - Findy Tech Blog
Findy Team+でフロントエンドエンジニアをしている 川村(@peijun333)です。 Findy では、フロントエンドのコード品質と安定性を確保するために Jest などのテストフレームワークを積極的に活用しています。通常、Jest は CLI から実行してテスト結果をコンソールで確認しますが、コマンドを用意する手間や、テスト経過のデバッグのために都度 console.log などでその内容を確認しなければならずとても不便です。 そこで、今回はテストの自動化とリアルタイムなフィードバックを提供する JavaScript の統合テストツールである Wallaby.js を紹介します。Wallaby.js を導入することで、開発効率の向上が期待できます。 Wallaby.js とは？ 前提条件 VS Code でテストの修正 Wallaby.js はリファクタリングに強い スナップシ
[Next.js] 開発中のページを開発環境でのみ表示し、本番環境のビルドには含めないようにする
はじめに この記事について こんにちは、 @zomysan（Twitter） です。この記事では、Next.js で開発をしているWebアプリケーションのフロントエンドを対象に、開発途中のページをどう扱うかということについて書きます。 新しい機能やリニューアルのための開発を始めてあたらしいページを追加したものの、まだ途中なのでユーザーに見せられる状態ではない、ということはよくあると思います。ユーザーには見せたくないけど、開発環境やステージング環境では確認したい。でも本番環境には出したくない。そういうときどうしたら良いのでしょうか？ この記事の対象 この記事は以下のような人を対象としています。 Next.js で Web アプリケーションを実装している 開発中のページを本番環境に露出したくない まとめ 今回、私は以下のように実現してみました。 開発中のページについて、拡張子を .page.d
![[Next.js] 開発中のページを開発環境でのみ表示し、本番環境のビルドには含めないようにする](https://cdn-ak-scissors.b.st-hatena.com/image/square/8936786543ce5934ebbc3c8138bd1c9ca40bc4ae/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--WkL-5h-l--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BNext.js%25255D%252520%2525E9%252596%25258B%2525E7%252599%2525BA%2525E4%2525B8%2525AD%2525E3%252581%2525AE%2525E3%252583%25259A%2525E3%252583%2525BC%2525E3%252582%2525B8%2525E3%252582%252592%2525E9%252596%25258B%2525E7%252599%2525BA%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E3%252581%2525A7%2525E3%252581%2525AE%2525E3%252581%2525BF%2525E8%2525A1%2525A8%2525E7%2525A4%2525BA%2525E3%252581%252597%2525E3%252580%252581%2525E6%25259C%2525AC%2525E7%252595%2525AA%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E3%252581%2525AE%2525E3%252583%252593%2525E3%252583%2525AB%2525E3%252583%252589%2525E3%252581%2525AB%2525E3%252581%2525AF%2525E5%252590%2525AB%2525E3%252582%252581%2525E3%252581%2525AA%2525E3%252581%252584%2525E3%252582%252588%2525E3%252581%252586%2525E3%252581%2525AB%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Azomysan%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2I4Mjg2YmNjMDEuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3ASocial%252520PLUS%252520Tech%252520Blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzUxYTI1OGI3MTQuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
個人開発の「維持するための労働力」「インフラ費」をどう抑えるか 活動歴7年の開発者が語る、楽に長続きさせるための仕組み
個人開発の「維持するための労働力」「インフラ費」をどう抑えるか 活動歴7年の開発者が語る、楽に長続きさせるための仕組み 個人開発を「継続」する ke-ta氏の自己紹介 ke-ta氏：では、発表を始めます。今回は「個人開発を『継続』する 小さくはじめて、長くつづける」というタイトルで発表します。よろしくお願いします。 まずは自己紹介です。名前はke-taと言います。2022年に大学を卒業して企業に就職していたのですが、個人開発の時間を作りたいという理由から、4月に退職して独立しています。 なので今は個人開発メインで活動しているのですが、空いた時間にほかの会社の開発を手伝うことも少しあるので、それ用にYmdkitという別の法人を設立しています。 ふだんはTwitter（現X）とかでよくつぶやいています。だいたい個人開発に関連するつぶやきをしているので、よかったらフォローしてもらえるとうれしいで
松野泰己 スクウェアへの移籍と『ファイナルファンタジータクティクス』開発を語る
松野泰己さんが2024年1月29日放送のJ-WAVE『ゆう坊とマシリトのkosokoso放送局』に出演。クエストからスクウェアへ移籍した経緯や『ファイナルファンタジータクティクス』の開発について話していました。 （鳥嶋和彦）それでいよいよ、スクウェアに来るわけだ。で、僕はてっきり坂口が抜いたと思っていたんだけど。 （松野泰己）それはかなり誤解がありまして。 （坂口博信）ここではっきりさせておきましょうよ。 （鳥嶋和彦）公式見解としてね。 （坂口博信）僕がいくら言っても、信じないんで。 （松野泰己）まあ、そんなこんなでそのクエストで頑張ってはいたんですけど。やっぱり、僕以外のラインがうまくいかなくて。その、さっき言った最初のアクションゲームが途中でポシャッたりとかして。そうすると、人が余るじゃないですか。で、オウガバトルチームに入れるんですけど、会社としては結局、それって開発的にオーバーなわ
Next.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】
はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。（まだあまり更新は進んでいませんが…） このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが、その結果、記事のボリュームが大きくなってしまいました。長文ですが、興味のある方はぜひ読んでみてください🙏 また、この記事内で紹介した内容をセットアップしたリポジトリを公開しています。 Next.jsのボイラープレートとして活用可能ですので、興味のある方はぜひ覗いてみてください。
控えめな App Router と持続可能な開発 - PWA Night vol.59
PWA Night vol.59 ～フロントエンド設計の振り返り〜 (2024.01.17) https://pwanight.connpass.com/event/306410/ で使用したスライドです。本編 20 分。 ===== ▼ 元データで参考リンクとして張っていた URL たち ※ SpeakerDeck でダウンロードできる PDF はスライド中のリンクが有効です Offers「オファーズ」 - エンジニア、PM、デザイナーの副業・転職採用サービス プロダクト開発組織/エンジニアリング組織のマネジメント・パフォーマンス最大化 | Offers MGR（オファーズマネージャー） turbo/examples/basic at main · vercel/turbo Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offe
React コードを隠したまま GitHub Pages でサイトを公開する
はじめに GitHub には GitHub Pages というリポジトリから簡単に静的サイトを公開できる便利な機能がありますが、公開するリポジトリは public リポジトリである必要があります。一方、React を使っていると再利用可能な独自コンポーネントやライブラリなどを使いたくなり、それらは隠蔽しておきたいというニーズがあるかと思います。なので React を使った開発コードは private リポジトリで管理し、ビルドによって生成されたファイルのみを public リポジトリに格納して GitHub Pages で公開するのが理想的です。 （index.html等のビルドファイルはブラウザからも閲覧でき、そもそも公開情報なので public リポジトリ上にあっても問題ないという判断です。） 本記事は TypeScript + React + Vite でプロジェクトを構築し、開発用
保守しやすく変化に強いソフトウェアを支える柱 自動テストとテスト駆動開発、その全体像 ～Software Design 2022年3月号「そろそろはじめるテスト駆動開発」より | gihyo.jp
保守しやすく変化に強いソフトウェアを支える柱 自動テストとテスト駆動開発、その全体像 ～Software Design 2022年3月号「そろそろはじめるテスト駆動開発」より 今回、Software Design 2022年3月号 第2特集「そろそろはじめるテスト駆動開発 JavaScriptでテストファーストに挑戦」の第1章「保守しやすく変化に強いソフトウェアを支える柱 自動テストとテスト駆動開発、その全体像」を本サイトに掲載します。第2章以降については、本誌『Software Design 2022年3月号』電子版（Gihyo Digital Publishing、Amazon Kindle）をご購読いただければ幸いです。 第1章では、混同されることの多い自動テスト関係の概念を、自動テスト、テストファースト、テスト駆動開発の3つの段階に分け、それぞれの効果や注意点を説明します。ソフ
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 - Qiita
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ！ フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ！ ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまっ
カナダ大使館でだけ名刺交換やしりとりが失敗する話｜南治 一徳
祖母の就寝と、システムの不具合が同期して起こる事件。IT業界にはこういった事件がまま見られる……。ITサスペンス物としてこういうネタ楽しいのができるかもしれない。いや、間口狭すぎるか？ 祖母が就寝するとDBインサートができなくなる https://t.co/q2PBRL3JzS — 寺島壽久/ゲームキャストの中の人 (@gamecast_blog) January 8, 2024 この手の話、自分も大好物なんで早速リンク先に飛んで読ませていただいたのですが、自分の経験でもちょうどこんな話に当てはまる出来事があったことを思い出したので、noteにまとめました。それが、タイトルにもある「カナダ大使館でだけ名刺交換やしりとりが失敗する話」です。 まず、前提としてこの話は「どこでもいっしょ」（以降、どこいつ）というゲーム開発中の話でになりまして、25年ほど昔の話になります。タイトル中の「名刺交換」
結合テストを書くときはコードベースを分離している
新規開発の設計支援や古いコードベースを甦らせて欲しいという相談をもらったときに、最初にちょろっとコードだけお手本的なコードを書いてから引き渡しているのだが、そのときに必ず結合テストを書くようにしている。 3, 4年前から僕と付き合いがある人からすると、 「「「あの sadnessOjisan がテストを書くだと！！！」」」 という感じだと思うのだが、最近はテストに思うところもあってちゃんと書いている。 そしてそのテストコードだが、基本的にはアプリケーションから分離して書いている。その話をしたい。 OGP OGP は野方ホープで海苔が分離されて出てきた時の画像だ。 アプリケーションから分離したテストとはどういうことか 最終的にはテスト対象のサーバーを Docker コンテナで固めて、そのコンテナに対して HTTP リクエストを投げてその結果や DB の中身を検証するコンテナを docker
2023年度版フロントエンド開発環境構築徹底解説 - Qiita
この記事はNuco Advent Calendar 2023の1日目の記事です。 はじめに 2023年最新のフロントエンド開発環境についての紹介記事です。 分野別に、おすすめツール群と、その特徴などを紹介していきます。 デファクトスタンダードとみなせるようなツールや、最近盛り上がりを見せているものなどをラインナップしました。 これからフロントエンド開発を始めたい人はもちろん、長くご経験のある人にもプラスになる情報がきっとあるため、ぜひ参考にしてもらえると嬉しいです。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 フロントエンド開発おすすめツール集 エディタ エディタやIDEは好みの問題も大きいので、メジャーなものを簡単
新たなゲームエンジン「Arete Engine」発表。ユニファイドメモリへの最適化を特徴とし「Unityの1000倍高速」とうたう - AUTOMATON
アメリカ・サンフランシスコに拠点を置くソフトウェア開発企業Arete Gamesは11月11日、ゲームエンジン「Arete Engine」を正式発表し、バージョン0.1を公開した。主に2D/3Dゲーム開発向けゲームエンジンとして、現時点でPC（Windows/Mac/Linux）/iOSおよびVRデバイスをサポート。将来的には家庭用ゲーム機やAndroid、Steam Deckにも対応予定とされている。 Arete Engineは、Rustベースで開発されているECSゲームエンジンで、独自のアーキテクチャによる従来にないアプローチとして、ユニファイドメモリへの最適化が大きな特徴とされている。もともとはスタンフォード大学でのプロジェクトとして、およそ2年前に開発が始まったそうだ。サポートするプログラミング言語はRustのほか、C・C++・Swiftなどが挙げられており、C#への対応も進めてい
その例外、いつキャッチするの？
はじめに 最近、若手のコードレビューをしていて例外の使い方を教える機会があったので、ブログの方にもまとめたいと思います。今回はバッチ編。オンラインだとまた少し違う観点があると思います。また、言語はJavaを前提していますが考え方は例外機構をもつ言語ならあまり変わりません。 TL;DR 例外は原則キャッチしない。バッチは速やかに殺せ 個別箇所でログを出さずに必要な業務情報はExceptionを入れ子にして乗せる 長いバッチのためにはスキップもやむなし 原則、例外はキャッチしない JavaにはErrorとExceptionが存在し、OutOfMemoryErrorとかプログラム上ではどうしようもないものがエラー、ファイルが存在しない(FileNotFoundException)とかプログラム側でハンドリングするもの、と教科書では習うと思います。なのでException系はキャッチするものと、と
新卒エンジニアがESLintのFlat Config移行と格闘した話 - ドワンゴ教育サービス開発者ブログ
ESLintのFlat Configへの移行は進んでますでしょうか？試してみたでしょうか？ 今回はドワンゴの新卒エンジニアが初仕事として取り組んだ、ESLintのFlat Configへの移行に関して「その方法と嵌ったところの乗り越え方」をお伝えします。 この記事で言及すること Flat Configに書き変えるときに見る資料 ESLintのconfigをFlat Configに移行するとき、configs.recommendedなどのプリセットを用いる場合はFlatCompatを使う eslint-plugin-importを使用してると嵌る どうやって新旧configが同じになっていることを示すのか？ ESLintのFlat Configを書くことになりました こんにちは。N予備校 Web フロントエンド開発チームのsokunoです。私は現在4ヶ月に渡る新卒研修を経て、この8月から今の
個人開発で参考になるNext.jsリポジトリ10選
OpenStatus - ステータスページ App Router Turborepo Drizzle Clerk tRPC Tailwind shadcn/ui LLM Report - OpenAI モニタリング App Router Prisma NextAuth shadcn/ui Stripe Dub - URL 短縮 App Router Turborepo Prisma NextAuth Tailwind Stripe slug - URL 短縮 Prisma NextAuth tRPC Tailwind Cal.com - 日程調整 Turborepo Prisma NextAuth tRPC Tailwind Taxonomy - ブログ App Router Prisma NextAuth Tailwind Rowy - ローコード GUI Firebase Dorf -
「龍が如く7 光と闇の行方」の自動テスト活用事例とテスト自動化チーム（仮）による若手育成の取り組みについて
GAME CREATORS CONFERENCE '20の講演資料です。 動画のURL：https://youtu.be/jTIIeKKM68Q 『「龍が如く7 光と闇の行方」の自動テスト活用事例とテスト自動化チーム（仮）による若手育成の取り組みについて』 株式会社セガ 第1事業部 阪上直樹
Unity を捨ててお前は一体どこへ行こうというのだ？｜EIKI`
あらまし Unity が収益しきい値ありのインストール数ベース課金を突如発表し、それが2024/1/1から強制的にスタートすると告知──を発端とする一連の騒動がありました。↓ここに大体まとまってます 感想 いやーよくないですね。 自分は買い切り(ゲーム)畑なので、実害があるかといったら無いんですが（そもそも100万DL行かないと利用料発生すらしないので）、1DL あたり 1～5 円しか売上の上がらないカジュアルゲーム・ツールは大変ですよね。というか、無理。そして、明らかにそういうゲームを標的にしている。 プラットフォームがゲームの取捨選択をし、それをユーザに強制することで分断を促している 規約を突如変更し、過去に遡って強制的に適用するという背信行為を行っている この二つが大きな問題だと思います。あまりに大きな事件であるためにゲーム業界外まで情報が広がって錯綜している節ありますが、「（払える
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
契約トラブルの約半数は「契約書がないこと」。PLAYISMの講演「インディーゲーム開発者が知っておくべき契約の落とし穴」レポート【IDC2023】
GraphQLはどんな時に使うか
