フロントエンド

TSKaigi2025に参加してきました!

はじめに AI Coding Agent Enablement in TypeScript 発表スライド 感想 TypeScript ネイティブ移植観察レポート 発表スライド 感想 機能的凝集を用いたコンポーネント分割 発表スライド サンプルコード generated by Claude4 感想 全体を通しての感想 発表…

10年来の年齢認証システムをモダナイズした話

はじめに 旧システムの課題 システム理解に向けた観測と整理 Datadog による運用状況の可視化 コードの精査と処理フローの再構築 ドキュメントの整備 技術選定 主な構成要素 Next.js、SSR(サーバーサイドレンダリング)の採用 Expressによるカスタムサーバ…

デジタル庁の「デジタル認証アプリ」と連携した本人確認機能をリリースしました

はじめに 導入のきっかけ プロジェクトの進行と、乗り越えた壁 テストカードが足りない、からのスタート 設計からフロントエンド巻き込みの大切さを痛感 STG(ステージング)環境と本番の差 民間導入事例がない中での判断と設計 関係者との連携に助けられた …

5万行弱あるSPA の JavaScript を TypeScript に移行した話

はじめに 移行の目的 移行計画 移行作業 トランスパイラの変更 tsconfig.json の作成 拡張子を変更 使用しているパッケージの型解決 CSS の named export に型付け グローバルな変数や定数の宣言を型定義ファイルに記述 any と ts-ignore でコンパイルエラー…

チーム全員がオーナーシップを発揮してページ表示速度を4倍にした話

はじめに 我々が抱えていた課題 表示速度改善プロジェクト プロジェクトのスタート Catchpoint Chromeの開発者ツール ページ表示速度の高速化に向けた取り組み 1)CSS、JavaScriptの外部ファイル化 2)EmotionからCSS Modulesへの移行 3)スクリプトの読…

【学生向け勉強会】teamLab×DMM tech meetup ~frontend~ を開催しました

初めに 開催経緯 テーマ設定と準備 今回のテーマ 入社から8ヶ月で経験したフルスタックエンジニアとしての挑戦と成長 BEエンジニアがFEの業務をできるようになるまでにやったこと 業務に役立つ!ブラウザデベロッパーツールの機能紹介と活用例 …

DMM meetup #40 / Think! FrontEnd #7 開催レポート

はじめに Think! FrontEnd とは? DMM meetup とは? OAuth 2.1 + PKCE のススメ ~ Spotify API を通して理解する、OAuth 2.1 + PKCE の基礎と実践~ DMM でデザインデザインシステムやってみてわかった、美味しいところ・美味しくないところ 組み込みアプ…

MVPパターンを採用したツール開発の効果

はじめに 開発したツールについて MVPパターンとは 導入背景 MVPを取り入れたことによる効果 ビューが増えた時の対応が容易である ロジック部分のテストが書きやすい 課題点 プレゼンターが肥大化しやすい MVPパターンに属さないクラスの置き場所が乱雑にな…

DMM TV Web速度改善の道 〜Tailwind CSS移行編〜

はじめに DMM TV Webで抱えていたCSSの課題 代替ライブラリの比較 移行のステップ フェーズ分け デグレ発生時の備え 現在のステータス コード例(Emotion) コード例(Tailwind CSS) パフォーマンス検証 さいごに PR はじめに この記事はDMM グループ Advent Ca…

判読困難な識別子の説明を埋め込むChrome拡張機能を作ってみた話

はじめに 背景 作成する拡張機能について 拡張機能の作成 事前準備 拡張機能のパッケージ化 スクリプトの実装 動作確認 おわりに はじめに こんにちは、レコメンドチームで機械学習エンジニアをしている24新卒の菊谷です。 最近、業務の補助ツールとしてChro…

Object.definePropertyを用いた動画再生のデバッグについて

初めに Object.definePropertyとは 実際のデバッグについて まとめ & 直近開催イベントの宣伝 DMM meetup #40 ~DMM.go × Think! FrontEnd~ 【学生向け勉強会】teamLab×DMM tech meetup ~frontend~ 初めに この記事は DMMグループ Advent Calendar 2024 の7日…

入社10ヶ月で行った Turtle デザインシステムの開発と関連する取り組み

はじめに 私のチーム 10ヶ月間での私の取り組みタイムライン Turtle とは Turtle の構成要素 デザイン原則 ガイドライン Turtle ライブラリ ドキュメント Turtle 開発で取り組んだこと デモサイト(リファレンスアプリ)の作成 デザイントークンの一元管理 …

Live2Dキャラクターの表示速度改善で学んだ高速化のポイント

はじめに Live2D制御とフロントエンド 機能追加に伴う表示速度の課題 ボトルネック調査 Live2Dキャラクター表示時に行われること 各処理に必要となる時間の計測 モーションの読み込みの改善 Live2Dにおけるモーションとは 課題 改善と結果 すで公式で対応済…