電通総研 テックブログ

電通総研が運営する技術ブログ

フロントエンド

【React】LinkifyとMUIを一緒に使って文字列内のURLをリンク化する

こんにちは、X(クロス)イノベーション本部 ソフトウェアデザインセンター セキュリティグループの大西です。現在、TypeScriptとReactを使ってWebアプリを開発していますが、フロントエンドの実装を任された際にLinkifyとMUI(Material UI)を合わせて使う場…

Expo Tutorial前編

電通国際情報サービス、オープンイノベーションラボの比嘉康雄です。 今回は、Expoの公式チュートリアルをやっていきたいと思います。 プロジェクトの作成 Download assets Install dependencies アプリの実行 コードの編集 テキストの文字色の変更 イメージ…

Expo/React Native入門

電通国際情報サービス、オープンイノベーションラボの比嘉康雄です。 今回は、Expoに入門します。 Expo とは、開発者が React Native 単体で開発した場合に意識しないといけなかったネイティブ部分を隠蔽して、アプリケーション本体の開発をより Web アプリ…

Next.jsのgetServerSidePropsを使ってBlue/Greenデプロイでハマった件

こんにちは。Xイノベーション本部ソフトウェアデザインセンターの陳です。 この記事ではNext.jsのgetServerSidePropsの利用でハマったことについて話します。 Server-side Rendering(SSR)とgetServerSideProps Server-side Renderingはリクエストごとにサ…

フロントエンド開発にちょっと慣れてきた方におすすめしたいPatterns.dev

みなさんこんにちは、X イノベーション本部ソフトウェアデザインセンターの徳山です。 本記事は電通国際情報サービス Advent Calendar 2022 12月9日の記事です。 ISID に入社して1 ヶ月ばかりですが、今まで携わってこなかった技術領域に触れる機会が増えそ…

Nuxt 3 の Stable 版がリリースされたので触ってみる

本記事は電通国際情報サービス Advent Calendar 2022の8日目の記事です。 執筆者は Xイノベーション本部 AI トランスフォーメーションセンター所属の山田です。 この記事では先日(2022年11月中旬)に安定版がリリースされた Nuxt 3 について紹介します。 な…

E2Eテストフレームワーク「Cypress」

はじめに Cypress 導入、操作手順 テストコードの実装方法 お気に入りポイント TypeScript対応 Custom Commands cypress/support/commands.ts cypress/support/e2e.ts fixture cypress/fixtures/users.json cypress/support/e2e.ts ハマりポイント iframe ド…

Storybook6(CSF)の基本実装

こんにちは。ISID コミュニケーションIT事業部 瀧川亮弘(あきひろ)です。 プロジェクトにてStorybookを利用しています。 Storybookの概要と基本的な実装方法をお伝えできればと思います。 Storybookとは? 一言でいうとUIのカタログです。また、それを作成…

XD、Figmaのデザインをコードに変換するツールを調べてみた

皆さん、こんにちは。Xイノベーション本部ソフトウェアデザインセンターの陳 欣瑩です。 デザイナーが作ったデザインカンプを実現するのが大変!という悩みを抱えているエンジニアは多いでしょう。 フロントエンド開発をラクにするために、世の中にはデザイ…

Tailwind CSS入門

電通国際情報サービス、クロスイノベーション本部、オープンイノベーションラボの比嘉康雄です。今回取り上げるのはTailwind CSS。 Tailwind CSSは、最近人気急上昇のCSSフレームワークです。 メジャーなBootstrapなどのフレームワークは、あらかじめ見栄え…

フロントエンド依存ライブラリのバージョンアップ戦略

こんにちは、ISID デジタルビジネス推進室の浦本です。好きな食べ物は生八ツ橋です。 本記事は 電通国際情報サービス Advent Calendar 2021 の24日目の記事です。 はじめに 皆さんは、npmでインストールした依存パッケージを定期的に更新されていますか? 「…

React Hooks を理解しよう

本記事は電通国際情報サービス Advent Calendar 2021の 13 日目の記事です。 執筆者は 2021 年新卒入社の XI 本部 AI トランスフォーメンションセンター所属の山田です。 はじめに React Hooks とは useState useState を使うユースケース useEffect useEffe…