ユーザー定義型ガード、asで書くかanyで書くか

2021年4月9日 公開

• TypeScript

TypeScriptでユーザー定義型ガードを定義する場合、引数を any 型にして中を自由に書く方法と引数を unknown 型にして中で as を駆使して書く方法があります。この記事では両者を比較考察します。結論としては、 unknown と as…

useCallbackはとにかく使え！　特にカスタムフックでは

2021年2月23日 公開

• React

Reactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的には React.memo 、 useMemo 、そして useCallback です。 React.memo で囲まれた関数コンポーネントは、props…

CSSとコンポーネント設計に対する考察

2020年12月20日 公開

• CSS
• React

近年のフロントエンド開発には コンポーネント という概念が付いて回ります。React・Vue・AngularといったViewライブラリでは、コンポーネントを定義してそれを組み合わせてアプリを作ります。また、いわゆるWeb Components…

新卒2年目フロントエンドエンジニアの技術スタック2020

2020年11月30日 公開

• 雑記

いつもブログをご覧になってくださっている皆さん、こんにちは。そうでない方は初めまして。 2020年もあと1ヶ月となりましたので、この記事では筆者が今年扱った技術について振り返ってみます。 なお、筆者は201…

まとまったCSSを別のコンポーネントに分けないでほしい話

2020年10月15日 公開

• React

この記事は、ReactでCSSを書くときに 関連したCSS…

react-wc: Web ComponentsとReactで実現するCSS in JSの形

2020年10月3日 公開

• React

CSS in JS はJavaScriptのコードの中にCSSを書く手法の総称で、CSS Modulesやstyled-componentsなどがよく利用されています。 この記事では、筆者がCSS in JS…

setTimeoutに大きい数値を与えるとどうなる？　仕様を読んで完全理解

2020年9月6日 公開

• JavaScript
• ECMAScript
• WebIDL
• HTML

JavaScriptでは setTimeout という関数を使うことができます。 しかし、実はこの関数は言語仕様（ECMAScript）に組み込まれているものではありません。 ブラウザ上で動くJavaScriptの場合、 setTimeout は HTML…

こわくないTypeScript〜Mapped TypeもConditional Typeも使いこなせ〜

2020年8月31日 公開

• TypeScript

TypeScriptの型システムは、ユニオン型を始めとする様々な機能を持っているのが特徴的です。 その中でも、 mapped types と conditional types…

TypeScriptのユニオン型で「あるかもしれない」プロパティを表現するときのTips

2020年8月18日 公開 / 2020年8月19日 更新

• TypeScript

TypeScriptのユニオン型はとても強力な機能で、TypeScriptのコードベースでは広く利用されています。 例えば、次のようにすると「 foo プロパティを持つオブジェクトまたは bar…

究極のReact向けルーターライブラリ「Rocon」正式リリース

2020年8月16日 公開

• Rocon
• React
• TypeScript

こんにちは。 前回の記事 でご説明したReact向けのルーターライブラリ「 Rocon 」をこの度正式リリース（ 1.0.0 リリース）したのでご報告します。 Roconに関する詳しいことは前回の記事をご覧いただきたいのですが、簡単に説明するとRocon…

究極のReact向けルーターライブラリ「Rocon」を作った

2020年8月10日 公開

• Rocon
• React
• TypeScript

こんにちは。先月くらいからReact向けのルーターライブラリ「 Rocon 」を作っていて、この度alphaリリースという形で公開まで漕ぎ着けたので宣伝します。 現在のところ、以下のURLでチュートリアルを読むことができます。 このチュートリアルサイトはRocon…

puppeteerでOperaのシークレットウィンドウにタブを開くまで

2020年7月24日 公開

• puppeteer
• TypeScript

近年、プログラムからブラウザを操作する手段の一つとして puppeteer が台頭してきています。 これは Chrome Devtools Protocol を用いて作られているためChromiumベースのブラウザ（Chrome…

TypeScriptにcontributeした (3) パースエラーのメッセージ改善

2020年7月16日 公開

• TypeScript
• OSS

最近TypeScript本体にPull Requestを出してマージしてもらいましたので、内容や感想を紹介します。 今回の内容はTypeScript 4.0に含まれる見込みです。 Pull Requestはこちらです。 https://github.com/microsoft…

【速報】うひょ氏　“（ぇ”の常用を停止　１５年の歴史に幕

2020年7月1日 公開

• 雑記

2020年7月1日、うひょ氏はツイッターにおいて全ての文を“（ぇ”で終わらせる慣習を停止すると発表した。同氏によれは期限は7月末まで。その後も“（ぇ”の無いツイートを続けるかどうかは改めて決定するとした。 同氏によれば、インターネット上で“（ぇ”の使用を始めたのは約1…

████に入社して1年が経ちました

2020年6月22日 公開 / 2020年6月22日 更新

• 雑記

およそ2年前、新卒としての就活が終了したことを報告する記事をはてなブログに書きました（ ████に入社します ）。ちゃんと2019年4月から████に入社して今まで働いていたのですが、そういえば入社したタイミングでは特に記事を出したりしていませんでしたね。2019年…

react-routerで現在のlocationを取得する2種類の方法の使い分け方

2020年6月10日 公開 / 2020年6月10日 更新

• React
• JavaScript

SPAを作る際は、URLを変化させたり、URLの変化に反応して画面を変えたりする必要があります。このために使われるのがルーティングライブラリです。Reactにおいては、 react-router が代表格として知られています。 react-router…

import文で画像やCSSを読み込むのはECMAScript仕様違反か

2020年6月7日 公開 / 2020年6月7日 更新

• JavaScript
• ECMAScript

近頃のJavaScript開発は、モジュールとして書かれた複数のJavaScriptファイルを import 文や export 文を通じて連携させるのが基本です。また、それらのファイルは Webpack に代表されるバンドラによって事前に処理され、 import…

JavaScriptのthisは結局何種類あるのか

2020年5月30日 公開 / 2020年5月31日 更新

• JavaScript
• ECMAScript

JavaScriptのややこしい機能としてよく槍玉に挙げられるのが this です。その特徴のひとつは 状況によって意味（thisの値）が違う ことであり、これを指して「JavaScriptのthisは4種類」とする説も見られます。 そこで、この記事ではthis…

useEffectのdeps比較関数をカスタムしたくなったときにやること

2020年5月25日 公開

• React
• JavaScript

Reactにおいて、 useEffect などいくつかのフックは第2引数として 依存リスト を取ります。 例えば useEffect…

作って理解するBabelマクロ

2020年5月22日 公開

• JavaScript
• Babel
• babel-plugin-macros

Babelは今どきのJavaScript開発には欠かせないパーツのひとつです。その主な使い道は、新しいJavaScriptの文法を古いJavaScriptに変換するトランスパイラとしてのものでしょう。しかし、Babel…

Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する

2020年5月15日 公開

• React
• Recoil
• JavaScript

昨日、Facebook製のReact用ステート管理ライブラリ Recoil が発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで、筆者がRecoil…

GatsbyでFont Awesomeを使用するとアイコンの表示が一瞬遅れる問題について

2020年5月10日 公開

• Gatsby
• JavaScript

Gatsbyは最近流行りの静的サイトジェネレータで、このブログでも使用しています。 Font Awesomeは何か昔から流行っているフリーのアイコン集で、このブログでも使用しています。 両者の組み合わせることも非常によくあるらしく、"Gatsby FontAwesome…

個人ブログを作った

2020年5月10日 公開 / 2020年5月10日 更新

• 雑記

こんにちは。うひょです。誰という方は Twitter とか Qiita…