SourceChord

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

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制御
続きを読む

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

これから何回かに分けて、WindowsTemplateStudioで生成したプロジェクトが、どのような構造になっているか見ていこうと思います。

今回は最初なので、UWPの基本的な仕組みも含めて色々と試してみます。

  • プロジェクトの作成
    • 全体の構成
  • アプリのスタートアップ処理
  • ページ表示
    • MainPageクラス
    • MainPageへの処理追加
  • ページ遷移
    • ページの追加
    • 追加したページへの移動
    • 戻る/進む
  • ローカライズ処理
    • x:Uid属性とreswファイルを用いたローカライズ
    • 言語設定の切り替え
  • ヘルパークラス類
    • ResouceExtensionsクラス
    • Singletonクラス
  • スタートアップ処理の全体像
    • ActivationService & ActivationHandlerクラス
    • クラス構成
    • アプリ起動処理のカスタマイズ(ファイルの関連付け)
      • 動作確認
      • ファイル関連付けの解除
続きを読む

Windows Template Studioを使ってみた

Build 2017の動画とか↓のブログ見て知ったのですが、こんなVS拡張機能が出てきました。

Windows Template Studio - Visual Studio Marketplace

今まで、UWPプロジェクトの雛形は、空っぽなウィンドウが表示されるだけの、非常に簡素なものしかありませんでした。   ですが、この拡張機能を使うと、ナビゲーションやMVVMなどを取り入れたプロジェクト雛形を、自分でカスタマイズして生成することができるようになります。

ちなみに、今後6週間程度の間隔で更新を続けるようです。

これは便利かも!!

似たような立ち位置のものとして、Template10っていうのがあったんだけど、この辺との棲み分けってどうなっていくのかな??

続きを読む

Build 2017メモ

ここ最近、Build2017の動画を色々と見て回ってました。
その中で、面白かったものなどを、いくつかメモっておこうと思います。

Fluent Design System

今回のBuildで印象に残ったのは、やっぱコレ。

http://fluent.microsoft.com/
https://channel9.msdn.com/Events/Build/2017/B8066

PlayGound is Expanding

今後、ソフトウェアの対象とするデバイスはどんどん多様になっていきます。

  • 普通のデスクトップPCやスマートフォンのような2Dなディスプレイを持っているデバイス
  • Amazon Echoとかみたいな、ディスプレイ表示を持たない0Dなデバイスから、
  • Hololenseや、その他VR系デバイスなどでの3Dな表示

このような0D~3Dまでの多様なデバイスで一貫したUXを提供する、ってのがポイントですかね。

↓のスライドでこの辺の話題をわかりやすくまとめてくれています。
https://speakerdeck.com/ahomu/fluent-design-system-in-5-minutes

UWPの今後

https://channel9.msdn.com/Events/Build/2017/B8100

Fluent Design SystemでUIがどう変わるかという説明や、どうやってXAMLで実装していくかの説明がされていました。

あと、この動画の最後の方(1:03:30~)のとこで、今後対応する内容の中に「Custom Markup Extension」ってあります。
そのうち、UWPでもMarkupExtension作れるようになるっぽいですね。メッチャ楽しみ!!

XAML Standard

https://github.com/Microsoft/xaml-standard

XAMLを使う各プラットフォームで、
それぞれが方言のような感じで分裂していくのを防ぎたいってことでしょうかね。

Xamarin.Formsって、微妙に各種要素の名前が他のXAML系プラットフォームと違って気持ち悪かったんで、これはちょっと嬉しいニュース。
StackPanelと言わずにStackLayoutになってるとか、
かなりAndroidに寄せたネーミングになってるなぁ、なんて印象は受けてました。

この辺のクラス名がある程度整理されると、微妙な違いな無くなってうれしいんだけど、
これって、既存のXamarin.Formsの各種クラス名をXAML Standardに合わせて名前変えてくってことなんだろうか??

ただ、このXAML Standardでの共通化の話で、WPFが置いてけぼりにされてる感が・・・
MSさん、、、たまにはWPFの事も思い出してあげてください。。。

ちなみに、↓のissuesなどにWPF開発者の方々の声が集まってます。
https://github.com/Microsoft/xaml-standard/issues/20
この辺、今後どうなるか定期的にウォッチしておこうかと思います。

とか思ってたら、こっちのスライドの19ページ目では、
XamarinでもWPF XAMLが再利用できる、、なんて書き方になってるけど、どうなるんでしょうね??
https://view.officeapps.live.com/op/view.aspx?src=https%3a%2f%2fsec.ch9.ms%2fsessions%2fc1f9c808-82bc-480a-a930-b340097f6cc1%2fbuild%2f2017%2fB8110.pptx

UWPのお話

UWPのコントロールについて

https://channel9.msdn.com/Events/Build/2017/B8035

定番どころの3rdパーティ製コントロールライブラリの紹介や、コントロールのスタイル変更やカスタムコントロールの作り方などの説明

UWPでのパフォーマンス向上Tips

https://channel9.msdn.com/Events/Build/2017/P4173

遅延ローディングを使ったTipsとか、その他いろいろパフォーマンス向上などにつながりそうなTips紹介

NuGet

https://channel9.msdn.com/Events/Build/2017/T6081

5:50~あたりで、新しいパッケージング方法の説明をしてます。

.net standardなクラスライブラリだと、
nuspecを書いてnuget.exeからパッケージングするのではなく、プロジェクトのプロパティで設定しておいてビルド時にパッケージを作れるようになってるんですね。
f:id:minami_SC:20170521134526p:plain

どうでもいいですが、いつも読み方に迷うコイツ「NuGet」ですが、にゅーげっとって発音してますね。

VSCode

https://channel9.msdn.com/Events/Build/2017/T6078

動画の中で↓のリポジトリが紹介されてました。
https://github.com/Microsoft/vscode-tips-and-tricks
VSCodeのTipsなどが色々とまとまっています。

VisualStudio

https://channel9.msdn.com/Events/Build/2017/B8083

プレゼンの冒頭で目の不自由なエンジニアの方が、音声読み上げを使ってライブコーディングしてました。

で、その音声読み上げ、
ものすごいスピードで読み上げしてるんです。
一瞬、何が起きたのかわからなかった。
でも、スクリーンリーダーを使って、ガリガリとコーディングしてました。

ソフトウェアのアクセシビリティ対応をちゃんとしていると、こんなことまでできるのか、、、と色々と感じるものがありました。

Edge

https://channel9.msdn.com/Events/Build/2017/B8041

39:31~
CSS Grid Layoutの対応を進めているみたいですね。

IEやEdgeは一足先にCSS Grid Layoutに対応し始めたのに・・・
その後なんだかんだでCSS Grid Layoutは新しい仕様に変わり、IE/Edgeは新しい仕様に対応せず、取り残された状態になってました。

これは対応がとても待ち遠しいです!!