はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種類のロジックについて整理する。 レンダリング レンダリングをする際、コードはpropsとstateを受け取り、変換し、画面で表示したいJSXを返す。コードのレンダリングは結果のみを計算するべきでそれ以上のことをするべきではない。 イベントハンドラ イベントハンドラはコンポーネントの中にある関数で、Input Field の更新やユーザを他の画面へ誘導したり等、単純な計算以上の役割を担う。イベントハンドラはユーザの行動（ボタンクリック等）による、

「最高の電源タップ」と呼ばれるものがある。 しかし中身も含めて最高であるかは分からない。 なのでバラすことにした。 電源タップの選び方 家の電源タップ全部抜く 全部バラす サンワサプライ TAP-SP2110-1 (2018年9月購入) エレコム T-K6A-2625BK (2018年4月購入) ヤザワ Y02YBKS662WH (2011年製) 星光商事 型番不明 (2011年製) 代わりに買ったもの 終わりに 実家へのメモ 記事を書くのに使った工具 38in1特殊ドライバーセット アックスナイン 電源タップに言及した記事 電源タップの選び方 一週間ほど前、「最高の電源タップ」がバズっていた。 電源タップに拘り始めて18年、数百のタップを買い続けた結果出た最高の電源タップはこれです pic.twitter.com/lIbigmYH4A— まつもとりー / Ryosuke Matsumot

こんにちは。株式会社エニグモにてフロントエンドエンジニアを務めています新井です。 こちらは Enigmo Advent Calendar 2023 および アクセシビリティ Advent Calendar 2023 の 14 日目の記事です。 はじめに：ウェブアクセシビリティとは？ 1. ページ内の見出しの最適化 2. リンクや状態の判別を色の変化だけで行わないようにする 3. キーボード操作時のフォーカスインジケーターは非表示にしない 4. クリッカブルな要素の実装には a タグまたは button タグを使用する 5. 画像の代替テキストの指定と装飾的な画像の取り扱い 6. フォームコントロールには必ずラベルを付与する 7. フォームの入力欄のオートコンプリートを有効にする 8. ラジオボタンやチェックボックスを装飾する際は元の input の隠し方に気をつける 9. アコーディオン

こんにちは！こちらの記事は、アソビューAdvent Calendar 2023の21日目(A面)です。 はじめに 要求分析 ユーザーストーリーマッピング ユースケース分析 要件定義 設計・開発 スクラム まとめ We're hiring！ はじめに アソビューでプロジェクトマネージャーをしている杉浦と申します。現在、この度弊社では興行領域にチャレンジすべく座席指定可能なSaas型のチケット販売システムの開発を行なっております！ 私自身興行領域のプロダクトに携わった経験がなく初めは何を作ればいいのかもわからない状態でした。しかし多くの方々の協力の元なんとかプロジェクトを立ち上げることができました。これもひとえに開発にご協力いただいた関係部署のお陰だと感じています。今回はプロジェクト立ち上げから上流工程〜プロダクト開発までの長い道のりを振り返ってみたいと思います。 要求分析 私がアソビュー入社

この記事は アソビューAdvent Calendar 2023 の6日目（B面）になります。 アソビューでフロントエンドエンジニアをしている白井です。 今回は文字入力時に候補検索し表示できるような Input コンポーネントを作ってみようと思います。 果物検索補完付き Input 今のプロジェクトで使用している MUI の Autocomplete を使うことで簡単に実装できるのですが、オプションが多くて癖が強いことや、細かいことをやろうとしたりリクエストを間引いたりすると一手間必要になるので、そのあたりの解説をしていきます。 主に以下の3つのライブラリを使用して実装を進めていきます。 データ取得：SWR バリデーション：React Hook Form コンポーネント：MUI Autocomplete オートコンプリート付き Input の作成 まず、Autocomplete コンポーネン

アソビューAdvent Calendar 2023の2日目の記事です。 みなさんこんにちは！ 長く続いた暖かい日も終わり、本格的な冬が訪れようとしているアドベントカレンダー2日目…暖かい日差しの中お出かけをするのもいいけど、寒い季節に暖かい格好で寒空の下外に出るのも乙だなあと思っております、アソビュー株式会社でフロントエンドエンジニアをしている櫻井と申します。 今回は輪読会を通して学んだ知見をプロダクト作りに生かす取り組みについて紹介させていただきたいと思います。 はじめに 輪読会について 本を選ぶ なぜこの本を挙げたのか 輪読会について 進め方 輪読会終了後 改善活動について 社内勉強会で報告 良かったこと 輪読会 改善活動 まとめ We're hiring！ はじめに 輪読会についてはこれまで何回か経験をしたことがあったのですが、アソビューに入社してからはまだなく、また自身から周りのエ

こんにちはアソビューのフロントエンドのテックリードの井上です。 アソビュー！ Advent Calendar 2023の3日目（A面）です。 AC6を2回クリアして軽くロス状態です。３周目は心がくじけました。 アソビューのフロントエンドでProtocol Buffersで定義した型を利用して型安全な開発をしている話をしたいと思います。 アソビューのProtocol Buffers運用 型の無い世界 JavaScriptで戦ってた時代 protoからTypeScriptに写経 protoからも生成できるはず Protocol BuffersからTypeScriptの型を生成する やりたいこと 利用したライブラリ 設定内容 出力結果 元のproto 出力されるTypeScript ts-protoのオプションについて onlyTypes=true stringEnums=true unreco

www.hageatama.org 【追記】続編を書いたつもりが何の参考にもならないので読まなくても支障はありません。 先日、引越し先のインターネット契約で困ってたリアル友人にSNS上で細かくアドバイスしたら大変感謝されたので、今後は「まずこれ読んでおいて」と言えるような記事を書き残しておきます。 直近3年で3回引越し、プロバイダ利用4種の経験をまとめた素人記事でして、気になる点があればどんどんとフィードバックして充実させていきたいのでご指摘お願いします。 6/21（更新翌朝）：光コンセントがある前提で動くのは厳しくない？と言われて、確かにそう思ったので改訂。LANケーブルについての記述追加。 6/21（夜追記）: 不動産屋さんと光コラボについて追記 【主張の概要】 光コンセントが元からある物件を選べ フレッツ光回線でプロバイダをいつでも切り替えられるようにしろ IPv6 (IPv4 ov

スーパーファミコン 対戦格闘 1994 SUPER STREET FIGHTER Ⅱ -The New Challengers-

みなさんこんにちは。 アソビュー株式会社でフロントエンドエンジニアをしている櫻井と申します。 今回は、Next.js 12、React 17、TypeScript 4.7 で開発していたプロジェクトをNext.js 13、React 18 および TypeScript 4.9 にバージョンアップした際の対応について書きたいと思います。 目的と背景 やったこと 環境関連の変更 Next.js や React のバージョンの変更 lint 関連のバージョンの変更 next-transpile-modules の削除 React 18 へのアップデートに伴う対応 TypeScript 4.9 へのアップデートに伴う対応 satisfies operator まとめ 目的と背景 昨年のアドベントカレンダーでご紹介した通り、現在、下記の記事にあるような大規模なシステム刷新プロジェクトが進行中です。そ

こんにちは！ アソビューでフロントエンドエンジニアをしている野口です。 以前ShopifyテーマにReactのコンポーネントを描画する方法の記事を書いていますが、今回は実際に開発を進めてみてReactを使って機能拡張する上で苦労した点を紹介していきます。 はじめに 1. 本番・ステージング環境間のコード管理 対応の背景 コード連携 ブランチ運用 2. 購入完了画面にReactコンポーネントを描画する Reactコンポーネントの描画 3. Shopifyオプションアプリとの共存 オプションアプリ bold product optionsの出しわけ 最後に はじめに 弊社では、アソビュー！に掲載されている遊びの中から厳選した体験を、家族や友人にプレゼントできるアソビュー！ギフトというサービスも展開しています。 サイト自体は、Shopifyを利用してECサイトを構築しており、テーマはDawnを適

こんにちは。アソビューでフロントエンドエンジニアをしている白井です。 アソビューでは2022年7月から、業務時間の10％ほどを使ってフロントエンドまわりの改善を行うワーキンググループを始めました。 この取り組みの立ち上がった経緯、これまで実施してきた施策、そしてエンジニア視点で見たやりがいなどを記載していきます。 立ち上がった背景と経緯 まずはじめに、改善プロジェクトが立ち上がった背景と経緯をご説明します。 普段の開発で新機能の実装や機能追加、バグ修正といった優先度の高いタスクが多くある状況下で、優先度の低いフロントエンドタスクは後回しになることが多く、気づけば大量のタスクが積まれていっていました。 UX上の小さなペインポイント デザインはあるものの手をつけられていないデザイン変更系タスク フロントのトレンド変化によって実務上に影響があるようなコード負債 上記のようなタスクが徐々に増えてき

Autocomplete workshopというミーティングが今年1月に行われたようで、autocomplete方面が盛り上がりつつあるみたいです（whatwg/html#4986）。 このワークショップのノート（Google Doc）が公開されていますけれども、参加者にブラウザーベンダー*1がいるのは当然として、Eコマースのプラットフォーム方面（Shopify、WIX、Checkout.com、Shipper HQ）が参加しているのが興味深いところ。 箇条書きでまとめられているものを雑に引っ張ってみると actocomplete属性の拡張をこれから考えていくことになるが、目下で注目しているのは名前と住所 250サイトについて入力フォームを調べてみた 日本を含めたいくつかの国は、オートフィルがうまく機能しない どの情報を1つのフィールドに入力するかについて、サイトごとにまちまち 日本では氏

はじめに サーバサイドエンジニアのgrnishiです。すっかり如月も末日です。明日からは弥生ですね。花粉が大暴れしているようですが、花粉症の皆様はいかがでしょうか？ 私はまだ花粉症にはなっていませんので元気はつらつです。 本題 表題の通りですが、いろは順でソートしたいなと思って(3分ぐらい)調べてみるとC#、JavaScript、CommonLisp、Excelのソースが見つかりました。 pronama.jp var.blog.jp numb86-tech.hatenablog.com denthor.exblog.jp しかし、PHPが見つからなかったので作ってみました。 といっても他の言語から移植しただけで、自分で何かを考えたわけではありません。 というのは今回の目的は「いろは順のプログラムを書く」という事ではなく、ある重要な事柄を調べるという事でした。 目的 さて、私はクイズが好きで

モバイルゲームクライアント開発のテクニカルディレクターなどを最近やっている須藤 崇浩 | 面白法人カヤックと言います。 こちらは 面白法人グループ Advent Calendar 2022 の24日目の記事です。 明日はクリスマスですね。クリスマス翌日に売れ残って割引されたスイーツを買って美味しい思いをするのが好きです 🎂 本記事では表題に関して、昨年から参加しているモバイルゲーム開発案件で立ち上げから試行錯誤してる事について書いていきます。 「何故か開発後半でコードが複雑になってメンテナンスしづらくなる」「人間に書かせるべきでは無いのではないか？」..などコードの品質について悩んだ経験のある方に多少なりとも参考になる内容になれば幸いです。 目次 目次 コードレビュー 開発初期 「チームとして良いとされるコード」とは？ 開発後期 新人のオンボーディング 複雑度の低いシステムから徐々に難易

この記事は、アソビュー！ Advent Calendar 2022 の 17日目（裏面）です。 みなさん、こんにちは。アソビュー！でフロントエンドエンジニアをしている白井です。 弊社ではバックエンドエンジニアの比率が多いこともあり、CSS 怖い！CSS わからない！という声をよく聞きます。 CSS と少しでも仲良くなるために、今回はレイアウトを作る際に基本となる幅（width）、高さ（height）、余白（margin）を指定する際に考えていることなどお話ししようと思います。 まずはじめに レイアウトを整える前に、不要な CSS プロパティは消しておく 普段作業していて CSS を書き換えていると不必要なスタイル定義は意外と残ってしまいがちです（よくやってしまいます…）。 色や形に関するプロパティは大体決まっているので重複したりすることは少ないですが、要素の位置は display、posi

アソビューAdvent Calendar 2022の13日目の記事です。 はじめに 在庫管理とは 在庫管理できると何が嬉しいのか？ 原価低減 価値損失のリスク回避 棚卸回数の削減 販売機会の損失防止 レジャー、アクティビティ領域における在庫管理 ロケーション 入庫 出庫 計画外入庫 計画外出庫 理論在庫の管理 提供できる価値について ゲストへの価値提供 パートナーへの価値提供 アソビューが解決すべき在庫管理における課題 ゲスト課題 パートナー課題 まとめ はじめに こんにちは。 アソビュー株式会社にてプロジェクトマネージャーをやっております杉浦と申します。 アソビューにジョインして5カ月が経過しました。 私は前職ではロジスティック領域における在庫管理や生産管理といったシステムの開発に従事してきました。アソビューではウラカタチケットやウラカタ予約といったレジャー/アクティビティ領域におけるS

アソビューAdvent Calendar 2022の12日目のブログです。 本日の裏面はこちらになります。 tech.asoview.co.jp こんにちは！ アソビューでフロントエンドエンジニアをしている野口です。 今回は、Shopifyのテーマ上でReactのコンポーネントを描画する調査をしたのでその内容を紹介していきます。 はじめに 弊社では、アソビュー！に掲載されている遊びの中から厳選した体験を、家族や友人にプレゼントできるアソビュー！ギフトというサービスも展開しています。 そのアソビュー！ギフトはShopifyを利用してECサイトを構築しており、テーマはDawnを使っています。 アソビュー！ギフトのトップページ 今回、一部機能においてアソビューで管理している別のアプリケーションから情報を取得したいという要望が出てきました。 UIもテーマのスタイルを利用するのではなく独自でstyl

アソビュー！ Advent Calendar 2022の10日目です。 8月に入社しアソビューでバックエンドエンジニアをしている長友です。 みなさま再帰クエリ使っていらっしゃるでしょうか！ 最近アソビューではmysqlの8系へのバージョンアップを行った為、再帰クエリの利用が可能となりました。 そこで本日は、アソビュー競馬部にも所属しておりサラブレッドの血統好きな私が再帰クエリを使ってツリー構造の血統表を作成してみるというお話です。 血統表とは ~ 本稿の目的 再帰クエリについて mysqlにおける再帰クエリの構文 再帰クエリとナイーブツリー構造 血統表作成における再帰クエリ 血統表のデータ構造 血統表を作成するクエリ ポイント1. 世代を表すgenerationを0で初期化し、各再帰の中でインクリメントする ポイント2. 世代内での配置を表すpositionを初期値1で定義し、再帰で取得す

はじめに アソビュー！ Advent Calendar 2022の8日目です。 2019年ごろから基本的にReact hooksを使用しており、REST APIを呼ぶ際も以前紹介したこちらのようにhooksベースで行っています。今回はその中でSWRに着目してご紹介したいと思います。tech.asoview.co.jp SWRとは？ SWRとはstale-while-revalidateの考えに基づいたデータ取得用のライブラリのことで、stale-while-revalidateは直訳すると「再検証している間は古いまま」というようなニュアンスの意味になります。 公式ドキュメントにも記載されておりますが、APIリクエストがされたら、まずそのAPIのキャッシュを返却し、APIのレスポンスが返ってきたらその最新の取得結果をキャッシュと置換するというのが、一番基本的な機能です。 SWRを使用すること