この記事を書いたのは2016年のことでした。それから２年。 いつの間にか日本語チュートリアルが消えたし、結構未だにいいねを押してくださるので更新することにしました。(2018/2/2) reactの本家ドキュメントが日本語化されたため更新します。 (2019/4/11) はじめに タイトルみたいなことを考えていました。 実際補完が効くのはかなり有効でしたが、チュートリアル通りにいかない点が多々出ました。 結局色んな所を見るはめになりました でも総合してTypeScriptに向いているフレームワークだと思ったので詰まったところと解決方法を纏めてみることにしました TypeScript自体も学習コストが凄く低くて(ES2015 + 型)素敵だったのでいいと思いました。 追加で使うツール類 なし 今なら以下で試せます。 stackblitz オンライン版VisualStudioCode的な(コー
はじめに Reduxをちょっとやり始めたので、無理やりですが画面遷移（react-router）を含めたTODOアプリサンプルを作ってみたいと思います。 やりながら書くので、最終結果がダメでしたというオチになってるかもしれない点ご了承ください。 プロジェクトの作成 Reactのひな型のプロジェクトを作成します。 プロジェクトの作成はここを参照 追加で以下の項目をnpm install --saveとtsd installでインストールします。 redux react-redux object-assign react-router history TypeScriptの型定義ファイルをプロジェクトに追加しておきます。 Modelの作成 まず、TODOアプリのデータをデザインします。 データの入れ物としては、TODOの1項目と、それのリストを管理するクラスの2つを用意します。 models.
AltJs ってトランスパイルした後、テストを実行させる必要があるから・・、面倒くさいんだよね。なんか、あまり情報もないし、これだから AltJs は・・・と思うわけですが、やってみると案外大したことないもんです。 今回は、TypeScript のコードのユニットテスト、カバレッジを記していこうと思います。本記事のコードは以下のURLにあります。 https://github.com/Syati/typescript-sample/tree/master/011_test_sample Step 0: 事前準備 流れ ts でコードを書く トランスパイルする（js と map を出力） js をテストする map を利用してts カバレッジを測る ライブラリ npm install -g mocha istanbul remap-istanbul でそれぞれコマンドが利用できるようになりま
We Are JavaScripters! @6th https://wajs.connpass.com/event/54667/
Googleが中心となって開発しているオープンソースのJavaScriptライブラリ「Angular」のイベント「ng-conf 2017」が、4月5日から3日間、米国ユタ州ソルトレイクシティで開催されました。 3日目の基調講演に登壇したGoogleのエンジニアディレクター Brad Green氏は、TypeScriptがGoogle社内の標準言語に採用されたことを明らかにしました。 この記事では公開されている動画から、基調講演のその部分を中心にダイジェストでまとめました。 2年掛かりでTypeScriptがGoogle社内の標準言語に Brad Green氏。Googleには社内の標準言語（Canonical Languages）としてC/C++、Java、JavaScript、Python、Goが設定されている。 なぜかというと、もし社内のプログラミング言語が15種類もあったら、プロジ
Building on React ReactXP builds on the popular React JS and React Native frameworks. XP means X-Platform Share most of your code between the web, iOS, Android, and Windows. Apps Users Will Love Create great-looking, responsive web pages and mobile apps that feel native. The authors of React use the phrase “learn once, write anywhere”. With React and React Native, your web app can share most its l
FiNCさん主催のFrontend Meetupというイベントで革命と秩序とSPAという発表をしてきた。 connpass.com 有志の方がまとめを書いてくださっているので、そちらもぜひ。 www.chirashiura.com qiita.com 僕の発表資料はこちら。 speakerdeck.com 主催のFiNCさん、ありがとうございました。 内容 フロントエンドのパラダイムシフトとfreeeの関わり方と、今のスタックであるReact + FluxUtils + Frowtypeについてのお話。 どちらかといえば後半のFlowtypeの適用についての方に力を入れてお話しした。 個人的な感覚もあるけど、Flowtypeはここ1年で大分扱いやすくなっている。当初はReactのAPIの型定義が揃っていなかったりしたけど、現状では型定義のないAPIは見当たらない。 意味のわからないエラーに
All slide content and descriptions are owned by their creators.
ScalaにつづいてTypeScriptも勉強しようと思ったので、まずはエディタのセットアップをした。 typescript-mode とりあえずtypescript-modeというのがあるので、それを入れる。M-x package-list-packagesしてtypescript-modeをインストールする。その後以下の設定を入れておけば良い。 (require 'typescript-mode) (add-to-list 'auto-mode-alist '("\\.ts\\'" . typescript-mode)) flycheck、補完、型情報の表示、定義ジャンプ tss.elとtide.elというのがあった。tide.elは公式が提供しているtsserverのインターフェースに則って補完や定義ジャンプができるので、こちらを利用することにした。まずpackage-list-pa
TypeScriptを使ってECMAScript 2015時代のJavaScriptを先取りしよう！ わかめまさひろ（株式会社トップゲート） わかめです。これから、TypeScriptを使ってECMAScript 2015スタイルのコードを書く方法を紹介します。連載の初回となる本稿では、ECMAScript 2015やTypeScriptの魅力について、TypeScript用エディタの案内をしていきます。 TypeScriptとは？ TypeScriptはMicrosoft社が開発しているAltJSの1つです。AltJSとは、ある言語Xから、JavaScriptへと変換（トランスパイル）して使う言語の総称です。Typeという名の通り、JavaScriptの世界に静的な型付けを持込み、JavaやC#のようにコンパイル時に整合性のチェックを行うことができるようにしたものです。 見事チェックにパ
6/14に開催された第2回 Build Insider OFFLINEの3つのセッション「TypeScript 1.0 オーバービュー」「TypeScriptを実践的に使うために」「TypeScriptで効率化するHTML5のインタラクティブコンテンツの開発」のスライド＆動画です。また、当日の連携イベントだった「TypeScript勉強会 - VSハッカソン倶楽部」の各スライドも掲載しています。 「第2回 Build Insider OFFLINE： TypeScriptスペシャル（東京で開催）」の各セッションのスライドと動画を掲載しています（関連：Togetterまとめ）。また、当日の連携イベントだった「TypeScript勉強会 - VSハッカソン倶楽部（大阪で開催）」の各スライドも掲載しています。 第2回 Build Insider OFFLINE： TypeScriptスペシャル
TypeScript 1.5正式リリース。最新言語仕様を速習しよう！ TypeScriptを使うときに役立つ情報がまとまったチートシート（1クリックで試せるサンプル付き）。 本稿はTypeScript 1.5.3を対象に解説を行います（※2016/11/08追記：姉妹サイトの＠IT Insider.NETで「特集：TypeScript 2.0概説」 を掲載していますので、本稿と併せてご参照ください ）。 早いもので、TypeScript 1.0がリリースされた2014年4月3日から、1年以上が経ちました。今年の頭あたりに本記事のTypeScript 1.0版からの更新の依頼が来た時は、（記事改訂は想定していなかったので）びっくりしました。情報をメンテし、良い情報がWeb上に残るよう運営するのは大変であろうな、と想像に難くないですが、筆者としてはうれしい限りです。 さて、去る2015年3月5
アニメ本編の繊細な外観と雰囲気を、リアルタイムできめ細かく再現しており、レドとサーフカイトのシルエットやライティングは、高度なトゥーンシェーダーと影のレンダリングによって表現する。また、Internet Explorer 11を使ったタッチ操作に最適化されているが、マウスとキーボードを使ったプレイにも対応している。 開発は、イギリスのゲームデベロッパーであるTurbulenzとともに、オープンソースのゲーム開発エンジン「Turbulenz Engine」を使用して行った。「Turbulenz Engine」は、JavaScriptとTypeScriptで実装した2D/3Dゲーム開発のためのエンジンで、ハイパフォーマンス物理エンジンや高品質なビジュアルエフェクト、パーティクルシミュレーション、アニメーションエンジンなど豊富な機能を搭載し、ゲーム技術の幅広い範囲をカバーする。 なお、「翠星のガ
Away3D TypeScriptはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。個人ブログ（HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ)で紹介したようにAway3Dを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 そこで、初級者にもやさしいAway3D TypeScript(以下、Away3D)チュートリアルをはじめてみることにしました。必要となるスキルレベルは、JavaScriptの入門書を一冊読み終えたぐらいを想定してます。Away3DはJavaScriptやTypeScriptのどちらでも利用できますが、本連載ではJavaScriptで解説します。 この記事について AwayJSは活発に開発されていないため、本サイトとしては利用は推奨しません。WebGLを活用したい方は、Three
AngularJSのようなクライアントMVCフレームワークを採用すると、クライアントサイドの規模が大きくなってくるので、できればJavaScriptじゃなくて型のあるプログラミング言語で開発したいですよね。 AngularJSは独自のクラスシステムを持っていないし、モデルやコントローラを実装するためにベースクラスを継承したりする必要もないので、altJSとの相性がよくて組み合わせやすいです。 altJSと言ってもたくさん種類がありますが、今回はTypeScriptを使ってAngularJSアプリを書くときのTipsやコツなどを紹介したいと思います。 ベースとなるプロジェクトを作る AngularJSのコードを書くとき、JavaScriptであればおもむろに書き始めることも可能ですが、altJSを使う場合はコンパイルなどの手順が必要になるので、Gruntを使ったプロジェクトを作る必要がありま
TypeScriptの基礎に始まり、既存のJavaScript資産の活用方法、開発環境構築（Mac OS X上）から開発事例と、TypeScriptの未来図までを話します。明日から仕事で使えるTypeScript活用法をあなたに！
これは何？ Javascriptは今まであまり触れた経験がなかったんですが、 ようやく最近ちゃんとやってみようと思い始めました。 しかし、いかんせん私は搭載スペックが低いので、 手取り足取りサポートしてくれる開発環境でないとやってられません。 かといって、Emacs以外の環境でコーディングする気にもなりません。 う〜んと唸っていたら、最近はTypescriptなる言語があるようで。 しかも、開発環境向けなAPIが揃っており、それをEmacsで利用するための拡張も既にありました。 Emacs+AutoCompleteでTypeScriptの補完をしたい - deruiの日記 Emacs で TypeScript を auto-complete 使ってコード補完 - MATSUZAKIの日記 上記リンクを参考に、typescript-toolsを利用する auto-complete-tsを利用
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
