はてなブックマーク

はじめに NTTテクノクロスの上原です。 この記事はNTTテクノクロスアドベントカレンダー2021 24日目の記事です。昨日は@watanyさんの記事」、明日は@j-yamaさんの記事になります。 自分は過去のAdvent CalenderではReact関連では(React Meets Grails、Grails React Scaffold、Redux Saga、Gatsby、React Spring、AirTableのAPPSをReactで作ろう)などを書いて来ましたが、結局1年ぶりに記事を書いています。もっともっとアウトプットしないといけないですね。 それはともかく、今回は「状態管理ライブラリとしてのReact Query」を紹介し、「useState感覚でクライアント状態管理する手法」 を提案してみたいと思います。何はともあれその手法とやらを先にみたい方はこちらのuseQState

みなさんこんにちは。 NTTテクノクロスの上原です。業務ではGatsbyを使って内製キュレーションサイトの構築や運用などを行なっています(関連で一昨年書いた記事→Gatsbyの真の力をお見せします)。 これは、NTTテクノクロスアドベンドカレンダー2020 の20日目の記事です。昨日の記事は @y-ohnuki さんによる「iPhone12ProのLiDARスキャナを試してみる」でした。 去年はこんな記事(React-SpringのHooks APIでブラウザアニメーションを基本から極めよう!)を書いてたわけですが、今年は新型コロナでいろいろとたいへんだった年でした。みなさまは、いかがお過しだったでしょうか。一年があっという間ですね。来年は何をしているのだろうか。 今年はノーコード・ローコード開発サービスであるAirtableのAPPS機能をプログラマ目線で紹介します。 対象読者 ノーコー

🎄メリークリスマスイブ!🎄 この記事は、React-Spring1というアニメーションのライブラリを紹介する NTTテクノクロス Advent Calendar 2019 の24日目の記事です。23日目は@yuitomoさんの記事、明日25日最終日は@korodroidさんの記事です。 [^1]: ロゴ画像はhttps://user-images.githubusercontent.com/619186/51572411-7e04a880-1e8c-11e9-802c-251f150a1e69.gif より引用 2019年、令和初の年末も押しせまってまいりましたが、みなさん如何おすごしでしょうか? NTTテクノクロスの上原と申します。React/Gatsbyを用いた社内キュレーションサイトの構築や運用などを担当しています。当社では上記含め、SPAの開発にReactが採用されるケースも比

はじめに React HooksのuseCallbackは、イベントハンドラ(コールバック)を使うときは無条件に使うものだと思っていませんか。実際にはコールバックが「ある条件をみたす」ときに使うべきもののようです。このある条件を整理して明確にするために記事を書きました。 useCallbackとは何か useCallbackは、useMemoのような、重い計算を回避しキャッシュを使うというような効率向上のための仕組みではありません。useCallbackに渡す関数内で行なう計算の重さはまったく無関係です。 useCallbackがやることは、「コールバック関数の不変値化」です。 「関数を決定する処理のメモ化」と言えるかもしれません。アロー式は原理的に常に新規関数オブジェクトを作ってしまいますが、useCallbackは「意味的に同じ関数」が返るかどうかを判別して、同じ値を返す関数が返るべき

Redux Sterter KitはRedux-Toolkitに名称変更されてAPIも変更されています。本記事はそのままでは最新版redux-toolkitとして動作しません。 https://github.com/reduxjs/redux-toolkit はじめにReact-Reduxの公式から「Redux Starter Kit」というものが公開されています。 これがなにかといえば、私の理解するかぎり以下です。 React-Reduxまわりのベストプラクティス、定番拡張、定番併用ライブラリ、定番ミドルウェアを、簡単に組込むための簡単で軽めのライブラリ、メタパッケージ。 CLIコマンドではなくライブラリです。 これは良いものだと思いましたので全力でお勧めしていきます。 特徴 TypeScriptフル対応。当然ですね。 React Redux 7.1対応、つまりHooks対応。これからは

(ENTRYPOINTを指定する場合) DockerfileのENTRYPOINT項目で決まった特定のプロセスを指定する。この場合、それ以外のプロセスは起動できなくなる。(もっとも/bin/shなどがENTRYPOINTで指定されているなら、/bin/shは任意のプロセスを起動する機能があるので、引数の与え型によっては任意のプロセスを起動できる。また、--entrypoint=引数で上書き指定ができる)。 ENTRYPOINTで指定したプロセスには次のように追加引数をあたえて起動することができる。docker run <コンテナ指定> <追加引数指定> RET docker run <コンテナ指定> RETのように追加引数を指定しなかったときのデフォルトの追加引数をCMD項目から与えることができる。 なぜこの文章を書いたか Dockerfileの設定項目にはENTRYPOINTとCMDとい

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? NTTテクノクロスの上原です。 業務では、社内情報のReact製自前キュレーションサイトの構築を担当しています。 この記事はNTTテクノクロスAdvent Calendar24日目の記事であり、社内の勉強会で発表した内容をQiita記事として書きなおしたものです。タイトルは釣りです。 (2018/12/28追記あり) 導入 記事を書いた理由 Gatsby.js(以降、Gatsbyと表記)はさまざまな高速化テクニックを用いた「爆速サイト生成」で有名なツールですが、そのリッチな機能性は、たとえばイントラ内サイト、業務システム開発、ツール開発

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

後入りですみませんが、WebAssemblyアドベントカレンダー未投稿のところ埋めさせて頂きます。 本記事では、WebAssemblyをターゲットとするコンパイラ処理系を実装します。 方針 WebAssemblyへのコンパイル言語処理系を最も簡単に 1実装するための方針は以下のとおり。 言語は「コンパイラがなるべく小さくなる言語として考案」されたBrainf*ckを採用 文法はPEG(Parsing Expression Grammar)で記述し、生成系PEG.jsでパーサを実行時に生成する WebAssemblyコード生成では文字列でWAST形式を生成し、wast2wasm2で変換する(直接WASMを生成しない)。またEmscriptenやbinaryenは使用しない WASTの表現ではflat形式ではなくs-expression形式を使用する ブラウザ上ではなくNode上で実行する。な

はじめに React #1 Advent Calendar 2017の11日目です。 Reduxのミドルウェア「Redux-saga」で「やや複雑なリアルタイムゲーム」としてテトリス風のゲームの基本部分を開発し、それを通じて学んだこと・感じたことを紹介します。 画面例 まずは実装したテトリス風ゲームの画面例。矢印キーの左右下でピースを動かし、z,xで回転です。 実際にこちらから遊べます。ソースコードはこちらから。 テトリス風ゲーム実装を通じて学んだこと Redux-Sagaの効用として良く言われるのは、「作用を分離する」とか「テストを簡単にする」ということです。それ以外に、今回、ゲームの実装を通じて思ったこと、思いついたことをつらつらと書いていきたいと思います。 利点1. ビューからビジネスロジックを分離する 利点2. ロジックとロジックの間を疎結合にする 利点3. ロジックフローの明確化

redux-sagaの説明 redux-sagaとは何か reduxのミドルウェアとして実装されたコンカレント処理エンジン(プロセスマネージャ)。コンカレント処理モデルはCSP1に基づいている。並行性の単位は協調型マルチタスク(非プリエンプティブ)で、これらはコルーチンを使用して実現される。generator functionがコルーチン処理を実装するために使用されている。エフェクト(作用)をデータとして扱い、副作用の分離2を可能とすることが特徴である。 generator functionでコルーチンってどういうこと? こちらなどを参照。 ジェネレータが作る「値を次々に返すモノ」は、味付けこそイテレータ風ですが、 本質的には コルーチン(coroutine) です。 コルーチンとは、「実行の途中でリターンでき、次回コール時にはそこから処理を再開することが出来るモノ」で*2、 「メインとサ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 関数型プログラミングを業務開発で活用するために HaskellやScala、Erlang/Elixir、Clojureなどの関数型プログラミング言語に興味がある人は多いと思いますが、自分らが日常行なっている業務での開発では到底それらの関数型言語を採用できないのが現実、という場合があるかもしれません。 なので、当面はJavaやGroovy、JS,Ruby,Pythonなどの非関数型プログラミング言語の上で関数型プログラミングスタイルや考え方をなるべく使っていくことでFPの考え方や技法に馴染み広めていき、利点を享受しつつ、将来は大手を振って

追記(2017/05/2) redux-sagaでの非同期バージョンの紹介とリンクを追記。 追記(2017/2/23修正) 元記事の追記3にて言及を頂いたように、以下の「見易い版」コードは元コードが実現していた機能が抜けおちているという誤りがあります。遅くなりましたが、お詫びの上修正させていただきます。 修正内容は以下の「refreshボタン押下ですべての候補を消去」の項目に追記しました。 上記追記の趣旨として、リアクティブプログラミングはそれほど判り難いのだ、というご指摘になっていますが、返す言葉もございません。 はじめに 先日「リアクティブプログラミングとは何だったか」という記事を目にしまして、内容はたいへん興味深かったのですが、以下の記述がありました。 『宣言的』といえそうなのはわかりますし、パラダイムとして従来のコードとは一線を画すものであることは確かですが、どう贔屓目にみてもひた

// http://www.cis.upenn.edu/~bcpierce/tapl/checkers/untyped/ # ![allow(dead_code)] # ![allow(unused_variables)] # ![allow(unused_imports)] use std::fmt::Debug; use std::fmt::Formatter; use std::fmt::Error; # [derive(Clone,PartialEq)] pub enum Term { // Single Varialbe Var(isize, // de Bruijn Index. usize), // length of Context where this variable appealed. // Abstraction Abst(String, // lambda var