Tailwind考2022年9月30日 公開CSS皆さんこんにちは。最近とある事情で Tailwind CSS にわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitter…全文を見る
████を退職します2022年8月29日 公開雑記この記事は uhy.ooo でも読むことができます。 ████を退職します 皆さんこんにちは。この度、████を退職することになりましたのでご報告します。 筆者は2019年に新卒で████に入社して、今年が…全文を見る
書評『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』2022年8月11日 公開書評皆さんこんにちは。今回は、2022年7月25発売の『 TypeScriptとReact/Next.jsでつくる 実践Web…全文を見る
書評『良いコード/悪いコードで学ぶ設計入門』2022年5月19日 公開書評皆さんこんにちは。今回は、2022年4月30発売の『 良いコード/悪いコードで学ぶ設計入門 』を読み終わったので、書評という形で感想と紹介を述べたいと思います。筆者はもともと技術書を読まず「ネットでいいやん」派だったのですが、このたび TypeScript…全文を見る
書評『HTML解体新書』2022年5月5日 公開HTML書評皆さんこんにちは。今回は、2022年4月19日発売の『 HTML解体新書 』を読み終わったので、書評という形で感想と紹介を述べたいと思います。筆者はもともと技術書を読まず「ネットでいいやん」派だったのですが、このたび TypeScript…全文を見る
【宣伝】『プロを目指す人のためのTypeScript入門』4月22日発売!2022年4月11日 公開TypeScript皆さんこんにちは。先日、私が書いたTypeScriptの入門書『 プロを目指す人のためのTypeScript入門 』が発表されました。この本は4月2…全文を見る
どのようにTypeScriptを使うのか2021年10月23日 公開TypeScript現在、TypeScriptの重要性は、フロントエンド開発を中心としてますます増すばかりであります。それだけに、 TypeScriptをどのように使うべきか という問題については多様な意見が見られます。 これまで筆者はTypeScript…全文を見る
Twitterアカウントが凍結された2021年10月6日 公開雑記こんにちは。先日からTwitterアカウント @uhyo_ が🈚️になっており、皆さまにご心配をおかけしています。 「なぜ」「TypeScript界隈が衰退した」など数十件もの心温まる反応に励まされております。また、凍結中に技術記事「 TypeScript 4.…全文を見る
アンサー: named exportは有害なのか2021年9月9日 公開TypeScriptこんにちは。ここ数日は、以下の記事が話題になりました。 named exportは有害だと考えられます 「named exportは有害」という主張はこれまで常識と思われていたこととは異なるため、界隈のエンジニアからは否定的・懐疑的な意見が見られます。実際、筆者もnamed…全文を見る
空のdiv要素について2021年9月7日 公開HTML昨日はこちらの記事に端を発する形で、空のdiv要素やspan要素は妥当なのかといった話題が見られました。 中身のない空の div 要素や空の span 要素は HTML 仕様として妥当なのか? - dskd この記事は空のdiv要素やspan要素が妥当かどうかという疑問にHTML…全文を見る
React ステート管理 比較考察2021年7月24日 公開Reactこんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState…全文を見る
ユーザー定義型ガード、asで書くかanyで書くか2021年4月9日 公開TypeScriptTypeScriptでユーザー定義型ガードを定義する場合、引数を any 型にして中を自由に書く方法と引数を unknown 型にして中で as を駆使して書く方法があります。この記事では両者を比較考察します。結論としては、 unknown と as…全文を見る
useCallbackはとにかく使え! 特にカスタムフックでは2021年2月23日 公開ReactReactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的には React.memo 、 useMemo 、そして useCallback です。 React.memo で囲まれた関数コンポーネントは、props…全文を見る
CSSとコンポーネント設計に対する考察2020年12月20日 公開CSSReact近年のフロントエンド開発には コンポーネント という概念が付いて回ります。React・Vue・AngularといったViewライブラリでは、コンポーネントを定義してそれを組み合わせてアプリを作ります。また、いわゆるWeb Components…全文を見る
新卒2年目フロントエンドエンジニアの技術スタック20202020年11月30日 公開雑記いつもブログをご覧になってくださっている皆さん、こんにちは。そうでない方は初めまして。 2020年もあと1ヶ月となりましたので、この記事では筆者が今年扱った技術について振り返ってみます。 なお、筆者は201…全文を見る
react-wc: Web ComponentsとReactで実現するCSS in JSの形2020年10月3日 公開ReactCSS in JS はJavaScriptのコードの中にCSSを書く手法の総称で、CSS Modulesやstyled-componentsなどがよく利用されています。 この記事では、筆者がCSS in JS…全文を見る
setTimeoutに大きい数値を与えるとどうなる? 仕様を読んで完全理解2020年9月6日 公開JavaScriptECMAScriptWebIDLHTMLJavaScriptでは setTimeout という関数を使うことができます。 しかし、実はこの関数は言語仕様(ECMAScript)に組み込まれているものではありません。 ブラウザ上で動くJavaScriptの場合、 setTimeout は HTML…全文を見る
こわくないTypeScript〜Mapped TypeもConditional Typeも使いこなせ〜2020年8月31日 公開TypeScriptTypeScriptの型システムは、ユニオン型を始めとする様々な機能を持っているのが特徴的です。 その中でも、 mapped types と conditional types…全文を見る
TypeScriptのユニオン型で「あるかもしれない」プロパティを表現するときのTips2020年8月18日 公開 / 2020年8月19日 更新TypeScriptTypeScriptのユニオン型はとても強力な機能で、TypeScriptのコードベースでは広く利用されています。 例えば、次のようにすると「 foo プロパティを持つオブジェクトまたは bar…全文を見る
究極のReact向けルーターライブラリ「Rocon」正式リリース2020年8月16日 公開RoconReactTypeScriptこんにちは。 前回の記事 でご説明したReact向けのルーターライブラリ「 Rocon 」をこの度正式リリース( 1.0.0 リリース)したのでご報告します。 Roconに関する詳しいことは前回の記事をご覧いただきたいのですが、簡単に説明するとRocon…全文を見る
究極のReact向けルーターライブラリ「Rocon」を作った2020年8月10日 公開RoconReactTypeScriptこんにちは。先月くらいからReact向けのルーターライブラリ「 Rocon 」を作っていて、この度alphaリリースという形で公開まで漕ぎ着けたので宣伝します。 現在のところ、以下のURLでチュートリアルを読むことができます。 このチュートリアルサイトはRocon…全文を見る
puppeteerでOperaのシークレットウィンドウにタブを開くまで2020年7月24日 公開puppeteerTypeScript近年、プログラムからブラウザを操作する手段の一つとして puppeteer が台頭してきています。 これは Chrome Devtools Protocol を用いて作られているためChromiumベースのブラウザ(Chrome…全文を見る
TypeScriptにcontributeした (3) パースエラーのメッセージ改善2020年7月16日 公開TypeScriptOSS最近TypeScript本体にPull Requestを出してマージしてもらいましたので、内容や感想を紹介します。 今回の内容はTypeScript 4.0に含まれる見込みです。 Pull Requestはこちらです。 https://github.com/microsoft…全文を見る
【速報】うひょ氏 “(ぇ”の常用を停止 15年の歴史に幕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日 更新ReactJavaScriptSPAを作る際は、URLを変化させたり、URLの変化に反応して画面を変えたりする必要があります。このために使われるのがルーティングライブラリです。Reactにおいては、 react-router が代表格として知られています。 react-router…全文を見る
import文で画像やCSSを読み込むのはECMAScript仕様違反か2020年6月7日 公開 / 2020年6月7日 更新JavaScriptECMAScript近頃のJavaScript開発は、モジュールとして書かれた複数のJavaScriptファイルを import 文や export 文を通じて連携させるのが基本です。また、それらのファイルは Webpack に代表されるバンドラによって事前に処理され、 import…全文を見る
JavaScriptのthisは結局何種類あるのか2020年5月30日 公開 / 2020年5月31日 更新JavaScriptECMAScriptJavaScriptのややこしい機能としてよく槍玉に挙げられるのが this です。その特徴のひとつは 状況によって意味(thisの値)が違う ことであり、これを指して「JavaScriptのthisは4種類」とする説も見られます。 そこで、この記事ではthis…全文を見る
useEffectのdeps比較関数をカスタムしたくなったときにやること2020年5月25日 公開ReactJavaScriptReactにおいて、 useEffect などいくつかのフックは第2引数として 依存リスト を取ります。 例えば useEffect…全文を見る
作って理解するBabelマクロ2020年5月22日 公開JavaScriptBabelbabel-plugin-macrosBabelは今どきのJavaScript開発には欠かせないパーツのひとつです。その主な使い道は、新しいJavaScriptの文法を古いJavaScriptに変換するトランスパイラとしてのものでしょう。しかし、Babel…全文を見る
Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する2020年5月15日 公開ReactRecoilJavaScript昨日、Facebook製のReact用ステート管理ライブラリ Recoil が発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで、筆者がRecoil…全文を見る
GatsbyでFont Awesomeを使用するとアイコンの表示が一瞬遅れる問題について2020年5月10日 公開GatsbyJavaScriptGatsbyは最近流行りの静的サイトジェネレータで、このブログでも使用しています。 Font Awesomeは何か昔から流行っているフリーのアイコン集で、このブログでも使用しています。 両者の組み合わせることも非常によくあるらしく、"Gatsby FontAwesome…全文を見る