サービス開発におけるVue3とTypeScriptの親和性について
2024年5月11日（土）に開催された TSKaigi 2024 のセッションで発表したスライドになります。 概要： Vue3がリリースされ、早くも4年弱経とうとしています、Vue2のLTSも2023年末に終了し、新規開発ではVue3を利用することが主流となってきました。 Vueと並ぶフレームワークとしてReactがありますが、未だにReactと比較される際、TypeScript対応が…という噂がたまに聞こえてきます。しかして、Vue3とTypeScriptの親和性は実際のところどうなのでしょうか。Piniaやその他ツールチェイン側などと共にVue3の機能や実際の実装例とともにVue3とTypeScriptの親和性の疑問を解消できるような発表にできればと思っています。 https://tskaigi.org/talks/karan_corons
大画面ディスプレイ1台 vs. 複数枚ディスプレイ──作業効率がいいのはどっち？ 2009年発表の論文を紹介
被験者8人（企業で知的財産管理業務に携わる人たち）に17インチのディスプレイ1台（これをSmall条件とする）、24インチのディスプレイ1台（同Large条件）、17インチのディスプレイ2台並置（同Dual条件）の3つの環境を使ってもらい、実験を行った。 ディスプレイ環境変更の前後約2週間ずつ、被験者のPC操作ログを収集した。操作ログには、マウスやキーボードによるウィンドウ操作（ウィンドウのアクティブ化、移動、サイズ変更）が含まれ、これらが要する総時間を算出した。 その結果、Small条件では作業時間の8.5％をウィンドウ操作に費やしており、現行のウィンドウシステムの改善が必要だと示唆した。Large条件ではウィンドウ操作コストの削減は見られなかったが、Dual条件では13.5％の削減を確認した。よって、ウィンドウ操作コストの観点からは、大画面単一より複数ディスプレイの方が優れているといえ
ast-grepでReact 19に移行する
はじめに こんにちは、ast-grepの作者ヘリントンです。 Reactバージョン19のリリースに伴い、新機能と改善が追加されました。 しかし、この新バージョンへのアップグレードには、ソースコードの一部を修正する必要があります。特に大規模なコードベースでは、このプロセスはかなり手間がかかり、繰り返し行う必要があります。 本記事では、ast-grepというツールの使用方法を説明します。このツールは、コードベース内でパターンを見つけて置き換えることを目的として設計されており、React 19への移行を容易にします。 以下の3つの主要なcodemodsに焦点を当てます。 <Context>をプロバイダとして使用する 暗黙のrefコールバックリターンを削除する refをpropsとして使用し、forwardRefを削除する 前提条件: ast-grepのセットアップ まず、ast-grepをセット
エラーや非同期処理をより安全に扱うための TypeScript ライブラリ Effect-TS
TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。Effect-TS は、以下のような特徴を備えています。 並行性（concurrency）：Fiber ベースの並行モデルにより、高いスケーラビリティと低レイテンシを実現 コンポーザビリティ（composability）：小さく再利用可能なパーツを組み合わせることで、メンテナンス性、可読性、柔軟性の高いソフトウェアを構築する リソースの安全な管理（resource-safety）：処理が失敗したとしても、安全にリソースを開放する 型安全性（type-safety）：TypeScript の型システムを活用した型推論と型安全性に焦点を当てている エラー処理（error handling）：構造化された信頼性の高い方法でエラーを処理する 非同期性（asynchronicity
どういう時に型注釈を書くか - Qiita
最近のプログラミング言語は何らかの型推論を搭載したものが多いです。しかし、型推論も万能ではなく、ところどころで型注釈を書かないとコンパイルが通らない、あるいは意図せず any 型になってしまう、という状況があります。 この記事では、どういう場合に型注釈を書くべきかについてのガイドとなることを目指します。 主に、「HaskellやMLほどではないがある程度の型推論ができる」言語、具体的にはTypeScript, Python（mypy等）、C#、Swiftなどを想定しています。特定の言語についてのガイドではないので、全体的にふわふわした記述になっているかもしれません。 関数の型を書くべきか トップレベル関数の引数は、注釈が必要なことが多いです。一部の言語、HaskellやMLなどは引数の使われ方から型を推論できたりしますが、他の多くの言語はそこまでの能力を持っていません。 戻り値の型について
Next.js 型安全なルーティングを使う
Next.js 型安全なルーティングを使う 2024.04.28 Next.js では実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 この記事における「型安全」とは、静的な型検査によりランタイムで起こり得るエラーを事前に検知することを指します。 Next.js では Next.js 13.2 より実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 なお、型安全なルーティングを利用するためには App Router と TypeScript を使用している必要があります。 型安全なルーティングの利用方法 型安全なルーティングを有効にするためには、experim
The problem with new URL(), and how URL.parse() fixes that | Kilian Valkhof
As someone building a browser I need to parse a lot of URLs. Partially to validate them, but also to normalize them or get specific parts out of the URL. The URL API in browsers lets you do that, but it’s ergonomics aren’t ideal. The problem with new URL() The “new” in front of new URL() indicates that it’s used as a constructor: calling it creates a new URL instance for you. When you give it a ma
愛されて23万View！新卒向け研修資料「テスト文字列に”うんこ”と入れるな（2024年版）」を公開しました｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
ホーム 技術ブログ 愛されて23万View！新卒向け研修資料「テスト文字列に”うんこ”と入れるな（2024年版）」を公開しました 愛されて23万View！新卒向け研修資料「テスト文字列に”うんこ”と入れるな（2024年版）」を公開しました こんにちは松井です。今は会長になりました。 遡ること3年前、2021年の新卒研修向けに「テスト文字列に”うんこ”と入れるな」という資料を作成しました。 おかげさまで多くの方に読んでいただいたようで、SlideShareのView数は「23.6万View（2024年4月現在）」にまで達しました。 わたし的にはもうこれで満足していたのですが、 「会長、今年も例のうんこの話をしていただけませんか」 というオファーがあり、またこのクソみたいな話をすることになったという次第です。 せっかく話をするならばということで、事例やTIPSのページを新たに加え、「2024年
The Front End Developer/Engineer Handbook 2024
This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and
Node.js v22 で変わること
2024/04/24 令和トラベルで発表した Node.js v22 で変わることの話です。
【うひょ氏】キャリアにプラスの影響を与える、情報発信の成功戦略と必要な2つの能力
【うひょ氏】キャリアにプラスの影響を与える、情報発信の成功戦略と必要な2つの能力 2024年4月23日 フロントエンドエンジニア うひょ TypeScriptとReactが得意なフロントエンドエンジニア。株式会社カオナビ所属。ウェブ上の技術記事や雑誌を通じて技術的な情報発信を続けている。実はJavaScript歴19年。 著書『プロを目指す人のためのTypeScript入門』（技術評論社） X（@uhyo_） 個人サイト（uhy.ooo） 皆さんこんにちは。私は普段から、主にフロントエンドの分野で技術的な情報発信を行っています。ありがたいことに、TypeScriptの分野では一定の知名度を有しており、書籍も出しています。 今回は、私が普段どのようなことを考えて情報発信をしているのか、そして情報発信のテクニックなど、これをお読みの方が記事執筆や登壇にチャレンジする際に参考になりそうな情報をお
React のルール – React
様々な概念を表現する方法がプログラミング言語によってそれぞれ異なるように、React にも、理解しやすい方法でパターンを表現し高品質なアプリケーションを産み出すための慣用的な記法、ないしルールが存在します。 このセクションでは、自然な React コードを書くために従うべきルールを説明します。自然な React コードを書くことで、安全で整理されており、組み合わせ可能なアプリケーションを作成することができます。以下に挙げる特性により、アプリは変更に対して頑健になり、他の開発者やライブラリやツールと連携しやすくなります。 以下のルールは React のルールとして知られています。これらを守っていないならアプリにバグがある可能性が高い、という意味で、これらは単なるガイドラインではなくルールです。またこれらを守らない場合、あなたのコードは不自然で、理解や推測が難しいものになるでしょう。 Reac
Initiative on Sponsorship Forwarding
[[toc]] It's not a secret that open-source projects are now a critical part of almost every software project. While most open-source projects are maintained by volunteers, the sustainability of these projects becomes a big concern. The recent xz/liblzma vulnerability accident is a great example that shows the importance of open-source projects and how severe the problem could be. There are multipl
ウェブアクセシビリティハンドブック｜ましじめ株式会社
本ハンドブックは、WCAG 2.0（JIS X 8341-3:2016）の達成基準をもとに すべての利用者がウェブサイト利用できるようにするためのアクセシビリティ向上の具体的な指針と実践的なアドバイスを提供します。 はじめに ウェブアクセシビリティとは 運用時のウェブアクセシビリティの取り組み 開発時のウェブアクセシビリティの取り組み ウェブアクセシビリティ試験 ウェブアクセシビリティ試験の流れ ウェブアクセシビリティ方針（サンプル） ウェブアクセシビリティ検証結果（サンプル） ウェブアクセシビリティ検証試験実施ページリスト（サンプル） 参考 実装の参考 ツールの参考 達成基準（適合レベルA,AAを解説） 1. 知覚可能の原則 代替テキストのガイドライン 【A】非テキストコンテンツの達成基準 時間依存メディアのガイドライン 【A】音声だけまたは映像だけ（収録済み）の達成基準 【A】キャプシ
Panda CSS - The Origin Story
Building Panda CSS was one of the most inspiring moments of my career; it reminded me of the period before launching Chakra UI. I knew it would be very "Node" heavy, and I needed to learn more about Abstract Syntax Trees (ASTs). I was familiar with using basic modules like fs, path, and small bits of express to build APIs, but that was about it. Creating a CSS framework that delivers a similar DX
ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning
ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning 2024.04.13 CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floating UI のように自動で画面内に表示されるツールチップやコンテキストメニューを実装できます。 CSS Anchor Positioning は 2024 年 4 月現在 Chrome Canary でのみ利用可能です。 CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floati
What makes a great technical blog | notes.eatonphil.com
I want to explain why the blogs in My favorite technical blogs are my favorite. That page is solely about non-corporate tech blogs. So this post is too. I'll have to make another list for favorite corporate tech blogs. In short, they: Tackle hard and confusing topics Show working code Make things simpler Write regularly Talk about tradeoffs and downsides Avoid internet slang, memes, swearing, sarc
Front-end development’s identity crisis
Elly Loel Front-end development’s identity crisis 🔗 https://ellyloel.com/blog/front-end-development-s-identity-crisis/ Created on March 29, 2024 •Last modified on March 29, 2024 • Complete • BlogWorkingWeb design I’m not a “[full-stack] developer”, regardless of what my last job title says. I’m not even a front-end developer, thanks to the JavaScript–industrial complex. I’m a front-of-the-front-e
16 UX and UI Design Tips That Always Deliver Growth
UX is a discovery process. We often argue that user experience doesn’t start and finish with a project. As long as your product is live, the UX process never ends. When it comes to digital products, there’ll always be room for improvement and growth opportunities worth exploring, so the design process is an inseparable part of the growth journey. When it comes to usability and design principles th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Primate - Introducing rcompat