SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

monaco-editor + electronのサンプルコードを更新しました

以前、monaco-editorなどをelectron環境とかで使ってサンプルコードを書きました。

sourcechord.hatenablog.com sourcechord.hatenablog.com

だいぶ時間がたって、使っているライブラリ類のバージョンが古くなっていたので、このサンプルのライブラリ類を更新しました。

それぞれ、以下のバージョンを使うように更新しています。

  • monaco-editor v0.10.0
  • electron v1.7.5
  • typescript v2.5.2
続きを読む

Electron 1.7.5 + TypeScript 2.5.2のサンプル

最近あまりElectronいじってなかったのですが、
気が付いたらElectron 1.7系のstable版となるv1.7.5がリリースされてました。

てことで、以前書いたElectron+TypeScriptのサンプルコードを最新バージョンに対応させておきました。

Electron/TypeScriptそれぞれを以下のバージョンに更新してます。

  • Electron 1.7.5
  • TypeScript 2.5.2
続きを読む

FontAwesome.WPFを使ってみた

Web系の開発でアイコン表示などによく使われているFontAwesomeというものがあります。
サイト上でよく使われるような様々なアイコンを、Webフォントとして利用できるようにしたものです。
Font Awesome, the iconic font and CSS toolkit

これをWPFやUWPなどから使えるようにした、FontAwesome.WPFというライブラリを使ってみました。 github.com

続きを読む

Node.js 8.0をインストールしてみた

Node.js 8.0がリリースされていたので、インストールしてみました。

https://nodejs.org/ja/

最近、Node.js自体の更新はあまり追いかけてなかったのですが、今回の更新は結構魅力的ですね!!

バンドルされるnpmがv5に更新されたり、utilモジュールにpromisify関数が追加されたりと、色々便利な更新が含まれています。

ということで、気になる変更点をφ(..)メモメモ

バンドルされるnpmのバージョンがv5系になった

大きな変更点は以下のような点です。

  • package-lock.json
    • npm install時に、依存ライブラリを固定するためのファイルが自動で生成されます
    • yarnっぽい感じ
  • npm installすると、デフォルトで–saveオプション動作
    • –saveを付けなくても、dependenciesに書き込まれるようになりました。
    • dependenciesに入れたくない場合は、--no-saveオプションを指定します
  • npm installが速くなった

lockファイルの導入/–saveオプション不要など、依存パッケージを厳密に管理する方向への変化といった感じでしょうか。

これはいいですね!!

Npm v5については、↓の記事がとても分かりやすかったです。
http://yosuke-furukawa.hatenablog.com/entry/2017/05/30/090602

async/await対応

一応、v7.6からは--harmony-async-awaitオプションなしでasync/await使えるようになっていました。
ですが、このバージョンがデフォルトでasync/awaitが使える最初のLTS版です。

こんな感じのコードが、そのまま実行できます。

function wait(delay) {
    return new Promise(resolve => setTimeout(resolve, delay));
}

async function main() {
    console.log("start");
    for (var i=0; i<10; i++) {
        await wait(1000);
        console.log("next");
    }
}

main();

TypeScriptやBabelなどを使わなくても、ここまで書けるようになりました。
今後、素のJavaScriptを書く場合でも、async/awaitを使える機会が増えそうですね。

util.promisify

utilモジュールにpromisifyという関数が追加されました。

Node.jsでよく用いられるコールバック関数形式での非同期処理を、Promise形式の関数に変換できるものです。

  • 最後の引数でコールバック関数を受け付ける
  • ↑のコールバック関数は、第一引数でエラー、第二引数で関数の実行結果を返す

util.promisifyについては↓が参考になります。
http://yosuke-furukawa.hatenablog.com/entry/2017/05/10/101752

// 普通のコールバックを使った書き方
fs.readFile("./test.txt", "utf-8", (err, data) => {
    console.log(data);
});

// promisifyを使ってPromise形式に変換すれば、async/awaitで呼び出せる
async function main() {
    const readFile = util.promisify(fs.readFile);

    var data = await readFile("./test.txt", "utf-8");
    console.log(data);
}
main();

これは、かなり便利!!

ただ、@types/nodeの型定義ファイルには、この辺の定義が追加されていません。
TypeScriptで使う場合は、しばらくの間はanyにして使う感じかな。

一応、↓にIssues上がってました。そのうち対応されるといいなぁ。。。
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/16860

TypeScriptのQuickStartページ

いつの間にか、TypeScriptの公式サイトに↓こんなページができていました。
Quick Start · TypeScript

ReactやAngular、Vue.js、Knockout.jsといった定番フレームワークを用いたフロントエンド開発や、
Express, ASP.NET Coreなどのサーバーサイド開発でTypeScriptを使ったサンプル等が公開されています。

ただ、入門用としては少々複雑なものもあるかな、、という印象でした。
特にNode.jsのサンプルは、どう考えてもやりすぎだろ、、、と。
npm scriptもかなり細分化して、ビルド処理、ウォッチ処理、jestを使った単体テストやtslintなど、盛りだくさんです。

QuickStartと言うなら、なるべく余計なものはそぎ落とした方が、
TypeScriptの使い方を学びやすくなるのにな、、、という気がします。

でもまぁ、なんだかんだで色々と参考になるのでは、と思います。

Windows Template Studio雛形コードの使い方~Pivot & Tabs プロジェクト~

今度は、Pivotを用いたプロジェクトを作ってみます。

Pivotのプロジェクトは、前回使用したBlankプロジェクトと共通点も多く、割とシンプルな構成になっています。
チェックすべき箇所も少ないので、CodeBehind版/MVVM Basic版の両方をまとめて見ていきます。

続きを読む

Windows Template Studio雛形コードの使い方~Blank & MVVM Basicなプロジェクト~

今度は、MVVM Basicな構成のプロジェクトを見ていきます。
この雛形は、シンプルなMVVM構成でコードを書く時には、割と使い勝手がいいかなと思います。

  • 準備
  • Code BehindとMVVM Basicのプロジェクトの違い
  • MVVMな設計のためのヘルパークラス類
    • ViewsとViewModelsフォルダ
  • サンプル
    • コマンド実行のEnable/Disable制御
続きを読む