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がリリースされていたので、インストールしてみました。
最近、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クラス
- クラス構成
- アプリ起動処理のカスタマイズ(ファイルの関連付け)
- 動作確認
- ファイル関連付けの解除