こんにちは、ブランドソリューション開発本部フロントエンド部の田中です。 普段はFAANSのWebフロントエンドの開発を行なっています。 FAANSとは「Fashion Advisors are Neighbors」がサービス名の由来で、ショップスタッフの効率的な販売をサポートするショップスタッフ専用ツールです。 ショップスタッフ向けにコーデ投稿・成果確認などの機能が存在し、2022年8月に正式ローンチしました。詳しくは以下のプレスリリースをご覧ください。 corp.zozo.com 現在FAANSは立ち上げから2年経過し、Webフロントエンドの開発現場において様々な組織的・技術的課題がありました。 今回はその課題と取り組みについて紹介したいと思います。 目次 目次 前提 FAANSの組織の特徴 FAANSのWebのプロダクトの特徴 変化の多い環境下で遭遇し続ける課題 組織的・技術的課題とそ
こんにちは、エムスリーエンジニアリンググループ Unit5 (Consumer) チームの園田です。 今回は大きな実装ではなく、TypeScript のちょっとしたテクニックを Next の API ルートを題材に書いてみます。 想定読者は TypeScript 初心者の方です。TypeScript 強者の方はどうぞ温かい目で見てください。 はじめに モチベーション 実装のポイント 試行錯誤 関数で何度も囲む形式 引数指定 + オーバーロード 実際に辿った実装手順 最終的なコード Class 構文での実装 まとめ We are hiring はじめに まずは何を作ったのかご覧ください。 NextApiHandler の Factory できた メソッドチェーンで引数が増えてくやつ hono の zValidator を意識したけど、ハンドラの引数として Zod を渡すのではなくメソッドチェ
GraphQL を使って Web アプリケーションを実装していると、GraphQL API のリクエストをモックしたいことがあると思います。 ユニットテストのために、ダミーレスポンスに差し替えたい ビジュアルリグレッションテストのために、ダミーレスポンスに差し替えたい Storybook で story を書くために、ダミーレスポンスに差し替えたい バックエンドの resolver 実装を待たずにフロントエンド側の開発を始めるために、ダミーレスポンスに差し替えたい 一般には GraphQL Client にモックするための機能が実装されてるので、そうしたものを使うことが多いと思います。 zenn.dev また最近は Client よりも外側のレイヤーでリクエストを interrupt してモックする「msw」を使うケースも増えてきてます *1。 blog.engineer.adways.n
JSer.info #661 - Remix v2がリリースされました。 Release v2.0.0 · remix-run/remix Remix v2 | Remix React 17のサポート終了、Node.js 14/16のサポート終了されています。 オプションやデフォルトの動作の変更が含まれますが、 V1からの移行はv2_*フラグを使うことで機能を一つずつ有効化して移行できるようになっています。 Upgrading to v2 | Remix ルーティングのディレクトリ構造のデフォルトがFlat Routesに変更されています。 Flat Routes · remix-run/remix · Discussion #4482 2.0.0ではv2_*フラグの削除、remix.config.jsの設定やコマンドの変更などが含まれています。 Safari 17.0がリリースされました
TypeScript Origins: The DocumentaryはTypeScriptの誕生に関わった関係者たちへのインタビューで構成されたドキュメンタリー動画。 www.youtube.com 製作元はOfferZenというアムステルダムの求人プラットームの会社で、以前にはSvelte OriginsやLaravel Originsも公開している。 本作ではReact.js: The Documentaryの次世代フロントエンドフレームワーク開発競争と時期を同じくして起っていたAltJS戦争の中でどうTypeScriptが現在の地位を獲得していったのかに迫る。 laiso.hatenablog.com 私はTypeScriptについては片手間業務プログラマーという感じで全然詳しくないんですけど、TypeScript Originsのゆりかご からRemove TypeScriptの
この記事の内容にある意見は、個人の主観的意見を前提とします。 記事の内容は間違いがあり得ますので、ご了承いただけると幸いです。内容の間違い、認識の違い、違う意見などありましたら、コメント大歓迎です! 概要 JavaScriptにおいて、変数を初期化できるkeyword var, let, constに加え、usingがまもなく追加される予定です。 usingキーワードで宣言した変数は、リソースタイプ変数として見なされ、変数がscope外になる前に自動でリソース解除作業を行うことができるようになり、従来の明示的にリソース解除コードを書くという面倒な作業がだいぶ楽になることが期待できます。 ECMAScript Proposalは以下となっておりStage3段階となってます。 https://github.com/tc39/proposal-explicit-resource-manageme
ライブラリがこんな構成になっていませんか? TypeScript製のライブラリをnpmで配布するとき、そのパッケージの構成は次のようなフラットな構造になっていませんか?フラットな構造とは、TypeScriptファイル(.ts)と、型定義ファイル(.d.ts)が同じディレクトリにあるような構成です。 ├── index.ts ...... TypeScriptファイル ├── index.d.ts .... 上の型定義ファイル | package.jsonのtypesフィールドで指定してる。 ├── index.js ...... 上のJavaScriptファイル | package.jsonのmainフィールドで指定している。 | ├── module.ts ..... TypeScriptファイル | index.tsからimportされている。 ├── module.d.ts ...
JavaScriptおよびTypeScriptアプリケーション用オールインワンツールキットの正式版「Bun 1.0」が公開された。開発チームが2023年9月8日(米国時間)に公式ブログで発表した。 Bun 1.0は、単一の実行ファイルとして提供されており、単一ファイルからフルスタックアプリケーションまで、JavaScriptとTypeScriptの実行、ビルド、テスト、デバッグに使用できる。開発ワークフローをスピードアップしたり、リソースに制約がある環境でサーバレス関数のようなシンプルな本番コードを実行したりする目的での利用が想定されている。 Bunは、JavaScriptのツール群が遅く、複雑になってしまっているという認識から、JavaScriptの長所を全て維持しつつ、この問題を解消することを目指して開発された。 Bunの中核を担うBunランタイムは、サーバサイドJavaScript環
any 役割: any 型は TypeScript の型システムの一部を無効にするものです。変数が any 型の場合、その変数に対して任意の操作を行うことができ、コンパイラはそれをチェックしません。 主な使用ケース: 既存の JavaScript コードを TypeScript に移行する場合や、他のライブラリやフレームワークとの互換性を持つために一時的に型チェックをスキップしたい場面で使用されます。 リスク: any 型を使用すると、型の安全性が失われ、ランタイムエラーの原因となる可能性があります。 unknown 役割: unknown 型は最も厳格な型として考えられます。unknown 型の変数は存在は確定していますが、その型が何であるかは不明です。したがって、unknown 型の変数を直接操作することはできず、その型を具体的に確定させる必要があります。 主な使用ケース: 外部のライ
「Turbo 8」というOSSのWebフレームワークが、「Remove TypeScript」というプルリクで突然にTypeScriptからJavaScriptへの移行を行ったことで、OSS界隈で大きな話題となっているらしい。一般にTypeScriptは型のあるベターなJavaScriptとして扱われるが、移行理由として厳しい型付けやコンパイルの要否などが挙げられている。ただしプルリク提出から2時間で議論する間も無くマージされたので、相当のツッコミも入っているようだ(Turbo 8 is dropping TypeScript、GitHub Remove TypeScript by afcapel、DEVCLASS、はてなブックマーク)。
import { useMemo } from "react"; export const TodoList: FC<Props> = ({ todos, tab }) => { const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); }; 引数 calculateValue: キャッシュする値を計算する関数。純粋で、引数は取らず、任意の型の値を返さなければなりません。Reactは、まず最初のレンダー時に関数を呼び出し、値が返されます。次回以降のレンダリングについてはつぎのとおりです。 直前のレンダー時と依存値が変わっていないとき: Reactは前と同じ値を返します。 直前のレンダー時から依存値が変わった場合: calculateValueが呼び出され、返されるのは新たな結果です。値はあとで使える
Bill One Entry*1グループの秋山です。 本題に入る前にお知らせです。9/12 (火) にTypeScriptを活用した型安全なチーム開発をテーマとしたイベントを開催します。 ぜひ、お気軽にご参加ください! sansan.connpass.com 1. はじめに 1-1. スキーマ駆動開発とは 1-2. Testing Trophyとの関係性 2. 構成 2-1. 最初の構成と課題 2-2. 最終的な構成 3. バックエンド 3-1. スキーマから型ファイルを作る 3-2. APIハンドラに型を与える 3-3. バリデーターを追加する 3-4. huskyでスキーマ変更を検知する 4. フロントエンド 4-1. スキーマからAPIクライアントを作る 5. パターンマッチングを持ち込む 6. まとめ 1. はじめに 1-1. スキーマ駆動開発とは 詳しい解説は他の記事に譲り、一言
みなさんこんにちは。uhyo (@uhyo_) です。現在、 株式会社バベルにプリンシパルエンジニアとして所属しており、主力プロダクトであるaileadの設計・開発業務を行なっています。 この記事を読んでいる方の多くは、私のことを「TypeScriptの人」としてご存知かもしれません。私は2018年ごろからTypeScriptを中心とした記事執筆活動を開始しており、多くはQiitaやZennに投稿されています。また、Qiitaの記事が編集者の目に留まったことをきっかけとして、雑誌にJavaScriptやTypeScriptの特集を執筆し、さらにはTypeScriptの入門書を出版することになりました。 また、フロントエンドエンジニアとしてキャリアを始めた関係から、私はReactの記事も多く執筆しています。ありがたいことに、その方面でも情報発信者として一定の評価を得ているようです。 総じて、
はじめに 最近ではNode.jsのライブラリでも、pure ESMの考え方でES Moduleのみでしか利用できないものも出てきている。とはいえ、npm-esm-vs-cjsというリポジトリのデータによると、以下のようにCommonJSのライブラリのほうが圧倒的に多く、ES Moduleのみはまだ10%程度しかない(みたい)。 そこで、今回はライブラリを公開する際に、CommonJSとES Moduleの両方をサポートするようなプロジェクトの設定についてみていきたいと思う。 ※前提として、今回は1つのTypeScriptファイルからCommonJS・ES Moduleの両方に対応するJavaScriptファイルを作成することを考える(ファイル拡張子を".mts"や".cts"にして、コンパイル後のファイル拡張子を変えることでCommonJS・ES Moduleに対応する方法ではない)。その
はじめに 普段から多くのOSSライブラリたちを利用させてもらっているが、そういったライブラリを自分でも作ってみたくなった。今回はあまり複雑ではないかなりシンプルなライブラリをTypeScriptで開発し、それを公開し利用するまでをやってみたいと思う。 開発するライブラリの機能としては、Expressのmiddlewareになる。 ライブラリを実装する Expressのmiddlewareとして利用できるライブラリで、機能としてはAuthorizationヘッダーのBearerトークンをreq.tokenから利用できるようにするもの。cookie-parserやbody-parserのように、req.○○○のプロパティアクセスができるようにするもの。 今回はかなり単純に以下のような実装にした。 import { Request, Response, NextFunction } from '
突然ですが問題です 文字列の変数を宣言するとき、型注釈にStringとstringのどちらを使いますか? あまり意識したことない方もいるのではないでしょうか? 答え stringの方を使いましょう。 その理由について見ていきましょう。 プリミティブ型とラッパーオブジェクト stringはプリミティブ型で、Stringはラッパーオブジェクトです。 プリミティブ型について 文字列、数値、論理値などの基本的な値の型のことです。 プリミティブ型はimmutableという特性を持ちます。つまり、変更することができません。 また、プリミティブ型はメソッドやプロパティを持ちません。 ラッパーオブジェクトについて ラッパーオブジェクトは、プリミティブ型の値をラップしたオブジェクトのことです。 平たく言うと、プリミティブ型を便利に使えるようにしたものです。 便利に使えるようにしたものですので、ラッパーオブジ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く