技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
絵文字を支える技術について｜nona
はじめにこちらはmhidakaが建立したAdvent Calendar Day.3となります。 こんにちは、はじめまして、のなと申します。mhidakaさんのTweetを見つけて、初めてAdvent Calendarなるものを書いています。なにかお作法間違っていたら大目に見てください、よろしくお願いします。 軽く自己紹介をさせていただくと、普段はGoogleでAndroidのTextまわりの開発を行っており、DroidKaigiやShibuya APKで発表させていただいたりしています。最近はほぼ絵文字の話しかしてないので、絵文字おじさんと思われてそうですが、普段の仕事は絵文字に限らず、Androidの文字表示の部分は大抵面倒をみています。 今回この機会をいただいたので、どんな内容を書こうか迷ったのですが、やはり皆が読んで面白い内容というと、絵文字になるのかなぁ、ということで性懲りもなく絵
オンラインゲームを作ろう！と思ったことがある方は、 こちらの講演記事を1度は見たことがあるのではないでしょうか。 www.4gamer.net こちらの講演は、具体例を交えながら非常に分かりやすくオンラインゲームの主な同期方式が説明してあり、 2024年現在でもオンラインゲームの基礎を学ぶ資料として真っ先に名前を上げる最高の資料です。 しかしながら講演は2010年のものであり、オンラインゲームはこの10年余りで進化しています。 この辺りの進化の話を簡単にまとめつつ、オンラインゲームの同期方式の選び方を紹介します。 （上記講演記事の知識/用語を前提としているため、先に上記記事をお読みください。） オンラインゲームの民主化について 技術の話をする前に。 近年、「マルチプレイヤーゲーム」と聞いてオフラインの画面分割ゲームを想像する人はいないと言って良いほど オンラインゲームは民主化されてきました
5年後には標準になっている可観測性のこと - Learning Opentelemetry の読書感想文 - じゃあ、おうちで学べる
はじめに 本稿は、オープンソースの可観測性(Observability)プロジェクトである OpenTelemetry を取り上げた書籍「Learning Opentelemetry」の読書感想文です。従来の可観測性の課題であったデータの分断を解消し、トレース、メトリクス、ログなどの様々なテレメトリデータを統合的に扱うことができる OpenTelemetry は、可観測性の分野における革命的な存在と言えます。 過去10年間で、可観測性はニッチな分野から、クラウドネイティブの世界のあらゆる部分に影響を与える数十億ドル規模の産業へと発展しました。しかし、効果的な可観測性の鍵は、高品質のテレメトリデータにあります。OpenTelemetryは、このデータを提供し、次世代の可観測性ツールと実践を開始することを目的としたプロジェクトです。 learning.oreilly.com 本書の想定読者は、
Reactを使ってプロダクト開発している開発者だけでなく、マネージャにも読んでほしい「Fluent React」 - ROUTE06 Tech Blog
チームでReactを使って開発していると、コードレビューをする際に、「この書き方はしない方がいいが、それを説明するには800文字くらい必要。図も描きたい。でもそれらを準備する時間はない。」ということが度々ありました。 また、フレームワークやライブラリの技術選定をする際、マネージャに「どうして技術選定が必要なのか」を説明する必要がありました。ROUTE06のマネージャはエンジニアリングへの造詣が深い方が多いので、対立構造になることはありませんが、説明するためには1000文字くらい必要で、やはり図も描きたい。時間はない。と同じ気持ちになることがありました。 参考情報として紹介できる情報がないか探してみると、「とりあえずこうすればOK」というベストプラクティスについては検索エンジンやSNSですぐに見つかります。ただ、どうしてその方法がベストプラクティスなのか、仕組みや原理を説明している情報は少な
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
切り替える理由 自社の主力製品で利用している技術(WebRTC / WebTransport)がブラウザベースのため TypeScript を利用する Go を採用したのは sqlc が使いたかったという理由 sqlc-gen-typescript が出てきたのでもう Go を使う理由がなくなった 自社サービスチーム全員が Go にまったく興味が無い sqlc 自体は便利 そもそも自社に Go への興味がある人がいない 自社サービスの規模ではボトルネックになるのはデータベースであって言語ではない もしアプリでスケールが必要なときは Rust や Erlang/OTP に切り替えれば良い コネクションプールは PgBouncer を利用すればいい TypeScript からは 1 コネクション 1 接続で問題無い どうせフロントエンドでは TypeScript を書く 自社では React
import "./App.css"; import { Link, Route, Switch } from "wouter"; function Nav() { return ( <nav> <Link to="/">Home</Link> <br /> <Link to="/about">About</Link> </nav> ); } function Home() { return ( <div className="App"> <h2>Home</h2> <Nav /> </div> ); } function About() { return ( <div className="App"> <h2>About</h2> <Nav /> </div> ); } function App() { return ( <> <Switch> <Route path="/" compo
一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
AIUI.me - Screenshot to code
This project is on sale, contact me if you are interested. Contact Transform any screenshot into a fully functional, reusable component with just a single click.
React / Remix への依存を最小にするフロントエンド設計 - 一休.com Developers Blog
CTO 室の恩田(@takashi_onda)です。 一休レストランのフロントエンドアーキテクトを担当しています。 Intro 一休レストランでは、以前ご紹介したようにフロントエンドで React / Remix を利用しています。 user-first.ikyu.co.jp 一方、設計方針としては、React / Remix への依存が最小になるように心掛けています。 今日は、そんな一見矛盾するような設計方針について、ご紹介したいと思います。 この記事を読んでいただき Remix に興味をもたれたら、明後日 2024/8/7(水) 19:00〜 のオンラインイベント offers-jp.connpass.com にもご参加いただけると嬉しいです。 この記事でご紹介している疎結合なフロントエンドアーキテクチャを実現する Remix の魅力についてお話します。 なぜ依存を最小にするのか？ R
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL 技術選定に失敗はない 技術選定に失敗はありません。 仮説を立て、検証し、結果の分析からNext Actionを考える。検証の結果がどうであれ、それは過程に過ぎません。 机上の空論だけで全てを理解できるほど、我々人間は賢くないのです。（注意: これは人類全体を誹謗中傷する意味ではありません。） この記事では、この２年間で行った技術選定の成功例をその理由と共に紹介していこうと思います。 申し訳遅れましたが、私、YadaYadaKonnanYadaといいます。私は今回初めて記事を書いたので、どうぞお手柔らかに。 Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 前提 技術選定に結論はありません。組織毎に前提が違うのだから当然のことです。みんな違っ
AWS、高速起動にこだわった軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開。AWS Lambdaでの利用にフォーカス
AWS、高速起動にこだわった軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開。AWS Lambdaでの利用にフォーカス Amazon Web Services（AWS）は、実験的な実装としてサーバレス環境のAWS Lambdaで使うことにフォーカスした軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開しました。 LLRTはRustで開発され、JavaScriptエンジンにはQuickJSを採用しています。 LLRTの最大の特徴は、現在のJavaScriptランタイムにおいて性能向上のために搭載されているJITコンパイラをあえて搭載せず、よりシンプルで軽量なランタイムとして実装することで高速に起動することにこだわっている点です。 これにより（Node.jsやDenoや
巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32
(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」 それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク（といえそう） そもそも、create-react-app は今は更新されてないので create-vite-app を使うべき フレームワークあり or フレームワークなし 【フレームワークあり】
Free large Fries w/ $1 min. purchase</h2>\r\n","dc:description":"<p>Free large Fries to keep you company. Download the app and <b>get 'em with your first purchase</b> of $1+.* Every $1 you spend earns 100 points, redeemable for free food.<br />\r\n</p>\r\n<p><span class=\"legal-pub\">*Offer valid 1x thru the last day of month for first time app users at participating McDonald’s. May take u
目次 CSS小史 SUIT CSS - 命名規約ベースのCSS方法論 styled-components - CSS in JS Tailwind CSS - Utility-first CSS なぜインラインスタイルではダメなのか まとめ タイムライン 参考リンク CSS小史 CSSでアプリのUIを実装するための手法は、これまでいくかの変遷を辿ってきた。 はるか昔、CSSが生まれて間もないころには、関心の分離という文脈から、FONT要素などの物理タグはよくないものとされ、 コンテンツ(HTML)とスタイル(CSS)をきっちりと分離することが奨励されはじめた。 そこでは、HTMLはあくまで文書であり、CSSのクラスセレクタという接点でコンテンツと見た目が隔離されることで、それらは別世界のものとして管理されていた。 また、大規模サービス開発においていかにCSSを管理するかという問題意識はまだ
セガサターンや初代Xboxを今，遊びたい！ とアップスケーラーで環境を構築した話。まさかケーブルが問題になるなんて……
セガサターンや初代Xboxを今，遊びたい！ とアップスケーラーで環境を構築した話。まさかケーブルが問題になるなんて…… ライター：BRZRK 突発的に数世代前のゲームを遊びたくなる。そんな経験をした人も，4Gamer読者であれば決して少なくないだろう。かくいう筆者もむかぁぁし購入したセガサターンやドリームキャスト，初代Xboxが突然遊びたくなってしまって悶絶していた。 しかし，今の環境でそれらを遊ぶには，いくつかのハードルを越える必要があり，実現には四苦八苦してしまった。この経験は誰かの参考になるかもしれないと考え，今回はその時のことをまとめてみた次第である。 押入れから引っ張り出したセガサターンのコレクションの一部。遊び倒しておきたいゲームがまだまだイッパイあるぜ！ まずは映像を映し出せるようにしたいね レトロなゲーム機を現代の環境で遊ぼうとすると，問題になってくるのが映像関連だ。昨今の
色々あって WebAssembly の component model を調べていたら、未来が見えた気がしたのでここに書いておきます。 「今の WebAssembly」 とは何か WebAssembly の Web の部分は忘れてください。これは単に JVM version 20xx です。ポータブルなバイナリ仕様です。 実行にあたっては今はホスト言語として JS が使われていますが、実際にはホストがJSである必要すらなく、なんならホストが不要なスタンドアロン環境すらあります。(wasmtime/wasmer) じゃあ WebAssembly は何かというと、サンドボックスで実行される VM の仕様です。比較的高水準なバイナリで、 V8 や Spider Monkey に付属する WebAssembly Runtime や、 Wasmtime や Wasmer といった WebAssemb
February 25, 2024 VSCode + WSL makes Windows awesome for web development I’m kinda shocked. Windows actually got good for web developers. Between VSCode, WSL, and Intel’s latest desktop chips, I’ve been living with a PC for over a week that runs my programming tests faster than an M3 Max, ships with an excellent window manager out-the-box, and generally feels like a completely viable alternative t
Next.js の App Router が安定版となり、React Server Components (以下 RSC) を実際に試す環境が整ってきた。 実際、今年はやれどこそこのプロダクトが Next.js を採用しただのやっぱり捨てだのといった話題が尽きなかったように思う。 かくいう自分自身も、今年は App Router の案件に取り組んで RSC と格闘する日々を送っていた。 その過程で、こんなようなことを考えるようになったので、今回はこの辺りの話を書き残しておこうと思う（何回か X に同じ旨の POST は上げていたけど、一回もちゃんとまとめてなかったので）。 RSC がない頃の、別の言い方をすると getServerSideProps を使っていた頃の、Next.js におけるアプリケーションの設計は、トラディショナルな MVC にかなり近しい。 ここでいう MVC は、Sp
ジャンプTOON Next.js App Router の活用〜得られた恩恵と課題〜 | CyberAgent Developers Blog
目次 はじめに Colocation を意識した設計方針 Parallel Routes と Intercepting Routes を用いた設計パターン サーバー側に処理を寄せたことによる恩恵と課題 Next.js が抱える課題 おわりに 参考文献 はじめに ジャンプTOON のWeb版（以降、ジャンプTOON Web）の開発を担当している浅原昌大（@assa1605）です。 5 月にサービスを開始した「ジャンプTOON」は、オリジナル縦読みマンガ作品や人気作品のタテカラー版を連載する、ジャンプグループ発の新サービスです。 ジャンプTOON のフロントエンドには、Next.js を採用し開発をしています。 本記事では、Next.js の最新機能や設計パターン、Next.js を採用した恩恵と現在の課題について紹介します。 Colocation を意識した設計方針 Parallel Rou
先日、Kamal 2でNext.jsを安価なVPSにデプロイする勉強をしながら、Next.js App Router/Server ActionでCRUDのデモアプリを作成しました（コードはGitHub）。そのときにセキュリティについて気になって点がいくつかあり、勉強しながら対策をしましたので紹介したいと思います。 私自身は業務でNext.jsを書いた経験が限定的です。的外れな議論をしているかもしれません。あくまでもRuby on Railsアプリを書くときと同じ気持ちでNext.jsのアプリを書いたとき、セキュリティ上で気になった点を挙げているだけです。私が見落としている点や誤っている点等ありましたら、コメントやX等で教えていただけると大変ありがたいです。 その１：データ漏洩の危険性 この問題についてはムーザルちゃんねるが紹介しています。またNext.jsの公式ブログでも対策が紹介されて
この世の中に溢れているので自分が発言する必要はないが「ソフトウェアは認知の限界まで複雑になる」を自分なりに再考する - じゃあ、おうちで学べる
人間が何もしないと病気になるのと同じように、ソフトウェアも何もしないと複雑になる。 はじめに ソフトウェア開発の世界に飛び込んでから、「ソフトウェアは認知の限界まで複雑になる」という言葉を耳にしたとき、正直なところ、「ほへー」って思いながら何も理解していませんでした。しかし、大規模なシステムに携わるようになって、その言葉の重みを身をもって感じるようになりました。内部構造や相互作用が複雑化し、全体を把握するのが難しくなっていく。それは挑戦であると同時に、私たち開発者の存在意義を問いかけるものでもあります。 A Philosophy of Software Design, 2nd Edition (English Edition) 作者:Ousterhout, John K. Amazon この複雑性との闘いは、時に苦しいものです。でも、それを乗り越えたときの喜びは何物にも代えがたい。私たちの
はじめに WebAssembly (略して Wasm) では WASI や WIT、 Component Model など様々な仕様があります。 それぞれが登場した背景、モチベーションなどを理解することでなんとなく概要を掴んでいくことができるのではないかと考えたため、過去・現在・未来と時間軸で整理してみました。 まず Wasm とその特徴に関して簡単に紹介した後、Wasm の過去として生まれた背景やモチベーションを紹介します。 そして現在の Wasm がなぜ注目を集めているのか、そして現在策定中の仕様と目指している未来について紹介します。 WebAssembly とはなにか WebAssembly はスタックベースの仮想マシン用バイナリ命令フォーマットの仕様です。Wasm と略されます。 Wasm ファイル(Wasm モジュール)は一般に .wasm という拡張子で表されるバイナリファイル
Intro Chromium にコントリビュートするためには、ソースコードを理解する以外にも、もろもろ必要な周辺知識がある。 ドキュメントはかなり整備されている方ではあるが、そのドキュメントにたどり着くのが難しい場合もある。 レビュアーなどが親切に教えてくれるものをローカルにメモしているが、それも散らばってきたため、ここにまとめることにする。 まずは初期状態で公開するが、どんどん更新していき、長くなっても分割しないで追記を繰り返そうと考えている。 関連サイト 始めて取り組もうとすると、まずどこを見ればわからないところから始まる。 似たようないくつかのサイトがあり、使い分けがされているからだ。 code search https://source.chromium.org/chromium/chromium/src コードをインタラクティブに検索するためのサイト Workspace 風の U
Transformer Explainer: LLM Transformer Model Visually Explained
What is a Transformer? Transformer is a neural network architecture that has fundamentally changed the approach to Artificial Intelligence. Transformer was first introduced in the seminal paper "Attention is All You Need" in 2017 and has since become the go-to architecture for deep learning models, powering text-generative models like OpenAI's GPT, Meta's Llama, and Google's Gemini. Beyond text, T
Tailwind CSS Components LibraryFlyonUI is an open-source Tailwind CSS Components Library with semantic classes and powerful JS plugins.
Tailwind CSSチーム、GitHubスター数2.4万超のUIコンポーネント集「Headless UI」をメジャーアップデート
5月8日、Tailwind LabsはReact用の「Headless UI v2.0」をリリースした。 Headless UIとは、Tailwind CSSベースのUIコンポーネント集である。 Tailwind CSSチーム自身が開発を行っており、GitHubスター数も2.4万を超えるなど、高い人気を博している。 このアップデートは、開発者がより少ないコードでより良い開発体験を実現できるようにするための多数の改善を含んでいる。 主な更新点は以下の通りだ。 組み込みアンカーポジショニングのサポート 新しいチェックボックスコンポーネントの追加 HTMLフォームコンポーネントの拡充 状態検出の向上 コンボボックスリストの仮想化 新しいウェブサイトと改善されたドキュメント 組み込みアンカーポジショニングのサポート Floating UIがHeadless UIに直接統合され、Menu、Popov
こんにちは！ラクスルの灰原です！ 軽量かつ高速なWebフレームワークであるHonoと、新進気鋭のJSランタイムであるDenoを使って、社内ツールを作ってみましたので紹介します。 作ったツール 技術スタック index.tsx の内容 Tips HonoでTwindを使う HonoのJSXでAlpine.jsを使う Hono+Denoでesbuildを使う おわりに 作ったツール テックブログ向けのアイキャッチ画像ジェネレータを作りました。 タイトルを入力して、 背景画像と文字色を選んで、 文字の位置と大きさを調整して、 後は「Download」ボタンを押せば画像が手に入ります。 これは以前、弊社デザイン組織で作られた「Zoom背景ジェネレータ」に多分に影響されています。 こちらのデザイナーブログも是非ご覧ください！ note.com 技術スタック このツールは利用頻度がそこまで多くないと思
Reactベストプラクティス: react-hooks/exhaustive-depsのエラーを0にする - Hello Tech
javascripter です。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 今回は、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、社内で継続的に技術Tipsやガイドラインの整備・蓄積を行っています。 チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 新メンバーのオンボーディング支援 今回紹介するドキュメント 今回は、その中から「reac
小規模プロダクトにおける React 状態管理ライブラリ選定 in 2024 - バイセル Tech Blog
はじめに こんにちは！ テクノロジー戦略本部24年新卒の高橋です。 2023年の10月から内定者インターンを経験し、現在は開発3部CRMチームでフロントエンド(以後、FE)エンジニアとして働いております。 チーム内でFEの状態管理ライブラリを選定する機会があり、調査していく中で得た知見を共有したく、執筆に至りました。 少しでも状態管理ライブラリの選定に困っているFEエンジニアの参考になればと考えています。 はじめに 概要 前提 課題感 Context APIの思想とのズレ Context APIの記述量の多さ 状態管理ライブラリに求める要素 小さい単位で取り扱い可能 ボイラーテンプレートが少なく、APIが直感的で書き方の自由度が高くない 軽量 Reactアプリケーション内外での状態管理が可能 最終決定 検討候補 Redux Zustand Jotai Valtio 評価表 移行設計 既存C
本記事は4月10日9:00（JST)時点で判明している事実をまとめたものです。誤りがあればコメントでお知らせください。 本記事には誤りが含まれている可能性があります。 新しい情報があれば随時更新します。 4/10 9:15 キルスイッチの動作について追記しました。 4/2 18:30 Q&Aを追加しました。 4/2 11:30 実際にバックドアが存在する環境を作成し、攻撃可能なこと、出力されるログ等について追記しました。また、攻撃可能な人物は秘密鍵を持っている必要があることを追記しました。 ところどころに考察を記載しています。 事実は～です。～であると断定し、考察、推測、未確定情報は考えられる、可能性があるなどの表現としています。 またpiyokango氏のまとめ、JPCERT/CCの注意喚起もご覧ください。 なお、各国のCSIRTまたは関連組織による注意喚起の状況は以下のとおりで、アドバ
JavaScriptフレームワークを取り巻く状況は、常に変化を続けています。近年では、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のバランスは、重要な検討事項です。 ChatGPTのRemix採用 2024年9月、ChatGPTがNext.jsからRemixに移行したことが明らかになりました。この出来事は、Remixの母体であるReact Router系のコミュニティで大きな話題となり、移行の理由について様々な憶測を呼びました。 JavaScriptエキスパートのWes Bos氏（学習動画教材とかを作っている人）は、ChatGPTのフロントエンドのソースコードを分析し、OpenAIがRemixを採用した理由について独自の考察を展開しました。 www.youtube.com 緊急で動画を回すWes Bos氏 Wes Bos氏の分析によると、ChatGPTのア
こんにちは、ダイニーの Feature team でソフトウェアエンジニアをしている @ta21cos です。 最近は新規事業である決済関連の機能の開発をメインに行なっています。 ダイニーにおける Feature team は機能にフォーカスした開発・運用を行っているチームです。最近は複数の事業毎に Unit として分かれて開発を進めています。 本日は、普段の開発で実際にあった Pull Request のレビューコメントから得た学びについて紹介します。 Dialog を実装しよう React を使ってある Dialog を作成するため、以下のようなコードを書きました（コードは簡略化しています）。 // useSample ファイル // 内部でロジックと Dialog を同時に定義している hook const Dialog = memo<{ progress: number, ...
コンポーネント設計って何だろう | ドクセル
マーチン・ファウラー モジュールとは、明確に定義された一部のサブセットを 理解するだけでシステムを変更できるようにソフトウェ アシステムを分割したものと定義します。 コンポーネントはモジュールの一形態であり、独立して 置換できるという追加の特性を備えています。 出典 martinFowler.com “Software Component” より筆者抄訳 https://www.martinfowler.com/bliki/SoftwareComponent.html https://www.martinfowler.com/bliki/SoftwareComponent.html
こんにちは。 Findy で Tech Lead をやらせてもらってる戸田です。 既に皆さんも御存知かと思いますが、弊社では開発生産性の向上に対して非常に力を入れています。 以前公開した↓の記事で、弊社の高い開発生産性を支えている取り組み、技術についてお話させていただきました。 tech.findy.co.jp ありがたいことに、この記事を多くの方に読んでいただき反響をいただいております。 そこで今回は、↑の記事でも紹介されている「Pull requestの粒度」について更に深堀りしてお話しようと思います。 Pull requestの粒度は、弊社にJOINしたら最初に必ず覚えてもらう最重要テクニックの1つです。 それでは見ていきましょう！ 大きなPull request 適切な粒度とは 適切な粒度を維持するために タスク分解 迷ったら小さく レビューを最優先にする CI高速化 featur
デザインシステムとコンポーネント指向によるフロントエンド開発プロセスの革新 / Innovation in Frontend Development Processes through Design Systems and Component-Oriented Architecture
フロントエンドカンファレンス北海道でお話ししたスライドです Proposal: https://fortee.jp/frontend-conf-hokkaido-2024/proposal/ebd98e0a-241c-4443-aa98-300af113b40d # URL YouTube…
ムーザルちゃんねるのムーです。今回は zaru さんと、Next.js のセキュリティについて話しました。 セキュリティについては様々あると思いますが、今回は以下の3点をピックアップして話しました。 Client Components の Props から露出する Server Actions の引数に注意 認証チェックをやってはいけない場所、やって良い場所 これらは、Next.js 入門者がうっかりとやってしまうリスクがあるものです。 このような罠は、アプリケーション自体は正常に動くので、知らないうちにはまってしまいますし、自力で気づくのも難しいものです。もしも知らないものがあれば、ぜひご確認ください。 楽しくて、安全な Next.js 生活をお送りください！ Client Components の Props から露出する これは、シンプルで当たり前といえば当たり前ですが、Client
Next.js の App Router を中心に解説した書籍を執筆しました。「実践 Next.js —— App Router で進化する Web アプリ開発」という本です（3/16 刊行）。本稿では書籍の概要と、App Router が何を解決するのかについて紹介します。 書籍の概要 書籍で解説しているサンプルコードは、public リポジトリで既に公開しています。前半、第 1 章〜第 4 章では App Router の基礎を抑えるための練習用リポジトリを使用します。後半、第 5 章〜第 10 章では、写真を投稿する SNS「Photo Share」という架空アプリの実践的リポジトリを使用します。 第 1 章：Next.js の基礎 第 2 章：Server Component とレンダリング 第 3 章：App Router の規約 第 4 章：Route Handler 第 5
【フルスタックエンジニアへの道！】ReactとTypeScriptの修行をした話 - Findy Tech Blog
こんにちは、ファインディでFindy Team+（以下Team+）を開発しているEND（@aiandrox）です。 普段はバックエンドの開発をメインで担当しているのですが、3ヶ月間フロントエンドの開発に挑戦する機会がありました。短い期間でしたが、フロントエンドテックリードから直接指導してもらいながら実装をすることで、フロントエンドの開発を一人でできるくらいに慣れることができました。 今回は、その経験と学びについて書いていきます。 フロントエンドに挑戦する前の自分について フロントエンドに挑戦することになった経緯 フロントエンドを学ぶ上で助けられたこと フロントエンドのノウハウが溜まった記事の充実 開発ツールが揃っている テックリードとマンツーマンでタスクをやっていく react.devの輪読会 つまづいた点 タスク粒度を適切に分割すること Team+のフロントエンドの責務の考え方 Type
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
オンラインゲーム 10年の進化と同期方式の選び方 - きゅぶろぐ
Webサービスを作るときのテンプレートを作った - hiroppy's site
自社サービスのバックエンドを Go から TypeScript へ切り替えるための整理
雑にReactアプリを作りたい時に使ってるもの
McDonald's: Burgers, Fries & More. Quality Ingredients.
Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史
WebAssembly は次世代のコンテナ技術になれるか？
VSCode + WSL makes Windows awesome for web development
React Server Components と GraphQL のアナロジー
Next.jsで簡単なCRUDアプリを作りながら気になったセキュリティ: Railsの視点から
WebAssembly の過去・現在・未来 - Qiita
Chromium にコントリビュートするための周辺知識 | blog.jxck.io
FlyonUI - Free Tailwind CSS Components Library
HonoとDenoで社内ツールを作ってみた - RAKSUL TechBlog
xzにバックドアが混入した件のまとめ(CVE-2024-3094) - Qiita
ユーザー体験重視のSPAアーキテクチャ改 - laiso
【React】なぜコンポーネントの中でコンポーネントを作るのは良くないのか？
Findyの爆速開発を支えるPull requestの粒度 - Findy Tech Blog
知らないとあぶない、Next.js セキュリティばなし
実践Next.js - App Router への理解を深めるために -