プログラミングをするパンダ Profile Banner
プログラミングをするパンダ Profile
プログラミングをするパンダ

@Panda_Program

Followers
4,336
Following
255
Media
701
Statuses
10,869

Next.js / TypeScript / TDD / XP / DevOps / Webサイトの個人開発が好き Tech Blog → Do your homework アイコンは熊田様(ココナラ)

Joined January 2018
Don't wanna be here? Send us removal request.
Explore trending content on Musk Viewer
Pinned Tweet
@Panda_Program
プログラミングをするパンダ
4 months
「パンダと奥田の問答ラジオ」、第1回のテーマは「自社開発において納期は必ず守らなければならないのか?」です 「納期」という当たり前になってしまっている考えを、「なぜ守るのか」「守らなくてもいい時があるのか」など様々な角度から見つめ直しています @masaya_okuda
2
2
30
@Panda_Program
プログラミングをするパンダ
2 years
「リモートで雑談が減った」という話を聞きますが、自分がいるチームでは仕組みで解決しています。毎日18:45から任意参加で、予め募集したスプレッドシートに書いてある話題から一つを選んで全員に答えて貰って雑談してます。これが始まってからチーム内では雑談が足りないという意見がなくなりました
Tweet media one
6
755
3K
@Panda_Program
プログラミングをするパンダ
4 years
サーバーサイド一筋5年の優秀な同僚のVue.jsのコードをレビューしたことがあります。責務が分割され、メソッド毎の処理がわかりやすく、とても綺麗に書かれており、特に指摘するところなくLGTMを出しました。 「調べながら書いた」とのことで、この経験から以下の洞察を得ました
2
410
2K
@Panda_Program
プログラミングをするパンダ
2 years
Eric Evansが「エンジニアは技術志向ばかりで業務ドメインに関心を持たない」と批判して考案したDDDが、結局エンジニアの手によって「DDDは難しいから実装だけ真似しました。名付けて軽量DDD」ってなってるのほんとにエンジニアムーブそのものって感じで好き
2
247
1K
@Panda_Program
プログラミングをするパンダ
2 years
フロントエンドは単体テストがないことが多いですが、テストないのが怖かったので、React のコンポーネント内のロジックをTDDで開発したら、カバレッジが 90%近くになりました。結果、リリース後1年近く経っても表示に関するバグは1件だけ。その経験を以前書きました
4
124
930
@Panda_Program
プログラミングをするパンダ
3 years
・Netflixが新規ページにNext.jsとTailwind CSSを採用 ・Slackが新しい自動化のプラットフォームにDenoを採用、Denoコアチームと協働 ・Remixが来週月曜日(時差で日本は深夜?)にOSSとして公開される 今日はニュースが多いですね😊
1
140
906
@Panda_Program
プログラミングをするパンダ
2 years
エンジニアとして今の自分を形成した本を5冊挙げるなら何かなと考えてたけどついに決定した ・テスト駆動開発(TDD本。ケント・ベック) ・LeanとDevOpsの科学 ・クリーンコーダー(ボブおじさん) ・チームギーク ・クリーンアーキテクチャ(ボブおじさん) これだわ
2
48
718
@Panda_Program
プログラミングをするパンダ
3 years
Docker が話題になってますね。React のコアチームで活躍されてる Dan Abramov 氏の知らないことリスト(2018時点)を読むと元気が出ると思います - Docker, k8s - Linuxコマンド(毎回調べる) - CSSのFlexboxの使い方 - Sass, Electron, Next.js 使ったことない などなど
2
134
625
@Panda_Program
プログラミングをするパンダ
2 years
これ前に超絶デキるエンジニアの元同僚が教えてくれた scientist っていうライブラリと同じやり方だ
@DavidKPiano
David K 🎹
2 years
One of my favorite quick refactoring techniques is to keep the old function/method around and assert ✅ that the outputs are the same in development. This lets you validate refactors before writing tests. I use this with the Strangler Fig pattern:
Tweet media one
35
191
2K
1
72
605
@Panda_Program
プログラミングをするパンダ
2 years
ブリリアントジャークという単語、日本語上で音だけ聞くとカッコよく思えてしまうバグがあるので「技術チンピラ」「マサカリ投げ太郎」くらいの呼び方でいい気がする
3
134
553
@Panda_Program
プログラミングをするパンダ
3 years
JavaScript のエコシステムは面白くて、主要なライブラリ作者やツール作者が2周目3周目の「強くてコンティニュー」をしてるのが面白いなと思ってます。 Node.js -> Demo Vue.js -> Vite Yarn, Babel -> Rome 自分が知らないだけでもっとあると思います
4
66
466
@Panda_Program
プログラミングをするパンダ
4 years
・サーバーサイドで、OOPのベストプラクティスを理解している人はフロントでもクリーンなコードを書く ・SOLID原則(クラス単位)とレイヤードアーキテクチャを理解するとフロントで応用できる ・「サーバーサイドからフロントエンドエンジニアに転身した人」というだけで、侮ってはいけない
1
74
408
@Panda_Program
プログラミングをするパンダ
11 months
チームのスケーラビリティに一番効くのは「ブログ書く」ことなんだよなあ。情報伝達を同期的な口頭ではなく文書で非同期化することで自分の時間が節約できる。方針とサンプルを示しておけば自分はチームの実装にまで入らずに済むし、他の人も同じように再現ができる。よくプレイングマネージャーの
2
52
367
@Panda_Program
プログラミングをするパンダ
3 years
前職で人事に「何でエンジニアはFacebook や他の SNS ではなくTwitter を使うの?」って聞かれて「社外のすごい人たちと交流できるからです」と答えたけど腑に落ちなかった様子だった。Twitter に疑問を投稿すると誰かがきっと答えてくれるはずというある種の信頼感はエンジニア文化特有かもしれません
0
64
338
@Panda_Program
プログラミングをするパンダ
2 years
テストファーストとTDDの違いを聞かれたのでこんな感じで答えたけど、結構わかりやすく書けたなーと思ったので投稿します。もちろんこれが全部じゃないけど、概要は掴めるかと
Tweet media one
2
51
326
@Panda_Program
プログラミングをするパンダ
3 years
新しいReactのドキュメントは手厚いので自習できる人はこれで十分かも
Tweet media one
1
28
318
@Panda_Program
プログラミングをするパンダ
3 years
フロントエンドに来る前に思ってた仕事内容 ・Next.js!React!宣言的UI書くぞ! 実際 ・Storybookメンテ ・Renovateでパッケージ更新 ・E2Eや結合テスト(cypressやtesting libraryの書き方覚える) ・Lintや型のエラー修正 ・デザイナーさんと諸々調整 ・ユーザー行動計測タグ記述 ・キャッシュ周り
1
31
316
@Panda_Program
プログラミングをするパンダ
2 years
実装のリズム 1. テスト書く 2. 実装どうするかな〜って考える 3. 実装する 4. あの仕様も満たさないとな 5. テスト増やす 6. 実装する 7. なんかもっと綺麗になりそうな気がする (「リファクタリング」本読む) 8. リファクタリング 9. テストが失敗しないことを確認 10. コードをコミットする
1
25
303
@Panda_Program
プログラミングをするパンダ
3 years
個人開発の技術選定は「これならしばらく戦える」というスタックを選んでいます。今はReact・TypeScript・ Next.js・Tailwind CSS・SWR・Vercel(IaaS)、Supabase(BaaS)。数年間は個人開発の技術スタックを変えなくて済みそうです
1
13
275
@Panda_Program
プログラミングをするパンダ
2 years
主語がデカいのは承知の助なんですが、アジャイルもスクラム開発もDDDもペア・モブプロも、過去に運用経験があった上で理想と現実を知ってる人がチームにいないと成功しないと思います
2
46
278
@Panda_Program
プログラミングをするパンダ
4 years
・情報収集力は一種のスキル。サーバーサイドでもフロントエンドでも役に立つ 結局、クリーンなコードを知っている人は、サーバーサイドでもフロントエンドでもコンポーネントごとの責務がわかりやすく、シンプルなコードを書くということです。
1
42
270
@Panda_Program
プログラミングをするパンダ
6 months
zennで記事を書きました。よければぜひ〜
2
14
264
@Panda_Program
プログラミングをするパンダ
2 years
プログラミング未経験で入社した自分の教育係だった先輩とオンライン雑談。当時の会社は「後からバグが出ても早く実装する人」が評価されていたが「最初から設計を綺麗に考えた方がいい」と先輩は教えてくれた。先輩のおかげで道を間違えなかったことを感謝しつつ読み返してる
1
29
249
@Panda_Program
プログラミングをするパンダ
11 months
今の個人開発アプリを作る際、最初はフォームからAPIにPOSTするときのAPI用の便利型定義ライブラリを何使おうか迷ってたけど、server actions を使ってからは今のところ zod だけで十分なのでめっちゃ楽。API Routes すらまだ一つも作ってない。データフローもわかりやすい↓
Tweet media one
2
14
241
@Panda_Program
プログラミングをするパンダ
4 years
さらに、ここから一歩踏み込みますが、情報収集力とWebを構成する技術に対する理解さえあれば、フロント周辺のツールの利用経験の有無は重要ではないと思ってます。 ツールはあくまでも道具です。そのツールで解決したい課題とそれに対するにアプローチ、トレードオフを理解すれば、
1
29
196
@Panda_Program
プログラミングをするパンダ
4 years
もう一方の学習コストは大幅に減り、いわゆる「上達」につながると考えています。なので、フロントとサーバー側で分けるのではなく、ミクロな視点では「OOPによるクリーンなコードの書き方」、より大きな視点では「Webを支える技術に対する理解」「中・大規模のソフトウェアの設計」「システム全体の
2
23
193
@Panda_Program
プログラミングをするパンダ
3 years
「この1~2年、その後もRustがJavaScriptのエコシステムに影響を与えると自信を持って言えます。Next.jsのビルドツールが全てRust製の世界を想像してみてください。Next.jsはNPMから静的なバイナリで配布されるでしょう」 Rust Is The Future of JavaScript Infrastructure
1
26
198
@Panda_Program
プログラミングをするパンダ
3 years
この3日間、個人的に Golang 触っててすごく良い印象です。標準ライブラリが充実してるし、エラーチェックすぐするし、10年以上経ってもバージョン1系で下位互換を壊すような変更ないし、テストはライブラリ入れなくてもすぐに実行できる。5年前に執筆された記事のコードも現役。よくできてるなー
2
17
190
@Panda_Program
プログラミングをするパンダ
3 years
情報解禁日になったので告知します! この度、 @t_wada さんと共に Software Design 3月号のTDD特集を執筆しました😊 自分のパートではテストを書いたことがないという方でも手を動かしてTDDを実践できるように書きました! ただいま予約受付中です(2月18日発売)
1
42
189
@Panda_Program
プログラミングをするパンダ
3 years
State of JS の結果出たんだ。 Svelte の勢いがすごい
Tweet media one
2
42
183
@Panda_Program
プログラミングをするパンダ
4 years
Next.jsのルーティングで使えそうな型パズルやっと解けた😭
Tweet media one
1
19
179
@Panda_Program
プログラミングをするパンダ
3 years
Next.js のスターターを作ってます。各種ツールがセットアップ済みなので、 clone や fork で面倒な設定が不要で使えます! ・TypeScript ・ESLint + husky ・Tailwind CSS(v2) ・Storybook ・Jest + React Testing Library Storybook と テストのサンプルコード同梱です
1
14
177
@Panda_Program
プログラミングをするパンダ
3 years
4月末付で弁護士ドットコムを退職し、5月からBASE株式会社で働いております。フルリモート下での転職で新しい環境ですが、頑張っていきたいと思います!
2
8
177
@Panda_Program
プログラミングをするパンダ
3 years
へー、TypeScript 公式から TS のチートシートが出たんだ 👀
@sebastienlorber
Seb ⚛️ ThisWeekInReact.com
3 years
@thoughtspile @DasSurma @t3dotgg @jamespearce @winkerVSbecks @AndaristRake @alexanderkondov @PaulieScanlon @adevnadia @manosim_ @FormidableLabs @devongovett @dioxuslabs 🧵 TypeScript Cheat Sheets by @orta 4 nicely designed and official cheatsheets now online: - Types - Interfaces - Classes - Control Flow Analysis
Tweet media one
1
40
157
0
22
176
@Panda_Program
プログラミングをするパンダ
2 years
ビールのレビュー投稿サイト Beer Break を作りました🍺 ビールの感想を投稿すると、自動で飲酒量を計算してくれるので「最近どれだけビールを飲んだかわからない」という悩みを解消できます👍 飲んだことないビールにチャレンジするときに、ぜひ投稿を参考にしてください!
Tweet media one
Tweet media two
Tweet media three
6
32
167
@Panda_Program
プログラミングをするパンダ
4 years
経験と熱意と興味があれば、基本的な使い方はマスターできます。あとは「最新の書き方」(時に振り回されること)や、「コミュニティが発見したベストプラクティス」を先達が教えれば済むことです。サーバー側でもフロント側でもどちらか一方に通じ、ツールに対するメンタルモデルを形成すれば、
1
19
155
@Panda_Program
プログラミングをするパンダ
3 years
飲んだビールの画像を投稿できるサイトのプロトタイプを作ってみました。30RT、100いいねを超えたら開発を進めてみようかな
Tweet media one
Tweet media two
Tweet media three
3
44
155
@Panda_Program
プログラミングをするパンダ
4 years
「TDDは、天才ではない普通のプログラマが、動作する綺麗なコードを書くためのテクニック」
Tweet media one
3
27
153
@Panda_Program
プログラミングをするパンダ
3 years
エヴァンゲリオンの制作会社カラーでエンジニアの募集が! > 本システムの要件定義、設計、実装、テスト、保守 > TypeScript/Next,jsを用いたフロントエンド開発 > TypeScript/NestJSを用いたバックエンドAPI開発 > 上記における定常的なリファクタリング・改善
0
61
153
@Panda_Program
プログラミングをするパンダ
2 years
Next.js v13 へのアップデート(個人ブログ)がひと段落したので、対応したこと��大まかにまとめました。Zenn のスクラップに書いてるけど、気が向けばちゃんとした記事にするかも
1
23
148
@Panda_Program
プログラミングをするパンダ
11 months
え、今 react-dom に `experimental_useFormState` とか `useFormStatus` があるってマジですか
2
11
146
@Panda_Program
プログラミングをするパンダ
3 years
ブログサイト作り替えます! 今: GatsbyJS + Flow + CSS Modules 次: Next.js + TypeScript + Tailwind CSS Tailwind UI のおかげでたった4時間でここまでできました。開発速度が爆速😂 今はダミーデータですが、逆にいうとデータさえさしかえてしまえばもう完成します😂😂😂
Tweet media one
Tweet media two
Tweet media three
Tweet media four
3
2
143
@Panda_Program
プログラミングをするパンダ
4 years
のアーキテクチャ」のスキルで判断するべきでしょう。 なお、私自身はCSの学位を持たないWeb Developerで、サーバーサイドはPHP、フロントエンドでReactを書いているものであることを付言しておきます。もちろん立場が違えば視点も異なると思います。
1
18
136
@Panda_Program
プログラミングをするパンダ
2 years
今日の発表資料はこちらです #phpcon #phpcon2022
0
12
139
@Panda_Program
プログラミングをするパンダ
4 years
React の記事を書きました! React の入門を終えた方が React のことをさらに知って好きになって貰えれば嬉しいです😊
0
17
132
@Panda_Program
プログラミングをするパンダ
2 years
なるほどなあ「バリデーションはどのレイヤの責務なのか?という問い自体が間違いであり、レイヤごとにそのレイヤの責務となるバリデーションを行うべき、というのが今のところの結論。」 Clean Architectureにおいてバリデーションはどこでやるべきか
0
11
135
@Panda_Program
プログラミングをするパンダ
6 years
IT企業に転職後、攻めてみた結果まとめ(全てOK) ・10時に出社、12時から1時間の休憩後、14時に退社 ・近所のおしゃれカフェでリモート作業 ・イヤホンでHIPHOPを聞きながら作業 ・ポテチ食べながら作業 ・冷蔵庫に自分用のコーラ2Lを保管 ・休憩申請して近くのプールで泳ぐ ← new!
0
16
126
@Panda_Program
プログラミングをするパンダ
3 years
note の記事を PDF でダウンロードできるサイトを作りました😊 ブラウザでの操作が不要で、URLを入力するだけで使えます!
3
27
126
@Panda_Program
プログラミングをするパンダ
3 years
(朗報)M1 Pro Mac Book で Next.js のビルドが圧倒的に速い。 ------ ビルド1回目 M1 Pro -> 17.62s Intel Core i5 -> 55.71s ------ ビルド2回目 M1 Pro -> 9.07s Intel Core i5 -> 48.59s ------ 使ったレポジトリは個人開発のものです
1
17
125
@Panda_Program
プログラミングをするパンダ
3 years
Stripe公式がNext.jsでの利用方法をコード付きでドキュメント化。今までコード例はNext.jsのGithubにあるexampleにしかなかったので激アツですね。Next.jsがSaaSと連携してWeb開発を拡張してる感があります
@rauchg
Guillermo Rauch
3 years
The @stripe Checkout integration builder now features Next.js 🤯💰 It shows off the power of colocating your frontend and your serverless functions, with local DX + edge deploys
6
43
492
0
9
123
@Panda_Program
プログラミングをするパンダ
2 years
Next.js v13 で Next.js 離れが始まるかもと思ってしまう��あ。v12 までは React で複雑なことを裏側に隠して簡単にできるようにしてくれてるという印象だったけど、v13 は React 本体でやろうとしている複雑さがそのまま表に出てしまって難しくなったなあという感想
1
5
117
@Panda_Program
プログラミングをするパンダ
2 years
先週書きました。こちらもぜひ! 「DDDの正体は実装パターンとモデリングの組み合わせ」
1
26
114
@Panda_Program
プログラミングをするパンダ
4 years
ただし、フロントのコンポーネントの分け方だけは、自分なりの指針はまだ見出せないでいます…。あれは何を参照して何をモデルとすればクリーンになるのか、試行錯誤中です
1
18
113
@Panda_Program
プログラミングをするパンダ
6 years
プログラミングスクール、ほんと高いですよね。自分はProgateで学び初めて1.5ヶ月で未経験のプログラマとして採用して貰えたので、実質かかった料金は980×2=1,960円です。
2
13
110
@Panda_Program
プログラミングをするパンダ
2 years
@fuwasegu その用途ならReal Worldがオススメです!フロントもバックエンドも、仕様が決まっている上に、様々な言語での参考実装があるのでとても良いです👍
1
9
110
@Panda_Program
プログラミングをするパンダ
3 years
Next.jsを作ったVercel社が NextAuthのスポンサーに!NextAuthはNext.jsでGoogleやTwitterログインが簡単に実装できたり、PrismaやTypeORMと組み合わせて利用することもできます
@nextauthjs
Auth.js
3 years
Vercel, the creators of Next.js, are now sponsoring NextAuth.js! We're an open source authentication library for Next.js which is: 🔒 Growing quickly with ~250k downloads/mo 🔒 Supports 6+ database adapters 🔒 Built-in support for 58+ auth providers Thank you @vercel !
Tweet media one
7
103
1K
1
6
106
@Panda_Program
プログラミングをするパンダ
2 years
BASE のマネージャーの Aoki さん業務効率化アプリの紹介記事。チームメンバーのアカウント名を登録すると、 ・GitHubの issue や PR ・Asana のタスク ・Kibela(社内ドキュメント)の投稿 ・Slack の日報チャンネルの投稿 ・Goole カレンダー1週間分 を1ページに集約する神アプリ。正直売れるレベルw
@ao_kiken
Ken Aoki
2 years
/チームメンバーの活動を知る工夫 - BASEプロダクトチームブログ
0
3
50
1
4
102
@Panda_Program
プログラミングをするパンダ
4 years
Next.jsのスターターキットを作りました😊 自分用でしたがシェアします! 以下のパッケージ、ツールがセットアップ済みです🎉 ・TypeScript ⚙️ ・ESLint ⚒️ ・Tailwind CSS 💨 ・Jest 👞 ・React Testing Library ⚛️ ・Storybook 📘
1
13
101
@Panda_Program
プログラミングをするパンダ
3 years
今開発してるビール画像投稿サイトの名前は Beer Break に決めました🍻 ファーストビューはこんな感じにしようと思います!
Tweet media one
1
0
102
@Panda_Program
プログラミングをするパンダ
3 years
何気なく個人開発サイトで Lighthouse 実行してみたら、とんでもないスコア叩き出しててびっくりしました。 Next.js + Vercel + Tailwind CSS は最強ですね😊
Tweet media one
1
3
102
@Panda_Program
プログラミングをするパンダ
3 years
TypeScript のこのテクニクは必ずやります。より Domain のコードという感じがします。特に型を自動生成している場合、生成元に変更があり型を再生成した時に型情報を修正して回るというコストを省略できます。
@erikras
Erik Rasmussen 👨‍💻🇺🇸🇪🇸
3 years
#TypeScript Pro Tip: When passing around unique identifiers of objects, select the type of the identifier right off of the object type. - More refactor-proof 🔒 - Less cognitive load 🤯 - Much more legible to others 🧐
Tweet media one
46
173
1K
1
14
100
@Panda_Program
プログラミングをするパンダ
4 years
Zennで記事を書きました! Next.jsで型安全なルーティングをする試みです!
0
13
101
@Panda_Program
プログラミングをするパンダ
2 years
フロントエンドの中で、バックエンド的な領域を得意とする人とフロント領域を得意とする人の話ですね。Atomic Design を提唱した方のブログにその区別が書かれてます。確かに前者の方が多い印象
0
9
101
@Panda_Program
プログラミングをするパンダ
3 years
Next.jsに以下のライブラリを同梱したスターターキットいいなあ ・Tailwind CSS ・Prisma ・PlanetScale ・NextAuth.js レポジトリをクローンしたらすぐ使えるし、Prisma + PlanetScale の組み込み方の参考にもなる
@vercel
Vercel
3 years
Platforms For site builders, multi-tenant platforms, and low-code tools.
1
1
41
0
3
98
@Panda_Program
プログラミングをするパンダ
4 years
宣伝です。技術ブログやってます。フロントのこととGASがメインです。構成はGatsbyJS + Vercelです。
1
8
98
@Panda_Program
プログラミングをするパンダ
3 years
技術ブログの Storybook を公開しました。サイトの右上からアクセスできます。 なかなか他のプロダクトの実際の SB は見ないと思うので、何か参考になれば ☺️
Tweet media one
1
5
93
@Panda_Program
プログラミングをするパンダ
2 years
1つのPRにレビューコメントが20も30もつけられているのを見ると、同期レビューをすればいいのになと思う。同期レビューを取り入れてから、1つのPRに対してつくコメントは3くらいで、それも備忘録的に書いてるだけ。指摘事項は5分後には直ってるし、CI通った後に approve したらすぐにマージされる
1
3
95
@Panda_Program
プログラミングをするパンダ
3 years
Next.js がデフォルトで TypeScript の strict を false にしているのは、TSチームが「ほとんどのWebアプリやサイトにとってその方がオススメだから」だそうです。 strict を true にするのは配布を目的にしたライブラリやケースバイケースで考えて設定するのがいいとのこと
@rauchg
Guillermo Rauch
3 years
@DerekOware2 We spoke to the TypeScript team about this, and their recommendation was that `strict: false` was a better default for most *apps* and *sites*. `strict: true` is something you might want to consider on a case-by-case basis, or for libraries designed for distribution.
3
9
59
1
17
93
@Panda_Program
プログラミングをするパンダ
4 years
Next.js に関する記事を書きました! 「Next.jsに「できるだけ」依存しないReactアプリケーションの構成」
0
14
89
@Panda_Program
プログラミングをするパンダ
2 years
今日スクラムマスターが言ってくれた言葉がよかった。「このチームは不確実性の高いところから自発的に手をつけていっているので、普通だったら1ヶ月先になってやっと明るみに出るような新しい課題が前倒しで認識できているので安心感がある。」まだリリースできてないけど一つずつやっていこう
2
7
88
@Panda_Program
プログラミングをするパンダ
6 years
「あるプログラミング言語をある程度学ぶと、別の言語も理解が早い」っていうけど、じゃあ一つ目の言語をどこまで勉強するればいいの?という疑問がありました。今回PHPから離れてNode.jsを使い、確信を持てました。そのラインは、ある言語で「データベースへ接続すること」と「APIを叩くこと」です
1
16
81
@Panda_Program
プログラミングをするパンダ
5 years
なぜJSを吐き出すのかと尋ねられたElm作者が、「将来、JSが廃れたらElmはその次にメインになる言語を吐き出せばいい」ということを���ってて面白いなぁと思いました
@mizuki_r
水月 涼
5 years
Elmは信念貫徹してる感じが美しいし、TEAっていう略称がほんとすき #meguroes (しかし書かない)
0
0
5
1
36
87
@Panda_Program
プログラミングをするパンダ
3 years
GitHub Copilot が使えるようになったので試してるんですが、やばいですねこれ…。 GraphQL の勉強に Mutation を追加しようと思ったら、書きたいコードを完全に先読みされました😂
Tweet media one
Tweet media two
Tweet media three
2
11
87
@Panda_Program
プログラミングをするパンダ
1 year
「2023年の今 React はこう書く」ということを教えてください! 例えば ・React.VFC は使わない ・コンポーネントは function で書く ・データフェッチ & スピナー出すのは Suspense 使う などです
2
6
85
@Panda_Program
プログラミングをするパンダ
3 years
今月号のWEB+DB PRESSでリファクタリングについて記事を書かれている @sonatard さんによる、 React Hooks で UI とロジックを分離する記事もとても良いのでおすすめです! useState から useReducer に切り替えるメリットなどがサンプルコードでわかりやすく解説されてます
0
9
86
@Panda_Program
プログラミングをするパンダ
3 years
記事書きました! 「サイトのOGP画像を自動生成する」
0
10
86
@Panda_Program
プログラミングをするパンダ
2 years
エンジニア向けのライフハックなんですが、Twitterでバズった技術的な話題はほとんど過去の書籍やブログで議論済みなので、Twitterを離れて調べるのがオススメです。その話題に出会ったことを奇貨として先人の考えを知りに行くと理解が深ま���、学びが積み重なります。新しいきっかけでしかないですね
0
12
82
@Panda_Program
プログラミングをするパンダ
2 years
TDDの自動販売機の課題を同僚とペアプロで解きました!90分で問6まで終わりました。信頼できるコードが洗練されながらだんだん成長していく感覚を得られてよかったです🙌 thanks to @mk0812__
1
9
81
@Panda_Program
プログラミングをするパンダ
3 years
TypeScript で camel case から snake case への変換と、その逆に変換するコード。こんなにシンプルに書けるんだなあ。型パズルはたまにコロンブスの卵感ある
0
8
80
@Panda_Program
プログラミングをするパンダ
3 years
フロントエンドの開発者が本当に欲しいものは統一されたツールチェインだろうと思いました。テスト、リント、フォーマッター、バンドル、TSからJSへのコンパイルを全部一つのツールで行えたら。自分はRomeに着目してます
1
8
78
@Panda_Program
プログラミングをするパンダ
6 years
自分がエンジニアになって半年で分かった、プログラミング学習のベストプラクティスを紹介します。 【入門】Progate / ドットインストールなど学習サイト 【基礎】興味ある技術を使って、アプリ作ってみること / 技術の解説記事を読む / 技術の使い方の本 【応用】理論的・体系的な技術本
1
14
75
@Panda_Program
プログラミングをするパンダ
3 years
今 Next.js + SWR + Supabase(REST) で個人開発サイト作ってるけど、Supabase が作ってる Postgres の GraphQL 拡張が Mutation と schema の出力、document 生成に対応したら SWR -> Apollo Client に切り替えるかも。そして graphql-codegen を使ってクエリから hooks を自動生成。夢が広がる😍
1
4
77
@Panda_Program
プログラミングをするパンダ
3 years
私も同感です。表示系がメインだった前職の開発ではこのように Unit テストを書くことでカバレッジ 90% まで行きました。画面数があまり多くなかったこともありますが、10ヶ月運用して本番で重大なバグを出したり、切り戻すことは一度もなかったです。パッケージの更新もCIを信頼してたので簡単でした
@sekikazu01
seya
3 years
フロントのテスト - ロジックは基本的に hooks に切り出す - hooks は基本的に単体テスト書く くらいの脳筋ルールがちょうどいい塩梅な気がしてきた
1
9
179
1
6
76
@Panda_Program
プログラミングをするパンダ
2 years
ペアプロ + 同期レビューを始めたら、6人のチームなのに2日半で6つのPRをデプロイできてる。特に同期レビューの体験がとても良くて、「レビュー待ってる間に別のことしよ」ってならずにすぐにレビューしてもらってレビュワーの疑問点はその場で解決、指摘事項はその場で修正して push すると爆速
2
5
76
@Panda_Program
プログラミングをするパンダ
11 months
ちょっと思い立って「スクラム」をモデリングしてるのですが、かなり勉強になります。以下の順番でやってます ・スクラムガイドから文章を抜き出す ・文章からユースケース図を作る ・文章からドメインモデル図を作成する ← 今ここ ・ドメインモデル図からコードを書く
Tweet media one
Tweet media two
Tweet media three
2
6
77
@Panda_Program
プログラミングをするパンダ
3 years
個人開発サイトのダークモード対応デモです!Next.js + Tailwind CSS で作ってみました😊 もう少しで公開できると思います!
1
5
76
@Panda_Program
プログラミングをするパンダ
6 months
心理的安全性は仲良く話せることじゃなくて、言いにくいことを言っても受け入れてもらえるという雰囲気があること。バカな質問をしたり、指摘しにくい事実を指摘したり、それでも「開発してリリースする」という目的を達成するのに必要なことであれば、受け入れて前に進もうというチームの気概でもある
1
9
73