Electron+TypeScriptなプロジェクトの雛形を更新～Electron3.0.3+TypeScript3.1.1～

以前作ったElectron+TypeScriptのサンプルコードを、それぞれの最新バージョンにアップデートしました。

以下のバージョンに更新してます。

• electron v3.0.3
• typescript v3.1.1

今回もコードには変更を加えず、ライブラリ類のバージョン更新だけしました。

Electron+TypeScriptなプロジェクトの雛形を更新～Electron2.0.0+TypeScript2.8.3～

以前作ったElectron+TypeScriptのサンプルコードを、それぞれの最新バージョンにアップデートしました。

それぞれ、以下のバージョンに更新しました。

• electron v2.0.0
• typescript v2.8.3

今回もコードには変更を加えず、ライブラリ類のバージョン更新だけしてます。

ちなみに、electronがv2.0.0とメジャーバージョンが上がっています。
electron v2以降ではバージョニングのルールを変更し、今後はのアップデート時にはSemantic Versioningに沿ってバージョン番号を付けていくとのことです。 https://electronjs.org/blog/electron-2-semantic-boogaloo

ChromiumやNode.jsのメジャーバージョン更新でelectronのメジャーバージョンも上げていくとのことなので、今後はelectronのバージョンもChromeみたいに頻繁に上がっていくことになりそうですね。

Electron+TypeScriptなプロジェクトの雛形を更新～Electron1.8.2+TypeScript2.7.1～

以前作ったElectron+TypeScriptのサンプルコードを、それぞれの最新バージョンにアップデートしました。

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

• electron v1.8.2
• typescript v2.7.1

こういう雛形って、定期的に新しいバージョンに追従しておかないと、変更内容を追いきれなくなりますからね。

今回はコードには変更を加えず、ライブラリ類のバージョン更新だけでOKでした。
今後も、定期的にライブラリの更新に追従しておこうと思います。

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

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の使い方を学びやすくなるのにな、、、という気がします。

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

knockout.jsでバインディング・コンテキストの値をデバッガで確認する方法

近年のフロントエンド界隈では、Knockout.jsはあまり話題に上らなくなっちゃいましたね。。。
ですが、自分は以前Knockout.jsで書いてたプロジェクトを弄ったりと、今でも結構使ってます。

あと、なんだかんだ言って、双方向データバインディングだけあれば十分ってケースでは、 Knockout.jsのシンプルさは今でも魅力的ですしね。

で、Knockout.jsを使ってHTML上でバインディング定義をしていると、
要素のコンテキストがどんな値になっているか、、、を確認したくなる時がちょくちょくあります。

ちなみに、Chrome用では↓こんな便利な拡張機能があります。
http://qiita.com/sasaplus1/items/8c5a2216f3cb15b792c5
https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof

でも、拡張機能などを使わなくても、ブラウザの開発者ツールを活用してお手軽に確認することもできます。

手順

1. 開発者ツールを開いて、DOM Explorer的なヤツから、目的のDOM要素を選択します。
2. 続いて、コンソールを開き、以下のコマンドを実行します。

Ko.contextFor($0)

するとこんな風に、コンテキストに設定されているオブジェクトの値を確認できます。

ここでは、Edgeでやっていますが、IE11, Chrome, Firefoxなどのブラウザでも、だいたい同じような手順で確認できます。