タグ

ブックマーク / future-architect.github.io (6)

  • ダイアログもアラートも、Reactで子コンポーネントの開閉管理を実装する | フューチャー技術ブログ

    Reactでは、画面に関わる表示の制御はかならず何かしらのステート管理を行いそれで行います。ダイアログの場合は開閉をuseState()で作ったフラグで管理するみたいな感じです。 たとえば、ウェブブラウザのJavaScriptから呼べるalert()やconfirm()は、関数を呼び出せばダイアログが表示されますし、ダイアログが閉じたら処理が戻ってきます。confirm()ならユーザーが選択したものと一緒に返ってきます。標準の<dialog>タグが今時ですが、このタグはDOMインスタンスのshowModal()やshow()メソッドを呼ぶ必要があります。命令志向ですね。 一方、Reactでダイアログを実装する場合を考えます。メソッド呼び出しが直接扱えればシンプルですが、Reactでは基的にステート管理でやりましょう、というのが流儀です。useImperativeHandle()を使うとか

    efcl
    efcl 2024/04/26
    Dialogのstate管理
  • React Server ComponentでもContextで状態を共有する | フューチャー技術ブログ

    Next.jsの最近の大きな目玉機能はReact Server Component(以下サーバーコンポーネント)です。パフォーマンスアップに有効だったり、gRPCだRESTだGraphQLだ論争を終わりにするServer Actionsなど盛りだくさんです。 一方で、サーバーコンポーネントはコーディング上の制約がいろいろあります。 サーバーコンポーネントではhooksが使えない サーバーコンポーネントのソースからクライアントコンポーネントはimportできるが逆はできない。レンダーツリーを工夫すればクライアントコンポーネントの下にサーバーコンポーネントを配置することは可能 サーバーコンポーネントでは非同期コンポーネントを作成でき、fetchでサーバーから情報をとってきたり、DBアクセスした結果を利用できます。しかし、最近のモダンReactの場合、状態管理などはすべてhooksに寄せるので大

    React Server ComponentでもContextで状態を共有する | フューチャー技術ブログ
    efcl
    efcl 2024/02/23
    ContextをRSCでも共有する方法
  • tree-sitter文法入門 | フューチャー技術ブログ

    こちらはPostgreSQL Advent Calendar 2022 カレンダー2枚目・15日目の投稿となります。 前回は、@hmatsu47さんのSupabase で TCE(透過的列暗号化)を軽く試してみたでした。 はじめにこんにちは、フューチャーでアルバイトをしている齋藤です。以前は同社のインターンでSQLフォーマッタを作成していました(記事)。現在はインターン中に作成していたSQLフォーマッタをPostgreSQLの構文に対応させる作業に取り組んでいます。 このフォーマッタではSQLパーサにtree-sitter-sqlを利用していますが、対応していない構文がいくつか存在します。記事では、未対応の構文であるBETWEEN述語を例に、tree-sitterの構文拡張の手順を紹介します。開発中のSQLフォーマッタはOSS公開予定ですので、ぜひ仲間を増やしたいという思いから記事にしま

    tree-sitter文法入門 | フューチャー技術ブログ
    efcl
    efcl 2023/01/23
    tree-sitterについて
  • OpenSLOについて | フューチャー技術ブログ

    はじめにはじめまして、原木と申します。 皆さまはSRE NEXTをご覧になりましたでしょうか? SRE NEXTは 先日実施された『信頼性に関するプラクティスに深い関心を持つエンジニアのためのカンファレンス』です。国内外のエンジニアが日々SRE(サイト信頼性エンジニアリング/Site Reliability Engineering)の実践手法を共有することで、Webサービスが今後運用、成長していくための次世代の信頼性を担おうとしています。 もしもWebサービスの運用を安定的に行う手法やそのためのチームビルディングに興味がある場合、SRE NEXTの動画セッションやスライドが公開されると思うのでご覧ください1。 さてブログではそんなSREとも関係の深い、OpenSLOに関して取り上げたいと思います。 OpenSLOとは最近、SLOモニタリングという言葉が注目を集めつつあります。例えば、Go

    OpenSLOについて | フューチャー技術ブログ
    efcl
    efcl 2022/05/19
    OpenSLOについて
  • TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ

    TypeScriptReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScriptTypeScriptではなく) + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、

    TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
    efcl
    efcl 2020/05/07
    TypeScript + Redux Toolkit
  • 仕事ですぐに使えるTypeScript — 仕事ですぐに使えるTypeScript ドキュメント

    注釈 ドキュメントは、まだ未完成ですが、ウェブフロントエンドの開発を学ぶときに、JavaScriptを経由せずに、最初からTypeScriptで学んでいく社内向けコンテンツとして作成されはじめました。基の文法部分以外はまだ執筆されていない章もいくつもあります。書かれている章もまだまだ内容が追加される可能性がありますし、環境の変化で内容の変更が入る可能性もあります。 書籍の原稿はGitHub上で管理しております。もしTypoを見つけてくださった方がいらっしゃいましたら、 GitHub上で連絡 をお願いします 1 。reSTファイルだけ修正してもらえれば、HTML/PDFの生成までは不要です。フィードバックなども歓迎しております。 1 https://github.com/future-architect/typescript-guide/pulls

    efcl
    efcl 2019/06/12
    TypeScriptについて学ぶためのドキュメント。 基本的なJavaScriptの書き方、型の書き方、アプリケーションの作成についてなど
  • 1