Overview Deep Learning has been used in many traditional machine learning tasks such as object detection, video processing, speech recognition,etc. The data used in these tasks however are generated from Euclidean space. Machine learning models however do not perform well With tasks that uses data generated from non-euclidean space and represented in graphs, thus the need for deep learning solutions. Graph Neural Networks(GNNs) inspired from Recursive Neural Network and Markov chains was first introduced in 2005....

概要 Webページを作成する際のUIデザインにおいて、“どのようにコンポーネントを作成していくべきか"という問題は誰もが抱えたことのある問題だと思います。本記事では、ページデザインの中でも初歩の初歩であるCardコンポーネントについて、その作り方とファイル構成について紹介していきます。 実装の準備 わかりやすさのため、「社員のリストを作成する」という例を挙げて説明していきます。 ディレクトリ構成は下のようなものを作成します。 Cardコンポーネントの作成 はじめに、Cardコンポーネントに置く各部品（画像、タイトル、サブタイトル）を構成していきます。 // src/pages/card/components/card.tsx import React from "react" import { Box, Grid } from "@mui/material" import { Title, SubTitle } from "src/components/typography/index" import { DocImg } from "src/pages/admin/card/components/documentImage" import sampleImg from "src/assets/imgs/sampleImg.png" import { CardContents } from "src/types/cardContents" interface CardPropTypes { item: CardContents } export const Card: React.FC<CardPropTypes> = ({ item }) => { return ( <Grid item sx={{ height: "146px", width: "235px" }} > <DocImg src={sampleImg} /> <Box sx={{ height: "50px", borderRadius: "0 0 0....

実行環境 go(ver. 1.18.3) M1 Macbook Air (late 2020) 概要 今回の記事では、いくつかのプログラミング言語で初心者が難しいとよく感じるであろうポインタの仕組みと使い方についてまとめました。そして、特に今回は簡素で効率的な開発ができるGo言語におけるポインタについて取り上げます。 ポインタ とは そもそもポインタとは何なのかみなさんはご存知でしょうか。Wikipediaの当該記事によると、 ポインタとは、コンピュータプログラミングにおいて、変数や関数などが置かれたメインメモリ上の番地(メモリアドレス)などを格納する特殊な変数のこと。あるオブジェクトがなんらかの論理的位置情報に基づいてアクセスできるとき、それを参照する(指し示す)ものである。一般的な意味での「ポインタ」は「何かの位置を指し示すための仕組みや道具」のことであり、転じてコンピュータプログラミングの分野でも利用されるようになった。 と説明されています。上記の説明にもあるように、一般的なポインタとは「何かの位置を指し示すための仕組みや道具」としての役割をプログラミングの分野でも持っているということがわかります。 なぜポインタが必要か？ それでは、なぜ一部の言語ではポインタが必要なのでしょうか？そこには、ポインタを使うことで便利な点がいくつかあるためです。主な点は以下の2つです。 プログラムの高速化 コードの設計の簡素化 1つ目の「プログラムの高速化」についてですが、これは端的に言うとポインタを用いることで構造体などのオブジェクトのコピーのコストが減るためです。 2つ目の「コードの設計の簡素化」については、プログラミングにおいて多様される変数のメモリアドレスを共有できるためにコード設計がシンプルになります。 Go言語におけるポインタの使い方 Go 言語におけるポインタの使い方について説明します。先ほども述べてきたように、ポインタとはメモリアドレスを指し示すものを意味するものでした。つまり、ポインタを用いるには、まずはメモリアドレスをどこかに格納する機能が必要です。しかし、変数をメモリアドレスとして格納するだけでは、それ自体を他の関数内で解読することができません。よって、アドレスを値として入れられる機能も必要となります。上記の2つの機能を持っているのが「ポインタ」と「ポインタ変数」と呼ばれるものになります。これら2つは以下のようにGo言語上で表せます。 ポインタ： &p(= 渡したい変数) ポインタ変数： *v(= 渡したい変数の型) これら2つを用いることで、ポインタを用いることができます。 実例 それでは、実際にGo言語でどのようにポインタが使われているのか見てみましょう。 package main import ( "fmt" ) func double(number *int) { *number *= 2 } func main() { amount := 6 double(&amount) fmt.Println(amount) } 上記のコードは、main 関数内でamount という変数名で整数型の変数を受け取って、double 関数にその変数を引数として渡すことで、2倍の整数を計算し、出力するものになっています。ここで、main 関数内の double(&amount)の&はamountという変数のアドレスを一時的に保存しています。これにより、amountという変数のポインタ型を生成することができます。 また、double 関数内のdouble(number *int) の*intはint 型のポインタをnumberという引数の型として定義しています。そして、double関数内の*numberもポインタ型として定義されており、計算結果がnumberという引数に記録されます。main 関数内では引数はamountとして渡されています。よって、amountのアドレスにdouble関数の計算結果のアドレスが格納されます。 このようにして、変数amountをdouble関数内で計算し、正しく出力することができます。...

Overview Object detection is a computer vision task with the goal of localization of an object and classifying that object in an image or video. It is the first step in various computer vision techniques such as segmentation and recognition. Due to the various advances made in object detection over the years, choosing an algorithmn might become overwhelming. Thus in this work we conduct a thorough and exhaustive summarization of the best advances made in this field....

YOLO V3 YOLO V3 made some small improvements on the YOLO V2 algorithm. When predicting the class label sigmoid is used instead of softmax, this helps when training on datasets like Open Images Dataset where overlapping labels(Woman and Person) are present. Apart from using the last layer feature map, it takes the feature map from earlier layers upsample then and merge using concatenation. Convolution layers are used to process both the semantic and fine-grained information thus contained....

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....

概要 今回の記事では、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 "./App"; export const MemberContext = createContext(); render( <MemberContext.Provider value={{ memberList }}> <App /> </MemberContext....

概要 今回の記事では、プログラミングにおける関数設計の際にあまり注目されない概念である"Currying"（カリー化）について取り上げることにしました。wikipediaで「カリー化」を調べると、 複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引数を取り結果を返す関数」であるような関数にすること（あるいはその関数のこと）である。 という説明が出てきます。この説明では混乱する人も多いと思うので、よりわかりやすく解説をしていこうと思います。 Curry 【意味】他変数関数を「１変数関数の連鎖」に変換すること 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 }; と定義した関数と同じ関数を表すということです。ここで出てきた関数の使用例と結果は次のようになります。 console.log(sum1(1, 2)); // 3 console....

概要 今回の記事では、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....

環境 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.ReactElement<any> //この要素にhoverすると発火 placement?: PopperPlacementType; //popの位置を決定 } AddPopperのソースコード import { Fade, PopperPlacementType } from "@material-ui/core"; import { Popper } from "@material-ui/core"; import React, { useCallback, useState } from "react"; interface Props { pop: React....