こんにちは！sawaです！ 12/17のHapInSアドカレ記事です！よろしくお願いします！ 今回は、Next.jsでスクロールポジションを動的に計測する関数を作成したのでご紹介します！ この関数は、「スクロールして特定のDOM要素を何割表示したか」を動的に求められるようになっています。 基準にする対象による違い ウィンドウの高さを基準に計算した時 特定の要素を基準に計算した時 活用シーン 計算式 関数を作成 ブラウザの高さを求める ウィンドウの上端から要素の上端までの距離を求める 特定のDOM要素の高さを求める 計算する 関数化 デモ おわりに 一般的なケースとしては、表示しているページ全体…
こんにちは。ソーシャル経済メディア「NewsPicks」NewsPicks Stage. 事業のエンジニアをしています、林です。 業務では Next.js / Rust / Go などを用いて、経済・ビジネス情報に特化した動画配信サービスである NewsPicks Stage. の開発・運用を行っています。 概要 NewsPicks Stage.（以下Stage.）では去年末ごろから Next.js のフロントエンドを App Router へ段階的移行を進めてきました。 tech.uzabase.com 1年ほどで 半分以上のページが App Router 化 され、知見や感想が溜まってきた…
はじめに Developer＆Designer Advent Calendar 2024 9日目の記事です こんにちは、クライアントサービス開発部のエンジニアの小高です。 弊社では開発環境に Github Copilot を導入しており開発効率が向上したことで開発体験が大きく向上しています。 Github Copilot は日々のアップデートにより、コード提案の精度が向上し、より実践的なコードを生成できるようになりました。 この記事では、シンプルな Todo アプリケーションを例に、Github Copilot を使ったコーディングと単体テストが実装できるのかを紹介したいと思います。 実装する…
■ はじめに i18nの定義と目的 ローカリゼーションとの違い i18n（Internationalization: 国際化） l10n（Localization: 地域化） i18nとl10nの関係 react-i18nextとは ■ React-i18nextの基礎 ライブラリのインストール方法 基本的な設定と利用 (TypeScript版) 基本的な設定 補足：ReactのXSS対策 コンポーネントでの使用例 ■ 言語リソースの構築 業務ドメイン領域の言葉の定義について 例: 測量図の英訳候補 公的な定義を基にした言葉の選定 ● 日本国憲法や条例を参照する ● 外務省など省庁の公式英語版…
この記事は、 PLEX Advent Calendar 2024の4日目の記事です。 こんにちは 株式会社プレックスでWebアプリケーションの開発をしているtetty0217 です。 はじめに 画像データを取り扱うフォームにおいて、入力した画像をプレビューで表示する機能が付属していることは珍しくないでしょう。 今日はそんなプレビュー機能の画像描画をnext/imageで無秩序に実装すると発生するクラッシュについて、Safariブラウザを題材として「なぜメモリリークが原因だったのか」「ブラウザでは何が起きていたのか？」という点をブラウザのレイヤー（Safari Web Inspector）とネイ…
こちらはバイセルテクノロジーズ Advent Calendar 2024の1日目の記事です。 こんにちは、開発２部でテックリードをしている早瀬です。普段はリユースプラットフォームのEC出品管理システムの開発を行っています。 私のチームでは、EC出品管理システム（通称EXS）の開発を行なっており、3年間に及ぶ開発の末に今年の9月にローンチされました。 私はプロダクトの立ち上げ時から参画しており、開発初期の技術選定から関わってきました。 長期に及ぶ開発の末に、ついにローンチされたので、今回はそのプロダクトの技術選定についての振り返りを紹介したいと思います！ 記事のボリュームもかなりあるので、興味の…
はじめに こんにちは！ テクノロジー戦略本部24年新卒の高橋です。 2023年の10月から内定者インターンを経験し、現在は開発3部CRMチームでフロントエンド(以後、FE)エンジニアとして働いております。 チーム内でFEの状態管理ライブラリを選定する機会があり、調査していく中で得た知見を共有したく、執筆に至りました。 少しでも状態管理ライブラリの選定に困っているFEエンジニアの参考になればと考えています。 はじめに 概要 前提 課題感 Context APIの思想とのズレ Context APIの記述量の多さ 状態管理ライブラリに求める要素 小さい単位で取り扱い可能 ボイラーテンプレートが少な…
こんにちはPlatform Development DivisionのAlek.Sと申します！フルスタックエンジニアとしてSecurity Suite, CRM Connect for Salesforceなどの開発を行っております。この記事は、CRM Connectの新製品開発で採用したNext.jsについて紹介します。そもそもReactとNext.jsって何、どのようなメリットがあるかについてまとめました。
URL共有機能の実装と活用：社内生成AIの普及を促進するツール はじめに 本記事では、弊社が開発を進めている全社向けの生成AIチャットサービスの一部機能である「個人プロンプトURL共有機能」について紹介します。この機能は、個人のテンプレートプロンプトを他のメンバーと手軽に共有できるようにし、社内の生成AI活用をさらに促進する目的で開発されました。 なお、リリース当初の取り組みに関する詳細は「Azure OpenAI Serviceで社内版ChatGPTのChatPCAを構築した話」に記載していますので、ご関心のある方はそちらもご覧ください。 目次 URL共有機能の実装と活用：社内生成AIの普及…
たぶん、自分自身を突き詰めると職人になりたかったんだと思おう。 ２６歳からシステムエンジニアを始めておそらくある程度の素養があったので５０歳の今まで続けられてきたのだと思う。 ただ、根っから臆病でいつか自分が必要とされない日が来てしまうかもしれないと言う不安から、システムエンジニア界隈の２８歳定年説、３４歳定年説、４０歳定年説に怯えあれこれ手を出していくうちに、今に至ってしまったのだがもう少し技術にどっぷりとハマりたかったと後悔しています。 家族を抱えて、収入が滞こおってしまわない様にと考えるあまり、本来技術職の面白いところから少し遠のいてしまっていました。
こんにちは。技術本部Bill One Engineering Unitの豊田（@helloyuki）です。Bill One 開発 Unit ブログリレー2024 Vol.10、Sansan Advent Calendar 25日目の記事です。実は1pxの微妙な画面上のズレが気になって仕方のないタイプです。 私自身はこれまでのキャリアでは、ほとんどバックエンドエンジニアとして過ごしてきました。正確にはバックエンドを主軸としつつ、多少のフロントエンド、クラウドインフラの構築、データエンジニアリングの経験も含みます。それぞれの領域に詳しい詳しくないは多少ありつつ、世間的にいうフルサイクルエンジニアと…
はじめまして。Platform Development DivisionのWataru.Nと申します！ 先日、Next.jsについてブログを書いていた Alek さんと同じチームで開発を行っています。 最近、調査の一環として簡易な負荷テストを行う機会があり、Goで作られた Vegeta というオープンソースのツールを使いました。 （名前についてはリポジトリを開くとわかりますが、あのベジータです） Vegetaは基本的にはCLIベースでシンプルに使えるものですが、Goのライブラリとしてシナリオを書くこともできます。私が担当しているサービス（Security Suite、CRM Connect）で…
こんにちは。iOS エンジニアの kamimi です。🌞 いきなり個人的な話で恐縮ですが、最近 PC（Macbook）が壊れました・・・！💥 「やばい・・・仕事どうするんだ・・・」 仕事に関してはたいていまずは会社から代替機を借りるという選択肢があると思うのですが、私の場合会社との物理的距離があまりにも大きいために不可能でした。。 となると今いる場所、今持っているものでどうにかするしかない。。！ということで必須に検討した結果、手元にある iPad での開発に挑戦しました！ ということで、 はじまりはじまり。 いきなりですが結論だけ知りたい人のために先にお伝えすると、 新規かつ小規模な iOS …
こんにちは！ 株式会社ケップルで Product Engineer をしている吉田です。 2024年10月に、スタートアップメディア「KEPPLE」にて、Chakra UI から Tailwind CSSとRadix UI へ移行しました。 Next.js を採用している企業の中には、Emotion を基盤とする UI ライブラリとの相性問題から、移行を検討している方も多いのではないでしょうか。今回の記事では、私たちが直面した課題や移行に至った背景、具体的なプロセスや得られた知見を共有したいと思います。 背景：なぜ Chakra UI から Tailwind CSS へ移行したのか スタートア…
IPv6とプライベートアドレスに関する考察 Steamゲームにおけるウイルス誤検知と対策 ソフトウェアエンジニアリング技術書レビュー OpenAI o3の能力とAGIの可能性に関する議論 Google Apps Script（GAS）高速化テクニック mixi2のリリースと初期ユーザー数 40代エンジニアのスキルアップとライフスタイル COBOLシステムとレガシーシステムのリスク 低レイヤー開発のための学習コンテンツ集 フリーソフトウェア「Cassava Editor」開発者のインタビュー 安全なモバイルバッテリー「SSPB」の製品紹介 State of JavaScript 2024の調査結…
こんにちは、Rinchokuです。 2024年12月22日(日)にPHP Conference Japan 2024が開催されました。今回はご縁がありレギュラートーク枠(25分)で、「AWSのLambdaで PHPを動かす選択肢」というタイトルで発表をしました。 phpcon.php.gr.jp speakerdeck.com 発表の背景 2023年に新しい会社に転職をし、新しいサービスをインフラから構築するする機会が生まれました。 今まではEC2やFargateで動かすことが多かったでした。そんな中、Lambdaでアプリケーションを動かしてみようと思ったきっかけは、PHP Conferenc…
求む有志！ ゲームと教育、未踏の融合。わずかな予算。尽きぬバグとの戦い。成功の保証なし。 ただし、成功に関わらず、成長と仲間を得る。 こんにちは、ゴンです。 英語物語の開発者のゴンと申します。 英語物語関連の記事なら何でもOKということなので、普段はまともに書いていない弊社の「求人情報」を書いてみます。 「会社のHPや求人媒体でやれ？」と思う方もいらっしゃるかもしれませんが、英語物語と同じく少し変わった風味が持ち味の組織なので、お許しください。 まずはJoinを検討していただく上で、弊社（FreCre）のことをある程度理解していただいた方が良いので、さらっと特色を書いてみます。 content…
はじめに こんにちは。Developer Engagementブロックの@wirohaです。12月10日に「株式会社ユーザベース×株式会社ZOZO×株式会社PR TIMES 3社合同フロントエンド勉強会」を開催しました。3社のエンジニアが集まり、フロントエンドに関する取り組みを発信するイベントです。
🛠Tech Next.js×Nest.js アプリの修正 LP改修 初の読書ログを投稿 🏠Private 社会を軸としてエンジニアリングをする中で得られた成長と信念 - CTO名鑑 vol.5 を視聴 →書籍プレゼントキャンペーンに当選して、学習する組織をもらえました。 学習する組織 ― システム思考で未来を創造する 作者:ピーター・Ｍ・センゲ 英治出版 Amazon 各飲み会に参加（会社・親族） 転職エージェント2社と面談 🔁Keep はじよう要件定義を読了 こちらも後日まとめる予定です はじめよう！ 要件定義 ～ビギナーからベテランまで 作者:羽生章洋 技術評論社 Amazon OOUI本…
みなさまHappy December! どうでもいい話ですが、私は12月が1年の中で1番好きな月です。 街の雰囲気とか、冬らしさが出てきて「雪降らないかな〜」と勝手にワクワクする感じがなんともいえないのです！（先日ちょこっと降ったらしいのですが見逃しました。。ｷｨｨｨ） 文化等により様々な祝い方が存在するこの時期ですが、私個人的にはクリスマスカードを送り合う文化はなんとも素敵だなぁと思います。日本でいうところの年賀状のような感覚でしょうか。 少しだけ調べてみたのですが、初めてクリスマスカードが送られたのは1843年のロンドンだそうです。（ほぅ〜） そんなクリスマスカードも時代とともに発展し、今…
JADEフロントエンドエンジニアの淺津です。 この記事は、JADE アドベントカレンダー19本目の記事です。 フロントエンドのリニューアルを進めています 今回は、現在進めているAmethystのフロントエンドV2（FEV2）移行プロジェクトについてご紹介します。まだ進行中のプロジェクトのため、詳細が固まっていない部分もありますが、リニューアルの背景と進め方について可能な限り丁寧に説明できたらと思います。 開発中のV2の画面（Search Analytics） フロントエンドのリニューアルを進めています リニューアルを決断した理由 Next.js App Routerへの移行 既存コードベースの…
ずっと気になっていた、Cloudflare Workers、 そろそろ入門しようと、ドキュメントを読んでみたときの備忘録(*´ω｀*) Cloudflare Workersとは このスライドがわかりやすい Cloudflare Workersのユースケースと開発方法 - Speaker Deck ざっくりいうと、 ユーザに近い距離にあるサーバ(エッジサーバ)で動く サーバレスな処理(APIとかWebアプリとか) 正確ではないけど、HTTPリクエストを受け付ける AWS LamdaとかGCP Cloud Functionsとかみたいな感じ Cloudflare Workersの特徴 なんといって…
はじめに この記事はFindy Advent Calendar 2024 21日目の記事です。 adventar.org データソリューションチーム、エンジニアの土屋(@shunsock)です。本日は、Findy Toolsのデータ基盤を構築したので、その内容を共有します。 Findy Toolsは、2024年1月23日にリリースされた開発ツールのレビューサイトです。利用者は開発者向けツールのレビューやアーキテクチャの記事を閲覧、投稿できます。 Findy Toolsのデータ基盤のシステム設計の紹介 システム設計の目標、要件 今回の構築では、「Findy Toolsを訪れたユーザーの行動ログと…
この記事はTimee Product Advent Calendar 2024 シリーズ2の21日目の記事です。 はじめに タイミーでフロントエンドエンジニアをしている大川です。 PlaywrightでのUI自動テストを運用してきた中で学んだ、PlaywrightとMock Service Worker（以降、MSW）を組み合わせたAPIのモック方法を紹介します。 Playwrightのテスト中にモックレスポンスを定義する バックエンドと連携しているシステム全体をテストすることで正常に動作しているか確認していくことは大切ですが、普段のUI開発やUIで利用しているライブラリアップデート後の動作確…
この記事は虎の穴ラボ Advent Calendar 2024の 20 日目の記事です。 こんにちは、虎の穴ラボの古賀です。 今回の記事は React や Vue などモダンな環境に対する Tailwind CSS や Atomic Design の導入の知見が得られる内容となっていますので、よろしければご覧ください。 目次 はじめに 採用理由 Tailwind CSS Atomic Design 開発ガイドライン コンポーネント単位の外部 CSS は作らない global.css には基本何も書かない カスタムコンポーネントに className 属性を使わない 任意の値は制限しない tai…