TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript

ロジカルシンキングとクリティカルシンキング 曽根原春樹氏：6点目は、ロジカルシンキングとクリティカルシンキングの使い分けです。ロジカルシンキングという言葉は、みなさんよく聞いたことがあると思いますし、日本の本屋さんに行くと、ロジカルシンキングに関して戦コンの方が書かれた本がいろいろありますが、逆にクリティカルシンキングはあまり日本で聞かないような気がするんですよね。 けれどもシリコンバレーのPM界隈では、クリティカルシンキングという言葉がめちゃくちゃ使われますし、めちゃくちゃ求められます。ここができるかどうかが、PMとして腕が立つ・立たないの分水嶺だったりします。 おさらいとしてちょっとお話ししますが、ロジカルシンキングとは何かしらの思考やファクトがあって、それを分解させていくというものです。基本的には要素間のつながりが理にかなっているかという部分を見ていくのがロジカルシンキングですよね。

はじめに こんにちは、Repro Booster という製品の開発責任者／プロダクトマネジメントを担当しているEdward Fox（edwardkenfox）です。 前回の記事「ServiceWorkerの落とし穴8選」では ServiceWorker という技術に的を絞ったテクニカルなトピックを扱いましたが、今回は少し趣を変えて「プロダクトマネジメント」に関する私の考えや想いを書いてみたいと思います。Repro Boosterの開発と運用を通して自分なりに「プロダクト開発」について考えたことや、得られた示唆をまとめています。Repro Boosterの開発チームが、どのような考え方を持ってプロダクトや技術に向き合い、そして製品を改善するべく日々の活動にあたっているかという点について、少しでもその温度感や熱量が伝わるような記事になれば幸いです。 Repro Booster とは 2022年

App Router への移行は「改善」となり得るのか？/ Can migration to App Router be an improvement

デザインに正解はない。だからデザイナーは悩む。 それなのに、クライアントや上司に 「このデザインはどうですか？」 と相談するのはどうしてだろう？この矛盾に気づいているだろうか。 あなたに正解がわからないように、クライアントや上司も正解は知らない。 そもそもデザインだけでなく、このVUCAの時代に答えのある仕事の方がマレだ。 まず、認識を改めよう。あなただけでなく、雲の上の存在のような上司も優秀なクライアントも、誰も彼も答えのないゲームの中で戦っている。 そして答えのないデザインに悩むのではなく、答えのないデザインのルールと戦い方を身につけよう。 デザインのクオリティはプロセスで決まるデザインの案件が来たら、とりあえずギャラリーサイトでサイトを漁ったり競合サイトを調べたりしてないだろうか？ …一番やってはダメな行動だ。コンサルなら肩を叩かれても文句は言えない。 1. 論点を立てるまずやること

ここ2年ほど、すっかりフロントエンド開発者になっている藤田です。以前、Reactフロントエンドの状態管理ライブラリRecoilについて記事を書きました。 Recoilで快適フロントエンド開発 Recoil Syncでさらに快適フロントエンド開発 その後どうなったかというと、実はRecoilからJotaiに乗り換えていて、半年ほど経ちましたので、Jotaiについて書きたいと思います。 サイトの一行目から「Recoilにインスパイアされた」と言ってるとおり、Recoilの良いところを受け継ぎ、不便なところを無くしたような状態管理ライブラリです。 Jotaiの基本 基本はRecoilとほとんど同じで、React.useStateを便利にしたような感覚で非常に簡単に使えます。3ステップで見てみましょう。 1. Providerで囲む アプリケーション全体を<Provider>で囲みます。 impo

長らくReactの入門キットとして使われてきたCreact React App（CRA） 2023年春に正式版になった新しいReactの公式ドキュメントでは、選択肢として紹介されていません。 標準から外れたとは言え、まだ一定の役割は担えるのだろうかと思い様子を見てみました。 とりあえず試してみる まずは現状確認のために実際にプロジェクトを作ってみます。 $ npx create-react-app cra --template typescript Creating a new React app in /Users/nekoya/src/github.com/nekoya/ggg/cra. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scr

ユーザー体験的なものをストーリーで整理し次にUIを作成するとき、閲覧・参照系より先に新規作成のUIから考える、というケースをときどき見かけます。 これ、すごい違和感あります。 ストーリーにおいてユーザーはまず新規作成するので、そのまま新規作成から着手してしまう、といったところでしょうか。 その場合、新規作成の目当てたるオブジェクトの姿が曖昧になりがちです。 そうすると、新規作成画面にしか存在しない特殊なレイアウトやコンポーネントや、特に意図がない冗長なモーダルができあがることが多いと感じています。 目当てが定まっていないうちから、それをどう作るか、どう編集するかを考えるのって難しくないですか？ 考える順番閲覧・参照系のUIを先に作ることで、それが新規作成や編集の目当てとなり、効率よく良いデザインしやすいと感じています。 例えば、私の場合、以下のように考えを進めることが多いです。 まずは「R

AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be

「賢い」「スキルを持っている」「誠実」なのに、ビジネスシーンで大した評価を得られない人たちをよく見てきた。 その大きな原因の一つは、彼らが「お金をもらうのがヘタだった」ことが挙げられる。 お客さんに良いサービスをし、社内でのウケも良い。 でも、最終的な「実績」という面で、彼らは平凡だった。 お金をもらうのが下手な人たち こうした「お金をもらうのが下手な人たち」は、広範囲な職種に存在している。 例えば、エンジニアやライター、弁護士や会計士など、技術的な職業に多い傾向だが、顧客に接することが多い営業やコンサルタントにも存在している。 例えば、私がコンサルタントだったとき、よく怒られていたのが、 「お客さんのところに、必要以上に行き過ぎてしまうコンサルタント」だった。 経営陣は「コンサルタントは時間だけが売り物。必要な工数以上にお客さんのところに行くのは、八百屋が自分の店先の野菜を食べているよう

早朝の寝る前ぐらいの時間にぼやっと下記の様なツイートしたらちょっと反応を貰ったので、取り留めは無いが自分なりに考えていることを書いてみる。 人を育てるのも仕事の内というのは完全にその通りなんだが、そこにドキュメントや本があるから読みます、触って作ってみます、生きたコードを読みます、以外に学ぶ方法なんかねえし、知らねえよ。ただやればいいだけの事に説明も何も無いんだよな……。マジ分からん……。— joker1007 (アルフォートおじさん) (@joker1007) March 2, 2023 タイトルは雑に書いたけど、能力を高めるというと範囲が広過ぎるので、技術的な意味でできる事が増える、ということをテーマとして話をしていこうと思う。基本的に自分の考え方の話なのでそこは御留意ください。 ツイートした通りで、状況や対象に依って割合は変わるかもしれないが基本的にそのためにやることは3つしかないと

デザイナーはもちろん、エンジニアの方やPdMの方もですが、デザインツールを使用していてこのような課題に直面したことがありませんか？ 探しているデザインデータがどこにあるのかわからない 最新のデザインデータがどれなのかわからない 状態変化時のデザインを考慮できておらず、抜け漏れによる手戻りが発生する どうしてこのデザインに決まったのか、検討の流れや経緯がわからない このような課題を解決するためにはどのようなデザインデータを作り、運用していくのが良いのでしょうか。 GoodpatchではFigmaをデザインツールとしてよく使用します。今回はあるクライアントとのプロジェクトにおいて検討したFigmaの運用方法の例をご紹介します。 課題：探しているデザインデータがどこにあるのかわからない 解決方法：FigmaのTeam, Project, Fileの構成を定義する 探しているデザインデータがどこに

30歳女性の方がちょうど同じようなのを書いていたので、俺も書く。 まず俺のスペック ・34歳男 ・システムエンジニア ・年収500前後 ・身長175cm 65kg （普通体型だと思いたい） ・これまで彼女いたことない（いちおう中学生のときにキスだけしたことある） ・趣味は温泉でまんじゅうを食うこと まず婚活を開始した動機だが、純粋に独り身で寂しくなっていたのと、昔から子供が好きだというのがある。 今まで彼女がいなかったのは顔とか性格が悪いわけではなくて、ただ単純にチャンスがなかっただけだと思っていた。（そう思い込んでいただけなのを今回の婚活で実感した） まず始めたのは無難にマッチングアプリ。 自撮りは評判が悪いらしいから、幼なじみに撮ってもらった写真で開始。課金もした。 いいね数、たったの5。 まずここで心が折れかけた。俺の価値はそんなもんだったのか、とかメンタル病みかけた。そしてマッチン

ネイティブアプリと同様の機能をウェブアプリに追加できる技術、それがProgressive Web Apps (PWA)です。iOSでも近年、徐々にPWAの機能が追加されています。これらの流れは、ユーザービリティに重きを置く昨今の潮流に即しているように感じます。 この発表では、PWAの現状とその可能…

木瓜丸です。 最近になって、やっとNext.jsを上手く使いこなせてるんじゃないか？！と思えるようなコンポーネントの設計手法を見つけたので、Zennにまとめてみたいなと思います。 この記事で触れること この記事では、主にページ単位でどのように状態管理を行うのかに焦点を当てることにします。 コンポーネントの管理の仕方などは特に着目しませんがご了承下さい。 hooksの導入 React初心者の方は最初に疑問に思うと思いますので、hooksについて触れておきます。 hooksというのは、Reactによって提供されているuseState, useEffectといったやつや、それらを組み合わせて作ったオレオレ状態管理基盤の総称です。 この記事で用いる基本的なhooksをいくつか紹介します。 useState その名の通り、状態を持つ変数を作ってくれます。 const Hoge = () => { c

SmartHRに頻出する、表形式で一覧表示するUIのパターンまとめています。 SmartHRでは、表形式で一覧表示するUIを「よくあるテーブル」と呼びます。 OOUIにおけるコレクションと、コレクションに関連するアクションやフォームをまとめた総称を指します。 構成よくあるテーブルは、次の要素で構成されています。必須項目以外は任意の表示項目です。 テーブルオブジェクト名（必須）オブジェクトの情報オブジェクトの操作タイトルエリアテーブル操作エリア一時操作エリア 1. テーブルよくあるテーブルは、多くの場合「1項目1行の1次元リスト」のテーブルを含みます。 オブジェクト名オブジェクトの名前を指します。行を識別するために必須要素として設定します。 移動リンクのスタイルオブジェクトの詳細ビューへ移動する場合、オブジェクト名にリンクを設定します。 テキストリンクによる移動は「オブジェクトの操作」にはあ

7/27（水）19:00~地味PM meetupの登壇資料です。 ▼口頭でお話しした内容も補足しているnote版はこちら https://note.com/mignon53/n/na2a050e6db81

こんにちは。弁護士ドットコム クラウドサイン事業本部 Product Engineering 部の篠田 (@tttttt_621_s) です。 普段は Vue.js と TypeScript を使ってクラウドサインのフロントエンドの実装を担当しています。 本記事では、クラウドサインのフロントエンドミーティングと、その勉強会で実際に発表した内容を紹介いたします。 フロントエンドミーティングの内容 実装の相談や改善提案 技術情報の共有 ぷち勉強会 ぷち勉強会で発表した内容 概要 ISR: Incremental Static Regeneration ISR とは ISR の動作例 ISR の問題点 On-demand ISR : On-demand Incremental Static Regeneration On-demand ISR とは On-demand ISR の動作例 おわりに

7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy