じょうほう処理ノート

JavaScriptで複数のリソースの読み込みやWebスクレイピング等によるリソース取得時に「XMLHttpRequest」を使い非同期で読み込みたい時があります。 最近ではPromiseで非同期処理をするのが一般的ですが`for`の中にPromiseを入れても意味がありません。 ``` for(i=0; i { setTimeout(()=>{ console.log("foo"); return resolve(); }) }) } console.log("bar"); ``` #### Output ``` bar foo(10) ``` この様にPromise自体は実行されますが、forの中身が実行されている間に次の`console.log("bar");`が実行されてしまいます。 ## 解決方法 条件が合うまで同じ関数を呼び出す方式でループを実現します。 ``` function PromiseLoop(a, c, b = 0){ if(b >= a){ return Promise.resolve(); }else{ return c(b).then(()=>{ return PromiseLoop(a, c, b + 1); }); } } ``` * a : 繰り返し回数 * c : 関数 (戻り値は`Promise.resolve()`である必要がある) * b : 条件初期化 引数`c`にはreturnに`Promise.resolve()`を返す必要があります。 Promiseを返さないと`then()`で次の処理が動きません。 ``` return c(b).then(()=>{ return PromiseLoop(a, c, b + 1); }); ``` 引数`b`は特に指定が無い限り初期値を`0`に初期化します。 これは省略可能な引数です。 ## 使用例 これは関数を10回繰り返すサンプルです。 ``` Promise...

# はじめに GASとは「Google Application Script」の頭文字をとったもので、Googleが提供している各サービスをこのスクリプトを使い、プログラムする事でこれまでになかった機能を作ったり、作業を簡易化する事が出来る様になります。 よく使われるサービスとしては、GoogleDrive ・ Gmail等でしょうか。これらをGASを使ってプログラムを組む事で連携させる事が可能になります。 JavaScriptをベースとしたプログラミング言語で、JavaScriptと言ってもバージョンが幾つかあり、現時点(2019年)でのネイティブはES6ぐらいでの開発が一般的かと思います。 GASではJavaScript1.6を採用している様ですので、使える構文や仕様が限られますが、十分かと思います。また、TypeScriptからコンパイルする事がオススメされています。 # スプレッドシートの基本操作 GAS入門としてはスプレッドシート(Microsoft Excelみたいな物)のコントロールです。 ## スプレッドシートの準備 ### 新規スプレッドシート作成 Google Driveで任意のディレクトリで新規スプレッドシートを作成します。 名前も任意の名前にします。この作成したスプレッドシートを操作するスクリプトを作成して行きます。 ### ボタンを設置する GASではトリガー(Event)があり、スプレッドシートの変更や保存等を感知して発火する仕組みがあるのですが、今回はボタンをクリックをトリガーにしてスクリプトを実行して行きます。 ツールバーから[挿入]→[図形描画]をクリックしてエディターを開きます。 エディターでボタンの様な図形を作成し、スプレッドシートに貼り付けたら準備完了です。 ## スクリプトを作成する ツールバーの[ツール]→[スクリプトエディタ]を開きます。 このスプレッドシートに関連付けられたスクリプトが自動的に生成されます。 ## トリガーを設定する スクリプトエディタを開くと、初期状態で空の`myFunction()`関数があります。この関数にトリガーを設定します。 スプレッドシートに戻り、図形のメニューからスクリプト作成を開きます。 ---- これでスクリプ...

未だに調べ物をしていると`onclick = function(){〜}`とかを見ますけど、そろそろやめましょう。もう2019年ですよ... また、この様な記法を初心者に教えている本や人が居るから困る... ## これからのイベント定義方法 これからはイベントリスナー(EventListener)と言う物を使ってイベントを定義します。以下がサンプルです。 ### 従来のイベント ``` // JavaScriptの場合 オブジェクト.onclick = function(){ //body } オブジェクト.onclick = 関数; // HTMLの場合 クリック ``` JavaScriptの場合、オブジェクトのプロパティに関数を代入させています。これでも確かにイベントを発火させる事は出来ますが、スマートではありません。HTMLに関しては凶悪です。JavaScriptで完結出来るイベント定義を要素からセットしているのですから。 ### こからの主流 ``` オブジェクト.addEventListener('click', 関数, false); ``` とてもシンプルですね。オブジェクトのaddEventListenerと言うメソッドを使ってイベントが発火した時関数を指定出来ます。 ## addEventListenerメソッド ### addEventListener(イベント, 関数, キャプチャ) - [String イベント] : 対象とするイベントの種類('click' 'load'等)を文字列で指定します。 - [Function 関数] : イベントが発火した際に実行する関数を指定します。 - [Bool キャプチャ] : イベント駆動方式を指定します。基本的に`false`で問題ありません。また省略可能です。 ### ページの読み込みが終わった場合のイベント ``` window.addEventListener('load', function(){ console.log("読み込み完了"); }); ``` ウィンドウオブジェクトのイベントリスナーを使用してページ読み込み完了後に発火されるイベントを定義しています...

最近Electronで開発する際に、コンソールの表示・非表示の切り替えやパッケージング時にも切り替えれる様にする為にconfigを導入 ## 使用するパッケージ [ini - npm : https://www.npmjs.com/package/ini](https://www.npmjs.com/package/ini) このパッケージで簡単に`.ini`ファイルを読み込む事でプログラミングに適応する事が出来ます。 次の様なconfig.iniがあり、取得するとします。 ### config.ini ``` text1 = "テキスト1" data1 = 10 data2 = false ``` ### main.js ``` let fs = require('fs'); let ini = require('ini'); var config = ini.parse(fs.readFileSync('./config.ini', 'utf-8')); console.log(config.text1); ``` ### 実行結果 ``` ~$ テキスト1 ```

## 従来のJavaScriptでのコールバック ```js a(function(){ //body... }) ``` 関数aは引数に与えられたコールバックを実行する物と仮定すると上の様に記述するのが従来のコールバック関数の定義方法です。 ## ES6のコールバック ```js a( ()=> { //body... }) ``` 新しくなったJavaScriptでは次の様に記述出来ます。 これは「アロー関数式」と言う物で、矢印を使って関数の定義やプロパティの参照が出来ます。 `(~)`括弧の間には引数を定義する事が出来ます。

# 同期処理Promiseについて ``` new Promise(function(resolve, reject) { //body }); ``` PromiseとはJavaScriptでの同期処理をするオブジェクト httpリクエスト等で少し読み込みに時間がある物を同期的に処理し、思い通りに処理を進めていきます。 ## Promiseには中断と続行がある 同期処理をするうえで順序よく処理するのはいいですが、その途中で何らかのエラーや例外処理の際、チェーンしている処理を中断する事が出来ます。またPromiseのルール上続行関数(resolve)を実行しなくては次の処理へ以降しますせん。 ### 引数で渡されるresolveとreject |引数|説明|例| |:--|:--:|:--:| |resolve|続行関数|resolve(次の処理へ渡す引数)| |reject|中断関数|reject(エラー処理に渡す引数)| 各種フェイズで上記の適した関数を発生させる必要あり。 ``` Promise.resolve().then(()=>{ //body }).then(()=>{ //body }).then(()=>{ //body }) ```