株式会社 微分 技術ブログ

WebやAIの技術について書きます。

Stripe Subscription

Env Golang Stripe How subscriptions work With Subscriptions customers make recurring payments for access to a product. Subscriptions require you to retain more information about your customers than one-time purchases do because you need to charge customers in the future. Use the following core API resources to build and manage subscriptions: Subscription objects Use the following core API resources to build and manage subscriptions: RESOURCE DEFINITION Product What your business offers – whether that’s goods or services....

. Gaurav Gupta

React Contextを駆使してスマートにデータを扱おう!

概要 今回の記事では、Reactコンポーネント間のデータやりとりにおける冗長性を低減できるテクニックであるContextについて記します。有効活用できていない人は本記事を読んで是非活用してみてください。 React Contextとは context 【意味】文脈、環境 Reactでは、画面に表示する目的のパーツをコンポーネントベースで構成して全体を構築していくという方針でコードを書いていくかと思います。一般に、1ファイルにつき1コンポーネントを書くことが暗黙の了解とされていることから、コンポーネント間でのデータのやりとりは必須です。コンポーネント間でデータをやりとりする方法としてはpropsを介して行いますが、コンポーネントツリーが複雑になるような場合や、離れたコンポーネント間でデータをやりとりする場合などを考えると、propsによる冗長なバケツリレーによって、コーディングが複雑になるだけでなく可読性も低くなるといった問題が生じ得ます。 ここで「コンポーネントを空港、データを飛行機と見立てたようなモデル」を考えてみましょう。仲介する地点が不要になるこのモデルでは、データは出発地から目的地まで一発で辿り着くことができ、最も簡潔化されたモデルのように思えます。Contextはこのモデルを可能にする、「コンポーネントに動的に値を渡すReact純正のAPI」です。 React Contextの仕組み React Contextでは、大きく「データをContext化するProviderコンポーネント」と「Contextデータを回収するuseContextフック」の使い方が重要です。 まず初めにContextに関わる2つのReactの機能について紹介します。 1. React.createContext 新しいContext objectを生成することができる関数です。 import { createContext } from 'react'; const SampleComponent = createContext(); // SampleComponentにProvider/Consumerコンポーネントが与えられる ここでSampleComponentに与えられるコンポーネントはそれぞれ次のような役割を持ちます。 ○Providerコンポーネント  propertyにContext化したいデータを書くことで、wrapするコンポーネント全体にそのContextデータを渡すことができるコンポーネントです。 ○Consumerコンポーネント  Providerコンポーネントにwrapされているコンポーネントにデータを渡すことができるコンポーネントです。ですが、次に紹介するuseContextフックの登場によりConsumerコンポーネントについては直接コーディングせず目的のデータ取得が可能になりました。 2. React.useContext Contextからデータを取得する際に使われるフックです。上で説明したConsumerコンポーネントにアクセスしてcontextに置いてあるデータを取得するのに使われます。 データをContextに置く 今回の記事では、ある組織のメンバーリストを表示させるという例を使います。jsonファイルからimportしたメンバーリスト(memberList)をContextに置きたいデータとします。 import React, { createContext } from "react"; import memberList from "./member-data"; import { render } from "react-dom"; import App from "....

. Kihiro Wakasa

関数をカリー化してもっと自由に使おう!

概要 今回の記事では、プログラミングにおける関数設計の際にあまり注目されない概念である"Currying”(カリー化)について取り上げることにしました。wikipediaで「カリー化」を調べると、 複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引数を取り結果を返す関数」であるような関数にすること(あるいはその関数のこと)である。 という説明が出てきます。この説明では混乱する人も多いと思うので、よりわかりやすく解説をしていこうと思います。 Curry 【意味】他変数関数を「1変数関数の連鎖」に変換すること Curryingとは そもそも、皆さんはJavaScriptにおける関数の位置付けをどのくらい理解しているでしょうか? “First Class Citizen in JavaScript"のように検索すると、JavaScriptにおいてFunctionはFirst Class Citizenであるという記事がいくつも出てくるかと思います。ここでは詳しいことについては割愛しますが、 変数として扱うことができる 関数の引数として扱うことができる 関数の返り値となることができる という3つの性質を持つもののことをFirst Class Citizenと定義しており、Functionはその定義を満たす存在としています。Curryingはこのような関数に対する特有の文法であるため、見る価値のあるものだと思います。 理解のために具体例から見ていきましょう。 まず、ある2つの値を代入するとその和を返す関数について考えます。この関数は普通次のように書くかと思います。 function sum1(a, b) { return a + b }; sum1(3, 4); // 7 これをCurryingして書くと、次のようになります。 function sumCarry1(a) { return function(b) { retrun a + b } }; sumCarry1(5)(6); // 11 ここでsumCarry1がしていることは、「sumCarry1に代入した引数(a)を定数として持っている関数を返すこと」になります。例えば、aに10を代入した新しい関数sumCarry2は次のように書くことができます。 const sumCarry2 = sumCarry(10); つまり、ここで新しく定義したsumCarry2関数は、 function sumCarry2(b) { return 10 + b }; と定義した関数と同じ関数を表すということです。ここで出てきた関数の使用例と結果は次のようになります。...

. Kihiro Wakasa

JSでは変数の宣言時にhoistingが生じる

概要 今回の記事では、JavaScriptが備えているhoistingという性質について取り上げることにしました。この性質について正しく理解できていないとデバッグが困難なエラーなどが生じ得る一方で、直感的に理解するのが難しい概念であるため、まとめることにしました。 【hoisting】 巻き上げ、吊り上げ Function declarationにおけるhoisting 多くの人が初めてhoistingの概念を意識するのは、関数の2つの定義方法の使い分けを考えるときであると思います。JavaScriptにおける関数の2つの定義方法 “Function declaration”, “Function expression"は通常下記のようなコーディングとなります。 // Function decralation function fncDecralation() { // code }; // Function expression const fncExpression = function() { // code }; ここでhoistingについて理解するために例を挙げてその仕組みを考えます。 function aaa() { console.log("aaa"); }; const bbb = function() { console.log("bbb"); }; aaa(); // aaa bbb(); // bbb 次に、同じ関数について実行場所を前にしたものを考えます。 aaa(); // aaa bbb(); // index.html:32 Uncaught TypeError: bbb is not a function ccc(); // Uncaught ReferenceError: ccc is not defined function aaa() { console....

. Kihiro Wakasa

hover→popを簡単に記述するコンポーネント

環境 React.js TypeScript material-ui 目的 お気持ち: シンプルなwebサイトにしたいが、詳細も載せたい。 別リンクに飛ぶ詳細は面倒。 要素にhoverした時に詳細がpopしてほしい。 ↑を可能にするPopper(material-ui)はコード量が30行くらいと多い。 pop付要素を手軽に実装できるようにラップしよう。 概要 Popper(material-ui)をラップし、手軽な実装を実現。 作成したコンポーネントAddPopper AddPopperの子要素にhoverすると、props.popに渡したReact要素が表示される。 使用例 Webサイトに表示した、カプースチンのソナタファンタジーいいよねという文字列の「カプースチン」と「ソナタファンタジー」の部分にhoverした時、補足説明が現れる(popする)ようにする。 function App() { return ( <div className="App"> <AddPopper //捕捉説明① pop={<div>作曲家: Nicolai Kapustin(1937-2020, ウクライナ)</div>} > {/*このspanにhoverすると捕捉説明①が表示される。*/} <span>カプースチン</span> </AddPopper> の {/*補足説明②*/} <AddPopper pop={<div>Op.39 4楽章構成</div>}> {/*このspanにhoverすると捕捉説明②が表示される。*/} <span>ソナタファンタジー</span> </AddPopper> いいよね。 </div> ); } propsの定義 interface Props { pop: React.ReactElement<any> //hover時に表示する要素 type: 'span' | 'div' //被hover要素がinlineかどうかを指定 children: React....

. Shuta Hagimori