███を退職します2023年11月24日 公開雑記███を退職します 皆さんこんにちは。この度、███を退職することになりましたのでご報告します。███には2022年10月から正社員として所属しています。 理由 █████████、█████████████████████████。█████████████████…全文を見る
積極的な技術選定と消極的な技術選定2023年2月13日 公開エッセイこの記事は、筆者が技術選定について思うところをまとめた記事です。Twitterに同じ話を何回か書いているので、文章にまとまっていたほうがよいと思い用意しました。 やや過激な思想で愚痴も含んでいるので、共感いただけると嬉しいものの、みなさんを説得しようというつもりはありません…全文を見る
Tailwind考2022年9月30日 公開CSS皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterのフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので…全文を見る
████を退職します2022年8月29日 公開雑記この記事はuhy.oooでも読むことができます。 ████を退職します 皆さんこんにちは。この度、████を退職することになりましたのでご報告します。 筆者は2019年に新卒で████に入社して、今年が4年目でした。今回が初めての転職となります。転職先は███という会社です。 █…全文を見る
書評『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月22日発売で、すでにネット書店などでは予約受付中です。また、電子版も発売の予定があります。この記事ではこの本を宣伝します。 同出版社の…全文を見る
どのようにTypeScriptを使うのか2021年10月23日 公開TypeScript現在、TypeScriptの重要性は、フロントエンド開発を中心としてますます増すばかりであります。それだけに、TypeScriptをどのように使うべきかという問題については多様な意見が見られます。 これまで筆者はTypeScriptの使い方に…全文を見る
Twitterアカウントが凍結された2021年10月6日 公開雑記こんにちは。先日からTwitterアカウント@uhyo_が🈚️になっており、皆さまにご心配をおかけしています。 「なぜ」「TypeScript界隈が衰退した」など数十件もの心温まる反応に励まされております。また、凍結中に技術記事「TypeScript 4.5でますます便利に…全文を見る
アンサー: named exportは有害なのか2021年9月9日 公開TypeScriptこんにちは。ここ数日は、以下の記事が話題になりました。 named exportは有害だと考えられます 「named exportは有害」という主張はこれまで常識と思われていたこととは異なるため、界隈のエンジニアからは否定的・懐疑的な意見が見られます。実際、筆者もnamed…全文を見る
空のdiv要素について2021年9月7日 公開HTML昨日はこちらの記事に端を発する形で、空のdiv要素やspan要素は妥当なのかといった話題が見られました。 中身のない空の div 要素や空の span 要素は HTML 仕様として妥当なのか? - dskd この記事…全文を見る
React ステート管理 比較考察2021年7月24日 公開Reactこんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレー Re…全文を見る
ユーザー定義型ガード、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ヶ月となりましたので、この記事では筆者が今年扱った技術について振り返ってみます。 なお、筆者は2019年に新卒で████社に入社し…全文を見る
まとまったCSSを別のコンポーネントに分けないでほしい話2020年10月15日 公開Reactこの記事は、ReactでCSSを書くときに関連したCSSを別々のコンポーネントに分けるのをやめようという記事です。主な理由は、スタイリングという機能が複数コンポーネントに分散するのを防ぐためです。これには修正時に複数コン…全文を見る
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プロパティを持つオブジェクト」という型を表現できます。 無いかもしれないプロパティ 上のF…全文を見る
究極のReact向けルーターライブラリ「Rocon」正式リリース2020年8月16日 公開RoconReactTypeScriptこんにちは。前回の記事でご説明したReact向けのルーターライブラリ「Rocon」をこの度正式リリース(1.0.0リリース)したのでご報告します。 Roconに関する詳しいことは前回の記事をご覧いただきたいのですが、簡単に説明するとRoconの特徴は非常に型安全であることです…全文を見る
究極のReact向けルーターライブラリ「Rocon」を作った2020年8月10日 公開RoconReactTypeScriptこんにちは。先月くらいからReact向けのルーターライブラリ「Rocon」を作っていて、この度alphaリリースという形で公開まで漕ぎ着けたので宣伝します。 現在のところ、以下のURLでチュートリアルを読むことができます。…全文を見る
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月末まで。その後も“(ぇ”の無いツイートを続けるかどうかは改めて決定するとした。 同氏によれば、インターネット上で“(ぇ”の使用を始めたのは約15年前…全文を見る
████に入社して1年が経ちました2020年6月22日 公開 / 2020年6月22日 更新雑記およそ2年前、新卒としての就活が終了したことを報告する記事をはてなブログに書きました(████に入社します)。ちゃんと2019年4月から████に入社して今まで働いていたのですが、そういえば入社したタイミングでは特に記事を出したりしていませんでしたね…全文を見る
react-routerで現在のlocationを取得する2種類の方法の使い分け方2020年6月10日 公開 / 2020年6月10日 更新ReactJavaScriptSPAを作る際は、URLを変化させたり、URLの変化に反応して画面を変えたりする必要があります。このために使われるのがルーティングライブラリです。Reactにおいては、react-routerが代表格として知られています。 react…全文を見る
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が何種類あるのか、ECMA…全文を見る
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公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで…全文を見る
GatsbyでFont Awesomeを使用するとアイコンの表示が一瞬遅れる問題について2020年5月10日 公開GatsbyJavaScriptGatsbyは最近流行りの静的サイトジェネレータで、このブログでも使用しています。 Font Awesomeは何か昔から流行っているフリーのアイコン集で、このブログでも使用しています。 両者の組み合わせることも非常によくあるらしく、"Gatsby FontAwesome…全文を見る
個人ブログを作った2020年5月10日 公開 / 2020年5月10日 更新雑記こんにちは。うひょです。誰という方はTwitterとかQiitaをご覧ください。この度、新たに個人ブログを立ち上げました。これはその最初の記事です。最近よく個人ブログという言葉を聞きますが、この言葉の正確な意味って何なんでしょうね。この界隈では…全文を見る