1. ディレクトリ構成

Expressでプロジェクトを作成するとディレクトリは以下のような構成になります。

詳細は今後に書くとして、cssとjavascriptをテンプレートエンジンへ適用させたい時は以下の手順を行ってください。

2. css作成

publicフォルダ直下のstylesheetsフォルダにcssファイルを作成してください。

3. javascript作成

publicフォルダ直下のjavascriptsフォルダにjsファイルを作成してください。
javascriptの場合はAPIの作成だったりルーティングの兼ね合いがありますので、
その点を考慮した実装としておいてください。

4.適用

viewsフォルダに作成した(プロジェクト作成時は1ファイルのみ作成されている)テンプレートエンジンのファイルに読み込みをさせていきます。

4-1. cssの場合

おなじみ、linkタグを使いましょう
e.g.
<link rel='stylesheet' href='/stylesheets/style.css' />
publicフォルダ直下のstylesheetsフォルダのstyle.cssファイルなので良いですね？

4-2. javascriptの場合

こちらもおなじみ、scriptタグを使いましょう
<script type="text/javascript" src='/javascripts/test.js'></script>
こちらも問題ないですね？

5.　最後に

まだ終わりません。
生htmlと違い、タグで読み込むだけでは表示ができません。
どうしたら良いかと言うと、ディレクトリ構成の中にある、app.jsファイルに1行書き込みます。
app.jsはルーティングを定義したりしていますので、全体のコントローラと思ってください。
そこで以下を追加します。
app.use(express.static('public'));
若しくは
app.use(express.static(path.join(__dirname, 'public')));
※__dirnameは現在実行されているファイルの絶対パスが入っています。
これで表示ができると思います。

DateTime

はじめに

「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」 でお届けしているスクリプト言語 Kinx。言語はライブラリが命。ということでライブラリの使い方編。

今回は DateTime です。Range でも使えるようにしました。

• 参考
  • 最初の動機 ... スクリプト言語 KINX（ご紹介）
    • 個別記事へのリンクは全てここに集約してあります。
  • リポジトリ ... https://github.com/Kray-G/kinx
    • Pull Request 等お待ちしております。

使い方

using DateTime

DateTime ライブラリは標準組み込みではないため、using ディレクティブを使用して明示的に読み込む。

using DateTime;

インスタンス化

インスタンス化は基本的には DateTime オブジェクトを new する方法で行う。

• new DateTime() ... 現在時刻でインスタンス化
• new DateTime(dateString) ... 文字列をパースしてインスタンス化
• new DateTime(Unixtime) ... UNIXエポックの時刻からインスタンス化
• new DateTime(year, month, day[, hour, minute, second]) ... 日時情報を個別に指定してインスタンス化

ただし、以下でも可能（内部で new して返しているだけ）。好きなものを使ってください。

• DateTime.parse(...)
• DateTime(...)

尚、dateString は以下のような書式を解釈する。

• "2020-01-01"、"2020-1-1"
• "2020/01/01"、"2020/1/1"
• "2020-01-01T10:00:05"、"2020-1-01T10:0:5"
• "2020/01/01 10:00:05"、"2020/1/01 10:0:5"

メソッド

DateTime オブジェクトには以下のメソッドがある。

メソッド	動作概要
isLeapYear()	うるう年であれば true を返す
unixtime()	現在日時の Unix エポック時間を返す
datetime()	現在日時を表すオブジェクトを返す
year()	現在日時の「年」
month()	現在日時の「月」
day()	現在日時の「日」
hour()	現在日時の「時」
minute()	現在日時の「分」
second()	現在日時の「秒」
weekday()	現在日時の「週」（0: 日曜, 1: 月曜, ..., 6: 土曜）
isSunday()	日曜日であれば true を返す
isMonday()	月曜日であれば true を返す
isTuesday()	火曜日であれば true を返す
isWednesday()	水曜日であれば true を返す
isThursday()	木曜日であれば true を返す
isFriday()	金曜日であれば true を返す
isSaturday()	土曜日であれば true を返す
clone()	日時オブジェクトのコピーを返す
addDay(day)	日時オブジェクトを day 日進める（破壊的）
subDay(day)	日時オブジェクトを day 日戻す（破壊的）
addMonth(month)	日時オブジェクトを month か月進める（破壊的）
subMonth(month)	日時オブジェクトを month か月戻す（破壊的）
next()	次の日を表す新たな日時オブジェクトを返す
+(day)	day 日後を表す新たな日時オブジェクトを返す
-(day)	day 日前を表す新たな日時オブジェクトを返す
>>(month)	month か月後を表す新たな日時オブジェクトを返す
<<(month)	month か月前を表す新たな日時オブジェクトを返す
<=>(dt)	0: 日時が同じ、-1: dt のほうが後の日時、1: dt のほうが以前の日時
format(fmtString)	fmtString のフォーマットに従ってフォーマットする。サポートするフォーマットは以下の通り。 %YYYY%:4桁の年、%YY%:2桁の年 %MM%:2桁の月、%M%:月 %DD%:2桁の日、%D%:日 %hh%:2桁の時、%h%:時 %mm%:2桁の分、%m%:分 %ss%:2桁の秒、%s%:秒

月末

<< や >> で月を移動した場合、対応する月に同じ日が存在しない時は代わりにその月の末日が使われる。

using DateTime;
System.println(DateTime("2001-3-28") << 1);  // 2001/02/28 00:00:00
System.println(DateTime("2001-3-31") << 1);  // 2001/02/28 00:00:00

このことは以下のように、もしかすると予期しない振る舞いをするかもしれない（Ruby と一緒）。

using DateTime;
System.println(DateTime("2001-1-31") >> 2);        // 2001/03/31 00:00:00
System.println(DateTime("2001-1-31") >> 1 >> 1);   // 2001/03/28 00:00:00
System.println(DateTime("2001-1-31") >> 1 >> -1);  // 2001/01/28 00:00:00

Range

Range で使えるようにするには、next メソッドと <=> メソッドを定義しておけば良い。なので、DateTime オブジェクトは Range で使用できる。

using DateTime;
(DateTime(2020,1,1)..DateTime(2020,1,10))
    .each(&(d) => System.println(d));

.. なので最後の日が含まれる。... の場合は最後の日は含まれない。

2020/01/01 00:00:00
2020/01/02 00:00:00
2020/01/03 00:00:00
2020/01/04 00:00:00
2020/01/05 00:00:00
2020/01/06 00:00:00
2020/01/07 00:00:00
2020/01/08 00:00:00
2020/01/09 00:00:00
2020/01/10 00:00:00

Range で使えるので for-in でもそのままいける。

using DateTime;
for (var d in DateTime(2020,1,1)...DateTime(2020,1,10)) {
    System.println(d);
}

最終日を含まないループ。

2020/01/01 00:00:00
2020/01/02 00:00:00
2020/01/03 00:00:00
2020/01/04 00:00:00
2020/01/05 00:00:00
2020/01/06 00:00:00
2020/01/07 00:00:00
2020/01/08 00:00:00
2020/01/09 00:00:00

おわりに

作り始めてから約半年。色々できるようになってきましたねー。ライブラリを充実させて、何かしらのアプリを作れるようになることが次の目標ですかね。ニッチな用途でのアプリをサクッと作れる、とかできるとどこかに居場所ができるかもしれない。

ではまた次回。

コードをもうちょっとだけきれいにしてみた。

先週こちらの記事を書いたんですけど、もうちょっとコードを使いやすくしたので、公開しておきます。
以前は違う販売日を違うページにしていたのですが、今回、WixのSessionという機能（ユーザーがページを開いている間、そのユーザーのデータを保存する機能）を使って、販売日を記録しておき、希望日の在庫だけを見せる、という仕組みです。コードは汚いのですが、忘備録と、誰かの参考になればと思って、上げておきます。

やりたいこと

さて、ポストコード販売ページはこんな感じで、ポストコードを打つことでjavascriptが文字の置き換えやボタンの置き換えを行う、というのがやりたかったことです。

これにポストコードを入れると、

こういうボタンが出てきたり、

ゴメンネっていうコメントが出たりします。デリバリーの日付は複数あるので、この日付をSessionに記録します。そうすると、飛んだ先のページで日付を元にオンラインショップを構成します。また、いいやり方かどうかはわからないんですが、一応前日の5時をすぎるとオーダーできなくなる仕組みも実装しました。ホントはGitで管理すればいいんですけど、多分これGitできない仕様なので。。何か方法をご存知の方はお知らせくださいー

コードの解説。

汚いですが。
まずsessionをインポートします。'wix-storage'にセッションデータが記録されているようです。

import {session} from 'wix-storage';
import wixWindow from 'wix-window';

非常に汚いんですが、こういう方法で今回は配送日を記録します。
データベース接続すると、この辺はきれいになりそうです。
その辺は今回は飛ばしました。

const deliveryDateDay=[20,21,22,23]
const deliveryMonth=[4,4,4,4] //(0 for Jan, 11 for Dec)
const deliveryDate=["20May","21May","22May","23May"];
const listmonths=["Jan","Feb","Mar","Apr","May","June","July","Aug","Oct","Nov","Dec"];
const currentDate=today.getUTCDate()+listmonths[today.getUTCMonth()];
const deliveryPostcodeWed=["TW8","TW9","TW10","TW1","TW2"];
const deliveryPostcodeThu=["SW19","SW18"];
const deliveryPostcodeFri=["W6","W8","W10","W11","W14"];
const deliveryDay=["Wed","Thu","Fri","Sat"];
const deliveryPostcodes=[deliveryPostcodeWed,deliveryPostcodeThu,deliveryPostcodeFri];

JavascriptのDate機能を使って、現在の日付と時間を取り込み、水曜から土曜の各日付に対して、日付をすぎたかどうかを判定する部分です。ちょっとこれは月跨ぐとバグるコードなので、関数をちゃんと作るときに、月跨いでもいいコードに書き換えることにします。

const today = new Date();

//日付を超えたかどうか
var isPassed=[false,false,false,false];

//各日付に対して、月、日と時間が超えてないかどうかを確認します。
for (var i = 0; i < 4; i++){
  console.log(deliveryDateDay[i],today.getUTCDate(),deliveryMonth[i],today.getUTCMonth(),today.getUTCHours());
  if (deliveryDateDay[i]<=today.getUTCDate() && deliveryMonth[i]<=today.getUTCMonth() &&  16<=today.getUTCHours() ){
    isPassed[i]=true;
  }
}

セッションにこの情報を保存します。

//console.log(isPassed);
session.setItem("listDeliveryDate",deliveryDate);
session.setItem("listDeliveryDay",deliveryDay);
session.setItem("listIsPassed",isPassed);

ポストコードの関数などは、前回の記事にあるので省略。
JavascriptのArrayを使って、前回の関数iconButton3_onClickをチョコチョコ書き換えます。

export function iconButton3_onClick(event){
  let value = $w("#input1").value;

//ポストコードがちゃんと入力されれば実行
  if( isValidPostcode(value)) 
  {
    var postcode=formatPostcode(value);
    var areacodeslist=postcode.split(" ");
    var areacodes=areacodeslist[0];
    session.setItem("POSTCODE", postcode);
    session.setItem("AREACODE", areacodes);
    var deliveryList=[(deliveryPostcodeWed.indexOf(areacodes)>-1),(deliveryPostcodeThu.indexOf(areacodes)>-1),(deliveryPostcodeFri.indexOf(areacodes)>-1)]
    var isDeliverable = false;
    //console.log(deliveryList,isDeliverable);

//配達可能な三日間のArrayをforで巡回します。
    for (i = 0; i < 3; i++) {
//配達可能なとき
      if (deliveryList[i] && isDeliverable===false && isPassed[i]===false){
        //$w("#text26").text="Sorry! Preorder is over! Please come back next week!";
        $w("#iconButton1").label = "Order Delivery on "+deliveryDate[i]+" "+deliveryDay[i];
        $w("#iconButton1").link = "/shoppingpage";
        $w("#iconButton1").show();
        session.setItem("Date", deliveryDate[i]);
        session.setItem("Day", deliveryDay[i]);
        $w("#text26").text="Great news! We are delivering to your area, "+deliveryPostcodes[i]+" on "+deliveryDate[i]+".  Please tell your friends :)";
        isDeliverable = true;
      }
//配達できるけど、時間を過ぎてしまったとき
      else if (deliveryList[i] && isDeliverable===false && isPassed[i]===true) {
        $w("#iconButton1").label = "Order Shop Collection";
        $w("#iconButton1").link = "/choosedate";
        $w("#iconButton1").show();
        $w("#text26").text="Sorry! We are delivering to your area, "+deliveryPostcodes[i]+" on "+deliveryDay[i] +" but preorder is over this week. Please wait until next week or you can always use click and collect service from the shop!";
        isDeliverable = true;

      }
//そのポストコードに配達できないとき
      else if (isDeliverable===false){
        $w("#iconButton1").label = "Order Shop Collection";
        $w("#iconButton1").link = "/choosedate";
        $w("#iconButton1").show();
        $w("#text26").text="We are very sorry, but at the moment there are no scheduled deliveries for your area in the next few weeks. You can still collect from the store using our click and collect service. Simply choose your order online, select a pick up date and we’ll see you then :)";  //or else do this other thing
      }
    }
  }
//ポストコードが判定できなかったとき
  else{
    $w("#text26").text="Sorry! We can't recognize your postcode......";  //or else do this other thing
  }
}

こんな感じです。飛んだ先のページでは、こんな感じでデータを取得できます。ただし、sessionの中のarrayはテキストになっているので、arrayに戻したり上げたりすることが必要かもしれません。

import {session} from 'wix-storage';

let postcode=session.getItem("POSTCODE");
let areacode=session.getItem("AREACODE");
let deliveryDate=session.getItem("Date");
let deliveryDay=session.getItem("Day");

またそのうちまとめてコードをあげようと思いますが、今日はこの辺にしておきます。

機能

• KEN_ALL.CSV（日本郵便で公開されている、郵便番号データ）を元に、町域名（半角カタカナ/漢字）部分をスッキリさせる（複数行にわたる括弧部分を削除とか、"以下を除く"等を削除）
• 変換後のファイルを出力する（必要な列のみ出力するようにすることも簡単な修正で可能）

実行環境

-Windows10
-EmEditor Professional (64-bit)　Version 19.8.5 にて確認

使い方

1. 日本郵便の郵便番号データダウンロードページで公開されている郵便番号データ（全国一括）を取得し、"KEN_ALL.CSV"ファイルを準備する(*1)
2. EmEditorで"KEN_ALL.CSV"ファイルを開き、下記マクロを実行する。
3. KEN_ALL.CSVと同じディレクトリにKEN_ALL_cnv.txtファイルが作成される
4. (KEN_ALL_LOG.txtファイルも出力される)

(*1)「読み仮名データの促音・拗音を小書きで表記しないもの」と「読み仮名データの促音・拗音を小書きで表記するもの」と２種類になっているが、"・・・小書きで表記するもの"でテストしています。変換処理の正規表現を変えることにより、"・・・小書きで表記しないもの"でも使えると思われます

マクロ

郵便番号データ変換_v2.jsee

var startTime = new Date();
/*
□マクロ名：郵便番号データ変換.jsee
□バージョン：2.0
　2020 05 16 クラスで実装
　
■開くファイル
　郵便番号データダウンロードから取得した住所の郵便番号（CSV形式）
　(ken_all.zipを展開したKEN_ALL.CSV。シフトJIS、改行コードは0x0D,0x0A)
　https://www.post.japanpost.jp/zipcode/dl/kogaki-zip.html
■作成ファイル
　レイアウト同じで町域名の内容を簡略化したファイル（ファイル名=拡張子の前に"_cnv"を追加したテキストファイル）
■手順(例)
　KEN_ALL.CSVを開く
　郵便番号データ変換_v2.jseeを実行
　同一ディレクトリに変換後のファイル(UTF-8)が作成される
*/

//■■■■■■■■■■■■■■■■■■■■■■■■■■■
//クラス定義
//■■■■■■■■■■■■■■■■■■■■■■■■■■■

//■■■■■■■■■■■■■■■■■■■■■■■■■■■
//■■　ログ情報クラス
//■■■■■■■■■■■■■■■■■■■■■■■■■■■
//■■■■■■■■■■■■■■■■■■■■■■■■■■■
//【名称】ログ情報：コンストラクタ
//【引数】なし
//【返却】なし
//【処理】ログ情報を管理する配列を作成する
//■■■■■■■■■■■■■■■■■■■■■■■■■■■
Log = function(){
    OutputBar.writeln("○Log.コンストラクタ(ログ情報:start)");
    //コンストラクタ
    this.arrLog = [];
    OutputBar.writeln("○Log.コンストラクタ(ログ情報:end)");
};

//■■■■■■■■■■■■■■■■■■■■■■■■■■■
//【名称】ログ情報：追加
//【引数】ログ種類、郵便番号、ログ内容
//【返却】なし
//【処理】this.arrLogにログ情報を追加する
//■■■■■■■■■■■■■■■■■■■■■■■■■■■
Log.prototype.push = function(
    logType,//ログ種別
    postalCode,//郵便番号
    logContent//ログ内容
    ){
//  OutputBar.writeln("○Log.push(ログ情報.追加:start)");
    tmpArr = [];
    tmpArr[0] = logType;//ログ種別
    tmpArr[1] = postalCode;//郵便番号
    tmpArr[2] = logContent;//ログ内容
    this.arrLog.push(tmpArr);
//  OutputBar.writeln("○Log.push(ログ情報.追加:end)");
};

//■■■■■■■■■■■■■■■■■■■■■■■■■■■
//【名称】ログ情報：OutputBar出力
//【引数】なし
//【返却】なし(OutputBarに出力するのみなので)
//【処理】OutputBarにログ情報を出力する
//■■■■■■■■■■■■■■■■■■■■■■■■■■■
Log.prototype.toString = function(){
    OutputBar.writeln("○Log.toString(ログ情報.OutputBar出力:start)");
    for (var i = 0; i < this.arrLog.length; i++){
        OutputBar.writeln("this.arrLog[" + i + "]="
            + this.arrLog[i][0] + ","
            + this.arrLog[i][1] + ","
            + this.arrLog[i][2]
        );
    }
    OutputBar.writeln("○Log.toString(ログ情報.OutputBar出力:end)");
};

//■■■■■■■■■■■■■■■■■■■■■■■■■■■
//【名称】ログ情報：書き出し
//【引数】出力ファイルの完全パス+ファイル名
//【返却】なし
//【処理】ログ情報をまとめたthis.arrLogをファイルに書き出す
//■■■■■■■■■■■■■■■■■■■■■■■■■■■
Log.prototype.fWrite = function(sLogFilePathName){
    OutputBar.writeln("○Log.fWrite(ログ情報.書き出し:start)");
    sLog = '';
    for (var i = 0; i < this.arrLog.length; i++){
        sLog +=  this.arrLog[i][0] + ","
            + this.arrLog[i][1] + ","
            + this.arrLog[i][2] + "\r\n";
    }
    editor.NewFile();//新規にファイルを作成
    docLog = editor.ActiveDocument;//現在開いている Document オブジェクトを返します。
    docLog.write( sLog );//現在のカーソル位置に文字列を挿入、または上書き
    docLog.Encoding = eeEncodingUTF8;//次に保存する時に使用されるエンコードを設定(UTF-8)
    docLog.UnicodeSignature = false;//次に保存する時に Unicode サイン (BOM) を付けない
    docLog.Save( sLogFilePathName );//文書を保存します。
    editor.ExecuteCommandByID(4120);//docNoWriteを保存しないで閉じます。■DELETE■
    OutputBar.writeln("○Log.fWrite(ログ情報.書き出し:end)");
};

//■■■■■■■■■■■■■■■■■■■■■■■■■■■
//■■　郵便番号管理クラス
//■■■■■■■■■■■■■■■■■■■■■■■■■■■
//■■■■■■■■■■■■■■■■■■■■■■■■■■■
//【名称】郵便番号管理：コンストラクタ
//【引数】なし
//【返却】なし
//【処理】郵便番号管理を管理するdocumentオブジェクトを作成する
//■■■■■■■■■■■■■■■■■■■■■■■■■■■
PostalCodeManage = function(docInFile,log){
    OutputBar.writeln("○PostalCodeManage.コンストラクタ(郵便番号管理:start)");

    docInFile.ExtractColumns(":1,:2,:3,:4,:5,:6,:7,:8,:9,:10,:11,:12,:13,:14,:15");
    this.docPCI = editor.ActiveDocument;

    docInFile.Activate();//文書をアクティブにします。
    editor.ExecuteCommandByID(4120);//ファイルを保存しないで閉じます

    this.log = log;
    OutputBar.writeln("○PostalCodeManage.コンストラクタ(郵便番号管理:end)");
};

//■■■■■■■■■■■■■■■■■■■■■■■■■■■
//【名称】郵便番号管理：書き出し
//【引数】なし
//【返却】なし
//【処理】this.docPCIを書き出す
//【めも】fn=ファイル名、celn=書き出す列
//■■■■■■■■■■■■■■■■■■■■■■■■■■■
PostalCodeManage.prototype.fWrite = function(fn,celn){
OutputBar.writeln("○PostalCodeManage.fWrite(郵便番号管理.書き出し:start)");

//●書き出し
    this.docPCI.ExtractColumns(celn);
    this.docPCI.Activate();//文書をアクティブにします。
    editor.ExecuteCommandByID(4120);//ファイルを保存しないで閉じます

    this.docWrite = editor.ActiveDocument;
    this.docWrite.Encoding = eeEncodingUTF8;//保存時のエンコード：UTF-8
    this.docWrite.UnicodeSignature = false;//保存時に(BOM)を付けない
    this.docWrite.Save( fn );//文書を保存
    this.docWrite.close();//文書を閉じる

OutputBar.writeln("○PostalCodeManage.fWrite(郵便番号管理.書き出し:emd)");
};

//■■■■■■■■■■■■■■■■■■■■■■■■■■■
//【名称】郵便番号管理：チェック１
//【引数】なし
//【返却】なし
//【処理】this.docPCIの町域名(漢字)の重複を削除
//【めも】
//■■■■■■■■■■■■■■■■■■■■■■■■■■■
PostalCodeManage.prototype.cnv1a = function(){
    OutputBar.writeln("○PostalCodeManage.cnv1(郵便番号管理.チェック１:start)");

//■町域の複数行に渡るかっこ書きを削除
//郵便番号の列を取得
this.docPCI.selection.SetActivePoint( eePosCellLogical, 3, 1 );
editor.ExecuteCommandByID(4461);//CSV文書で現在の列をヘディング無しで箱型選択モードで選択
sTmp = "\r\n" + this.docPCI.selection.Text;
aPostalCode = new Array();
aPostalCode = sTmp.split("\r\n");

//町域の列を取得
//this.docPCI.Activate();//文書をアクティブにします。
this.docPCI.selection.SetActivePoint( eePosCellLogical, 9, 1 );
editor.ExecuteCommandByID(4461);//CSV文書で現在の列をヘディング無しで箱型選択モードで選択
sTmp = "\r\n" + this.docPCI.selection.Text;//値を[1]以降に格納
aTyou = new Array();
aTyou = sTmp.split("\r\n");
sTmp = null;

this.docPCI.selection.Collapse();//選択状態をキャンセルします。
OutputBar.writeln("aPostalCode.length=" + aPostalCode.length);
OutputBar.writeln("aTyou.length=" + aTyou.length);

//最終行から開始行へ向かって処理を行う
fOkikae = false;//フラグ置き換えモード：終わり
re1 = new RegExp("^\"[^（]*）\"$");//'（'が無く、右端の'）'を検索(両端は'"')
re2 = new RegExp("^(\".+)（([^）]*)(\")");//'（'があり'）'が無い行を検索($1:開く括弧の前、$3:'"')
for(i = aTyou.length - 1; i >= 1; i--){
    if( ( aPostalCode[i] == aPostalCode[i-1] ) || fOkikae){//郵便番号が同じor置き換えモードの場合
        this.docPCI.selection.SetActivePoint( eePosCellLogical, 9, i );
        if( fOkikae ){
            if(aTyou[i].match(re2)){//'（'を検索
                this.log.push('i',this.docPCI.GetCell( i, 3, eeCellIncludeNone ),RegExp.$1 + RegExp.$3);
                this.docPCI.SetCell( i , 9, RegExp.$1 + RegExp.$3, eeDontQuote );//"（"以降の部分を削除
                fOkikae = false;//フラグ置き換えモード：終わり
            }else{
                //'（'の行と'）'の行の間の行(行をブックマーク)
                this.docPCI.selection.SelectLine();
                this.docPCI.selection.SetBookmark();
            }
        } else {
            if(aTyou[i].match(re1)){//'）'を検索
                this.docPCI.selection.SelectLine();
                this.docPCI.selection.SetBookmark();
                fOkikae = true;//フラグ置き換えモード：開始
            }
        }
    }
}

editor.ExecuteCommandByID(4589);//この文書のすべてのブックマークされた行を削除

OutputBar.writeln("○PostalCodeManage.cnv1(郵便番号管理.チェック１:end)");
};

//■■■■■■■■■■■■■■■■■■■■■■■■■■■
//【名称】郵便番号管理：チェック２
//【引数】なし
//【返却】なし
//【処理】this.docPCIの町域名(漢字)の置き換え
//【めも】
//■■■■■■■■■■■■■■■■■■■■■■■■■■■
PostalCodeManage.prototype.cnv2 = function(){
    OutputBar.writeln("○PostalCodeManage.cnv2(郵便番号管理.チェック２:start)");

//■町域の文字列を置き換え
this.docPCI.selection.SetActivePoint( eePosCellLogical, 9, 1 );//カーソル位置を設定
editor.ExecuteCommandByID(4461);//CSV文書で現在の列をヘディング無しで箱型選択モードで選択します。

//★文字列決め打ちで削除
this.docPCI.selection.Replace("以下に掲載がない場合","",eeFindReplaceSelOnly | eeReplaceAll,0);
this.docPCI.selection.Replace("(\".*)（(その他|丁目|番地|次のビルを除く|地階・階層不明|.*[、～].*|.*以上|.*以下)）(\")","\\1\\3",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

//★名駅ミッドランドスクエア（高層棟）（地階・階層不明）
this.docPCI.selection.Replace("(\".*)（高層棟）(.*\")","\\1\\2",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

//★三田市の次に番地がくる場合
this.docPCI.selection.Replace("\".*の次に番地がくる場合\"","\"\"",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

//★土樋（１丁目「１１を除く」） => 土樋（１丁目）
//★切畑（長尾山「その他」） => 切畑（長尾山）
this.docPCI.selection.Replace("(\".*（.*)「(.*を除く|その他)」(）\")","\\1\\3",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

//★音江町（国見その他） => 音江町（国見）
this.docPCI.selection.Replace("(\".*（.*)その他(）\")","\\1\\2",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

//★花田町官有地（無番地を除く）
//★芦田町福田（３７６－１０を除く）
//★津島町下畑地（乙を除く）
this.docPCI.selection.Replace("(\".*)（.*を除く）(\")","\\1\\2",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

//★厚内（全域） => 厚内
this.docPCI.selection.Replace("(\".*)（全域）(\")","\\1\\2",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

//■町域のかっこ"（" => "　"、"）" => ""へ
document.selection.Replace("(\".*)（(.*)）(\")","\\1　\\2\\3",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

OutputBar.writeln("○PostalCodeManage.cnv2(郵便番号管理.チェック２:end)");
};

//■■■■■■■■■■■■■■■■■■■■■■■■■■■
//【名称】郵便番号管理：チェック３
//【引数】なし
//【返却】なし
//【処理】this.docPCIの町域名(半角カタカナ)の置き換え
//【めも】
//■■■■■■■■■■■■■■■■■■■■■■■■■■■
PostalCodeManage.prototype.cnv3 = function(){
    OutputBar.writeln("○PostalCodeManage.cnv3(郵便番号管理.チェック３:start)");

//■町域の文字列を置き換え
this.docPCI.selection.SetActivePoint( eePosCellLogical, 6, 1 );//カーソル位置を設定
editor.ExecuteCommandByID(4461);//CSV文書で現在の列をヘディング無しで箱型選択モードで選択します。

//★開き括弧のみの場合、括弧以降を削除
re2 = new RegExp("^(\".+)\\(([^\\)]*)(\")");//'('があり')'が無い行を検索($1:開く括弧の前、$3:'"')
nLine = this.docPCI.GetLines();
for(i = 1; i < nLine ; i++){
    if(this.docPCI.GetCell( i, 6, eeCellIncludeQuotes ).match(re2)){//'('を検索
        this.docPCI.SetCell( i , 6, RegExp.$1 + RegExp.$3, eeDontQuote );//"（"以降の部分を削除
    }
}

//★文字列決め打ちで削除
this.docPCI.selection.Replace("ｲｶﾆｹｲｻｲｶﾞﾅｲﾊﾞｱｲ","",eeFindReplaceSelOnly | eeReplaceAll,0);
this.docPCI.selection.Replace("(\".*)\\((ｿﾉﾀ|ﾁｮｳﾒ|ﾊﾞﾝﾁ|ﾂｷﾞﾉﾋﾞﾙｦﾉｿﾞｸ|ﾁｶｲ･ｶｲｿｳﾌﾒｲ|.*[､\\-].*|.*ｲｼﾞｮｳ|.*ｲｶ)\\)(\")","\\1\\3",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

//★名駅ミッドランドスクエア（高層棟）
this.docPCI.selection.Replace("(\".*)\\(ｺｳｿｳﾄｳ\\)(.*\")","\\1\\2",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

//★三田市の次に番地がくる場合
this.docPCI.selection.Replace("\".*ﾉﾂｷﾞﾆﾊﾞﾝﾁｶﾞｸﾙﾊﾞｱｲ\"","\"\"",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

//★ﾂﾁﾄｲ(1ﾁｮｳﾒ<11ｦﾉｿﾞｸ>) => ﾂﾁﾄｲ(1ﾁｮｳﾒ)
//★ｷﾘﾊﾀ(ﾅｶﾞｵｻﾝ<ｿﾉﾀ>) => ｷﾘﾊﾀ(ﾅｶﾞｵｻﾝ)
this.docPCI.selection.Replace("(\".*\\(.*)<(.*ｦﾉｿﾞｸ|ｿﾉﾀ)>(\\)\")","\\1\\3",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

//★ｵﾄｴﾁｮｳ(ｸﾆﾐｿﾉﾀ) => ｵﾄｴﾁｮｳ(ｸﾆﾐ)
this.docPCI.selection.Replace("(\".*\\(.*)ｿﾉﾀ(\\)\")","\\1\\2",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

//★ﾊﾅﾀﾞﾁｮｳｶﾝﾕｳﾁ(ﾑﾊﾞﾝﾁｦﾉｿﾞｸ)
//★ｱｼﾀﾞﾁｮｳﾌｸﾀﾞ(376-10ｦﾉｿﾞｸ)
//★ﾂｼﾏﾁｮｳｼﾓﾊﾀｼﾞ(ｵﾂｦﾉｿﾞｸ)
this.docPCI.selection.Replace("(\".*)\\(.*ｦﾉｿﾞｸ\\)(\")","\\1\\2",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

//★ｱﾂﾅｲ(ｾﾞﾝｲｷ) => ｱﾂﾅｲ
this.docPCI.selection.Replace("(\".*)\\(ｾﾞﾝｲｷ\\)(\")","\\1\\2",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

//■町域(半角カタカナ)のかっこ"(" => " "、")" => ""へ
document.selection.Replace("(\".*)\\((.*)\\)(\")","\\1 \\2\\3",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

OutputBar.writeln("○PostalCodeManage.cnv3(郵便番号管理.チェック３:end)");
};

//■■■■■■■■■■■■■■■■■■■■■■■■■■■
//処理開始
//■■■■■■■■■■■■■■■■■■■■■■■■■■■

var startTime = new Date();
OutputBar.Visible = true;
OutputBar.Clear();
OutputBar.writeln("○(処理:start)");
Redraw = false;//ウィンドウの再描画:しない

docInFile = editor.ActiveDocument;
//文書を含むディレクトリのパスをファイル名を付けないで取得します。
sInFilePath = docInFile.Path;
//文書のファイル名をパスを付けないで取得します。
aInFileName = docInFile.Name.split(".");
//変換後書き出すファイル名
sOutFilePathName = sInFilePath + "\\" + aInFileName[0] + "_cnv.txt";
//ログ用ファイル名を設定
sLogFilePathName = sInFilePath + "\\" + aInFileName[0] + "_LOG.txt";

//CSV モードで列の数を取得します。文書が CSV モードでない場合は、0 を返します。
columnN = docInFile.GetColumns();
if(columnN != 15){
    alert( "列数エラー。列数は、" + columnN + "です。" );
    Quit();
}
//●ログ管理オブジェクトを作成
var log = new Log();
//●郵便番号管理オブジェクトを作成
var pcManage = new PostalCodeManage(docInFile,log);
//●町域名が複数行に渡る場合の処理
pcManage.cnv1a();//配列使用版
//pcManage.cnv1b();//match使用版
//●町域名（漢字）の置き換え
pcManage.cnv2();
//●町域名(半角カタカナ)の置き換え
pcManage.cnv3();

//●変換後のファイルを書き出す
pcManage.fWrite(sOutFilePathName,":1,:2,:3,:4,:5,:6,:7,:8,:9,:10,:11,:12,:13,:14,:15");
//pcManage.fWrite(sOutFilePathName,":3,:7,:8,:9"); //必要な列のみ指定する場合

//●ログファイル書き出し
log.fWrite(sLogFilePathName);

var endTime = new Date();
Redraw = true;//ウィンドウの再描画:する
alert("処理終了：" + (endTime - startTime)/1000 + "sec");
Quit();

補足

• 町域名(半角カタカナ)を利用しないのであれば、"pcManage.cnv3();"の処理は不要です。
• ログファイル部分の処理は変換処理には関係ありませんので、削除しても問題ありません。
• 出力ファイルの文字コードや改行コードなどを変更する場合は、"pcManage.fWrite()"を変更すればよいです。
• EmEditorでのcsvファイル操作のメモ書きとして

参考情報

• とほほのJavaScriptリファレンス
• EmEditor ヘルプ
• Google流JavaScriptにおけるクラス定義の実現方法(ES6以前)

APIを使用したアプリを作ってみる

背景

• APIを使用したアプリケーションが増えてきている
• APIを使用する、作るエンジニアの仕事も増えている
• APIを扱う技術の需要が増えそう

目次

• 0. 環境確認
• 1. APIの確認
• 2. プロジェクトの作成
• 3. サーバーエンドの実装
• 4. フロントエンドの実装
• 5. 動作確認
• 6. まとめ

0.環境確認

• OS： Windows10 home
• IDE : Eclipse(Photon 4.8)
• ビルドツール : Gradle
• サーバーサイド言語 : Java(1.8)
• JavaScript ライブラリ : jQuery(3.3.1)
• テンプレートエンジン : thymeleaf

1.APIの確認

• 以下のサイトからAPIの使用を確認します。
  https://zip-cloud.appspot.com/doc/api

• 仕様を確認します。

  • https://zip-cloud.appspot.com/api/search をベースにする
  • リクエストパラメータ

  パラメータ名	項目名	必須	備考
  zipcode	郵便番号	○	7桁の数字。ハイフン付きでも可。完全一致検索。
  callback	コールバック関数名	-	JSONPとして出力する際のコールバック関数名。UTF-8でURLエンコードした文字列。
  limit	最大件数	-	同一の郵便番号で複数件のデータが存在する場合に返される件数の上限値（数字）　※デフォルト：20

  • レスポンスパラメータ

  フィールド名	項目名	備考
  status	ステータス	正常時は 200、エラー発生時にはエラーコードが返される
  message	メッセージ	エラー発生時に、エラーの内容が返される。
  results	zipcode(郵便番号) prefcode(都道府県コード) address1(都道府県名) address2(市区町村名) address3(町域名) kana1(都道府県名カナ) kana2 (市区町村名カナ) kana3(町域名カナ)	複数の場合、配列となる

  • （例）郵便番号「7830060」で検索する場合
    • リクエストURL https://zip-cloud.appspot.com/api/search?zipcode=7830060
    • レスポンス
      
      { "message": null, "results": [ { "address1": "北海道", "address2": "美唄市", "address3": "上美唄町協和", "kana1": "ﾎｯｶｲﾄﾞｳ", "kana2": "ﾋﾞﾊﾞｲｼ", "kana3": "ｶﾐﾋﾞﾊﾞｲﾁｮｳｷｮｳﾜ", "prefcode": "1", "zipcode": "0790177" }, { "address1": "北海道", "address2": "美唄市", "address3": "上美唄町南", "kana1": "ﾎｯｶｲﾄﾞｳ", "kana2": "ﾋﾞﾊﾞｲｼ", "kana3": "ｶﾐﾋﾞﾊﾞｲﾁｮｳﾐﾅﾐ", "prefcode": "1", "zipcode": "0790177" } ], "status": 200 }

2.プロジェクトの作成

別の記事で詳細に紹介しているので、そちらを参照ください。
GradleのSpringBootプロジェクトを作成する

3.サーバーエンドの実装

• build.gradle

build.gradle

//中略
dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    compileOnly 'org.projectlombok:lombok'
    annotationProcessor 'org.projectlombok:lombok'
    compile("com.fasterxml.jackson.core:jackson-databind")
}

• Controllerクラス

FrontController.java

@Controller
public class FrontController {

    @Autowired
    private FrontService frontService;

    @RequestMapping({ "/", "/index" })
    public String index() {
        return "index";
    }
    @ResponseBody
    @RequestMapping(value = "/getAddress" ,method = RequestMethod.POST, produces="application/json;charset=UTF-8")
    public String getAddress(@RequestBody(required = false) AddressForm addressForm) {
        return frontService.getAddress(addressForm.getZipcode());
    }
}

• Serviceクラス

FrontService.java

public interface FrontService {
    public String getAddress(String zipCode);
}

FrontServiceImpl.java

@Service
public class FrontServiceImpl implements FrontService {

    /** 郵便番号検索API リクエストURL */
    private static final String URL = "https://zip-cloud.appspot.com/api/search?zipcode={zipcode}";

    @Override
    public String getAddress(String zipCode) {
        String zipCodeJson = restTemplate.getForObject(URL, String.class, zipCode);
        return zipCodeJson;
    }
}

• formクラス

AddressForm.java

@Data
public class AddressForm {

    /** 郵便番号 */
    String zipcode;
}

4.フロントエンドの実装

• html

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>address</title>
        <script type="text/javascript" th:src="@{/jquery/jquery-3.3.1.js}"></script>
        <script th:src="@{/js/index.js}"></script>
    </head>
    <body>
        <form name="getAddress">
            <input id="zipcode" type="text">
            <button type="button" id="getAddressBtn">住所取得</button>
            <div id="dispAddress"></div>
        </form>
    </body>
</html>

• JavaScript

index.js

$(function() {
    $('#getAddressBtn').on('click', function() {
        var params = {
                "zipcode" : $('#zipcode').val()
        };
        $.ajax({
            url : 'getAddress',
            type: 'POST',
            contentType: "application/json",
            data: JSON.stringify(params),
            dataType : 'json',
            async: false,
            success: function (data) {
                $("#dispAddress").empty();
                var dispAddress = document.getElementById("dispAddress");
                var table = document.createElement("table");
                table.setAttribute("border","2");
                table.setAttribute("cellpadding","15");
                table.setAttribute("style","margin :15px");

                $(data.results).each(function(index, result){
                    table.appendChild(createRow("郵便番号",result.zipcode));
                    table.appendChild(createRow("都道府県コード",result.prefcode));
                    table.appendChild(createRow("都道府県名",result.address1));
                    table.appendChild(createRow("市区町村名",result.address2));
                    table.appendChild(createRow("町域名",result.address3));
                    table.appendChild(createRow("都道府県名カナ",result.kana1));
                    table.appendChild(createRow("市区町村名カナ",result.kana2));
                    table.appendChild(createRow("町域名カナ",result.kana3));
                });
                dispAddress.appendChild(table);
            }
        });
    });
});

function createRow(header , value){
    var tr = document.createElement("tr");
    var th = document.createElement("th");
    th.append(header);
    var td = document.createElement("td");
    td.append(value);
    tr.appendChild(th);
    tr.appendChild(td);
    return tr;
}

5.動作確認

• ブラウザで「localhost:8080」にアクセス
  

• 「100-0001」（皇居の郵便番号）を入力して住所取得ボタン押下
  

• 住所が表示された。

6.まとめ

• APIを使用するのは簡単（認証機能付きはもう少し難しい）
• 他APIからデータ活用できる
• いろんなAPIを組み合わせて新しいサービスを作れそう。

前回の記事
https://qiita.com/furukouji/items/8d6bdad9d0c2fce011db

? 簡単な条件記入例（サラッと書きます）

const price = 99;

if (price >= 100){      //priceが100以上であるとき実行する
 console.log('値段は'+price+'円です');
};

if (price <= 100){     //priceが100以下であるとき
 console.log('お金が足りません。');
};

if (price != 100){       //！は否定形です。100ではないときコードを実行します。　また!==とすることで型の判定もできるので基本的にはこちらを使いましょう
 console.log('値段は'+price+'円です');
};

AND,OR,三項演算子について

AND　＝　条件を両方満たす場合実行する。コード上は　　&&　と書くと前述と同義となります
OR　 ＝　どちらかの条件を満たす場合実行する。コード上は ||　と書きます。(フォントの関係で斜めになってます)
ということでコードを書いていきましょう。

const signal_1 = 'red'
const signal_2 = 'yellow'

if(signal_1 ==='red' && signal_2'yellow'){
 console.log('赤と黄色です。');
}

if(signal_1'red' || signal_2 'yellow'){
 console.log('赤か黄色です');
}

AND,ORは基本的には記号が違うだけで使い方は変わりません！！

三項演算子について書いてきます。
三項演算子の基本の形は

条件　? 真 : 偽　

このような形になります。文字だけだと意味不明なので、実際にコードを書いていきます。

const point = 100 ;

const player = point > 100 ? 'good' : 'not good';  //pointが100より大きかったらgoodが低ければ not good　が値として返ります。

console.log(player);

このように一文でスッキリと書くことができるのでおすすめです！

今回は短いですがこのへんで！

? まとめ

• AND = && OR = ||
• 三項演算子の基本形は 条件　？　真: 偽
• 三項演算子のメリットは一文でスッキリ書ける

? 次回予告

次回は、内容未定です！
for文の内容にしようかと思っていますが
Node.jsの内容になるかもしれません！

*記事を見ていただいてありがとうございます。
ご指摘有りましたら編集リクエストまでドシドシお願いいたします!*

2020年5月13日、ついにver1.0がリリースされたDeno。
Node.jsとの違いをざっくりと解説します。

※以下、本記事の内容はDeno公式マニュアルの記述に基づきます

そもそもDenoって何なの？

DenoはJavaScriptおよびTypeScriptの実行環境です。
V8, Rust, およびTokioによって作られています。

え、Node.jsがあるじゃん？

Node.jsは2009年に誕生し、すでに10年を超える歴史を有しています。

たとえばNode.jsが生まれたとき、この世にPromiseはありませんでした。
2012年にはTypeScriptが生まれました。

この10年で、JavaScriptを取り巻く環境は大きく変わってしまったのです。

そして2020年。
Node.jsの問題を解決し、よりよい開発環境を提供するため、Node.jsの開発者であるライアン・ダールらの手によって生まれたのがDenoなのです（DenoはNodeのアナグラム）。

DenoはNode.jsとどこが違うのか

npmを使いません

モジュールは任意のURLまたはファイルパスからダウンロードされます。

import {hoge} from "fuga";

というNode.jsでの記述形式は、指定されたモジュールがどこにあるのか特定できないという問題を引き起こしていました。

fuga モジュールはNPMサーバにあるのかもしれないし、ローカルのnode_modulesフォルダにあるのかもしれません。

import {hoge} from "https://your.domain.com/fuga.ts";

とすることで、fugaライブラリの場所は一意に定まります。

またこれは同時に、package.jsonに相当するしかけを必要としないことをも意味します。

URLやファイルパスがそのままバージョンの指定にもなっていれば、わざわざ別ファイルでその依存性情報まで管理する必要はないからです。

TypeScriptを標準でサポートします

追加のライブラリをインストールすることなく、TypeScriptをコンパイルしてくれます。

コンパイルは自動的に行われるので、コマンドを叩く必要もありません。

セキュアです

明示的に許可されない限り、denoはネットワーク接続もファイル読み取りもできません。

例として、標準ライブラリとして公開されているcurl.tsでURLへのアクセスを試してみるとエラーが返ります。

$> deno run https://deno.land/std/examples/curl.ts https://example.com
error: Uncaught PermissionDenied: network access to "https://example.com/", run again with the --allow-net flag

接続許可するドメインを--allow-netフラグに設定することで初めて、URLへのアクセスが可能になります。

deno run --allow-net=example.com https://deno.land/std/examples/curl.ts https://example.com

よくわからないNPMパッケージを走らせたら、変なURLに接続されたりファイルシステムを触られたりするのではないか……という恐怖ともこれでおさらばです。

詳細: https://deno.land/manual/getting_started/permissions

標準テストランナーがあります

Deno.testを使えば、ライブラリをインストールすることなくテストを実行できます。

Deno.test("Hello deno test", () => {
  const foo: string = "Hello";
  if (foo !== "Hello") {
    throw ("foo should be Hello.");
  }
});

アサーションライブラリも用意されています。

import { assertEquals } from "https://deno.land/std/testing/asserts.ts";
Deno.test("Hello assertion", () => {
  const foo: string = "Hello";
  assertEquals(foo, "Hello");
});

実行するときは deno test [files] コマンドを叩くだけ。かんたん！

詳細: https://deno.land/manual/testing

非同期のアクションはすべてPromiseを返します

Webサーバを記述する場合、Node.jsではこんな感じでしたが

var http = require('http');

http.createServer(function (req, res) {
  res.write('Hello World!');
  res.end();
}).listen(8080);

出典: https://www.w3schools.com/nodejs/nodejs_http.asp

Denoではawaitを使ってこんな感じになります。

import { serve } from "https://deno.land/std/http/server.ts";
const s = serve({ port: 8080 });
for await (const req of s) {
  req.respond({ body: "Hello World!\n" });
}

出典: https://deno.land/std/http

予期せぬエラーが発生した場合は"常に"処理を終了します

Uncaught Exceptions in Nodeなどの記事に見られるように、Node.jsでは捕捉できないエラーをどう扱うかは開発者に任せられていました。

処理を終了させてもいいし、もみ消して続行させることもできました。

Denoでは常に処理が終了します。常にです。

おまけ

Node.jsが抱える問題点、およびDenoが目指すゴールについては、ライアン・ダール自らによる以下のプレゼンテーションを見るとわかりやすいです。
Node.jsに関する10の反省点 Ryan Dahl - JSConf EU 2018

0.はじめに

こんにちは。
エンジニアしている @gkzz です。

JavaScriptのお勉強をしているのですが、Google JavaScript Style Guideを読んでいて気になった箇所がありました。

5.2.2 Do not use the variadic Array constructor
The constructor is error-prone if arguments are added or removed. >Use a literal instead.

Disallowed:

const a1 = new Array(x1, x2, x3);
const a2 = new Array(x1, x2);
const a3 = new Array(x1);
const a4 = new Array();

そういえば、[]とnew Array()。
違いってあるのだろうか。
気になってしまったので、早速調べて、まとめました。

1.非推奨のArrayコンストラクターを使った場合

let data2 = new Array(10);

console.log("data2: " + data2);
console.log("data2[0]: " + data2[0]);
console.log("data2.length: " + data2.length);

console.log("#######################");

data2[0] = 10;

console.log("data2: " + data2);
console.log("data2[0]: " + data2[0]);
console.log("data2.length: " + data2.length);

data2: ,,,,,,,,,
data2[0]: undefined
data2.length: 10
#######################
data2: 10,,,,,,,,,
data2[0]: 10
data2.length: 10

ポイント

• new Array(10)とは、lengthが10である配列を定義
  • ひとつひとつの要素はカラであり、undefinedとなる
  • 要素を定義する場合、data2[0] = 10;とする必要がある
• 一方、new Array("10")と文字列の場合、lengthが1である配列を定義
  • data[0]の値は文字列の10
• 「new Array()の使いどころ」にてコンストラクターの使いどころについて後述

2.推奨されている配列の書き方

左記のGoogle JavaScript Style Guideには、推奨された書き方も紹介されています。

Instead, write
const a1 = [x1, x2, x3];
const a2 = [x1, x2];
const a3 = [x1];
const a4 = [];

先ほどと同様、出力結果も確認してみましょう。

let data1 = [10];

console.log("data1: " + data1);
console.log("data1[0]: " + data1[0]);
console.log("data1.length: " + data1.length);

console.log("#######################");

data1[0] = 1;

console.log("data1: " + data1);
console.log("data1[0]: " + data1[0]);
console.log("data1.length: " + data1.length);

data1: 10
data1[0]: 10
data1.length: 1
#######################
data1: 1
data1[0]: 1
data1.length: 1

ポイント

• let data = [10]とは、lengthが1であり、data[0]の値は10ことを定義
  • data1[0]がundefinedではなく、格納した値が入っている

3.new Array()の使いどころ

new Array()の使いどころが気になったので、調べたところ、下記の記事が参考になったので、引用させていただきます。

一つずつ要素を入れて配列長をじわじわ伸ばしていくより、最初にまとめて確保しておいた方が軽いという理屈だ。
古いJavaScriptエンジンでは有効なテクニックだったのだが、エンジンの進歩により、逆転現象が起きている。V8で測定すると[]を使った方が2倍ほど速かった。

というわけで、 今の時代、タイプ数の多い new Array をあえて使う必要はない。

出所：new Array()と[]の違い

[]とnew Array()。
配列を扱いたい場合、[]でOKということですよね。

p.s.JavaScriptにおいてメモリが解放されるタイミングはいつなのか

メモリはいつ開放されるのか？という点も気になったので、こちらについても私の理解と参考になった箇所を書き留めておきます。

• メモリが開放されるタイミングは分からない
• ある領域にオブジェクトが管理されていてだれからも参照されなくなったら回収されると理解すればよさそう

JavaScript(ECMAScript)の仕様では、いつメモリが解放されるのかは定められていません。GC(ガベージコレクション)がいつ動作するのか、また、そのGCで回収されるのかはJavaScriptエンジンによって異なり、一概には言えません。
(中略)
ある領域にオブジェクトが管理されていてだれからも参照されなくなったら回収されるというのが肝心な点なのでそこだけぶれなければOKじゃないでしょうか。

出所：javascriptの変数のメモリへの割当について

んー。。

分かったようなわからないような汗。

>ある領域にオブジェクトが管理されていてだれからも参照されなくなったら回収されるというのが肝心な点なのでそこだけぶれなければOKじゃないでしょうか。

「javascriptの変数のメモリへの割当について」 https://t.co/mDaMOvK55p #teratail

— gakuji tamaki (@gkzvoice) May 16, 2020

P.P.S. Twitterもやってるのでフォローしていただけると泣いて喜びます:)

@gkzvoice

はじめに

ある程度プログラミングできるようになったけど、レベルを上げるためにどうやって勉強したらいいのかわからない人向けの勉強法です。

何か困った時、プログラマーならまずライブラリーを探すかと思います。

探したライブラリーのGitHubにコードを見に行った時に⭐️がゼロだったらスルーしてしまうかもしれないですが それは非常にもったいないです。

具体的にどういう風にもったいないか説明します。

ある日のこと

.svgなファイルをrequireしたらどうなるのかなって思ってreuqireしたらエラーになりました。

$ node
Welcome to Node.js v12.7.0.
Type ".help" for more information.
> var sprites = require('./src/assets/svg-sprites.svg')
Thrown:
/Users/yukihirop/JavaScriptProjects/sample/src/assets/svg-sprites.svg:1
<svg width="0" height="0" class="hidden" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
^

SyntaxError: Unexpected token <
>

なんか読み込めるようにするライブラリーないか探したところ、 inline-svg-registerというものを見つけたのですが、?がゼロでした。(今は一個あります。色々勉強になったので私がつけました。)

「星ないのかー...」って思ったのですが、使い方はシンプルなので使ってみました。

$ yarn -D add inline-svg-register
$ node
Welcome to Node.js v12.7.0.
Type ".help" for more information.
> var unhook = require("inline-svg-register")
undefined
> var sprites = require("./src/assets/svg-sprites.svg")
undefined
> sprites
'<svg width="0" height="0" class="hidden" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <!-- yukihirop -->

エラーも起きずに文字列で出力されるようになりました。

知識の獲得

すぐに仕組みが気になりました。 100行程度の index.js しかないしコード見てみるかと思って見たら、ラッキーな事に babel-register のコードを参考にして作ったとあったので読んで見ました。

そこで以下の知識を得ました。

• nodeの require は require.extensions という関数を使って、拡張子で判定してコンパイルできる。
  • だが、require.extensions は非推奨。
  • 非推奨どうしたらいいのかstackoverflowを見たのですが、ピシャッとくる回答がない。

するとすぐに次のような興味が湧きました。

現在のbabel-register では当然非推奨の対応をしてあるだろう。もしかしたら、babel-register での非推奨対応のPRを見つけたら勉強になるかもしれないぞと思って、babel-registerのコードのコードを見に行きました。

?実際にbabel-registerのコードが差し替えられた時のPRはこちら

すると現在では、require.extensions が使われておらず、pirates というものが使われている事を知りました。

pirates って何だろうって思ってコードを見に行ったらこれまたラッキーな事に index.js しかなく100行程度だったので読んでみました。

そこで以下の知識を得ました。

• nodeのビルトインModuleのModule._extensions をうまく使って拡張子で判定してコンパイルできるようにしている事を知りました。
  • ビルトインモジュールに機能拡張しているライブラリーを見たのは初めてでした。新鮮でした。

使い方が簡単だったので、すぐに inline-svg-register のコードに還元してやろうと思いました。

知識の還元

得た知識はすぐに使ったほうが定着がいいと思ったのですぐに知識の還元を行いました。

• inline-svg-register で pirates を使うようにしてPRを送りました。
• stackoverflowに回答を書きました。こちら

まとめ

「svgファイルをrequireで読み込んで見たい」って思っただけで思わぬ収穫がありました。

知識獲得フェーズ

• babel-register というコードが何をするのか想像ができた。
• require.extensions という関数で拡張子毎にコンパイルを変えれるが非推奨である。
• require.extensions の代わりに pirates というライブラリーが使われているようである。

知識還元フェーズ

• 知見を得るきっかけになった inline-svg-register にPRを送った。
• require.extensions の代わりに何を使えばいいか困っている人に回答を書いた。
• この記事を書いた。

いつもこんなラッキーが続くとは思いませんが、たまには index.js だけのライブラリーを読んでみるもの面白いかなって思います。

以上です。

はじめまして。ひょんなことからVtuberにハマり、色々な物を書いている夕星（ゆうづつ）と申します。
この度、推しのプレイリストが欲しいなぁという欲望の結果、簡素ながらもそれなりに動く物が出来たので備忘録を兼ねて記します。

まず完成品がこちらになります。
加賀美ハヤト「ロックコンピ」プレイヤー｜夕星の長い話置き場
（にじさんじ所属Vtuber「加賀美ハヤト」の配信から楽曲を抜粋したリストです）

概要

構成は静的HTML＋ピュアJavascript（Youtube Iframe API使用）。
ネットに繋がってさえいればローカルでも動作しますので、自分用かWebサイトに載せて仲間内で楽しむ等の用途が想定されます。
なおAPIの利用規約はご自身で最新版をご確認ください。（基本は非営利利用限定の様子？）

動画の再生数は本家にカウントされ、広告も再生されます。
「切り抜き動画では本家に還元されない」「プレイリストだと動画丸ごとしか再生出来ない」「作業BGMとして良い場面だけリピート再生したい」という悩みやニーズに応えてます。
（あと上手くやるとスマホでバックグラウンド再生出来たりもします）

ソースコード

ほぼ最小構成が以下です（リストが必要無いなら更に削れます）。デザイン等はご自由に調整ください。
かなり雑でDOM構成もやっつけなので、実際に使用する場合はご利用中の環境に合わせて適宜編集推奨です。

少し長いので折り畳んでいます

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ページタイトル</title>

    <style type="text/css">
      #playlist {
        background-color: black;
        color: #aaaaaa;
      }
      .playparts {
        padding: 10px;
        cursor: pointer;
      }
      .playparts:not(:last-child) {
        border-bottom: 1px #aaa solid;
      }
      .songtitle {
        color:white;
      }
    </style>
  </head>
  <body>
    <div id="player"></div>
    <div id="playlist"></div>

    <script>
      // 動画リスト
      var playList = [
        {videoId:'',startSeconds:0, endSeconds:0, title:'', artist:''},
      ];

      // Iframe APIの準備
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // プレイヤーの設定
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '360',
          width: '640',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // プレイヤーの準備完了後の処理（最初の動画のセット）
      var isReady = false;
      var nowPlaying = 0;
      var isNextVideo = false;
      function onPlayerReady(event) {
        player.cueVideoById(playList[nowPlaying]);
        document.getElementById("song"+nowPlaying).style.color = 'red';
        isReady = true;
      }

      // プレイヤーの状態が変化した時の処理（次の動画へ進む）
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED && !isNextVideo) {
          document.getElementById("song"+nowPlaying).style.color = 'white';
          nowPlaying += 1;
          if (playList.length <= nowPlaying) nowPlaying = 0;
          isNextVideo = true;
          player.loadVideoById(playList[nowPlaying]);
          document.getElementById("song"+nowPlaying).style.color = 'red';
        } else if (event.data == YT.PlayerState.PLAYING && isNextVideo) {
          isNextVideo = false;
        }
      }

      // リストの表示
      function showList () {
        var parent = document.getElementById("playlist");
        for (let i = 0; i < playList.length; i++) {
          // 動画の時間計算
          var min = Math.floor((playList[i].endSeconds - playList[i].startSeconds) / 60);
          var sec = ( '00' + (playList[i].endSeconds - playList[i].startSeconds) % 60 ).slice( -2 );

          // 要素を記述
          var parts = document.createElement("div");
          parent.appendChild(parts);
          var html = '<p><span class="songtitle" id="song'+i+'">';
          html += playList[i].title;
          html += '</span><span class="time">（'+min+':'+sec+'）</span></p><p class="artist">';
          html += playList[i].artist;
          html += '</p>';
          parts.innerHTML += html;

          parts.classList.add("playparts")
          parts.addEventListener("click", () => { pushList(i+""); }, false);
        }
      }
      showList();

      // リストをクリックされた時の処理
      function pushList (id) {
        if (!isReady) return;
        document.getElementById("song"+nowPlaying).style.color = 'white';
        nowPlaying = Number(id);
        player.loadVideoById(playList[nowPlaying]);
        document.getElementById("song"+nowPlaying).style.color = 'red';
      }
    </script>
  </body>
</html>

動画リストの設定

playListの中にオブジェクトを突っ込みます。
videoId, startSeconds, endSeconds はAPIで必要な情報なのでプロパティ名変更不可。
それ以外はリストで表示する為の情報なのでお好きに変更可能です。

プロパティ名	内容
videoId	動画のID。動画のURLに含まれています。（もしURLが「https://youtu.be/fGvYwVW38mc」なら「fGvYwVW38mc」がIDです）
startSeconds	開始地点の秒数。
endSeconds	終了時点の秒数。動画まるごとの場合は「0」指定でも動きます。

以下、設定例です。

var playList = [
  {videoId:'fGvYwVW38mc',startSeconds:0, endSeconds:262, title:'WITHIN', artist:'加賀美ハヤト'},
  {videoId:'SSY5z5vUgHA',startSeconds:462, endSeconds:616, title:'どうにもとまらない', artist:'9mm Parabellum Bullet（山本リンダ）'},
  {videoId:'Wq8i7lJVYGw',startSeconds:1062,endSeconds:1330, title:'ソラニン', artist:'ASIAN KUNG-FU GENERATION'},
  {videoId:'MpBnxbMzaXA',startSeconds:0,endSeconds:260, title:'シュガーソングとビターステップ（with SMC組）', artist:'UNISON SQUARE GARDEN'}
];

その他技術的な話

基本的に全部公式リファレンスに書いてあります。というか半分ここのコピペです。
iframe 組み込みの YouTube Player API リファレンス | YouTube IFrame Player API

但し動画のデータがオブジェクト型でないとendSecondsが使えません。上記ページのコピペだと最初の動画をオブジェクト型で渡せませんでした。
その為にnew YT.Player時点では動画を指定せず、onPlayerReadyでcueVideoByIdを使っています。
今回は開始時にワンクリック挟みたかったのでわざとcueVideoByIdとしていますが、loadVideoByIdにすると勝手に再生が始まります。

最後に

分かってしまえばとても手軽に使えますので、自分の推しのも作りたい！と思った方はご参考にして頂けるととても嬉しいです。
（Twitterで「使ったよ！」と一声頂けたら喜び勇んで見に行きます）

対象読者

• デザインパターンを学習あるいは復習したい方
• TypeScriptが既に読めるあるいは気合いで読める方
  • いずれかのオブジェクト指向言語を知っている方は気合いで読めると思います
• UMLが既に読めるあるいは気合いで読める方

環境

• OS: macOS Mojave
• Node.js: v12.7.0
• npm: 6.14.3
• TypeScript: Version 3.8.3

本シリーズ記事一覧(随時更新)

• TypeScriptで学ぶデザインパターン〜Iterator編〜
• TypeScriptで学ぶデザインパターン〜Adapter編〜
• TypeScriptで学ぶデザインパターン〜Template Method編〜
• TypeScriptで学ぶデザインパターン〜Factory Method編〜
• TypeScriptで学ぶデザインパターン〜Singleton編〜
• TypeScriptで学ぶデザインパターン〜Prototype編〜
• TypeScriptで学ぶデザインパターン〜Builder編〜
• TypeScriptで学ぶデザインパターン〜Abstract Factory編〜
• TypeScriptで学ぶデザインパターン〜Bridge編〜
• TypeScriptで学ぶデザインパターン〜Strategy編〜
• TypeScriptで学ぶデザインパターン〜Composite編〜
• TypeScriptで学ぶデザインパターン〜Decorator編〜
• TypeScriptで学ぶデザインパターン〜Visitor編〜
• TypeScriptで学ぶデザインパターン〜Chain of Responsibility編〜
• TypeScriptで学ぶデザインパターン〜Facade編〜
• TypeScriptで学ぶデザインパターン〜Mediator編〜
• TypeScriptで学ぶデザインパターン〜Observer編〜
• TypeScriptで学ぶデザインパターン〜Memento編〜

Mementoパターンとは

オブジェクトのある時点における状態の保存や復元を可能にするためのパターンです。

DBのリストアやundoのようなイメージをしておくとわかりやすいと思います。

サンプルコード

Mementoパターンで作られたクラス群がどんなものになるのか確認していきましょう。

今回は、題材として"undoができるエディタ"を想定します。GitHubにも公開しています。

modules/Memento.ts

エディターの状態を表現するクラスです。

Memento.ts

export default class Memento {
  protected text: string;

  protected constructor(text: string) {
    this.text = text;
  }

  public getText(): string {
    return this.text;
  }
}

全てのクラスから状態を操作できないようにするためgetText以外はprotectedになっています。

modules/Editor.ts

エディターを表現するクラスです。Mementoを継承しています。

Editor.ts

import Memento from "./Memento";

export default class Editor extends Memento {
  constructor(text: string) {
    super(text);
  }

  setText(text: string): void {
    this.text = text;
  }

  createMemento(): Memento {
    const memento: Memento = new Memento(this.text);

    return memento;
  }

  restoreMemento(memento: Memento): void {
    this.text = memento.getText();
  }
}

setTextではエディターでいうところの文字を入力している状態をイメージしてください。
createMementoでは呼び出し時点におけるエディターの状態をMementoに保存しています。
restoreMementoではMementoが保持している状態で上書きしてundoを実現します。

Main.ts

どの時点のエディターの状態を保持するか等の指示をエディターに出す処理が書かれています。

Main.ts

import Editor from "./modules/Editor";
import Memento from "./modules/Memento";

const editor: Editor = new Editor('こんにちは');
const memento: Memento = editor.createMemento();
console.log(editor.getText());

editor.setText('こんにちは！！！');
console.log(editor.getText());

editor.restoreMemento(memento);
console.log(editor.getText());

まず、"こんにちは"とエディターに（擬似的に）入力します。次にこの状態でMementoを作成して保存します。
次に、"こんにちは！！！"とエディターに入力します。当然エディアーには"こんにちは！！！"と（擬似的に）表示されています。
最後に、restoreMementoを呼び出して"こんにちは"という状態に戻します。

クラス図

ここまでMementoパターンで作られたクラス群を1つずつ確認してきました。次にクラス図を示します。Mementoパターンの全体像を整理するのにお役立てください。

• Memento: サンプルコードではMementoクラスが対応
• Originator: サンプルコードではEditorクラスが対応
• Caretaker: サンプルコードではMainが対応

※LucidChartを使用して作成

2点補足をします。

1点目はMementoのgetProtectedInfoとgetPublicInfoについてです。MementoはCaretakerから一部メソッドを隠蔽しないといけません。たとえば、Mementoの状態を自由自在に変更できてしまうと困ります。以前の状態を保持しておきたいのにその以前の状態がどこからでも操作できてしまうと以前の状態とは言えない状態になってしまうからです。そういう意味で、Mementoに値を設定する処理(サンプルコードだとconstructor)はOriginatorからしか行えないようになっています。そういった処理はgetProtectedInfoとしてカプセル化します。一方で、Caretakerからアクセスされても問題ない処理（サンプルコードだとgetText）はpublicで実装しても問題ありません。そういった処理はgetPublicInfoとして定義します。

2点目はサンプルコードとクラス図の差異です。サンプルコードではMementoをEditorは継承しています。一方で、クラス図では継承という関係にはなっていません。これには言語の違いが背景にあります。たとえばJavaでは継承を使わずとも「あるパッケージ内からアクセス可能」というアクセス制御が可能です。こういったアクセス制御が可能であることが意味することは、getProtectedInfoとgetPublicInfoを継承を用いずとも分けることができるのです（クラス図通りになる）。1点目であげたアクセス制御は本デザインパターンにとって非常に重要なのでこれが実現できないと困ります。一方で、TypeScriptではJavaであげたように「あるクラスからしかアクセスさせない」といったアクセス制御ができません（※1）。そのため、継承を用いることによってアクセス制御を実現しているのです。

(※1)
十分調査したつもりではありますがもし私が誤解していることがあったら修正いたします。

解説

最後に、このデザインパターンの存在意義を考えます。

クラス図のところでほとんど解説してしまったのですが、カプセル化を実現しつつ保存や複製が可能になるというメリットがあります。ある状態を保存して復元しようとしたら対象クラスの様々なメソッドがpublicになってしまって、カプセル化の破壊を引き起こしてしまうことがあります。それを避けつつ復元ができるようになるのです。

補足

サンプルコードの実行方法はこちらと同様です。

参考

• 増補改訂版Java言語で学ぶデザインパターン入門

あとがたり

これ考えた人すごいな。

自分用
詰め込みすぎだけど色々なアプリで使うため

<input type="file" accept="image/*" style="display:none;" @change="upload"/>
<canvas id="canvas" hidden></canvas>

    upload(ev) {
      const TRIM_SIZE = 512
      let blob = null
      const storageRef = firebase.storage().ref()
      if (!ev) return
      const file = ev.target.files[0]
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        return
      }
      const image = new Image()
      const reader = new FileReader()
      reader.onload = e => {
        image.onload = () => {
          let width, height, xOffset, yOffset
          if (image.width > image.height) {
            height = TRIM_SIZE
            width = image.width * (TRIM_SIZE / image.height)
            xOffset = -(width - TRIM_SIZE) / 2
            yOffset = 0
          } else {
            width = TRIM_SIZE
            height = image.height * (TRIM_SIZE / image.width)
            yOffset = -(height - TRIM_SIZE) / 2
            xOffset = 0
          }
          const canvas = $('#canvas')
            .attr('width', TRIM_SIZE)
            .attr('height', TRIM_SIZE)
          const ctx = canvas[0].getContext('2d')
          ctx.clearRect(0, 0, width, height)
          let orientation = ''
          EXIF.getData(file, () => {
            orientation = file.exifdata.Orientation
            switch (orientation) {
              case 2:
                ctx.transform(-1, 0, 0, 1, width, 0)
                break
              case 3:
                ctx.transform(-1, 0, 0, -1, width, height)
                break
              case 4:
                ctx.transform(1, 0, 0, -1, 0, height)
                break
              case 5:
                ctx.transform(0, 1, 1, 0, 0, 0)
                break
              case 6:
                ctx.transform(0, 1, -1, 0, height, 0)
                break
              case 7:
                ctx.transform(0, -1, -1, 0, height, width)
                break
              case 8:
                ctx.transform(0, -1, 1, 0, 0, width)
                break
              default:
                break
            }
            ctx.drawImage(image, xOffset, yOffset, width, height)
            const base64 = canvas.get(0).toDataURL('image/jpeg')
            const bin = atob(base64.split('base64,')[1])
            const len = bin.length
            const barr = new Uint8Array(len)
            let i = 0
            while (i < len) {
              barr[i] = bin.charCodeAt(i)
              i += 1
            }
            blob = new Blob([barr], { type: 'image/jpeg' })
            ctx.clearRect(0, 0, width, height)
            const uploadRef = storageRef.child(//パス
            )
            uploadRef.put(blob).then(() => {
              uploadRef.getDownloadURL().then(url => {
                //URLをどうにかする処理
              })
            })
          })
        }
        image.src = e.target.result
      }
      reader.readAsDataURL(file)
    },

Vue.jsとは

Vue.jsはUI構築のためのJavaScriptプログレッシブフレームワークのこと
Vue.js公式サイト

基本的な書き方

HTML

<div id="app">
  <!-- Vue.js適用範囲 -->
</div>

Vue

var vm = new Vue({
  el: '#app'
});

オプション

el

Vue.jsの機能を適用するDOMの指定

See the Pen
Vue.js_el by engineerhikaru (@engineerhikaru)
on CodePen.

data

データを保持する(データの変数化)。{{ 変数名 }}で出力可能

See the Pen
Vue.js_data by engineerhikaru (@engineerhikaru)
on CodePen.

methods

v-onのイベントハンドラとして使用

See the Pen
Vue.js_ methods by engineerhikaru (@engineerhikaru)
on CodePen.

computed

算出プロパティ。データの自動更新をし、計算結果はキャッシュに保存。getでは必ず戻り値が必要

See the Pen
Vue.js_ computed by engineerhikaru (@engineerhikaru)
on CodePen.

watch

監視プロパティ。特定のプロパティの値の変更を監視し、変更時に設定した関数を実行

See the Pen
Vue.js_watch by engineerhikaru (@engineerhikaru)
on CodePen.

template

文字列,HTMLコードをテンプレート化する。コンポーネント機能と共に使用

See the Pen
Vue.js_template by engineerhikaru (@engineerhikaru)
on CodePen.

props

コンポーネント機能でデータを参照する

See the Pen
Vue.js_props by engineerhikaru (@engineerhikaru)
on CodePen.

created

インスタンスが作成された後(DOMは生成されていない)に実行するオプション

See the Pen
Vue.js_created by engineerhikaru (@engineerhikaru)
on CodePen.

mounted

DOMが生成された後に実行するオプション

See the Pen
Vue.js_mounted by engineerhikaru (@engineerhikaru)
on CodePen.

ディレクティブ

v-text

テキストデータを出力

See the Pen
Vue.js_v-text by engineerhikaru (@engineerhikaru)
on CodePen.

v-html

HTMLデータを出力

See the Pen
Vue.js_v-html by engineerhikaru (@engineerhikaru)
on CodePen.

v-show

条件分岐(createdフックは最初のみ実行)

See the Pen
Vue.js_v-show by engineerhikaru (@engineerhikaru)
on CodePen.

v-if, v-if-else, v-else

条件分岐

See the Pen
Vue.js_v-if by engineerhikaru (@engineerhikaru)
on CodePen.

v-for

ループする

See the Pen
Vue.js_v-for by engineerhikaru (@engineerhikaru)
on CodePen.

v-on, @

イベントを処理する

See the Pen
Vue.js_v-on by engineerhikaru (@engineerhikaru)
on CodePen.

v-bind, :

HTMLの属性を指定する

See the Pen
Vue.js_v-bind by engineerhikaru (@engineerhikaru)
on CodePen.

v-model

入力データと指定したデータをリンクする

See the Pen
Vue.js_v-model by engineerhikaru (@engineerhikaru)
on CodePen.

v-pre

{{}}をそのまま表示する

See the Pen
Vue.js_v-pre by engineerhikaru (@engineerhikaru)
on CodePen.

v-cloak

{{}}が表示されるのを防ぐ(最初に表示される事がある)

See the Pen
Vue.js_v-cloak by engineerhikaru (@engineerhikaru)
on CodePen.

v-once

レンダリングを一度だけ実行(データの変更を適用しない)

See the Pen
Vue.js_v-once by engineerhikaru (@engineerhikaru)
on CodePen.

グローバル設定

silent

警告,エラーメッセージの表示,非表示を指定する

Vue

Vue.config.silent = true;

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
Vue.jsチートシート | コレワカ

目的

• 今週から本配属だった
• 結局Javaを勉強することになった
• 記憶が新しいうちにJavaとPythonでちがったことまとめておこう
• ついでに少し勉強したことがあるJavaScriptも引っ張り出して比較しよう

この記事で比較する内容

• 変数
• if文
• while文
• for文

変数

Python

• データ型を宣言する必要はありません
  • 変数の中身によって勝手に型を指定してくれます
• セミコロンもいりません

asobi.py

py_str = "Python"
py_int = 23
py_float = 23.5

# データ型確認
print(type(py_str))
print(type(py_int))
print(type(py_float))

コンソール

<class 'str'>
<class 'int'>
<class 'float'>

• 変数のデータ型を書きかえることもできます

asobi.py

py_str = "Python"
py_int = 23

print(type(py_str))

py_str = 10
print(type(py_str))

py_cal = py_str * py_int
print(py_cal)

コンソール

<class 'str'>
<class 'int'>
230

Java

• データ型を宣言しなければなりません
  • float型もありますが、主にdouble型を使うようです
  • 直接的にデータ型を確認する方法は見つかりませんでした(instanceofというメソッドがあるようですが、intやdoubleには使えません)
  • Javaのデータ型についてはこちらのサイトがわかりやすいです
• セミコロンを忘れずに

asobi.java

public class asobi {
    public static void main(String[] args) {
        String javaStr = "Java";
        int javaInt = 23;
        double javaFloat = 23.5;
    }
}

JavaScript

• データ型の宣言は必要ありませんが、変数名の前にvarをつける必要があります
  • int型やfloat型ではなくどちらもnumber型になるんですね…
• セミコロンもいります

asobi.html

<html>
<script>
var jsStr = "JavaScript";
var jsInt = 23;
var jsFloat = 23.5;

// データ型確認
console.log(typeof(jsStr));
console.log(typeof(jsInt));
console.log(typeof(jsFloat));
</script>
</html>

コンソール

string
number
number

if文

Python

• if, elif, elseが使われます
• 条件の末尾に:を付けます
• 実行する文のインデントは必須です

asobi.py

age = 23

if age >= 65:
    print("定年です")
elif age >= 20:
    print("成人です")
else:
    print("未成年です")

Java

• if, else if, elseが使われます
• それぞれの条件を(), 実行する文を{}で囲います

asobi.java

public class asobi {
    public static void main(String[] args) {
        int age = 23;

        if (age >= 65) {
            System.out.println("定年です");
        }else if (age >= 20) {
            System.out.println("成人です");
        }else{
            System.out.println("未成年です");
        }
    }
}

JavaScript

• if, else if, elseが使われます
• それぞれの条件を(), 実行する文を{}で囲います
• if文の形自体はJavaと同じですね

asobi.html

<html>
<script>
var age = 23;

if (age >= 65) {
    console.log("定年です");
}else if (age >= 20){
    console.log("成人です");
}else{
    console.log("未成年です");
}
</script>
</html>

while文

• それぞれの言語で以下のようにコンソール表示させてみましょう

コンソール

0です
1です
2です
3です
4です

Python

• int型であるiと文字列をそのままつなげることができないので、iをstr型にします

asobi.py

i = 0

while i < 5:
    print(str(i) + "です")
    i += 1

Java

• 例によって条件を()、実行文を{}で囲います
• インクリメントでi++という形を使うことができます

asobi.java

public class asobi {
    public static void main(String[] args) {
        int i = 0;
        while (i < 5){
            System.out.println(i + "です");
            i++;
        }
    }
}

JavaScript

• 例によってwhile文の形自体はJavaと同じです

asobi.html

<html>
<script>
var i = 0;

while (i < 5){
    console.log(i + "です");
    i++;
}
</script>
</html>

for文

• それぞれの言語で以下のようにコンソール表示させてみましょう

コンソール

0です
1です
2です
3です
4です

Python

• iが0から4までの5回の範囲で繰り返されます

asobi.py

for i in range(5):
    print(str(i) + "です")

Java

• for文の繰り返し条件が(初期値; 範囲; 増減)で表されます
  • 初期値を格納する変数はデータ型を宣言する必要があります

asobi.java

public class asobi {
    public static void main(String[] args) {
        for (int i = 0; i < 5; i++){
            System.out.println(i + "です");
        }
    }
}

JavaScript

• 例によってfor文の形自体はJavaと同じです
  • 初期値を格納する変数名の前にはvarを付ける必要があります

asobi.html

<html>
<script>
for (var i = 0; i < 5; i++){
    console.log(i + "です");
}
</script>
</html>

感想

• 複数言語を勉強するとき、比較しながら勉強すると覚えやすい
• JavaとJavaScript、インドとインドネシア並にちがうといいつつ、書き方結構似てるんだな
• やっぱりPythonがいちばん書きやすい！