エキサイト TechBlog.

https://tech.excite.co.jp/

エキサイト TechBlog.

フィード

記事のアイキャッチ画像
エキサイト就業型インターンBooost!!!を通じてバックエンドのアーキテクチャについて学んだこと
エキサイト TechBlog.
はじめに こんにちは!2025年9月の一ヶ月間、エキサイト株式会社のBB事業部で就業型インター ンシップ「booost!!」でバックエンドコースでインターンに参加させていただいた小椋遼 太郎です。今回はインターンで学んだことを振り返り、紹介します。 はじめに 自己紹介 インターンシップの業務内容 学んだこと 原則的な知識 命名規則の重要性 YAGNIの原則 KISSの原則 SOLIDの原則 設計的な知識 関心の分離 インターフェースと実装の分離 変更容易性 再利用性 MVC+RSの学びやすさ 最後に 自己紹介 私は大学3年生で、大学では情報系の学部に通っています。これまでは大学のプログラミ ン…
3日前
記事のアイキャッチ画像
就業型インターン「Booost!!!」の振り返り
エキサイト TechBlog.
はじめに エキサイト株式会社の就業型インターン「Booost!!!」に9月から取り組みました加来 安東(かく あんとう)です。今回インターンで取り組んだこと、自分の学べたことなど振り返ります。 はじめに 自己紹介 配属先で取り組んだこと 具体的に行ったタスク バッチ表示対象の占い師の先生の情報が入っているDBテーブルを新規作成 バッチ一覧取得 GET API 作成 バッチ登録 POST API 作成 GET、POSTAPIに対するテストコード作成 APIで叩いたレスポンスを用いてフロント側で表示させるための橋渡し(Repositoryの作成) 自分が得られた学び クリーンアーキテクチャの概念に…
3日前
記事のアイキャッチ画像
Booost!!! Excite Internship2025を通して学んだこと
エキサイト TechBlog.
はじめに Booost!!! Excite Internship2025に9月から1ヶ月の間参加させていただきました、戸井と申します。ヘルスケア事業部で開発を行ったので、インターンの振り返りをブログ記事としてまとめようと思います。 自己紹介 情報系の大学院で、ソフトウェア工学(特にLLMを用いたコード生成)の研究を行っています。趣味は漫画や本を読むこと、食べること、ゲーム、体を動かすことです。 最近はAIエージェントに興味があり、エージェントをシステムに導入した個人開発をやろうかなと考えてます。 個人開発やチーム開発での開発経験はありますが、完全に実務での開発は初めてです。 やったこと ヘルス…
3日前
記事のアイキャッチ画像
インターンシップ「Booost!!!」を通して
エキサイト TechBlog.
はじめに はじめまして! 9月のExciteの就業型インターンシップ「Booost!!!」に参加して得られた知見などを紹介します! 自己紹介 情報通信工学専攻の学部3年生です 個人でWeb開発を行ったり、アルバイトでフロントエンド開発の経験があります。 大規模アプリケーションに携わるのは初めての経験なので、現場の開発体験やエンジニアとして働くイメージを掴むことを目標に参加しました! 業務内容 Saas事業のFanGrowthにフロントエンド業務でアサインされましたが、面接時からバックエンドも担当してみたいという希望を唱えていたこともあり、後半にPHPを使ったAPI開発をすることができました! …
3日前
記事のアイキャッチ画像
社内向け管理アプリケーションのリプレイスでデザイナーが担ったこと
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 前回の記事では『エキサイトブログトップページのリプレイスでデザイナーが担ったこと』と題し、一般ユーザーに提供する外向きのアプリケーションのリプレイスでデザイナーが担ったことをご紹介しました。 今回は、社内用の内向きのアプリケーションの事例を用いて、一般ユーザー向けとは異なった試行錯誤の過程をご紹介します。 前提と背景 デザイナーとして目指した理想状態 理想状態への過程 使う人を選ばない、担当者が初日から使用できるようなUI/UXにする バックエンドエンジニアだけでUIの構築ができる環境を整備する まとめ 前提と背景 エキサイトブログでは、…
8日前
記事のアイキャッチ画像
エキサイトブログトップページのリプレイスでデザイナーが担ったこと
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 先日、弊社エンジニアの山縣がTECH Street主催のイベントにて、エキサイトブログのトップページを段階的にリプレイスした取り組みについて発表しました。 リプレイスの背景や段階的リリースに関する技術的な取り組みが紹介されています。 発表内容はこちらの記事からご覧いただけます。 tech.excite.co.jp 本稿では、エキサイトブログトップページのリプレイスでデザイナーが担ったことをご紹介します。 2025年時点で20年以上続くサービスであり、歴史の積み重ねと向き合いながらのリニューアルとなりました。新規とは違った知見となったため共…
9日前
記事のアイキャッチ画像
Tailwind CSSでデフォルトのテーマを無効にして完全に上書きする方法
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでデフォルトのテーマを無効にして完全に上書きする方法をご紹介します。 なお、本稿の内容は v4.1.13(2025年9月24日時点の最新版)のTailwind CSSに準じています。 実現したいこと テーマのネームスペースに対してinitialを宣言すると無効にできる まとめ 参考文献 実現したいこと 冒頭、実現したいことを整理します。 Tailwind CSSでは @import "tailwindcss"; を宣言した設定用CSSファイルの @theme{}にてテーマがカスタマイズできます。 例えば、デ…
10日前
記事のアイキャッチ画像
開発施策をドキュメント化するときに心がけていること
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、開発施策をドキュメント化するときに心がけていることをご紹介します。 はじめに なぜドキュメント化するのか チーム内向けの理由 チーム外向けの理由 どんなことをドキュメントに書いているか 関連ドキュメントのリンク 背景 仮説 狙う効果 競合調査 やること やらないこと 成功定義と検証方法 機能概要 まとめ はじめに 私は、エキサイトブログやウーマンエキサイトなどのメディア系のプロダクトの開発に従事しています。 その中で、新規機能追加や数値改善施策を担当する場合、「なぜやるのか」「なにをやるのか」「どう評価するのか」をドキュメント化す…
18日前
記事のアイキャッチ画像
エキサイトブログのトップページを段階的にリプレイスする
エキサイト TechBlog.
はじめに エキサイト株式会社 Webエンジニアの山縣(@zsp2088dev)です。 普段の業務では、エキサイトブログの新機能開発や運用、その他メディア関連のサービスも兼任しています。 先日TECH Street主催のイベントで登壇した「エキサイトブログのトップページを段階的にリプレイスする」について、登壇内で発表したことと補足内容について紹介します。 はじめに イベント内容 登壇資料 リプレイスに至った背景 システム構成 段階的なリプレイスを目指した理由 段階的リプレイスを実現する ALBのリスナールールを使用した振り分けの検討 移行した結果 関連リンク おわりに イベント内容 以下のイベン…
1ヶ月前
記事のアイキャッチ画像
Excite Booost!!! 就業型インターン体験記 ― 個人開発では得られない気づき
エキサイト TechBlog.
はじめに 私は 2025年8月、エキサイト株式会社の就業型インターンシップ 「Booost!!!」 に参加しました。約1か月間、実際の開発現場に入り、これまでの個人開発では気づけなかったことを「チーム開発の現場での進め方」や「個人開発では意識しなかった責任あるコードの書き方」について書こうと思います。 自己紹介 フロントエンド・UIデザイン志望の27卒専門学生です。もの作りが好きで、これまではハッカソンや個人開発を通じてPython・Next.js・Unityなどを使いながらWebアプリやゲームを作ってきました。これまでの開発では、自分ひとりで作り切ることが多く「現場でのチーム開発の進め方」や…
1ヶ月前
記事のアイキャッチ画像
Sass事業部での就業型インターンシップを振り返る
エキサイト TechBlog.
はじめに 2025年8月1日から1か月間、「Booost!!! Excite Internship 2025」に参加しました。本記事では、インターンシップで取り組んだ内容や学び、感じたことをまとめて紹介します。 はじめに 自己紹介 インターンシップでの業務内容 学んだこと 技術面 Gitでのトラブル コンポーネント設計 大規模なコードベース 業務面 コミュニケーション 仕事のペース作り 感想 最後に 自己紹介 私は情報系学部に在籍する大学3年生です。これまでのWebアプリ開発経験は、個人で簡単なサービスを作り、保守・運用していた程度であり、本格的なチーム開発に挑戦するのは今回が初めてでした。イ…
1ヶ月前
記事のアイキャッチ画像
就業型インターン「Booost!!!」でのAPIのリビルドを通じて...
エキサイト TechBlog.
はじめに こんにちは!2025 年 8 月の一カ月の間、エキサイト株式会社の BB 事業部で就業型インターシップ「Booost!!!」に参加させていただいた久々津 歩です。今回は、インターンで学んだことを中心に紹介できたらなと考えています!! はじめに 自己紹介 インターンシップの業務内容 学んだこと 開発を通して学んだこと 依存性の逆転 責務の分離 開発に対しての姿勢 ジュニアエンジニアに求められるのは素直さだと言うこと YAGNI の法則(You Aren't Going Need It.) コミュニケーションの重要性 最後に 自己紹介 私は大学 3 年生で、データサイエンス系の専攻です。…
1ヶ月前
記事のアイキャッチ画像
Exciteのインターンの内容と学んだこと
エキサイト TechBlog.
はじめに 2025年8月から1ヶ月間インターンに参加させていただきましたねぎみかんです。 今回は、インターンで学んだ事を紹介します。 自己紹介 自分は情報系の学部3年生で、研究室が決まったばかりなので、何を研究するかは未定ですが、研究室としては、防災に関係するWebサイトを運営して研究してることが多いです。 中学生終わり〜高校初めの頃から独学でプログラミングをしており、制作したものをgithub pagesにちょこちょこ上げています。 アルバイトでは、大学1~2年生の頃にほぼ1人でフリマサイトのようなものを制作していました。 leekmikan.github.io 初めてのMacOSの本格的な…
1ヶ月前
記事のアイキャッチ画像
Amazon Linux 2023にCodeDeployをインストールする方法
エキサイト TechBlog.
はじめに Amazon Linux 2023でのCodeDeploy利用について インストール手順 まとめ 採用情報 はじめに BB事業部に最近異動になった岡崎です。 Amazon Linux 2 は 2026年6月30日 をもってサポートが終了します。 そのため、私たちのチームでは Amazon Linux 2023 への移行を進めています。 本番環境では CloudFormation を使って構築・運用する予定ですが、今回はその前段階として、検証のために手動でミドルウェアを導入しています。 この記事では、Amazon Linux 2023 に CodeDeploy エージェントをインストー…
1ヶ月前
記事のアイキャッチ画像
htmxで単一トリガーで複数リクエストする際に一つしか発行されない場合の対処法
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxで単一トリガーで複数リクエストする際に一つしか発行されない場合の対処法をご紹介します。 遭遇した事象 原因はhtmxのバグ まとめ 参考文献 遭遇した事象 冒頭、遭遇した事象を整理します。 なお、この事象が発生したのはバージョン2.0.2以前のhtmxです。 構図は以下の通りです。 今回の事象の構図 <button id="hoge" type="button">リクエスト発行</button> <!-- 発行される --> <div hx-get="/foo" hx-trigger="click from:#hoge">…
1ヶ月前
記事のアイキャッチ画像
Tailwind CSSで画像を他の画像に合わせて切り抜く(マスクする)方法
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSで画像を他の画像に合わせて切り抜く(マスクする)方法をご紹介します。 なお、本稿の内容は v4.1.12(2025年8月18日時点の最新版)のTailwind CSSを前提としています。 実現したいこと ユーティリティクラスのmask-*でマスクができる まとめ 参考文献 実現したいこと 冒頭、実現したいことを整理します。 以下のように、星型の画像の形に合わせて海の画像を切り抜いて表示することが今回のゴールです。 画像をマスクする過程のイメージ PhotoshopやFigmaを用いてあらかじめ切り抜いた画像…
1ヶ月前
記事のアイキャッチ画像
htmxでページ全体で有効な設定オプションをセットする方法
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxでページ全体で有効な設定オプションをセットする方法をご紹介します。 なお、方向の内容は v.2.0.6 (2025年8月12日時点の最新版)のhtmxを前提としています。 htmxとは 実現したいこと レスポンス リクエスト元 metaタグを用いてセットできる まとめ 参考文献 htmxとは htmxは、HTMLタグに専用の属性を記述することで、複雑なJSを記述せずにAJAXリクエストの発行を可能にするライブラリです。 htmx.org マークアップの延長のような感覚でAJAXリクエストを実装できるのがhtmxの強みです。…
1ヶ月前
記事のアイキャッチ画像
Tailwind CSSで監視対象から特定のディレクトリを除外する方法
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでユーティリティクラスの検知の監視対象から特定のディレクトリを除外する方法をご紹介します。 なお、本稿の内容は v4.1.11(2025年7月22日時点の最新版)のTailwind CSSを前提としています。 実現したいこと @source not()を使用すると除外設定ができる まとめ 参考文献 実現したいこと 冒頭、実現したいことを整理します。 Tailwind CSSでは、プロジェクト内で使用されているユーティリティクラスに応じて必要な分だけCSSを生成します。 v4以降のTailwind CSSでは…
2ヶ月前
記事のアイキャッチ画像
htmxでリクエスト発行前にHTMLの制約検証APIを使用して検査する方法
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxでHTMLの制約検証APIを使用して検査合格後にリクエストを発行する方法をご紹介します。 なお、本稿の内容は v2.0.6(2025年7月14日時点の最新版)のhtmxを前提としています。 htmxとは 実現したいこと hx-varidate属性でHTMLの制約検証APIの検査を有効化できる 注意点 まとめ 参考文献 htmxとは htmxは、HTMLタグに専用の属性を記述することで、複雑なJSを記述せずにAJAXリクエストの発行を可能にするライブラリです。 htmx.org マークアップの延長のような感覚でAJAXリクエ…
3ヶ月前
記事のアイキャッチ画像
第12回テクデザBeerBashを開催しました
エキサイト TechBlog.
こんにちは。エキサイトでエンジニアをしている吉川です。先日7/4(金)に社内イベントのテクデザBeerBashを開催したので、そのレポートを書いていきます。 BeerBashとは Beer Bashとはbeer(ビール)+ bash(にぎやかなパーティー)を合わせた造語で、真面目な部分を残しつつ、カジュアルな雰囲気で交流を行うイベントです。 年に3、4回社内スペースで開催しており、同じチーム内の人はもちろん、業務ではあまり関わることがない他部署の人たちとも繋がる場になっています。 今回はオフィス移転後初のBeer Bashで、EXCITE HUBを使ったよりリッチな設備で開催することができまし…
3ヶ月前
記事のアイキャッチ画像
htmxでHTTPレスポンスエラー時に任意のJavaScriptを実行する方法
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxでリクエスト発行してHTTPレスポンスエラーとなった場合に、任意のJavaScriptを実行する方法をご紹介します。 なお、本稿の内容は v2.0.6(2025年7月7日時点の最新版)のhtmxを前提とします。 htmxとは 実現したいこと htmx:responseErrorイベントとhx-on属性を組み合わせると実現できる まとめ 参考文献 htmxとは htmxは、HTMLタグに専用の属性を記述することで、複雑なJSを記述せずにAJAXリクエストの発行を可能にするライブラリです。 htmx.org マークアップの延長…
3ヶ月前
記事のアイキャッチ画像
【ExciteHD TechCon 2025】Tailwind CSS、Alpine.js、htmxによる「消しやすさ」を軸にしたフロントエンド戦略について発表しました
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、先日弊社で開催されたExciteHD TechCon 2025で発表した、Tailwind CSS、Alpine.js、htmxによる「消しやすさ」を軸にしたフロントエンド戦略についてご紹介します。 ExciteHD TechConについて 発表内容 フロントエンドのややこしいところ フロントエンドの理想状態とは どうすれば理想状態に近づくのか どうやって実現するのか CSSはすべてstyle属性に記述する? ユーティリティクラスだけでスタイリングするようにする? JSはすべてインラインスクリプトにする? 「ひとまとめ」を実現する…
3ヶ月前
記事のアイキャッチ画像
htmxでリクエスト発行前にwindow.confirmを実行する方法
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxでリクエスト発行前にwindow.confirmを実行して、確認ダイアログが承認された場合にのみリクエストする方法をご紹介します。 なお、本稿の内容は v2.0.4(2025年6月16日時点の最新版)のhtmxを前提としています。 htmxとは 実現したいこと hx-confirm属性でwindow.confirmが実装できる まとめ 参考文献 htmxとは htmxは、HTMLタグに専用の属性を記述することで、複雑なJSを記述せずにAJAXリクエストの発行を可能にするライブラリです。 htmx.org マークアップの延長…
3ヶ月前
記事のアイキャッチ画像
ExciteHD TechCon2025 を開催しました
エキサイト TechBlog.
はじめに こんにちは。エキサイトでエンジニアをしております、吉川です。 先日6/6(金)にエキサイトHD社内の技術カンファレンス「TechCon」を開催しました。本記事では、その様子をお伝えします。 昨年のTechCon運営の記事は以下からご覧いただけます。 tech.excite.co.jp TechConとは TechConは、エキサイトHDが毎年1回開催している技術カンファレンスです。主に2つの目的があります 社外に「エキサイト」の技術力や取り組みを発信し、採用活動に貢献すること 部署や職種を超えた社内交流を活性化させること テーマ:Hello World TechConでは毎年異なるテ…
4ヶ月前
記事のアイキャッチ画像
JSなしでdialogタグを制御できるbuttonタグのcommand属性を試してみた
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、buttonタグの新しい属性であるcommand属性を使用して、JSなしでdialogタグを制御する方法をご紹介します。 なお、本稿の内容は2025年6月9日時点のHTML Living Standardと各ブラウザの対応状況に準じています。 command属性とは 実現したいこと command属性を使用してダイアログ要素を制御してみる まとめ 参考文献 command属性とは command属性はbuttonタグの新しい属性の一つで、HTML Living Standardでも追加済みとなっています。 html.spec.wh…
4ヶ月前
記事のアイキャッチ画像
htmxのリクエストトリガーに別の要素のイベントを指定する方法
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxのリクエストトリガーに別の要素のイベントを指定する方法をご紹介します。 htmxとは 実現したいこと hx-triggerのfrom:*で別の要素のイベントをトリガーに指定できる まとめ 参考文献 htmxとは htmxは、HTMLタグに専用の属性を記述することで、複雑なJSを記述せずにAJAXリクエストの発行を可能にするライブラリです。 htmx.org 以下のように、マークアップの延長のような感覚でAJAXリクエストを実装できるのがhtmxの強みです。 <!-- クリックするとPOSTリクエストが発行される --> <…
4ヶ月前
記事のアイキャッチ画像
カスタムURLスキーム実装時に詰まったこと (スキームの指定について)
エキサイト TechBlog.
こんにちは。エキサイトでアプリエンジニアをしている岡島です。 最近、FlutterアプリでDeepLinkをカスタムURLスキームで実装する機会がありました。そのとき、動作確認のデバッグ用コマンドではカスタムURLスキームからアプリが起動するのですが、TestFlightで配布したアプリではカスタムURLスキームが無効な状態になっていました。その原因について共有します。 結論 起こった事象 原因の調査 解決策 まとめ 参考 結論 アプリ側でカスタムURLスキームを指定する時に、大文字を含んだスキームで定義してたことが原因でアプリが起動しませんでした。 スキーム名をすべて小文字にすると解決しまし…
5ヶ月前
記事のアイキャッチ画像
textarea要素のサイズ変更を提供する方向を制御する方法
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、textarea要素のサイズ変更を提供する方向を制御する方法をご紹介します。 実現したいこと CSSプロパティのresizeで制御が可能 注意点 Tailwind CSSの場合 まとめ 参考文献 実現したいこと 冒頭、実現したいことを整理します。 texarea要素は、要素右下のつまみをドラッグすることでサイズ変更が可能です。 CodePenを用意しましたので体験してみてください。 See the Pen サイズ変更が可能なtextarea要素 by AyumuSaito (@ayumusaito-excite) on CodeP…
5ヶ月前
記事のアイキャッチ画像
htmxでAJAXリクエスト時に送信されるパラメータをフィルタリングする方法
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxでAJAXリクエスト時に送信されるパラメータをフィルタリングする方法をご紹介します。 なお、本稿の内容は v2.0.4(2025年4月28日時点の最新版)のhtmxを前提とします。 htmxとは 実現したいこと hx-paramsで実現可能 まとめ 参考文献 htmxとは 冒頭、簡単にhtmxについてご説明します。 htmxは、HTMLタグに専用の属性を記述することで、複雑なJSを記述せずにAJAXリクエストの発行を可能にするライブラリです。 htmx.org <!-- クリックするとPOSTリクエストが発行される -->…
5ヶ月前
記事のアイキャッチ画像
Tailwind CSSでグラデーション背景をスタイリングする方法
エキサイト TechBlog.
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでグラデーション背景をスタイリングする方法をご紹介します。 なお、本稿ではv4.1(2025年4月21日時点の最新版)のTailwind CSSを前提とします。 実現したいこと Tailwind CSSでlinear-gradientを実現する方法 まとめ 参考文献 実現したいこと 冒頭、実現したいことを整理します。 CSSでは要素の背景色をグラデーションにすることもできます。 通常のCSSではlinear-gradient()関数を使用します。 例えば、「上方向に赤から青」というグラデーションを表現する場…
5ヶ月前