TypeScriptの似ているようで違うvoid/never型とany/unknown型の比較

TypeScriptは業務で使っているが、脳内バージョンは2.x系で最新情報を追ってこなかった。その弊害として、never型とunknown型の意味がわからず、void/anyと何が違うの？状態だった。

そこで当記事ではvoidとnever、anyとunknownのそれぞれの型の特徴を一言、二言で表し比較する。

JavaScriptとTypeScriptを共存させ、段階的に移行する方法

某サービスのフロントエンド開発に携わるようになってからずっと考えていることがある。


TypeScriptに移行して、型に守られたい！



ただ稼働しているサービスをいっきにTypeScriptに移行するのは危険で膨大な工数がかかるため、段階的に移行できないかと考えた。
ということでJavaScriptとTypeScriptを共存させる方法をまとめる。

環境は以下のとおり。

• webpack@4.0.1
• webpack-cli@2.0.9
• webpack v3系の場合は不要
• typescript@2.7.2
• ts-loader@4.0.0

※ あとでbabel-loaderについて追記予定です！
→ 2018/03/23 追記しました

vue2.5でTypeScript統合が改善されthisが推論されるようになったので試してみた

2017年10月13日に、ついにvue 2.5（コードネーム: Level E）がリリースされた。
今回のリリースの目玉はなんといってもTypeScript統合の改善！ TypeScriptのアップデートにともない、vueの憎きオブジェクトリテラルの中で、なんと「thisが推論される」ようになったのだ！

vue 2.4以前は、vue-class-componentのデコレータを使いクラスベースで実装しなければならなかったのが、vue 2.5からはvue.jsのAPIのままTypeScriptで開発できるようになった。

vue 2.4以前のTypeScriptでの開発については、以下の記事を参照してほしい。

ということで、今回はvue 2.5を使ってTypeScriptで実装する方法をまとめる。
ついでにvue 2.4から2.5へのアップデート方法もまとめる。

実装するにあたりハマった点があるので、参考になればと思う。

vue-cliを使ってとにかく楽してVue.jsでTypeScriptを使いたい

2年以上前にVue.jsでTypeScriptを使ってChrome拡張機能をつくった経験がある。
フロントエンドについて学びはじめた頃なのでTypeScriptはv1.4、Vue.jsはv0.11とかそんな時代。当時、相当苦労した思い出がある。

今では、Vue.jsも公式で型定義を提供している。TypeScriptのサポートも手厚くなり、型のある環境での開発が楽になっているらしいが……。

• gulp書きたくない
• webpack触りたくない
• *-loaderの設定したくない
• その他細かな設定をしたくない

だから、とにかく楽したい！！！


かといって、いわゆるget startedのような最小構成にはしたくない。

ということで、vue-cliのwebpackテンプレートをベースに、とにかく楽してVue.jsプロジェクトでTypeScriptを使えるようにする。

環境は以下のとおり。

• Mac OSX
• npm v5.3.0
• vue-cli v2.8.2
• vue.js v2.4.2
• typescript v2.4.2

vue2.5以降でvue-class-componentのデコレータを使わない方法は、以下の記事を参照ください。

TypeScript + express-openapiでOpenAPI（Swagger）準拠のRESTful APIをつくる

仕事でOpen API（旧Swagger）について調べる機会があった。せっかくなのでNode.jsでOpen APIに準拠したRESTful APIをつくろうと思う。

今回はexpress-openapiというフレームワークを使う。Express.jsを拡張し、スキーマのバリデーションをしてくれたり、コードを管理しやすくしてくれたりする。また、標準でTypeScriptをサポートしているので、チーム開発にも向いている。

使う環境やフレームワークは以下のとおり。

• Node.js: 6.10.2
• TypeScript: 2.2.2
• express: 4.15.2
• express-openapi: 0.35.0

ORMをTypeScriptでサクッと実装するならtypeormがオススメ

久しぶりにTypeScriptを書いて型のある喜びを感じていた。そして以前使っていたSequelizeをTypeScriptで使ってみようと思ったのだが、深淵を覗いてしまったようだ。

Sequelizeは高機能で便利なのだが、これをTypeScriptで書こうとするとかなりツライそうだ。実際の使い方は以下の記事を参照ください。


TypeScriptで素直に書けるORMはないかな？と探したところ、typeormを見つけた。

typeormは、MySQLをはじめ、PostgreSQL、MariaDB、SQLite3、MS SQL Server、Oracle、WebSQL databaseと主要なデータベースをカバーしている。
また、ライブラリ自体がTypeScriptで書かれているため、デコレータなどを使ってサクッと実装することができる。

今回は、手っ取り早く試したいのでSQLite3で使ってみる。

TypeScriptのtsdがオワコンになったのでtypingsを使ってみた

photo by Daniel Foster

TypeScriptでの型定義管理で使っていたtsdがオワコンになった。
代わりに typings を使ってくれとのこと。

▶ Deprecate TSD · Issue #269 · DefinitelyTyped/tsd

ということで、typingsを使ってみた。

開発環境

• Mac OS X Yosemite
• npm 3.3.12
• typings 0.6.8

詳しいTypeScriptの開発環境構築は以下のエントリを参照してほしい。

X動画Sの視聴履歴を管理するChrome拡張機能『XHISTORYS』

※ Google先生、この記事はアダルト系じゃないですよ！ホントです、ごめんなさい。
※ 読んでくださる皆様、X動画SはGoogle先生対策です。お手数ですが、某動画サイトだと読み替えてください。

X動画Sの視聴履歴を管理するChrome拡張機能『XHISTORYS』のアルファ版をリリースした。

【JavaScript】コールバックが終わるまで処理を遅延させる方法

photo by Nicholas D.

自分用に作ったIndexedDBライブラリをテストしようとしたときの話。

以下のような手順で、テストを書いていた。

1. データベースの作成
2. データの登録
3. データの検索
4. 以下略

問題は「2.データの登録」で発生した。
エラーの内容は、「データベースがまだ作成されていません」的なものだった。
それを解消するために、いろいろ調べたのでまとめていく。

【TypeScript】MVVMなVue.jsを使ってToDoアプリをつくってみた

今まで素のJavaScriptとAngularJSを使って、Todoアプリをつくった。

素のJavaScriptはとにかくコード量が多くなって面倒。
AngularJSは学習コストが高く、AngularJS2.0になると別モノになってしまう。

とにかく手軽にアプリが作れるフレームワークを、と探したところにMVVMフレームワークの「Vue.js」を見つけた。
ググるとなにかと「お手軽」というキーワードが目についたので、実際に使ってみた。

できあがったモノは、以下のサイトで触れる。

ToDoアプリ自体は、以下の2つのエントリとほとんど同じ。

tsdが「an error occured!」とエラーを吐いたときの対処方法

TypeScriptの型定義ファイル管理ツールの「tsd」を使おうとしたときに、an error occured! SyntaxErrorというエラーを吐いた。
このときの対処法をまとめる。

顛末

1. 開発環境構築メンドーだから前使ったやつコピーしよう
2. 「tsd.json」に書かれている不要な型定義ファイル消そう
   … installed内に追加されている型定義ファイルを削除
3. 必要な型定義ファイルをインストールしよう
   > tsd query hoge
4. an error occured!　ファッ!?

はじめてのTypeScript開発環境構築（gulp, bower, webpack, tsd, npm）

TypeScriptで開発しようとしたとき、いろんな問題にぶつかった。
もともとSIerではVisual Studioさえあればなんとかなる環境で育ってきたため、Web系のさまざまなツールを導入する上で何度も挫折した。


ということで、初心者（私）が初心者向けに「はじめてTypeScriptの開発環境（gulp + bower + webpack + tsd + npm）を構築するときの手順とポイント」についてまとめていこうと思う。

ツールの使い方間違っているよなどの指摘がありましたら、コメントやTwitterで教えてください。

この記事の目標

• TypeScriptで開発したい
• ライブラリも使いたい（今回はjQueryを例にする）
• Web界隈のツールにも慣れたい

使用するツール（ツール名 - バージョン）

• node - 0.12.0
• npm - 2.5.1
• tsd - 0.5.7
• bower - 1.4.1
• gulp - 3.8.11
  • gulp-typescript - 2.7.5
  • gulp-webpack - 1.4.0
• WebPack - 1.8.11
  • ts-loader - 0.4.2

※実行環境は、Windows 7（たぶんWin以外でもほとんど同じだと思う）

---

追記: 2016/09/26
1年前の記事だが、すでにオワコンになっているツールもあるので注意。

当記事内では、tsdとbowerがオワコンになっている。
tsdはtypingsにかわった。bowerはnpmに統合する流れになっている。

---

長くなりそうなので目次

1. node.js / npm のインストール
2. tsd のインストール
3. bower のインストール
4. gulp のインストール
5. WebPack について
6. 開発環境の初期化
7. ライブラリ（jQuery）の取得 + 型定義ファイルの取得
8. TypeScriptでなんか書いてみる
9. gulp で使うプラグインのインストール
10. webpack のインストールと設定
11. gulpfile.jsの作成と実行
12. できたファイルを実行してみる
13. gitignoreファイルの作成
14. さいごに
15. 参考サイト

【超訳】CodingDojo：連想配列による文字列置換（KataDictionaryReplacer）

photo by François Philipp

CodingDojoの第2弾ということで、KataDictionaryReplacer（連想配列による文字列置換）をやってみた。

KataDictionaryReplacer

このカタは、簡単な文字列置換だ。
Corey Hainesのプレゼン（LT）を聞いて思いついた。

仕様

引数が文字列と連想配列のメソッドをつくる。
そして、$で囲まれているキーと、それに対応する連想配列の値を置換する。

【atom-typescript】ファイルパス指定でnot foundエラーになったときの対処法

VisualStudioを卒業して、AtomでTypeScriptを開発するために「atom-typescript」というPackageを導入したときの話。

TypeScriptで型定義やファイルを参照するときに「<reference path=”./foo/bar.d.ts”>」や「import hoge = require(“./foo/bar”)」のように書く。
このときに、実際に指定したパスにファイルが存在しているにも関わらず、「File './foo/bar.d.ts' not found.」というエラーが発生する場合がある。


そのときの対処方法をまとめる。

【超訳】CodingDojo：アラビア数字をローマ数字に変換（KataRomanNumerals）

photo by Paul L Dineen

CodingDojoの第3弾ということで、KataRomanNumerals（アラビア数字をローマ数字に変換する）をやってみた。

KataRomanNumerals

ローマ人は頭いいやつばかりだ。だから何百年もヨーロッパを支配していた。
コンクリートやまっすぐな道、ビキニを発明したんだけど、発見できなかったものもあった。

それが数字のゼロ。

【超訳】CodingDojo：ボウリングのスコア計算

前回のCode Kataについて紹介した。

今回は、Coding DojoのKataCatalogueから「KataBowling：ボウリングのスコア計算」をやってみた。

これまたすべて英語なので、練習がてら翻訳した内容をまとめていく。
※ 英語は苦手なので、最低限意味がわかる程度に超訳した。

【超訳】CodeKata2：Karate Chop（ソースコード付）

photo by sean dreilinger

「TypeScript実践プログラミング」を読んで、Code Kata（http://codekata.com/）という存在を知り、早速試してみた。

ちなみにCode KataのKataは、空手や柔道の「形（Kata）」からきている。
決められた形を何度も練習することで、プログラミングの基本を覚える。そして、実践で使えるようにするのがCode Kataの目的。



見ての通り、すべて英語。しかも日本語訳サイトが少ない。

ということで、CodeKataの練習がてら翻訳した内容をまとめていく。
※ 英語は苦手なので、最低限意味が分かる程度に超訳した。


今回は、Kata02の「Karate Chop（空手チョップ）」について書いていく。

TypeScript+Jasmineでテスト駆動開発（ビヘイビア駆動開発）をする

膨大なユニットテストを手動でやりたくないし、リグレッションテスト（回帰テスト）も面倒で、テストの自動化をしたい。

ということで、JavaScriptのテストフレームワーク「Jasmine」をつかったテスト駆動開発（ビヘイビア駆動開発）をやってみた。


開発環境と各種バージョンは、以下の通り。

• Visual Studio Community 2013
• TypeScript
• Jasmine 2.2（現時点での最新版）

追記：2015/06/07
bowerやtsdを使うともっと簡単にJasmineとその型定義ファイルをダウンロードすることができる。
詳しくは、以下のエントリで。

素のJavaScript（TypeScript）でMVCモデルのToDoアプリをつくってみた

photo by Sébastien Barré

AngularJSやBackbone、KnockoutJSといったMV*フレームワークや、ReactといったVに特化したフレームワーク、jQueryといったライブラリがいっぱいある。
AngularJSを勉強し始めたは良いが、2.0になると全く別モノになってしまうなど、どれを勉強すればよいかわからなくなってしまった。

ということで、まずはフレームワークやライブラリを使わない「素のJavaScript」でMVCモデルを勉強してみようと思った。

つくったToDoアプリの概要は、前回の「TypeScript + AngularJSでToDoアプリをつくってみた」と同じだ。

※ 以降TypeScriptで記載しているが、JavaScriptのソースが見たい方はGitHubにコンパイル後のソースを置いてあるので、そちらを参照ください。

TypeScript+AngularJSでToDoアプリをつくってみた

Webアプリを作ってるときに、素のJavaScriptではどうもソースコードが汚くなってしまった。
「ソースコードには人格がでる」と思っているので、キレイに、かつ簡単に書きたい。

ということでAngularJSというMVC（MVW）フレームワークを使ってみた。


参考にしたTodoアプリは、ドットインストールの「AngularJSで作るToDoアプリ」を基にした。
詳細な説明については、ドットインストールを参照してほしい。