Techtouch Developers Blog

テックタッチ株式会社の開発チームによるテックブログです

フロントエンド

penv.macro を使ってハマった話

babel-plugin-macros を環境変数に応用した penv.macro を使ったときに遭遇した奇妙?な動きとそれを解決した経緯をまとめます

ブラウザ拡張の JavaScript を開発者ツール DevTools で効率良く調査する

この記事では、ブラウザのページやブラウザ拡張/コードスニペットで動作する JavaScript を調査する際の Chrome DevTools の活用方法について紹介をします。ネットワーク〜 Scripting など調査範囲の決め方やタブ別での実際の調査方法など。

Chart.jsをReactにProviderを使用して組み込んだシンプルなサンプル

この記事はテックタッチアドベントカレンダー18日目の記事です。 はじめまして、テックタッチアドベントカレンダー12月18日担当のyassanですよろしくお願いいたします。 普段は、テックタッチの管理画面を中心に、フロントエンドエンジニアとして業務に携わ…

React Query のレンダリング最適化を目指した話

エンジニアの macchii です。この記事はテックタッチアドベントカレンダー 14 日目の記事です。 テックタッチでは React を利用して WEB フロントエンドを開発しています。あわせて、リモートデータの取得、更新、キャッシングには React Query を導入してい…

ブラウザ拡張のE2Eテストを検討してみた(Playwright、Puppeteer、Cypress)

この記事はテックタッチアドベントカレンダー 8 日目の記事です。 フロントエンドエンジニアの taka です。Amazon Black Friday でフットウォーマーを買ったのですが、冷え性の自分には最高でした。冷え性の方には是非使ってみてもらいたいです。 今回は、モ…

Native Messaging を使い、ブラウザ拡張でプロセス間通信を行う方法

ブラウザ拡張で利用できる Native Messaging という技術を用いてブラウザ拡張からブラウザ外のリソースにアクセスする方法をまとめました。

Draft.jsを使ったWYSIWYGの実現

今回はテックタッチの機能の表現の幅を広げるために WYSIWYG 機能を実装しました。 本記事では、Draft.js を用いて WYSIWYG 機能をどのように実装したか、どういう難しさがあったかなどを紹介します。

Material-UIを使ってテックタッチのデザインシステムを実現した話

フロントエンドエンジニアのshioriです。 テックタッチでは、約1年前からアプリケーションを丸ごと作り直す再設計プロジェクトを進めており、そのタイミングでデザインシステムを導入しました。 この記事では Material-UI を使ったデザインシステム導入の経…

Material-UI v5を先取りする

この記事はテックタッチアドベントカレンダー24 日目の記事です。 テックタッチのフロントエンドエンジニアの taka です。 クリスマス・イブを満喫してしまったため投稿するのが遅れてしまいました(嘘) 今回は最もメジャーな React の UI ライブラリの一つ…

Nuxtの管理画面をReactに移行する試行錯誤

この記事はテックタッチアドベントカレンダー16日目の記事です。 15日目は terunuma サンによる Chrome 拡張の Overview of Manifest V3 を翻訳しました でした。Greasemonkey 黄金期の牧歌的な時代を過ごしてきた身なので、ブラウザの拡張がどんどん肩身が…

Chrome 拡張の Overview of Manifest V3 を翻訳しました

この記事はテックタッチアドベントカレンダー15日目の記事です。 14日目は kenyu による 開発組織におけるマネージャの責務を分解し、チーム運用してみる でした。 SET の @terunuma です。買い過ぎたパスタを有効活用しようと重曹(かん水の代用)で茹でた…

マウスのクリックイベントについて語る

この記事はテックタッチアドベントカレンダー11日目の記事です。 テックタッチのフロントエンドエンジニアのshioriです。 エンジニアですがデザインも学びたいということで、アドベントカレンダーのアイキャッチを担当しました。アドベントカレンダーの1日ご…

Amplify + Nx (React + Typescript) で爆速で monorepo 環境を構築する

この記事はテックタッチアドベントカレンダー9 日目の記事です。 8 日目は ポエマー masaru 氏による 少女に何が起ったか ~少女が他人のウェブサーバー構成を知るまでにやったいくつかのこと、そしてその結末~ でした。 ただのポエムかと思いきやかなりコ…

BHO (Browser Helper Object) をめぐる冒険

BHO を扱っていて体験した不思議をご紹介します。Internet Explorer(以下IE)の話になり今更感がありますが、世の中にはこんな不思議があるというのを垣間見ていただければなあと思います。

TypeScript 4.1 に更新しました

テックタッチで使っている TypeScript を4.1に更新したので、影響の大きそうな変更を紹介します。

作って理解する Babel プラグイン

この記事では、普段の開発で非常にお世話になっているツール Babel のプラグインを作成する方法と、Babel プラグインの例としての処理時間を計測するプロファイラーを紹介します。

Vuex + DDD のアーキテクチャを考える

この記事では、TypeScript + Vue で開発しているフロントエンドに今年からドメイン駆動設計(DDD)を取り入れ始め、ひとまず設計が落ち着いてきたのでその経緯とアーキテクチャについて解説します。