Techtouch Developers Blog

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

フロントエンド

テックタッチの社内勉強会紹介

テックタッチで行われているエンジニア社内勉強会について紹介しています。

いい感じの typescript-eslint ルールを探してみた

テックタッチアドベントカレンダー23日目を担当するフロントエンドエンジニアの ozaan です。 最近ハマっているものは、カルディなどで売られているホーマーロイヤルミルクティベース無糖です。よろしくお願いします。 弊社では、フロントエンド領域の技術ス…

いますぐできる!Webアクセシビリティ改善3選

テックタッチアドベントカレンダー 22 日目を担当する、フロントエンドエンジニアの shoko です。クリスマスが大好きで、12 月に入ってからは毎日うきうきしています! 本日のテーマは「アクセシビリティ」です。 アクセシビリティとは? アクセシビリティと…

パフォーマンス最適化を目指したフレームワーク「Qwik」について

パフォーマンス最適化を目指したフレームワーク「Qwik」について学んでみました。

JavaScriptランタイム事情 2022冬

今年になって JavaScript の新しいランタイムである Bun をよく目にするようになりました。Node.js、Deno に続く JavaScript ランタイムの勢力となるわけですが、それぞれどのように違うのか、それぞれが生まれた背景やコンセプトから理解していこう!という…

useSyncExternalStoreを使ってみた

テックタッチアドベントカレンダー17日目を担当する kenshin です。 今年もあと少しで終わりですね。今年を振り返るのために2022年に食べたラーメンの杯数を数えてみると121杯(執筆時点)でした。年末までにあと何杯食べられるかな。 さて、今回は React18 …

TanStack Query (react query) でパフォーマンス問題に遭遇したので解決してみた

テックタッチアドベントカレンダー 12 日目を担当する、フロントエンドエンジニアの taka です。 今回は TanStack Query を利用する上でパフォーマンスの問題に遭遇してしまったので、その内容について共有したいと思います。 tl;dr TanStack Query (react q…

Material-UI の Skeleton コンポーネントを使って UX を向上させよう!

Material-UI の Skeleton コンポーネントを使って、UX がどのように変化するのかを見ていきます!

Puter という Web ベースの OS 上でアプリをつくってみた

テックタッチアドベントカレンダー8日目を担当する kenyu です。 今回は Puter という Web ベースの OS 上でアプリをつくってみました。 Puter ってなに? Puter とは Web ブラウザ上で動作するデスクトップ OS のようなサービスです。 puter.com これまでも…

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)を取り入れ始め、ひとまず設計が落ち着いてきたのでその経緯とアーキテクチャについて解説します。