Takepepe
@takepepe
Followers
7,185
Following
1,726
Media
221
Statuses
10,456
Web Application Developer. Interested in Frontend technical writing.
Japan Tokyo
Joined November 2009
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
BECKY X MAYBELLINE LIVE
• 208376 Tweets
Northern Lights
• 195553 Tweets
オーロラ
• 161541 Tweets
#Auroraborealis
• 84514 Tweets
DeNA
• 57804 Tweets
#ヒロミのおせっ買い
• 46481 Tweets
THE SIGN in MANILA
• 24594 Tweets
京王杯SC
• 22422 Tweets
UsutTuntasRBT UsutRBS
• 19977 Tweets
#MAESTRO4thWin
• 18156 Tweets
バチコン
• 15639 Tweets
Kアリーナ
• 14920 Tweets
太陽フレアのせい
• 14486 Tweets
ソウルイーター
• 13318 Tweets
ベイスターズ
• 13124 Tweets
ハマスタ
• 10669 Tweets
Pinned Tweet
著者「実践Next.js —— App Routerで進化するWebアプリ開発」が3/16日に刊行します📘 Prisma や NextAuth.js を使用した実践的なサンプルを中心に構成しました。 #技術評論社
5
115
607
強いメンバーだけでチーム組んじゃいけないの「教える機会」が生まれなくて、誰かが辞めたら終了するから。ジュニアが程よく入ってて、常に相互に教え合う生態系が出来上がらないと、チームは持続しないと思う。
1
216
1K
著者「フロントエンド開発のためのテスト入門」が4/24日に刊行、Amazonで予約注文開始しました📘「テストをはじめたいけれど何から着手すればいいか分からない…」という方でも読み進められるよう構成しました。
4
164
992
『型の強化書』原作から半年間、執筆したTypeScript の📖が6/26に刊行します
【対象読者】
・TypeScript を現場導入したい
・Vuex の型定義がつらい
・Next.js / Nuxt.js の選定で悩み中
型定義で埋め尽くした350p、Amazonで予約開始です
3
243
844
本年度も会社のNext.js 研修を担当しました。来年度は App Router 出来るかな？
0
76
690
今Next.js プロジェクト立ち上げる時の推し構成
【迷わず入れる】
・Zod
・React Hook Form
・Radix UI
【構成にあえば入れる】
・tRPC
【多分入れる】
・remada
2
58
601
そう。alt=“” が正解の時あるのよね。
1
188
607
会社の新人研修でNex.js講義を担当しました。Nested Layouts も控えてるんで、来年は大きく作り替えるかも？
0
54
515
設計したアーキテクチャ・技術選定がどう劣化して、どういった問題が出てくるのかという知見。数年みないと気づかず、その経験価値は高いと思っているので、自分の転職頻度は低いです。
0
41
378
すごい | Google、最適化されたコンテナイメージを生成する「buildpacks」をオープンソースで公開。Dockerfile不要でJavaやGo、Node.jsをコンテナへビルド － Publickey
0
70
321
2023年度版のフロントエンドロードマップが出てた。紫のやつは触っておかねば…。
0
50
314
READYFOR株式会社さんで、勉強会を行いました。Redux の良さがいまいち理解できない・Redux Toolkit しか使ったことのない方に、読んでいただきたい内容です
1
63
310
> ユニットテストをわかる人にサンプルを作ってもらう、ユニットテスト専属のエンジニアを一人立てて先駆者として道を切り開いてもらう
ほんとこれで、出だしできちんと書ける人がテストコードベース作らないと、いつまでも書かれないまま。
1
29
304
jQueryディスを見るたび、40〜50で昨今のトレンドキャッチアップもしないホームページ手作りおじさんが世のインターネットの大半を作っている現実を知らんのか？と微妙な気持ちになる。フレームワーク当たり前って感覚は、IT企業と一部イケてる制作会社だけ。
1
52
291
新アニメ「Redux」
第1話 ボイラープレート多過ぎ
第2話 大文字キモい
第3話 middleware論争
第4話 Container 粒度を間違える
第5話 あれもこれも rerender されてた
第6話 型定義がダルい
第7話 負債・型ヘルパー
第8話 Hooksに座を奪われる
最終回 やっぱ必要だった
4
47
291
テスト書かれていないプロジェクトに対して、途中からテスト導入するのは自分でも億劫（タスクとして計画する必要がある）なので、立ち上げ時にテストコード含めた設計にできているかというのは、とても大事なこと。
0
34
277
理解力の低い人に説明していると、自分の説明が良かったのではなく、単に反応くれた人の理解力が高いだけだったんだなと気づく（何かを教えるのは難しい）
1
25
262
Next.js 4種のキャッシュに関する詳細なドキュメントが公開されたようです。
1
44
248
- UIが複雑: Redux
- Full CSR: SWR, useQuery
- 状態管理微量: Context
- 画面数が多い: Recoil, jotai
ですね。Context は標準APIなので、他ライブラリ+αのちょい足しに使うことが多いです。チャンク分割観点で大規模開発には Recoil がいいと思います。
2
24
247
毎年このネタ書いてる気がしますが改めて。React Hook Form ユーザーに特におすすめです。
0
39
248
hooks の使い方・props の渡し方で再描画差分を知るチートシート。眺めてるだけで違いが理解でき、分かりやすかった
0
25
246
・TypeScript の型定義食わせる
・手順追って注文（途中でMSW使うよう指示）
これでモックデータ定義・MSWハンドラー定義・コンポーネント定義・テスト作成までちゃんとできて凄すぎる…
1
29
242
Atoms の Props 多すぎ…？と感じていたら、こちらがお勧めです。
1
37
229
- Next.js のキャッシュ難しい
- Next.js のキャッシュ要らない
人向けのハック。全 fetch キャッシュタグに”*”設定して、全Server Action で revalidateTag(“*”) すれば、何も難しいことなく Server Action と Server Component が使えますね。過剰な呼び出しも無い。
2
12
223
ChatGPT にコード書かせる時はテストも書かせるようにした方が良いというのはかなり分かる。出力されたコード・テストに対して「このテストケース追加したうえで動くように修正して」というのが伝わるし、修正してくれる。
1
17
210
Next.js を選ぶ理由は単純で、Reactのドキュメント冒頭で「フレームワークに乗っかってね」と指している先頭にNext.jsがあるからですね。開発者確保が優先なので。
1
14
207
え、これすごい！これまで Storybook Test runner だと mock 使えないから書けるテスト限られてたんだけど、色々できるようになりますね。フロントエンドテスト、モジュールモックでStorybookのインタラクションテストの開発コストを下げる｜空雲
#zenn
1
23
199
フロント(React)に関して言えば、設計論の前にライブラリを正しく使うことが大事。〜層を無理矢理作る前に、レンダリング回数で考えて。
2
14
191
App Routerのキャッシュが難しいと言う前に
- .next フォルダのキャッシュを見る
- Server Action で Revalidate する
だけは試してみてほしい。前者は公式ドキュメントで明文化されてないのが不思議なくらい。
1
15
190
業界狭く、経験値あるシニア層は人脈とリファラルでしか動かなくなってるよね。使用技術詳細で訴求できるのも若手までだし、事業そのものの魅力が一番問われてると思うな。
1
31
188
App Router というか Next.js、インフラ整備どころかAPIサーバー建てるのも時間が惜しい人達にとっては最適解の塊。その前提でデザインされている認識がないと、あれこれ言いたくなるという話。
2
24
185
- Storybook で canvas tab 開く
- Full accessibility tree で role/name 確認
- Testing Library で不足分箇所を補う
というワークフローがめちゃ捗るので、フロントエンドエンジニアは皆みて
0
12
181
jsdom では CSS が結果に反映されない点から忠実性が低かったり、モックだらけで虚無になるのはその通り。ただ、ブラウザテストで全てを賄うとFlakyテストと戦うばかりでそもそも自動テストが信頼出来なくなる懸念があります。
#zenn
2
22
165
UIに一貫性が無くなるのって、本当にフロント実装（デザインシステム）の問題か？デザイナーの入れ替わり、構想のブレ、好みによるズレじゃないの？
1
12
161
そう。Storybook はスタンドアロンなデザインカタログとして独立させると誰も見なくなるけど、自動テストケースとしてCIに組み込むと見ざるを得なくなるよ（分類は Testing tool だし）
1
9
161
細かい話だけど、Next.js のドキュメントからは SSG という表現は殆ど消えており、SG という表記に統一しているのは気をつけたいところ。Static Site Generate ではないし、特徴からして SSG とは呼べないはず（日本語ブログでとても多い）
1
9
156
発売日なので感想文を書きました
0
39
143
Stylex にいたる Atomic CSS-in-JS の記事。Tailwind の良さをとりいれつつ、Tailwind の課題をどう解決しているのかについて書かれている。
1
17
142
Reduxゴリゴリ世代をすっ飛ばして、Hooksで何とかするのが一般的になった今、混沌とした Component が各現場で産声をあげている気配がする。React弄るならRedux一度は触ったほうがええよ。
0
29
139
共通化すべきではないと考えているので<Button>と<LinkButton>で作り分ける派です。
見た目がボタンのUIコンポーネントにおける、<a>タグ or <button>タグ問題ってどうやるのがいいんだろ…？
結局動的コンポーネントでタグを出しわけするのがベスト…？
3
4
21
2
11
140
実践Next.jsをご購入頂きありがとうございます。読者の皆様からtypoのご指摘頂いており、こちらのページに正誤表を掲載しております。ご迷惑をおかけし申し訳ありません。
1
9
139
「App Router に移行する理由は？」とよく聞かれるのですが、この記事を引用しつつ「従来 SSR パフォーマンス限界を超えるため React が進化し、App Router はそれに追従するための新しい選択肢」と説明しています。
1
6
138
「jQuery -> React」って「ガラケー -> スマホ」と近い気がする。電話だけ出来れば良い層と、利便性から離れられない層には、価値観の差がある。
0
15
134
2
33
135
なんとなく設けていた設計概念を「Atomic ReDesign」として明文化しました
2
14
135
「より速い WEB を目指す Next.js」という題で登壇します！Next.js 12 の新機能をまじえた話を予定しています。是非ご参加くださいー
0
22
130
ライブラリ選ぶときは、npmtrends で競合調べて「バンドルサイズ > 最終更新日 >>>> スター数・dl数」で決めることが多いかなぁ。
1
8
128
フォロワーさんと CSS設計についてやりとりがあったので書きました。部分的に React / Vue レンダリングしており、CSS設計と共存しなければいけない場合などにも役立ちます。
0
25
128
自分も CSS Modules 推し。とはいえ CSS Modules そのものを推している訳ではなく、role/aria 属性をセレクタとする事で「テスト・a11y・スタイリング」を一��する事が出来るためです。
#Qiita
1
15
127
React Hook Form、最近の個人的推しは handleSubmit() の引数 onValid, onInvalid を親から props で貰うこと。これすると自然とフロントバリデーションの単体テストと、API 絡む結合テストが切り分けれる。
<form
onSubmit={
handleSubmit(onValid,onInvalid)
}
>
0
8
126
vuex-class や vuex-module-decorators を使わず、今すぐ Nuxt x Vuex x TS で型ガチガチにしたい方へ。6月刊行予定の商業誌サンプルリポジトリを公開します。簡略な説明は README に記載しますが、詳細は誌面にて。(宣伝)
1
48
122
コメントにあるProvider hell。波動拳の見た目もだけど、ページ・プロバイダーが増えるごとに Web Vitals に影響がでる。code-split に有利な状態管理ライブラリを選ぶのはそのため
#zenn
0
6
123
Q「AppRouterは誰の何を解決するのか？」
A「従来SSRには課題があり、Reactは新SSRアーキテクチャに取り組んできた。AppRouter はその新SSRアーキテクチャを基礎にした新しいNext.jsのレール」
2
7
123
「これは React の機能だよ」と明言せず、Next.js が初手発信してしまったのはあんまり良くなかったんじゃないかなと思う。Server Action が Next.js 固有だと思っている人が未だに一定数いそう。
2
8
120
最近 atomic design の名前をかりて、状態の関心範囲で区切ってる。React だと状態持たせどころがキモなので重要視したいし、意外と粒度感も近しくなる。
- atoms: state無し/汎用的
- molecules: local state/汎用的
- organisms: global state/汎用的
- templates: global state/限定的
2
10
120
React Hook Form を使うなら、制御・非制御コンポーネントの理解が必須。UIライブラリに依存しないスタイリングがとういうものか？を理解していないと、Controller だらけのコードになり良さが半減する。RHFの問題ではなく、スタイリングの引き出し不足であって、Atoms を作るとはそう言う事。
1
5
120
アウトプット続けてた事がきっかけで、フォローして下さっている方がほとんど。そこから得た知識もあれば、仕事・執筆・人脈に繋がってるし、Qiita Zenn Twitter が無ければ今の自分が無いのは確実。はじめた頃はいいね一桁とか悲しい気持ちになる時もあったけど、続けてて良かったよね。
1
1
119
「マウス位置・タッチ座標を拾って何かする」というGUI は作って勉強になる絶対やるべき題材。memo化と再描画発生タイミングは的確に絞ることで、手触りが全く異なる事を当時体感した。 普段ありもののコンポーネントを拝借しているだけだと、この意識は芽生えない。
0
14
117
いま流行りの zenn で記事を書きました。AtomicDesign の運用に悩んでいる方に、読んでいただけると嬉しいです
0
21
114
index.ts
index.mock.ts
みたいに、実装ファイルのそばにモック関数書いてるファイル用意しておいて、そのファイル冒頭で
jest.mock(“.”)
しておくと、テスト毎にモック関数 import するだけでシュッと使えるので便利。
0
3
116
TypeScript の何がいいって、書いてるだけで「モジュール分割や責務の切り分けが大事」という、良い JavaScript コードの書き方を教えてくれる事だ。型の表現力より、こちらの方が重要。
0
16
114
Next.js はフルスタックフレームワーク色が鮮明になってきたので「UIを作り込むエンジニアが BFF実装もやる」ならNext.js、そうじゃないなら別フレームワーク、みたいな、組織構成を判断軸にする選ばれ方になるんじゃないかと予想している。
1
4
109
「Lint はライブラリ作者の意図がよく反映されているから倣おう」という話が話題なので、フロントの単体テストにはこちらも是非。
1
8
111