Twitter Facebook github

Posts Tagged with “TypeScript”

Laravel の Elixir で TypeScript を使う

こんばんは。つい最近までコートを羽織っていたと思えば、もう随分暖かくなりましたね。

数日前から趣味で新しいウェブアプリを書いていて、折角なので勉強がてら新たにPHPフレームワークのLaravelを採用することにしました。噂には聞いていましたが確かに素晴らしい出来で、今後PHPのプロジェクトでは第一候補としたくなるようなものでした。

検証環境

  • Laravel framework v5.2.31
    • Elixir v3.x

次の3つはグローバルインストール済み

  • TypeScript v1.9.0
  • typings v0.8.1
  • gulp v3.9.1

Elixir でも TypeScript 使いたい!

Laravel には、フロントエンドの開発を支援する Elixir という gulp のラッパーがあります。デフォルトでSassやLessのコンパイル、JSのcombine&minifyとかできるすごいやつ。でもTypeScriptはサポートしてくれないので、自力でがんばる必要があります。(CoffeeScriptは公式サポート対象なんてズルい!)

Read More »

TypeScriptの string と String の違い

すべてを String で書いてたら、あるときエラーになってしまったので共有します。

エラーの理由

クライアント側のコードをTypeScriptで書いていたとき、SocketIOのライブラリを使っていたところ、次のエラーになりました。

ライブラリの定義を確認すると string の引数を受け取るところに String の変数を与えていることが分かりました。
Stringとstring? あれ、同じじゃないの?なんて思っていたらどうやら違うようです。

エラーの再現コードはこんな感じです。

Read More »

WebPackでnodeランタイム向けにビルドする

前回まででTypeScriptを使ってフロントエンドJavaScriptをビルドする話を書きましたが、TypeScrptに慣れてしまうとES2015で書く気にはなれません。

当然のようにサーバーサイドもTypeScriptでコードを書き始めたのですが、ビルドにフロントエンドでも使っていたWebPackを採用して少しハマったので共有します。

やりたかったこと

  • TypeScriptでsocket.ioを使ったソケットサーバーを書きたい
  • 変更検知でビルド自動化したい
  • glup/grunt抜きでWebPackでやりたい

環境

  • Mac OS X El Capitan
  • node.js v5.7.1 / npm v3.6.0
  • TypeScript v1.9.0-dev.20160312
  • typings v0.7.9
  • webpack v1.12.14

上3つのモジュールは npm でグローバルインストール済み。

  • ts-loader@0.8.1

WebPackでTypeScriptをビルドするためのローダーをローカルインストールしています。

忙しい人のために

先に結論を書くと、nodeランタイム用にWebPackを使ってビルドするとき、単に node_modules をexcludeするだけではダメで、代わりに webpack-node-externals を使いましょう、という話。

Read More »

TypeScriptのインターフェースに「I」のプリフィクスを付けるのはよくないのか

タイトル長くてすみません。
最近TypeScriptの勉強をしていて、様々な文章を読ませていただいています。

その一つが次のものなのですが、納得できなかったところがあったので自分なりにまとめてみます。

“TypeScript早わかりチートシート【1.5.3対応】 (2015/08/03)”
http://www.buildinsider.net/language/quicktypescript/01

上の解説では、TypeScript 1.5の文法解説などが分かりやすく書かれており、とても参考にさせていただきました。

“I”は使うべきではない?

インターフェースの宣言には、通常のクラスではないことを示すために、接頭辞に”I”を追加することが多々あります。例えば、”User”クラスはインターフェースとして”IUser”インターフェースを実装している、といったようにです。

先に挙げたページの、インターフェースについての解説で著者は次のように述べています。

命名規則として、先頭にIを付けていた時期もありましたが、現在ではマイクロソフトのガイドライン上で、Iは付けないこと、と改められています。

これを読んだとき、どうしても納得できませんでした。
「Iをつけること」ならまだしも「つけないこと」をガイドラインで明文化されているというのは、自分の中で全くもって同意できなかったからです。

Read More »

モダンなフロントエンド開発環境をつくる

最近、趣味で作りたいWebアプリがあって、結構クライアント側が要になりそうなので、思い切って勢いで Deep Dive してみた話。かなり長いです。

モダンって言ってるけど、TypeScriptが苦手ならES2015+ES7も全然アリだと思う。前回の記事で触れてるから、TypeScriptの代わりに書き換えればうまく載るはず。というか人口的にはTypeScriptよりES2015使う人のが当然多いだろうけど、今回はTypeScript使ってみたかったんです・・・。

背景

わたしは今までフロンドエンド開発っていうと、CSS3+HTML5で特別な開発環境も使わず、気合いで頑張って作ってきた勢です。

一応、フリーランスでバックもフロントもまとめて依頼されたり、趣味で書いたり、プログラミングスクールで先生やってた頃はフロントも教えていたんですが、とても苦手でした。特にデザインとか全くセンス無いし、デザインも決まってないようなサイトをまるっと任されたりするとすごくストレスで辛かったのを覚えています。

最近はバックエンドやインフラにフォーカスした仕事をしていて、ほぼほぼフロントを書くこともなくなったのですが、数年前より便利なツールや面白そうなライブラリがいろいろ増えていて、せっかく書くならとことんモダンに!ということでやってみました。

今回のゴール

ここで作る環境の最終的なコードはgithubにあります。
https://github.com/syamn/sakuio-blog-160314

  • node.js と npm をインストール
  • JavaScript には TypeScript を使う
  • CSS には Scss (Sass) を使う
  • ビューライブラリには RectJS を使う
  • WebPackだけでビルド (GruntやGulpは使わない)
  • WebPack-Dev-Serverで自動リフレッシュを試してみる

ネットで情報を探すと、TypeScriptやScssのトランスパイルには未だにGulpが主流で(Gruntは減ってきましたね)、せっかくWebPackを導入してもGulpと組み合わせて使うみたいな記事を多く見かけます。

せっかくWebPackを導入したのなら、WebPackだけで完結させましょう〜!

Read More »