タグ

ブックマーク / zenn.dev (28)

  • Hotwireとは何なのか?

    はじめに HotwireはBasecampが発表した、モダンなWebアプリケーションを作るための新しいアプローチです。名前もHTML OVER THE WIREから来ているように、HotwireではHTMLをサーバーから送ります。「それ普通のWebアプリケーションでは?」と思う方もいるかもしれませんが、SPA + APIサーバでJSONが使われるのに対し、SPAと同様の体験をHTMLを中心に置いて作るアプローチであることを示す表現です。 僕個人は、最初は「ふ〜ん」という感じだったんですが turbo-railsを読みつつHotwireのデモアプリをPhoenixに移植してみたり WebSocketではないTurbo Streamsのsourceを作ってみて遊んだり と、ある程度触ってみて良さが理解できてきたので、Hotwireを使うと何が嬉しいのか、Hotwireの各要素の紹介を記事として

    Hotwireとは何なのか?
  • 【React+TypeScript】Netflixのクローンを作るチュートリアル

    【注意!】 2024年4月末にこちらのの内容を大幅リニューアルしました! https://note.com/terry10/n/nf0674af97617 ※こちらのZennのBookも5/7を目安にリニューアル内容を反映する予定です 多くの人に手に取って欲しいので、リニューアル後は期間限定で無料配布も検討しています。 こちらのツイートで無料配布について告知しています! ↓ https://x.com/teriteri_code/status/1783358352447414464 --- React+TypeScriptを使ったNetflix映画一覧を表示するアプリケーションのチュートリアルです。 学べる事 - ReactのFunctionComponent(関数コンポーネント)とTypeScriptの使用 - React Hooksによるstate管理 - TypeScriptで外

    【React+TypeScript】Netflixのクローンを作るチュートリアル
  • React Server Component の Isomorphism について解説する

    Next.js + React Server Component のリファレンス実装が出たので、手元で動かしながら理解したメモ。 vercel/next-server-components: Experimental demo of React Server Components with Next.js. Deployed serverlessly on Vercel. これを書いてるモチベーションとして、Twitter を見る限り React Server Component のことを 「ただのサーバーサイドへの先祖返り」とか「SSR 結果を dangerouslySetInnerHtml してるだけでは?」みたいな反応があったので、そのへんの誤解を解きたい。 Introducing Zero-Bundle-Size React Server Components – React Bl

    React Server Component の Isomorphism について解説する
  • React Server Components はウェブ開発を変えるゲームチェンジングな技術である

    去年末に Facebook の人達が出した React Server Components というものが、React 界隈に激震を及ぼしていますが、速報以外でこの技術について言及している国内のブログが見当たらないため、この記事で解説してみます。間違いや分かりづらい部分があればぜひツッコミをお願いします。 React Server Components は、ただのサーバーサイドレンダリングではありません。クライアントサイドレンダリング(SPA)とサーバーサイドレンダリングを、ギアを切り替えずにいいとこ取りする仕組みです。これまでに存在した様々な技術よりも踏み込んで、フロントエンドとバックエンドの境目を曖昧にしてしまうユニバーサルな技術です。 勝手な造語としていうなら「コンポーネント指向ユニバーサルウェブ開発」とでも呼ぶべきものでしょう。 そして、これはただのユニバーサルなだけの仕組みではあり

    React Server Components はウェブ開発を変えるゲームチェンジングな技術である
  • 「トランザクション張っておけば大丈夫」と思ってませんか? バグの温床になる、よくある実装パターン

    この記事は DeNA 20 新卒 Advent Calendar 2020 19日目の記事です。 はじめに MySQLやPostgreSQLに代表されるRDBMSではトランザクションと呼ばれる仕組みが提供されています。多くのWebアプリケーションエンジニアはこのトランザクションを駆使してDBとやりとりをするロジックを組み立てることになります。 しかし不整合を起こしたくない処理があるからといって闇雲にトランザクションを張ったり、トランザクションが張られているからと安心してアプリケーション側で闇雲にロジックを組み立ててしまうと思わぬバグを生むことになってしまいます。 このエントリでは、「トランザクションを張っておけば大丈夫」という考え方は危険な場合もあるということを、ありがちな実装例を交えて紹介していきます。 並列に処理されるトランザクション そもそも、トランザクションは全て直列に処理されるわ

    「トランザクション張っておけば大丈夫」と思ってませんか? バグの温床になる、よくある実装パターン
  • あと2時間でElastiCacheのメモリが枯渇!そのときあなたは何をしますか?

    突然ですが... あなたは、あるゲームプロジェクト番リリース2日前にサーバエンジニアとしてJOINしました。いざリリースを迎えたとき、ElastiCacheのメモリが突然危険域を超え、さらにあと2時間で枯渇しそうな状況になりました。 さて、この状況におかれたあなたは何をしますか? はじめに モバイルゲームのシステムは新しいイベントをopenするとトラフィックが2倍、3倍、時には普段の10倍以上来ることがあり、トラフィックの変動が非常に大きい特性があります。 新しいゲームのリリース時はより顕著で、想定以上のトラフィックが来ることもしばしばあります。 この記事は、あるゲームプロジェクト番リリース時に大規模トラフィックが来た際のサーバトラブルを題材に、 どのような観点で問題を切り分けていったのか、トラブルシュートのプロセス どのような準備(負荷テスト)をしていれば防げるのか という話をし

    あと2時間でElastiCacheのメモリが枯渇!そのときあなたは何をしますか?
  • Mac を買ったら必ずやっておきたい初期設定を、全て自動化してみた

    成果物 https://github.com/ulwlu/dotfiles/blob/master/system/macos.sh このスクリプトに全ての設定と、設定可能なオプションをコメントで記載しています。誰でもこのスクリプトのコメントを外したり任意の値を入れる事で使用可能です。 世界中のいくつかのdotfilesにはmacos.shが存在し、ある程度のMacOSの設定自動化を実現しています。しかし何百と見た中で、全設定と設定可能なオプションを全て網羅して記載しているのは恐らく初です。 これらの設定は破壊的なものではなく、いつかアプデによりキーが有効でなくなっても壊れる事はありません。壊れるのは~/ApplicationSupport/Dockディレクトリ配下のファイルを移動したり、sqlite群に無効な値をいれた時のみです(後述)。 この記事は何か dotfiles Advent C

    Mac を買ったら必ずやっておきたい初期設定を、全て自動化してみた
    tk-1124
    tk-1124 2020/12/03
  • 不安とストレスから解放される見積りとスケジュール方法

    はじめに 何かはじめてのことをする場合、人はとても「不安」を感じます。人は未来を考えることができる生き物です。その特異な能力ゆえに、未来に起こるかもしれないよくないことを考えると「不安」を感じてしまうのです。 仕事プロジェクトなどは、「間に合わなかったらどうしよう」とか「この仕事はちゃんと終えられるのだろうか。」など、未来のことを考えてしまうので「不安」に満ちたものになりがちです。 また、不安なものに取り組むというのは大きなエネルギーが必要です。試験勉強をしている時などに、部屋の掃除をしたくなってしまって、気が付いたら時間がなくなっていたという経験を多くの人が体験したことがあるのではないでしょうか。人は、不安なものを直視することを無意識に避けてしまうクセがあるのです。 稿では、プロジェクトにおける不安とはなんだろうか?を考え、できる限り不安を最小化させるということを主眼に置いたスケジュ

    不安とストレスから解放される見積りとスケジュール方法