「その悩み、○○学ではすでに解決しています」みたいなタイトルの本を見かけることがある。あなたが日々の仕事で直面する悩みや課題は、すでに最新の学説や理論で解決済みですよ、というわけだ。 だが本当にそうだろうか。最新の学説や理論を応用すれば、世の中の問題はたちどころに解決するものだろうか。 著者は政治学を専門とする大学教授である。「話すも涙、聞くも大笑いの人生の諸々の事情」があって、47歳にして人の親となった。小学校のママ友やパパ友のほとんどは干支一回り以上年下だ。そんなママ友からある日「相談があります」と呼び出され、いきなりこんなお願いをされた。 「来年、PTA会長になってくれませんか？」 まさに青天の霹靂だ。驚いた著者は必死に出来ない理由を並べ立てる。「フルタイム・ワーカー」だから無理！「理屈っぽくて、短気で、いたずらにデカいジジイ」だから無理！ところがママ友は決してあきらめず、最後は情に

どうも、sakitoです。 今回は私の推しフロントエンドディレクトリ構成と気をつけたいポイントを紹介します。ちぇけら！ 2023年5月29日 追記 この記事を読みにきていただきありがとうございます。 私が記事を書いた時期はまだNext.jsのApp Routerが発表されたばかりで、App Routerを使用したディレクトリ構成の考慮はされていません。 先日、App Routerがリリースされ、Next.jsのドキュメントにApp Routerのディレクトリ構成について記事が出ているので、Next.jsを使用されている場合は、まず参照することをオススメします。 はじめに 今回、私の紹介する推し構成は、機能単位で設計するパターンです。 Reactのディレクトリ構成のベストプラクティスを集めたBulletproof Reactで紹介されているパターンにかなり似ています。さらに詳細なプロダクト構

毎年無限スクロールの実装をしているのだが正直なところ実装したくないので依頼されたときの反論材料として実装したくない理由を言語化しておこうと思う。 無限スクロールとは 無限スクロールが何を指すかを知らない人のために解説すると、ページにコンテンツを足す方式でページネーションする UI を指している。例えば Twitter のように下にどんどんコンテンツが伸びていく UI が良い例だろう。そのような UI を無限スクロールと呼ぶことが正式なのかは知らないが、このような体験の実現を支援するライブラリに infinite-scroll というものがあり、少しは普及している呼び方なのだと思い無限スクロールという言葉を使う。一方で WEB フロントエンド文脈で無限スクロールと言うと複雑 GUI やドローイングツール実装における "無限平面" のようなニュアンスもあるが、今は無限平面のことを指しているわけ

Intro XHR から fetch() に積極的に移行しづらかった最大のミッシングピースとして、中断できないという問題があった。 これは、 fetch() が選んだ Promise ベースのインタフェースにおいて、キャンセルをどうするかという議論と絡み、長く決着が付かずにいた問題である。 最近、やっと話が前進したので、ここまでの経過を解説する。 Fetch のミッシングピース fetch() は、ブラウザが発行するリクエストと、取得するレスポンスを扱う低レベルなインタフェースとして策定が始まった。 DOM の API が Promise ベースに移行しつつある流れを汲み、 fetch() もまた Promise を返す関数一発スタイルになった。 クラスからインスタンスを生成しメソッドを呼ぶ XHR スタイルでは、インスタンスを再利用した場合の挙動などを含め、オブジェクトのライフサイクルを

第3回 刺され！技術書アワード大賞受賞！ CPUって、普段どんな気持ちで処理しているんでしょうね。本書では、そのようなCPUの気持ちを知るために抑えておくべき技術について解説をしています。 そのようなCPUの気持ちを知るために、CPUが普段どんな処理をしているのかといった事や、アセンブリ言語といったようなソフトウェア関連の話はもちろんのこと、CPUの気持ちを理解するためには絶対におさえておくべきハードウェアであるキャッシュやパイプラインについても解説しています。 本書を読んで、ぜひCPUの気持ちをゲットしてください（？） ■もくじ 第1章 CPUと友達になろう 第2章 アセンブリ言語をなんとなく読む 第3章 レジスタ 第4章 命令 第5章 分岐命令 第6章 RISCとCISC 第7章 CPUとメインメモリ 第8章 パイプライン 第9章 キャッシュ

Obsidianは日本語の情報が少ない？ 確かにそうかも知れません。 でもね…本当にヤバい奴らって、Googleで「obsidian 〇〇」って検索するだけじゃ出てこなかったりするんですよ。いやホントに。 というわけで今回は、僕がObsidian関連で読み漁った記事の中から「こいつマジでヤベぇw」と感じた外部記事をご紹介します。 (一応言っておきますが褒め言葉です) これからObsidianを始めたいObsidianのことをもっと深く知りたい先人の活用法を知りたいあなたがそう思うなら、ぜひ一度読んでみてください。

WordService provides a large number of commands for working with selected text: - Reformat text paragraphs - Clean up tabs, quotes, line endings - Remove unwanted text parts - Sort lines or paragraphs - Change case - Shift paragraphs right or left - Obscure using Rotate 13 - Insert date, time, or file path - Get text statistics Extend your favorite text processor, email app, or web browser with al

最近、リモートワークということもあり、ペアプロというかAWS、GCPなどの操作をする際に一緒に画面を見ながら作業する機会が多いです。若手の同僚がターミナルソフトを起動してコマンドを実行するのですが、傍から見ているとエイリアスなりキーバインドなりを使えば効率的に操作できるのにと思うことがあります。 最近はGUIで操作することが多いのでターミナルソフトでコマンド操作することがあまりないのかもしれませんが、私は少し前までは（クラウドしかできない）ITインフラエンジニアをやっており、プログラミングよりもコマンド操作するのが圧倒的に多かったため、ちょっとしたことならGUIよりもターミナルで操作することが多いです。Windowsを使っていますが WSL2 + Ubuntu 20.04 LTSで開発環境を整えているため、操作に不自由はほとんどしません。 この手のエイリアスやzshなどのオススメ設定はググ

try { const data = await fetchSomething(); // 正常系レスポンスの処理 } catch (err) { if (isAxiosError(err)) { // 異常系レスポンスの処理 } } 動機はつぎの 3 つです。 データ取得も宣言的に書きたいから データ取得に関係ない例外も catch してしまうから HttpError の集計に不便だから データ取得も宣言的に書きたいから 要約すると、データ取得時は常にこのように書きたい、という話です。useSWR・useQuery や apollo/client でお馴染みのインターフェイスです。 const { data, err, status } = await fetchSomething(); if (data) // 正常系レスポンスの処理 if (err) // 異常系レスポンスの処理

Intro 従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。 これは、 History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、 SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。 この API の目的と仕様を解説しつつ、実装のメモを残す。 画面遷移と SPA の軌跡 Web は HTML の取得と描画を繰り返す、画面遷移(Navigation)を前提としたアーキテクチャ(のちに SPA からの逆算で MPA と呼ばれる)が基本であり、ブラウザなどの実装もそれに最適化されている。 一方「アプリケーション」の設計手法をそのまま Web に持ち込んだ SPA は、この Navigation によってもたらされる UX の低下を防ぐ部分がある一方

Profile y_hokkey／ほりでー 1988年生まれ。多摩美グラフィックデザイン学科を中退。デザイナーとしてグラフィック・エディトリアル・Web・UIのデザインを経験した後、Webフロントエンドエンジニアも経験。現在はITコンサルタントとして外資系SIerに在籍中。 詳しいプロフィールを見る

公益社団法人2025年日本国際博覧会協会では、2025年日本国際博覧会（大阪・関西万博）に活用するための「EXPO 2025 Design System」を策定しました。 このデザインシステムは、万博のさまざまなインターフェースを統一し、アナログ・デジタルの境界線を超えて一貫した体験を提供することを目的としています。EXPO 2025 Design Systemの提供する体験を通じ、万博がより多くの人々に愛されるものになることを願っています。

こんにちは、CTO の id:motemen です。 はてなのエンジニア組織である技術グループでやっているポッドキャスト「Backyard Hatena」を更新しました。「Backyard Hatena」は、株式会社はてなのメンバーの普段の様子や、サービス開発の裏側や技術、取り組みなどについて、CTO の id:motemen を中心としたメンバーがカジュアルにお届けするポッドキャストです。 Backyard Hatena • A podcast on Anchor Anchor / Spotify / Google Podcasts / Apple Podcast で配信しています。お好みのプラットフォームから聞いていただけると嬉しいです。 今回のゲストは、マンガチームのアプリケーションエンジニア id:hitode909 です。日記や子育てについて話しました。 Backyard Hat

第3回 刺され！技術書アワード大賞受賞！ CPUって、普段どんな気持ちで処理しているんでしょうね。本書では、そのようなCPUの気持ちを知るために抑えておくべき技術について解説をしています。 そのようなCPUの気持ちを知るために、CPUが普段どんな処理をしているのかといった事や、アセンブリ言語といったようなソフトウェア関連の話はもちろんのこと、CPUの気持ちを理解するためには絶対におさえておくべきハードウェアであるキャッシュやパイプラインについても解説しています。 本書を読んで、ぜひCPUの気持ちをゲットしてください（？） ■もくじ 第1章 CPUと友達になろう 第2章 アセンブリ言語をなんとなく読む 第3章 レジスタ 第4章 命令 第5章 分岐命令 第6章 RISCとCISC 第7章 CPUとメインメモリ 第8章 パイプライン 第9章 キャッシュ

緊急新人エンジニア応援企画！ ということで自分が Git のエイリアスとして設定している便利コマンドを紹介していく。 直前のコミットに追いコミットする (git fixit) git commit --amend --no-edit もろもろ整えて git push しよう、とすると「あっちょっと修正したい」となるのはよくあること。その際いちいちコミットメッセージを書いて rebase するかというとそんな面倒はとりたくなく、一撃で終わらせたい。--no-edit でコミットメッセージを編集せずに --amend できる。 git fixit に設定している。git commit の引数をそのまま受け付けるので、git fixit -a や git fixit <file> のように使える。 メインブランチに戻る (git com) f() { remote_head=$(git symb

「新しい働き方」が声高に叫ばれる令和の時代――。多くの場面で「効率的な作業」についての議論がされている。機械学習を活用した最新ツールを導入し、自動化できる工程を増やす。そして、人が手作業で行う単純労働を極力減らすことで、限られた集中力を、より生産的でクリエイティブな方に向ける。そんな文脈のなかで、多くのビジネスパーソンは暮らしているはずだ。 しかし、こうした時代の潮流に真っ向から逆らう非生産的な文化もいまだに存在する。例えば、メールに添付された表計算ソフトのデータを開いた際に、セルのサイズが均一な正方形に整えられ、セル結合を多用し、方眼紙のマス目状となった1セルに対してそれぞれ1文字のみを入力するという形式になっていたら、ギョッとすることだろう。 表計算ソフトを活用したこうしたファイルは、俗に「神Excel」（ネ申Excel）と呼ばれ、実際に役所で長らく使用されてきた歴史がある。では、なぜ

インタフェースデザインの実践的な解説書。使いやすいUIで優れたUXを提供するために必須な「リサーチ」「デザイン」「インプリメンテーション」という3つのフェーズを、初心者にもわかるようていねいに解説します。テクニックの章では、ストーリーボードやペーパープロトタイピング、ユーザビリティテストなど、優れたユーザビリティを実現するためのアプローチについて学びます。アイデアの章では、テキストの書き方、どのくらいリアルなデザインであるべきか、アニメーションを使うタイミングなどについて学びます。調査・設計・実装・検証・改善というワークフローに沿ってデザインすれば、ユーザビリティは驚くほど向上します。 翻訳者によるサポートページ。 サンプルPDF ● 「前付、1章と8章（I部）、23章（II部）、33章（III部）」（38MB） 賞賛の声 はじめに I部 リサーチ 1章 ユーザーリサーチ 2章 ジョブシャ

デジタル製品のデザインに役立つ101の指針。製品のユーザビリティや性能を高める上で必須かつ基本のツボ、マスターすれば時間を節約し顧客満足度をアップできるテクニックが101のコンパクトなルールにまとめられています。メッセージが明確で説明もわかりやすいので短時間で気軽に読むことができます。101のルールは、タイポグラフィ、コントロール、カスタマージャーニー、各種要素の統一、UX全般に関わるプラクティスに分類されているのでリファレンス的に読むことも可能です。「よくある落とし穴」を巧みに回避し、自信をもってユーザーのために闘い、すばらしいユーザーエクスペリエンスを提供するプロへと成長させてくれる一冊です。 ●翻訳者による「日本語版のサポートページ」。 ●日本語版独自の8つの追加ルールが収録された「訳者あとがき」のPDF（6MB）。 というわけで、この長すぎる「訳者あとがき」では、原著者があげなかっ

本書は、著者Jon YablonskiがUXデザインと交差する心理学の法則をまとめたウェブサイト「Laws of UX」を元に構成されています。「意思決定にかかる時間は選択肢の数と複雑さで決まる」、「タッチターゲットに至るまでの時間はターゲットの大きさと近さで決まる」などの10の法則を、各章において、ポイント、概要、起源、事例、結論にまとめ紹介します。ノンデザイナーにもデザインセンスが求められる時代に欠かせないハンドブックです。 日本の読者へ はじめに CHAPTER 1　ヤコブの法則 ユーザーは他のサイトで多くの時間を費やしているので、 あなたのサイトにもそれらと同じ挙動をするように期待している。 概要 起源 心理学上の概念 事例 テクニック 重要な論点 結論 CHAPTER 2　フィッツの法則 ターゲットに至るまでの時間は、 ターゲットの大きさと近さで決まる。 概要 起源 重要な論点