バックエンドエンジニアがVue.jsとTypeScriptに入門して10日ほど勉強した内容をまとめてみました。 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
最新版TypeScript 3.0+Webpack 4の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き) - ICS MEDIA
TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、ほとんどのフロントエンドエンジニアが使っているといっても過言ではありません。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンドラー（例：webpack、Rollup等）をTypeScriptと合わせて使うのが一般的です。 この記事では、
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
Rails Vue.js TypeScriptでthisの型推論 - Qiita
この記事は エムスリー Advent Calendar 2017 の4日目の記事です。 Vue.js 2.5でTypeScript対応が強化されました。2.4以前は、Vueのデフォルトであるオブジェクトリテラルベースの構文でthisの型を推論することができませんでした（別途vue-class-componentなどを使いクラスベースの構文で書く必要がありました）。しかし、Vue.js 2.5でTypeScript対応が強化され、オブジェクトリテラルベースの構文でもthisの推論がきくようになりました。see: https://jp.vuejs.org/2017/09/23/upcoming-typeScript-changes-in-vue-2.5/ 例（エディタはVSCodeでVeturプラグインを使用） また、Rails 5.1でwebpackerが統合され、webpackを使いやすく
AssemblyScriptを使ってTypeScriptのコードを早くしよう - Qiita
TL;DR; AssemblyScriptを使うと、TypeScriptコードをWebAssemblyに変換できます。オブジェクト指向プログラミングをしている場合は、オブジェクトが保存されるメモリ領域を自分で管理しなくてはならないので、その手間とのトレードオフを見極めてください。 なお、使用しているascのバージョンは 0.9.2 です。 C書けない私にWebAssemblyをつくれと言われましても WebAssembly（以下、WASM）とはWebブラウザで動くプログラムのバイナリ表現です。Safari, Edge, Chrome, Firefoxと、モダンなWebブラウザへの搭載も終わり、本格的に利用できるようになってきました。その特徴はスピードです。ネイティブに近いスピードで動作します。画像処理やエンコード、暗号といったCPUの処理能力に依存するような処理を行うモジュールをWebAs
Facebook 製 JavaScript テストツール Jest を使ってテストする ( Babel, TypeScript のサンプル付き ) | Recruit Tech Blog
Facebook 製 JavaScript テストツール Jest を使ってテストする ( Babel, TypeScript のサンプル付き ) 福井祐人 この記事はRECRUIT MARKETING PARTNERS Advent Calendar 2017の投稿記事です。 はじめまして。11月にJoinしたフロントエンドエンジニアの福井（@fukumasuya）です。チームではスタディサプリEnglishのWebブラウザ版の開発を担当しています。 突然ですが皆さんはプロジェクトでJavaScriptのテストをするときにどのツールを使うか迷うことはないでしょうか？フレームワークは？アサーションライブラリは？テストランナーは？テストカバレッジはどうするか？などなど決めないとダメなことが多く苦労していませんか？そんな皆さんにはFacebook製オールインワンテストツールのJestをオススメ
漸進的型付けの未来を考える - -
この記事はCAMPHOR- Advent Calendar 2017 11日目の記事です． アブストラクト 漸進的型付けは，ひとつの言語の中で静的型付けと動的型付けをスムーズに組み合わせるための技術です． よく知られた特徴は any 型を使った静的型付けで， TypeScript や Python といったプログラミング言語には既に実装されています． しかし，理論と実際のプログラミング言語の間には大きなギャップが存在します． 特に，漸進的型付けの理論で提案されているキャストを用いた動的型検査が実装されていないために， 静的型付けの恩恵を十分に得られていないという問題があります． この記事では，まず漸進的型付けの理論をコード例を用いて紹介し， 現状の漸進的型付き言語が抱える問題を解説します． そのあとで，漸進的型付き言語が目指すべき目標を理論的視点から論じます． それらの目標は，静的型付けを
Deep Dive Into TypeScript
HTML5Conference 2017 Room A Deep Dive Into TypeScriptの発表資料です。
AWS Lambda のファンクションを TypeScript で作る！ 実践編 - botchy hack note
こんにちは、TypeScript と VS Code と AWS が好きな bokken (@bokken_) です。 以前、簡単に AWS Lambda のファンクションを TypeScript で作る方法を紹介しましたが、 今回は少し発展して、TypeScript でインターフェースをしっかりと定義しつつ、AWS については Amazon SNS と CloudFormation を使います。 実装する内容は前回と同様、WEB API 経由で天気の情報を取得するものです。ただし今回は毎朝 7:00 に天気を Amazon SNS を使ってメールで通知してくれる Lambda ファンクションを開発しましょう。 さらに CloudFormation を使って AWS Lambda や Amazon SNS などのリソースの設定を自動化するところまでが目標です。 (AWS CLI で Clo
TypeScript 日本語ハンドブック | js STUDIO
このサイトについて TypeScriptのハンドブックを日本語に翻訳してまとめています。 GitHubのMicrosoft/TypeScript-Handbook の内容を参考に作成していますが、非公式で個人による作成物であるため、誤りがあると思います。その点についてはご了承ください。 もし、間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 このサイトではGitHubのドキュメントを元に翻訳していますが、同じ内容のドキュメントがTypeScriptの公式サイトに公開されています。 Back to top © https://github.com/Microsoft/TypeScript-Handbook このページは、ページトップのリンク先のTypeScript-Handbook内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式の
TypeScriptの進化の道のりとバージョン2.0の新機能（型システム編）
TypeScriptの進化の道のりとバージョン2.0の新機能（型システム編）：特集：TypeScript 2.0概説（1/3 ページ） 2016年9月にTypeScript 2.0がリリースされた。本稿では、これまでのTypeScriptの進化の過程とバージョン2.0で導入された新機能を見てみよう。
Vue.jsとTypeScript - Qiita
はじめに この記事を書いて１年経ちました。 １年間でVue.jsとTypeScriptの環境は大きく変わりました。まずは、その辺を色々と紹介していきます。そのあと、サンプルを作成します。 2017年3月19日に追記 作成したサンプルがエラー吐くとのissueを受けたのを機に、サンプルを結構いじりました。サンプルも必ずチェックしてね。 この１年間で変わったこと Vue.js 2.0がリリースされた 新しいメジャーリリースに際し、TypeScript関連で一番大きく変わったのは、型定義ファイルの提供方法です。バージョン１まではDefinitelyTypedに型定義ファイルを登録していました。そのため、tsdやtypingsで型定義ファイルをダウンロードする必要がありました。 一方新しいバージョンからは、Vue.jsのリポジトリ内に型定義ファイルがあります。したがって、npmなどを使ってライブラ
【Angular2入門】TypeScriptをコンパイルからのWatchifyでファイル結合、ブラウザで動作確認するところまで - Gulpで作るwebフロントエンド開発環境 | PSYENCE:MEDIA
【Angular2入門】TypeScriptをコンパイルからのWatchifyでファイル結合、ブラウザで動作確認するところまで - Gulpで作るwebフロントエンド開発環境 wakamsha 2016.10.03 70 15101629 正式版もリリースされたことだし、そろそろ Angular2 を始めてみませんか？ 2016年9月15日に Angular2 の正式版がしれっとリリースされました。前バージョンの AngularJS 1.x は独自の路線で HTML や Web フロントエンドを拡張するといった志向のフレームワークでしたが、2系は 1.x系の魅力でもある豊富な機能は引き継ぎつつ、より web 標準に寄り添った実装となっているのが特徴です。 One framework. - Angular これまでは β版の期間が続いていたためになかなか手を出せずにいましたが、ここにきてよう
大型フロントエンド開発におけるTypeScriptとDDD // Speaker Deck
All slide content and descriptions are owned by their creators.
がんばらないTypeScript環境ほしい - 藻ログ
色々あってシンプルなtypescriptの開発環境をつくろうとして消耗した話です 小規模なプロジェクトをシュって書けるシンプルな環境がほしい でもナウくなっててほしい そもそもナウいとは... 最近のフロントエンドの人は何を言ってるのか全然わからないし依存パッケージが多すぎて混乱する でもちょっとはナウくなっててほしい 試行錯誤した結果 npm scripts + browserify + tsify + watchify で構成することにきめた． 本体を1行も書かないまま日付が変わっていた． もうナウくなくていいから本体が書きたい 構成 とりあえずbuildすると色々なものがdistに送られる構成にした ├── dist (static-assets) │ ├── bundle.js │ ├── bundle.css │ └── index.html ├── src │ ├── ts │
カバレッジが高いと品質が高い？Javascript / TypeScript のカバレッジを可視化して網羅する単体テストコード入門
Javascript / TypeScript のコード カバレッジを Visual Studio Code で可視化する Javascript や TypeScript のプロジェクトで，単体テスト コードが実行された／実行されていないコードをソース コード エディター上に色分け表示（カバレッジ ハイライト）できれば，単体テストの消化効率をもっと上げられるのに，と思うことがあります。 本稿では，Javascript / TypeScript のエディターに Visual Studio Code (VS Code) を使い，コード カバレッジを VS Code 上で可視化する方法を解説します。 Code Cover VS Code でカバレッジ ハイライトするには，Bradley Meck 氏 (Node.js コミッター) 制作の "Code Cover" を使用します。 Code Co
TypeScript でユニットテストする。カバレッジもねっ!! - Syati.info
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 でそれぞれコマンドが利用できるようになりま
TypeScript だけで Web アプリケーションを作る - おなか周りの脂肪がやばい
はてなでアプリケーションエンジニアをしている id:hatz48 です。この記事は はてなデベロッパーアドベントカレンダー の 13 日目です。 昨日は id:dekokun による dekotech.dekokun.info でした。私は去年は developer.hatenastaff.com こんな記事を書いていました。 今年は、はてなのサービス開発合宿で TypeScript のみを使ってアプリケーション開発をした話をします。 はてなのサービス開発合宿 はてなのサービス開発合宿については はてなスタッフアドベントカレンダー一日目で紹介されています。三日間、いつもとは違うチームで、通常業務から離れ、集中して開発するというものです。 開発自体は、実は三日間で完成はしなかったのでいまでも隙間の時間で開発を続けています。とある社内システムに、ちゃんとしたアクセス制御をいれて実装しなおそうと
Symfony2でTypeScriptなAngularJSを使う方法（実践編） | QUARTETCOM TECH BLOG
この記事は Symfony Advent Calendar 2016 2日目の記事です。 弊社の過去のブログを実践した方法をチュートリアル的に紹介します。 Symfony2でTypeScriptなAngularJSを使う方法 http://tech.quartetcom.co.jp/2016/07/08/typed-angularjs-inside-symfony/ 2016/12/08 追記 ブログのタイトルがSymfony2向けとなっていますが、上記ブログの内容を元にSymfony3で実践した内容を紹介しています。 仕組みと主な環境 TypeScriptで書いたソースコードをwebpackでJavaScriptにトランスパイルし、Symfonyのassetとしてtwigに読み込ませます。 補足 サンプルとして紹介するコードでAssetic Filterを通してJavaScriptを読み
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptの概要とLanguage Server Protocol / About TypeScript & Language Server Protocol
