初めに 前提 私は現在、React + TypeScriptの勉強のため、タスク管理アプリの開発を行っています。開発環境は以下のような構成になっています。 フロントエンド React + TypeScriptで構成 ログイン画面やタスク管理画面を実装 ローカル環境でコンテナ化 バックエンド PHP（Laravel 12）で構成 データベース操作を担当 RESTful APIとして機能 フロントエンドとバックエンドは独立したコンテナとして動作し、HTTP APIを通じてデータのやり取りを行っています。 複雑化：初心者の悩み React初心者の私にとって、フロントエンドからバックエンドAPIへの接続方法は大きな課題でした。JavaScriptの標準的なfetch関数は知っていましたが、実際の開発でどのように使えばよいのか分からず、Claude Codeに実装を相談したところ、AxiosというJ

このスライドはSlidevで作られており、以下のレポジトリで公開しています https://github.com/riya-amemiya/amemiya_riya_slide_data/tree/main/frontend_conf_tokyo_2025

console.log("A".length) // 1 console.log("😆".length) // 2 console.log("👨‍👩‍👧‍👦".length) // 11 なぜこうなるのか、どうやったら JavaScript にも人間と同じ感覚で文字を数えさせるのか、今回はそれについて話します！！！ 1. 文字集合とエンコーディング まず大前提として人とコンピューターが扱う文字は違います。人は日本語とか英語とかの自然言語の文字を扱いますが、コンピューターが直接扱えるのは0/1の数字だけです。 そのため、人が使う文字をコンピューターに処理させるには、文字を0/1に変換しないといけません。 この変換の流れはざっくり 「①文字ごとに番号を振る」 → 「②その番号を 0/1 に変換する」 で行われます。 1-1. 文字集合 「①文字ごとに番号を振る」 ことで作られたものが

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに CJSやESMといったモジュールタイプ、先人たちの記事を読み理解したつもりになるが、時間が経つと完全に忘れるということを繰り返している。package.jsonの最低限の設定と、その読み込み方法を簡易的に記載する。 これは検証で書いたサンプルコード CJSからCJS, ESMを読み込む パッケージ中の .js は、パッケージのpackage.jsonに記載されている type フィールドが commonjs の場合はCJSとして扱われ、 type フィールドが module の場合はESMとして扱われる。type フィールドのデフォルト値は commonjs なので、 type フィールドが指定されていなければCJSとして扱われる。 package.jsonの main フィールドはパッケージのエントリーポイントで、パッケージを使用する側がimportまたはrequireする際に

Let's imagine you are working on a big project with many files. You add a new file to work on a new feature and import a function from another directory into your code. import { foo } from "./some/other-file"; export function myCoolCode() { // Pretend that this is super smart code :) const result = foo(); return result; } Excited about finishing your feature, you run the code and realize that it t

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに 駅メモ！チームでエンジニアをしている id:wgg00sh です。 この記事では、駅メモ！内で地図クライアントとして使用している mapbox-gl-js を使うにあたって工夫した点などを紹介していきます。 【✨新機能リリース✨】 6/1 12時頃より、アプリ版駅メモ！にて「タイムラインと地図の切替機能」をリリースしました🎉 本機能では地図を見ながらチェックインが行えたり、 地図上でレーダーの対象駅や駅の属性等を確認することができます💪 詳細はお知らせよりご確認ください♪#駅メモ #駅メモ10周年 pic.twitter.com/vneZv27AVU— 駅メモ！公式 (@ekimemo) June 1, 2024 駅メモ！では、2024 年 6 月に、「タイムラインと地図の切替機能」(以降:タイムライン地図、本機能)をリリースしました。 本機能の実現にあたって、苦労した点やそ

この記事は夏のブログリレー17日目の記事です。 こんにちは、19Bの翠(sappi_red)です。普段はSysAd班で活動しています。Viteのチームメンバーだったりもします。 npmからインストールしたパッケージをモジュールバンドラーで使えないことに遭遇したことのある人は少なくないでしょう。 この記事ではそれが発生する要因の一つである、package.jsonのエントリーポイント用フィールドについて書いていきます。 モジュールバンドラーとトランスパイラは意味が異なるものですが、モジュール形式の変換においては境界線が非常に曖昧になるため、この記事ではまとめてバンドラーと呼ぶことにします。 モジュール形式 話を進める前に、前提となるモジュール形式という概念について説明しておきます。 JavaScriptでは元々、プログラムを複数のモジュールに分割する標準仕様が存在しませんでした。そのため、標

本稿における「単体テスト」とは自動テストにおける単体テストを指します。手動テストのことではないので、ご了承ください。 単体テストの考え方/使い方という本を読みました。筆者自身、「単体テストはプロダクションコードの付属」という意識がどこかにありました。この本を読んで、単体テストについてあまりに何もわかってなかったことに気付かされ、単体テストの設計はプロダクションコードの設計と同じくらい重要という意識に変わりました。何のために単体テストをやるのか、いいテストとは、「単体」とは、など多くの点で学びを得られ、また、多くのプラクティスとアンチパターンを知ることができました。 本稿はこの本を読んで得られた学びを、フロントエンド開発、特にコンポーネント開発に適用することを試みた際のまとめです。より詳細な解説を求む方には本を手に取ってもらう前提で、できるだけポイントを抑えられるようにまとめることを目指しま

株式会社スタディスト様の依頼で、フロントエンド傭兵として、Rails 内の巨大SPA の段階的なモダナイズの提案を行った事例紹介です。 いつもはパフォーマンス視点で仕事にかかるのですが、今回はマクロな設計視点でソースコードを読んでいきます。一旦は中期ゴールを提案しつつ、その作業の必要性を通して、なぜその変更が必要なのかという解説をしていきました。 コスパが良い部分からやりたいですね。でもコスパ感覚は人それぞれです。あくまでフロントエンド専門家の自分が優先度付けるなら、という観点でやっていきます。 今回の仕事にあたっていくつかの技術的な課題を取り上げますが、それはスタディスト様に問題があるという話ではありません。むしろ問題を修正しようという意思が強く、実際1ヶ月の期間中にいくつかの修正をマージすることもできています。 以下、敬称略。注意点として、今回の内容は中の人達が見返すための記述が多いの

TypeScriptアドベントカレンダーの12/5のエントリーです。昨日は@nanasi-1さんの【TypeScript】ジェネレーターによる遅延評価でフィボナッチ数列を生成するでした。 イマドキのJavaScriptの書き方2018というのを以前書いたのだけど、配列周りはかなり変わっているな、というのを思ったので、そこの部分だけアップデートするつもりで書いてみました。 実環境で使えるECMAScriptバージョン今時のブラウザは常に最新に更新されるはずなのでECMAScript 2024の機能もフルに使えるはずですが、おそらくNode.jsのLTSが一番古いJavaScriptエンジンということになるのかな、と思います。本記事執筆時点でサポート中のバージョンは以下の4つです。軽くメソッドを調べたりした感じ、こんな感じかと。202x年の11月ぐらいになると、ES202xがLTSバージョンで

仕事でソースマップのことをちゃんと調べなきゃいけない状況になったので調べることにしたのでその調査メモです。 発端 Next.js に Sentry を導入するということをやっている。 導入自体はとても簡単で、@sentry/nextjs というパッケージを使うことで実現できる。 @sentry/nextjs には withSentryConfig という関数があり、これによって next.config.js を拡張できる。そしてその設定の中に、hideSourceMaps という設定があり、これを有効化することで Sentry 側にソースマップを渡しつつも本番環境ではソースマップが見えないようにできる。 hideSourceMaps オプションの公式サイトの説明を読んでみると、このオプションを有効にすると Webpack の hidden-source-map を有効にした状態になるみたい

はじめに 先日、フロントエンドの開発中に、配列をグルーピングする必要が出てきたので、サンプルコードを探すためにJavascript groupbyで検索をかけていました。[1] 検索結果を見て驚いたことに、いつの間にかJavascript自体にgroup byが実装されていたのです！！ 感動が薄れる前に、記事にさせていただきます🙌 対象読者 何かしらの言語で配列のgroup byを知っている（SQLは除く） Javascriptの基本的な言語知識がある Javascprit（Typescript）で手軽にgroup byができなくて悩ましい これが Javascript の groupBy まずは実際にJavascriptのgroupByを見ていきましょう。 JavascriptにはgroupByが2種類あるので、それぞれ紹介します。 Object.groupBy まずは、Object.

DOMツリーに加えられた変更を検出する機能としてMutationObserverが便利ですが、CSSのプロパティの値は検出できません。 最近ではCSSアニメーションを使用したWebサイトやスマホアプリも増え、プロパティ値の変更に応じてコールバックを実行する必要があるかもしれません。CSSのプロパティの値の変更を検出するための新しいライブラリを紹介します。 Introducing @bramus/style-observer, a MutationObserver for CSS by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライブラリのデモ ライブラリのインストール ライブラリの使い方 ライブラリの仕組み ライブラリのサポートブラウザ カスタムプロパティのトランジションに関する注意事項 はじめに

はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <

Zag.js を調べた背景 私は Chakra UI ユーザーなのですが、Chakra UI はスタイリング部分でランタイム CSS-in-JS（= emotion）を使用しているため、レンダリング時のパフォーマンス影響を考えると、どこかで移行するタイミングがありそうだと思っています。もちろん、Chakra UI がランタイム CSS-in-JS を捨ててくれれば移行は必要ありませんが、Chakra UI のロードマップを見たところ、明確にスケジューリングされていません（未来のどこかで移行はされそう）。そのため、移行先を探していたのですが、Chakra UI の作成者のアデバヨさんが作った Zag.js はとりあえず見とかないといけないよな、という感じで見始めました。 Zag.js が作られた背景 Chakra UI が抱えている技術的課題は先述の通り、ランタイム CSS-in-JS が内