はじめに Webフロントエンド版DX Criteriaとは DX Criteriaについて Webフロントエンド版の位置づけ なぜ活用しようと思ったのか？ 具体的な活用事例として 1. 評価範囲の決定 2. アセスメントシートの準備 / チェックリストの記入 3. レビュー 4. アセスメ…

はじめに 前提知識 Cache handler とは わかったこと キャッシュ有効期限時の挙動 実は get メソッドの第二引数にコンテキストが渡される まとめ 参考資料 はじめに はじめまして、電子書籍開発部 基盤開発グループの加藤です。 我々基盤開発グループは主に…

はじめに コード品質とは なぜ仕組みが必要だったのか コード品質を保つ仕組みの構築 1. 循環的複雑度の検査と違反コードの解消 2. CIでの静的解析（ESLint）とマージルールの設定 3. 静的解析の強化（Prettier、ls-lint） まとめと今後の展望 最後に はじめ…

はじめに Think! FrontEnd とは？ Atomic Design から bulletproof-react へ – 構成リアーキテクト – DMMブックスを Next.js 化している話 大規模アプリをリアーキテクトした際の知見 データとコンポーネントの複雑さを整理整頓する おわりに はじめに こん…

初めに 画質AUTOの仕組み スムーズな画質変更への工夫 実際のコードを見ながら処理を追ってみる まとめ・宣伝 初めに この記事は DMMグループ Advent Calendar 2025 の12日目の記事です。 こんにちは。メディア基盤開発部でフロントエンドエンジニアをしてい…

はじめに Think! FrontEnd とは？ 研修で学んだリクエスト毎にページのレンダー方法を変える小技 TypeScriptで型レベルJSONパーサー Marpで学ぶHTML/CSS パネルディスカッション 懇親会 おわりに はじめに こんにちは！「Think! FrontEnd」運営の井内（@peng…

はじめに デザインシステムとは？ これまでの歩み さらなる価値提供のためにチャレンジできないか？ 最高のフロントエンドアプリケーションを最速で はじめに こんにちは！わたしたちは DMM.com の プラットフォーム開発本部 > Developer Productivity Group…

はじめに Turtle とは わたしたちのこれまでの取り組み AI-Turtle プロジェクトの誕生 Figma MCP サーバーを試す Turtle MCP サーバーを作る MCP サーバーの実装 ルールの作成 デザイントークンの処理 デザインデータは AI-friendly であるべき AI に考えさ…

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

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

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

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

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

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

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

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

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

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

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

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

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

はじめに セッション感想 React Aria のコントリビューターが思う React Aria の良いところ・これからなところを5分でお話します！ by まっつー CSSレイアウト再入門:完全に理解してCSSを記述するために by berlysia ESLint Plugin により事業, 技術ドメイン…

Lambda@Edge と CloudFront Functions の違い なぜ Lambda@Edge だったのか？ CloudFront KeyValueStore の何が嬉しいのか？ CloudFront KeyValueStore について知っておいたほうがいいこと CloudFront KeyValueStore はETag という仕組みによってバージョン…

Think! FrontEnd とは？ GraphQL Client+状態管理ライブラリを調査した話 利用者の生産性をどう上げるか：中規模モノレポの苦しみ おわりに こんにちは！「Think ! FrontEnd」運営の三浦です。日ごろはアルファ室という部署にて全社横断的なプロジェクトのPM…

Web版ポイントクラブのフロントエンドのシステム構成概要 本題 ポイント履歴一覧のページネーションのデザイン案 サービス間のシステム構成 ページネーション実装にあたっての課題 対応策 対応策の実装方法検討 useSWRInfiniteを活用 useSWRInfinite定義 ポ…

Think ! FrontEnd とは？ 第二回開催において工夫してみたこと 録画に関して 新卒研修でReact RecoilをProductionリリースした話 TypeScriptとAWS CDKでクラウドアプリケーション開発 WebRTCによるビデオチャットでもステレオ配信したい！ 質疑応答・パネル…

Think ! FrontEnd とは？ 千葉 弘太郎「オープニング・DMM.com のフロントエンドの今/今後」 赤石 博紀「React + Redux: Re-Architecture」 上井 慎之介「DMM百万長者のフロントエンドアーキテクチャ、そしてその次へ…」 高山 潤也「気がついたら JAMstack …

はじめに DMM 百万長者ってどんなサービス？ 技術をご紹介！ アプリケーション クラウドプラットフォームなど フロントエンド 超快適な UX Headless CMS 静的ファイルの CDN 配信 静的ファイルのソース維持 バックエンド API AWS Step Functions データドリ…

はじめに Nuxt.js v2 & PWA GAE/SE Node.js HowTo Nuxt.js v2プロジェクト作成 PWA化 GAE/SEセットアップ app.yaml設置 デプロイ まとめ 採用情報 はじめに こんにちは。イベント事業部の上井（ウワイ）と申します。 Nuxt.jsのv2が9月に正式バージョンとして…

はじめに 概要 導入と実装 インストール オプション 簡単な実装例 複数の構成要素による出力結果 便利に記述する CSSの注入 ダイナミックスタイル グローバルスタイル ワンオフグローバルセレクタ まとめ 宣伝 はじめに こんにちは、クリプトマイニング事業…