/* main.js, case 4(extend: send and recv) */"use strict";const{electron,BrowserWindow,app,ipcMain,Menu}=require('electron');letmainWindow=null;constCreateWindow=()=>{mainWindow=newBrowserWindow({width:800,height:600,webPreferences:{nodeIntegration:false,contextIsolation:true,preload:__dirname+'/preload.js'}});mainWindow.webContents.openDevTools();mainWindow.on('closed',function(){mainWindow=null;});/*menu creation*/consttemplate=[{label:'File',submenu:[{label:'Open',click:(menuItem,browserWindow,event)=>{// メニュークリック時に実行される関数////ここでファイルを開いたりする(今回は暫定)//constopenedPath="./hogehoge.txt";constreadData="ファイルの中身だよ";//ここまででファイルは読み込んだものとする////この関数でIPC送信(main to renderer)// browserWindow.webContents.send("openfile",//送信チャンネル名(自分で区別できるように)//{//送信したいデータ一覧//filePath:openedPath,dataText:readData});}}]}];constmenu=Menu.buildFromTemplate(template)Menu.setApplicationMenu(menu);mainWindow.loadURL('file://'+__dirname+'/index.html');}app.on('ready',CreateWindow);//IPC受信部//ipcMain.on("msg_render_to_main1",(event,arg)=>{console.log(arg);//printing "good job"});ipcMain.on("msg_render_to_main2",(event,arg)=>{console.log("We are the",arg.teamName,"!");//printing "We are the Victories !"});
/* preload.js, case 4 (extend)*/const{contextBridge,ipcRenderer}=require("electron");contextBridge.exposeInMainWorld("api",{send:(channel,data)=>{//rendererからの送信用//ipcRenderer.send(channel,data);},on:(channel,func)=>{//rendererでの受信用, funcはコールバック関数//ipcRenderer.on(channel,(event,...args)=>func(...args));}});
<!--index.html, case 4 (extend)--><!DOCTYPE html><html><head><metacharset="UTF-8"><title>Test</title></head><body><buttonid="button1">test1</button><buttonid="button2">test2</button><divid="previewF">受信ファイル名</div><divid="previewD">受信データ</div></body><script type = "text/javascript">//適当なプログラムconstbutton1=document.getElementById("button1");//送信用(チャンネル名指定)//button1.addEventListener("click",(e)=>{window.api.send("msg_render_to_main1","god job");});//送信用(チャンネル名指定)//button2.addEventListener("click",(e)=>{window.api.send("msg_render_to_main2",{teamName:"Victories"});});//受信部(チャンネル名指定)//window.api.on("openfile",(arg)=>{document.getElementById("previewF").textContent=arg.filePath;document.getElementById("previewD").textContent=arg.dataText;});</script></html>
importReact,{useState,useEffect}from'react'exportdefaultfunctionFunctionCounter(){const[count,setCount]=useState(0)const[text,setText]=useState('')const[isShow,setShow]=useState(true)// レンダリングされた時にのみ実行useEffect(()=>{console.log(`Function Component Mount`)},[])// countが更新された時に実行useEffect(()=>{console.log(`count state is updated ${count}`)},[count])// textが更新された時に実行useEffect(()=>{console.log(`text state is updated ${text}`)},[text])// count または textが更新された時に実行useEffect(()=>{console.log(`state text and count are updated count=${count} text=${text}`)},[text,count])return(<div><inputtype='text'value={text}onChange={e=>setText(e.target.value)}></input><buttononClick={()=>setCount(count+1)}>
Click {count} times
</button></div>)}
3. コンポーネントが削除される時は？
ボタン操作でClassChildComponentを表示を切り替えてみます。
ClassComponent
importReact,{Component}from'react'importClassChildComponentfrom'./ClassChildComponent'classClassComponentextendsComponent{constructor(props){super(props)this.state={isShow:false}}render(){const{isShow}=this.statereturn(<div><buttononClick={()=>this.state.isShow?this.setState({isShow:false}):this.setState({isShow:true})}>
isShow is {isShow}</button>{isShow&&<ClassChildComponent/>}</div>)}}exportdefaultClassComponent
importReact,{Component}from'react'exportdefaultclassClassChildComponentextendsComponent{componentWillUnmount(){console.log('Child Class Component will Unmount !!')}render(){return(<div><h3>Child Component</h3></div>)}}
まずは、同じように表示を切り替えるボタンのみのコンポーネントを準備します。
FunctionComponent
importReact,{useState}from'react'importFunctionChildComponentfrom'./FunctionChildComponent'exportdefaultfunctionFunctionComponent(){const[isShow,setShow]=useState(false)return(<div><buttononClick={()=>isShow?setShow(false):setShow(true)}>
isShow is {isShow}</button>{isShow&&<FunctionChildComponent/>}</div>)}
importReact,{useEffect}from'react'exportdefaultfunctionFunctionChildComponent(){useEffect(()=>{return()=>{console.log('Child Function Component will Unmount !!')};},[])return(<div><h3>Child Component</h3></div>)}
ここからは本当に僕の私見で、邪推と呼んでもいい理屈だが、もし仮に僕が GAS の V8 移行を指揮する立場にあったとしたら、実際の V8 の性能がどうであれ、ただ V8 モードをオンにするだけでコードの実行速度が明らかに改善されるという結果が望ましいものだと考えるだろう。それは直接的に顧客の利益に繋がるし、計算時間が短くて済むなら Google にとっても嬉しいはずだ。なぜなら GAS は無料だからである。
おわりに
長々と書いてきたが、Qiita に残すべき事実としては、表題の一行だけで十分だったのかも知れない。僕はこの記事で事実だけを述べていると自負しているが、ある人が読めば風評被害を起こそうとしているかのように、またある人が読めば Google のステマをしているかのようにも読めるかも知れない。あるいは、全ては何の有用性もない戯言だったのかも知れない。それではなぜ僕がこの記事を書く衝動に駆り立てられたかと言えば、V8 モードをオンにするだけでものすごい速くなるのは何故かという、その謎に惹かれたからだ。たった 4000ms の違いと思われるかも知れないが、その違いは、40分以上の時間を執筆に向かわせるに十分なものだったのだ。
<divid="app"><selectname="user"v-model="selected"><optiondisabledvalue="">選択して下さい</option><optionv-for="user in users"v-bind:value="user.name"v-bind:key="user.id">
{{user.name}}
</option></select></div>
/* for Qiita */functionremove_ele(selector){try{$(selector).remove();}catch(error){}}$('body').append($('.p-items_article'))do{vare=$('body>*');if(e.className.indexOf('p-items_article')==-1){e.remove();}else{e.OK=1;}}while(e.OK!=1)remove_ele('.u-flex-center-between');remove_ele('.ai-Container');remove_ele('.it-Footer');remove_ele('.it-DeprecationAlert_one');window.print();
/* for Zhihu */functionremove_ele(selector){try{$(selector).remove();}catch(error){}}$('body').append($('article.Post-Main'))do{vare=$('body>*');if(e.className.indexOf('Post-Main')==-1){e.remove();}else{e.OK=1;}}while(e.OK!=1)remove_ele('.Sticky');remove_ele('.Post-topicsAndReviewer');remove_ele('.Post-Author');window.print();
ジェネレーターからモナドの変換は関数で行い、値をモナドで包む return（Haskell の意味）は new で表現します。
Haskell
JavaScript
test = do
a <- get
return a
let test = stateMonad(function*() {
let a = yield get;
return new stateMonad(a);
});
関数モナド
State モナド
function functionMonad(g) {
if (this.constructor == functionMonad)
return () => g;
function bind(m, f) {
return state => {
let value = m(state);
let r = f(value);
return r(state);
};
}
let cps = eval(cpsTransform(bind, g));
return state => cps()(state);
}
function stateMonad(g) {
if (this.constructor == stateMonad)
return state => [g, state];
function bind(m, f) {
return state => {
let [value, newState] = m(state);
let r = f(value);
return r(newState);
};
}
let cps = eval(cpsTransform(bind, g));
return state => cps()(state);
}
これらはどちらも状態系モナドとして同じ構造になっています。
bind(m, f) において、モナド m から値（と状態）を取り出す: m(state)
取り出した値 value を f に引数として渡す: f(value)
※ 引数として渡すことを変数への束縛と見なすので bind
function functionMonad(g) {
function monad(m) {
m.monad = functionMonad;
return m;
}
if (this.constructor == functionMonad)
return monad(() => g);
function bind(m, f) {
return monad(state => {
let value = m(state);
let r = f(value);
if (!r.monad) r = new functionMonad(r);
return r(state);
});
}
let cps = eval(cpsTransform(bind, g));
return state => cps()(state);
}
function stateMonad(g) {
function monad(m) {
m.monad = stateMonad;
return m;
}
if (this.constructor == stateMonad)
return monad(state => [g, state]);
function bind(m, f) {
return monad(state => {
let [value, newState] = m(state);
let r = f(value);
if (!r.monad) r = new stateMonad(r);
return r(newState);
});
}
let cps = eval(cpsTransform(bind, g));
return state => cps()(state);
}
モナドではなく値が返されたときはモナドで包みます。
if(!r.monad)r=newfunctionMonad(r);
包まずに直に返すことも可能です。この方がオーバーヘッドは少ないです。
関数モナド
State モナド
if (!r.monad) return r;
if (!r.monad) return [r, newState];
状態書き換え版
参考までに state をモナド内のローカル変数として書き換える実装を示します。bind で state をリレーしないため、実装が簡単になっています。値をモナドで包む処理は省略しました。
関数モナド
State モナド
function functionMonad(g) {
let state;
function bind(m, f) {
let value;
value = m(state);
return f(value);
}
let cps = eval(cpsTransform(bind, g));
return s => {
state = s;
return cps();
};
}
function stateMonad(g) {
let state;
function bind(m, f) {
let value;
[value, state] = m(state);
return f(value);
}
let cps = eval(cpsTransform(bind, g));
return s => {
state = s;
return [cps(), state];
};
}
