$30 off During Our Annual Pro Sale. View Details »

TypeScriptの概要とLanguage Server Protocol / About TypeScript & Language Server Protocol

Masahiro Wakame
May 24, 2017
Programming
19
3.4k

TypeScriptの概要とLanguage Server Protocol / About TypeScript & Language Server Protocol

https://www.microsoft.com/ja-jp/events/decode/2017/sessions.aspx
Microsoftのde:code 2017で登壇して喋ったやつです。

Masahiro Wakame

May 24, 2017
Tweet

More Decks by Masahiro Wakame

See All by Masahiro Wakame
DatastoreからSpannerに 移行したいぞ途中編 / migrate Datastore to Spanner in progress
vvakame
0
610
Google Cloud Next 2019 わくわく報告会 / Google Cloud Next 2019 WakuWaku Report
vvakame
1
390
メルカリ社員100人に聞いたGoLandの使い方 / JetBrains Night Tokyo 2018
vvakame
26
12k
OSS入門 世界に参加する最初のひと押し / OSS first step
vvakame
7
610
GCP Compute 概要と選定 / DevFest Tokyo 2018
vvakame
12
1.4k
GoでGraphQLサーバを立てるぞ！ / Building GraphQL server by go
vvakame
15
4.2k
『Re:VIEW+CSS組版やっていき』を やった話とWebエンジニアが期待する未来 / CSS Publishinng for Web Developers
vvakame
3
7.9k
go.mercari.io/datastore はいいぞ！ / go.mercari.io/datastore is pretty good!
vvakame
4
870
最強のDatastoreライブラリを作った / golang.tokyo #11
vvakame
3
8.9k

Other Decks in Programming

See All in Programming
Angular Architecture Workshop: Modulith to Micro Frontends
manfredsteyer
PRO
0
190
FlutterKaigi 2022 Keynote
wasabeef
1
260
10年前のRails Girls Japanむかしばなしとわたし #rggjp #rgjp10th
yotii23
3
180
Unleashing the power of lazy objects in PHP 🪄
nicolasgrekas
2
490
Software Architecture
hschwentner
3
1k
Rails Girls 2022 LT
harunatsujita
0
220
[JJUG CCC 2022 fall] Fargate上のJVMからCPUを認識するまで 〜正しく認識されないCPUの謎を追え〜
orekyuu
0
200
RenovateをiOSアプリ開発に導入・運用した話
coffmark
0
120
Hands-on Native ESM @ JSConf JP 2022
qnighy
0
3.7k
How to dynamically validate data with Symfony
marionleherisson
0
120
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
40k
Being On Call Does Not Have to Suck.
charity
0
580

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
260
25k
What's new in Ruby 2.0
geeforr
336
30k
Clear Off the Table
cherdarchuk
79
290k
For a Future-Friendly Web
brad_frost
166
7.7k
Building Your Own Lightsaber
phodgson
96
4.8k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
42k
In The Pink: A Labor of Love
frogandcode
132
21k
Writing Fast Ruby
sferik
613
57k
Scaling GitHub
holman
453
140k
Documentation Writing (for coders)
carmenintech
49
2.8k
No one is an island. Learnings from fostering a developers community.
thoeni
11
1.5k

Transcript

  1. TypeScriptͷ֓ཁͱ Language Server Protocol @vvakame Θ͔Ί ·͞ͻΖ #decode17 #MW09

  2. Θ͔Ί ·͞ͻΖ @v vakame TypeScript Masahiro Wakame DefinitelyTyped Angular GAE/Go

  3. San Francisco

  4. Google I/O

  5. ؼࠃ͔Β3೔ GCPͱ͔νϣτΘ͔Γ·͢

  6. ॻ͍ͨຊ • TypeScriptϦϑΝϨϯε Ver 1.0ରԠ • ΊͬͪΌݹ͍ͷͰࠓͱͳͬͯ͸ΦεεϝͰ͖ͳ͍ • Revised TypeScript

    in Definitelyland • v2.0.0४ڌ • ແྉެ։ͯ͠·͢ goo.gl/mcF92t

  7. Ξϯέʔτ • JavaScript ?? • TypeScript ?? • Language Server

    Protocol ?? Ͳ͜ʹڵຯ͕ ͋Γ·͔͢ʁ

  8. TypeScriptΛ… • ຖ೔࢖ͬͯ·͢ʂ • 1ճࢼ͠·ͨ͠ • ڵຯ͸͋Δ • Babel΍flowtype࢖ͬͯ·͢ʂ શһ࢖͓͏ʂ

  9. ޷͖উखʹ࿩Λ͢Δͧʂ • ͱࢥ͍ͬͯͨ࣌ظ͕ࢲʹ΋͋Γ·ͨ͠ • "TypeScript" ؚ͕·ΕΔηογϣϯ • 1݅ • ๻͚ͩͰ͔͢ʂʁ

    গ͠ਅ໘໨ʹ͠Α… Buildʹ΋2ݸ͔͠ͳ͍

  10. TypeScript? TypeScript͸͍͍ͧ

  11. Why Type ?? • ܕ͕͋ΔͱԿ͕͍͍ͷʁ • ੩తʹղੳͰ͖Δൣғ͕ΊͬͪΌ૿͑Δ • ࣮ߦͤͣʹΘ͔Δ͜ͱ͕ͨ͘͞Μ͋Δ •

    ܕ͸࠷΋ίʔυʹີணͨ͠ςετͩ • ૣظͷόάݕग़Ͱ։ൃʹඅ΍ͤΔ࣌ؒ++

  12. Why Type ?? • IDE΍ΤσΟλ͕࢖͍΍͘͢ͳΔ • ίʔυؒͷؔ܎ੑ͕໌֬ • ఆٛ΁δϟϯϓ΍ਖ਼֬ͳೖྗิ׬ •

    ָʹ։ൃΛਐΊΒΕΔ • →ߟ͑Δࣄʹ࢖͑Δ࣌ؒ++

  13. TypeScript ֓ཁ ·ͣ͸Ξ΢τϥΠϯ͔Β

  14. ECMAScript ͱ͸ • ECMAScript͸JavaScriptͷඪ४ن֨ • 3, 5, 2015, 2016, 2017...

    ͳͲ͕ଘࡏ͢Δ • 6 → 2015 ʹͳΓ·ͨ͠ • 2015Ͱclass, module ͳͲ৽ن࠾༻ ཁ͢Δʹ == JavaScript goo.gl/lZyVX8

  15. ECMAScript ͱ͸ • ͪͳΈʹ • TypeScript͸ECMAScriptͷsuperset • →ߏจʹ΄΅׬શͳޓ׵ੑ͕͋Δ • →શͯͷJSίʔυ͸TSͱͯ͠΋ਖ਼͍͠

    Ұ෦ಠࣗͷ֦ு͕͋Δ namespace, enum, Ҿ਺ϓϩύςΟએݴ…etc

  16. ͪΐͬͱུޠͷղઆ • ES → ECMAScript • JS → JavaScript •

    TS → TypeScript • AltJS → Alternative JS AltJS͸ΘΓͱద౰ ୅ସ

  17. AltJS͸ඞཁͩͬͨ • લఏɿES 5͸ਏ͍… • Կ͔ to JS Ͱܰݮ͍ͨ͠…ʂ •

    CoffeeScript • Dart • TypeScript • Babel & Flowtype Babel͸ਖ਼௚ ධՁͰ͖Δ΄Ͳ ࢖ͬͯ·ͤΜ(খ੠

  18. Ұ൪༏͍͠AltJS • CoffeeScriptɺES5ΑΓϚγ • Ͱ΋ΊͬͪΌόάΔʢܕແ͍ • ܕʹཔͬͯੜ͖ͯΔϚϯʹ͸ਏ͍… • DartʹυϋϚϦ •

    Ͱ΋ϩοΫΠϯ͸ා͍… • ίϯύΠϧޙJS͸ਓؒʹ͸ಡΊͳ͍ • ܧଓੑʹ֬৴͕࣋ͯͳ͍ ձࣾͰ࠾༻͸ා͔ͬͨ…

  19. Ұ൪༏͍͠AltJS • TypeScriptొ৔ • ϩοΫΠϯා͘ͳ͍ʂ • →ଈ࠾༻ʂ • babelʢ6to5ʣొ৔͸TSͷޙ 2014/10

    ͱ͔

  20. TypeScript͕ੜ੒͢ΔJSίʔυ • HTML + ES Modules ྫ • Classes ྫ

    • Types ྫ • Downpile ྫ ϩοΫΠϯ͞Εͳ͍ ཧ༝Λݟͤ·͢ʂ

  21. HTML+ES Modules <html> <body> <script type="module" src="./lib/index.js"></script> </body> </html> import

    { hello } from "./sub.js"; alert(hello("es module")); export function hello(word = "world") { return `Hello, ${word}`; }

  22. ม׵ޙ <html> <body> <script type="module" src="./lib/index.js"></script> </body> </html> import {

    hello } from "./sub.js"; alert(hello("es module")); export function hello(word = "world") { return `Hello, ${word}`; } ΄΅Ұக

  23. Classes TSฤ export abstract class Animal { abstract bark(): string;

    } export class Cat extends Animal { bark(): string { return "ʹΌʔΜ"; } } const cat = new Cat(); console.log(cat.bark());

  24. Classes JS(esnext)ฤ export class Animal { } export class Cat

    extends Animal { bark() { return "ʹΌʔΜ"; } } const cat = new Cat(); console.log(cat.bark());

  25. Classes JS(es5)ฤ "use strict"; var __extends = (this && this.__extends)

    || (function () { var extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; return function (d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); Object.defineProperty(exports, "__esModule", { value: true }); var Animal = (function () { function Animal() { } return Animal; }()); exports.Animal = Animal; var Cat = (function (_super) { __extends(Cat, _super); function Cat() { return _super !== null && _super.apply(this, arguments) || this; } Cat.prototype.bark = function () { return "ʹΌʔΜ"; }; return Cat; }(Animal)); exports.Cat = Cat; var cat = new Cat(); console.log(cat.bark());

  26. Types TSฤ export interface Container<T> { data: T; } export

    function unwrap<T>(container: Container<T>): T { return container.data; } type RetStringFunc = () => string; const container: Container<RetStringFunc> = { data: () => "Hello, world", }; const func = unwrap(container); console.log(func());

  27. Types JS(esnext)ฤ export function unwrap(container) { return container.data; } const

    container = { data: () => "Hello, world", }; const func = unwrap(container); console.log(func());

  28. Downpile TSฤ function* primes() { const primes: number[] = [];

    for (let i = 2; ; i++) { if (primes.some(prime => i % prime === 0)) { continue; } primes.push(i); yield i; } } for (const prime of primes()) { if (100 < prime) { break; } console.log(prime); } ΄΅׬શʹ ੜJSʂ : number[] ͷΈ

  29. Downpile JS(es5)ฤ "use strict"; var __generator = (this && this.__generator)

    || function (thisArg, body) { var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; function verb(n) { return function (v) { return step([n, v]); }; } function step(op) { if (f) throw new TypeError("Generator is already executing."); while (_) try { if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t; if (y = 0, t) op = [0, t.value]; switch (op[0]) { case 0: case 1: t = op; break; case 4: _.label++; return { value: op[1], done: false }; case 5: _.label++; y = op[1]; op = [0]; continue; case 7: op = _.ops.pop(); _.trys.pop(); continue; default: if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } if (t[2]) _.ops.pop(); _.trys.pop(); continue; } op = body.call(thisArg, _); } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; } }; var __values = (this && this.__values) || function (o) { var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0; if (m) return m.call(o); return { next: function () { if (o && i >= o.length) o = void 0; return { value: o && o[i++], done: !o }; } }; }; function primes() { var primes, _loop_1, i; return __generator(this, function (_a) { switch (_a.label) { case 0: primes = []; _loop_1 = function (i) { return __generator(this, function (_a) { switch (_a.label) { case 0: if (primes.some(function (prime) { return i % prime === 0; })) { return [2 /*return*/, "continue"]; } primes.push(i); return [4 /*yield*/, i]; case 1: _a.sent(); return [2 /*return*/]; } }); }; i = 2; _a.label = 1; case 1: return [5 /*yield**/, _loop_1(i)]; case 2: _a.sent(); _a.label = 3; case 3: i++; return [3 /*break*/, 1]; case 4: return [2 /*return*/]; } }); } try { for (var _a = __values(primes()), _b = _a.next(); !_b.done; _b = _a.next()) { var prime = _b.value; if (100 < prime) { break; } console.log(prime); } } catch (e_1_1) { e_1 = { error: e_1_1 }; } finally { try { if (_b && !_b.done && (_c = _a.return)) _c.call(_a); } finally { if (e_1) throw e_1.error; } } var e_1, _c; ৽͠Ίͷ ίʔυͰ ࢮͳͳ͍ʂ

  30. ࠷ۙͷ৘੎ • Google͕TSΛࣾ಺ඪ४ݴޠʹ௥Ճ • https://goo.gl/eAyx0T • ঝೝϓϩηεʹ2೥͔͔ͬͨΒ͍͠ • Slack͕TypeScriptʹҠߦ •

    https://goo.gl/S4P7PR • όάݕग़ʹޮՌ༗Γ ΋͸΍࣮੷ͱ͔͍͏ εςʔδ͸ӽ͑ͨ

  31. JSͱͷߏจൺֱ • ม਺ʹର͢Δܕ஫ऍ • ؔ਺ʹର͢Δܕ஫ऍ • ߏ଄త෦෼ܕ • type assertion

    • ͦͷଞࡉ͔͍දݱ͕ͨ͘͞Μ • →JS͕ࣗ༝͗͢ΔͷͰ ੲ͸ؤுΕ͹ ͋Β͔ͨ঺հͰ͖ͨ ࠓ͸΋͏ແཧ…

  32. ม਺ʹର͢Δܕ஫ऍ // ม਺໊ͷޙʹ : ܕ໊ let str: string = "";

    // ܕʹ൓͢Δ஋ΛೖΕΑ͏ͱ͢ΔͱίϯύΠϧΤϥʔ str = 1; // ઃఆ࣍ୈͰ null ΍ undefined ΋νΣοΫՄೳ str = null; str = undefined; let num = 1; // ஋͔Βܕ͕ਪ࿦͞ΕΔͷͰnumberҎ֎͸μϝ num = "string"; // ഑ྻͱ͔ unionܕͱ͔ let array: (number | string)[] = [1, "str"];

  33. ؔ਺ʹର͢Δܕ஫ऍ // ԾҾ਺ͷޙʹ : ܕ໊ & ฦΓ஋ͷܕ໊ let twice: (num:

    number) => number; twice = num => num * 2; console.log(twice(2)); // লུՄೳҾ਺ let helloA = (word?: string) => { word = word || "world"; return `Hello, ${word}`; }; console.log(helloA()); // σϑΥϧτ஋෇͖Ҿ਺ (ES2015) let helloB = (word: string = "world") => { return `Hello, ${word}`; }; console.log(helloB());

  34. ؔ਺ʹର͢Δܕ஫ऍ // ԾҾ਺ͷޙʹ : ܕ໊ & ฦΓ஋ͷܕ໊ let twice: (num:

    number) => number; twice = num => num * 2; console.log(twice(2)); // লུՄೳҾ਺ let helloA = (word?: string) => { word = word || "world"; return `Hello, ${word}`; }; console.log(helloA()); // σϑΥϧτ஋෇͖Ҿ਺ (ES2015) let helloB = (word: string = "world") => { return `Hello, ${word}`; }; console.log(helloB());

  35. ߏ଄త෦෼ܕ class SampleA { name: string; constructor(name: string) { this.name

    = name; } } interface SampleB { name: string; } let objA: SampleA = new SampleA("A"); let objB: SampleB = { name: "B" }; // ίϯύΠϧΤϥʔʹͳΒͳ͍ʂ // SampleA ͱ SampleB ͸ಉ͡ੑ࣭Λຬͨ͢ͷͰޓ׵ੑ͕͋Δ objA = objB;

  36. type assertion // type assersionΛߦ͏ͱܕΛม׵Ͱ͖Δ // ԿͰ΋OKΛද͢ any ΛڬΊ͹޷͖ͳ͜ͱ͕Ͱ͖Δ //

    ؾܰʹ࢖ͬͯ͸͍͚ͳ͍…ʂ let objA: string = new Date() as any as string; // ͜͏͍͏ॻ͖ํ΋Ͱ͖Δ let objB: string = <string><any>new Date();

  37. Version Up ͷาΈ • 2012/10/01 v0.8.0 • 2014/04/02 v1.0.0 •

    2016/09/22 v2.0.3 • ΄΅׬੒ܥͰ͸ʁ • 2017/04/28 v2.3.2 ೔෇͸GMTͰ͢

  38. 2.0Ҏ߱ͷTypeScript • ܕͷॊೈ͞ͷ֦େ • JSͷࣗ༝౓΁ͷରԠ౓޲্ • ৽͍͠ES࢓༷΁ͷରԠ • ES࢓༷΁ͷ४ڌ౓޲্ •

    downpileͷରԠൣғ֦େ • Quick Fixͷ֦ॆ རศੑ΍ ॊೈੑͷ ֦େ͕ϝΠϯ

  39. downpileͷڧԽ • async/awaitͷαϙʔτ • generatorͷdownpile BabelͳΒ Ͱ͖Δͷʹ… ͕ղফʂ

  40. طଘࢿ࢈ͷ׆༻ • JSϥΠϒϥϦΛ࢖͍͍ͨʂ • ܕఆٛϑΝΠϧΛޙ෇͚ • ·ΔͰܕ͕͋ΔΈ͍ͨʂ • ܕఆٛϑΝΠϧ •

    ࣗ෼Ͱॻ͘ • DefinitelyTypedͰ୳͢ • microsoft.github.io/TypeSearch/ • npm install -D @types/node npmܦ༝ʹ ౷Ұʂ

  41. vs Babel • ݁ہͲͬͪΛ࠾༻͢΂͖ʂʁ • →νʔϜ࣍ୈ • ๻͸RubyΑΓ͸Java೿ • →RubyΛબ୒͠੒ޭ͢ΔνʔϜ΋͋Δ

    • TSΛ͓͢͢Ί͢Δਓ • IDE΍ϦονͳΤσΟλ΄͍͠ʂ • Java΍C#͕޷͖ʂ • ҆શͳϦϑΝΫλϦϯάʂ ΄΅ फڭઓ૪ σϞΔʁ

  42. vs ੜJavaScript • ݱ࣌఺Ͱ͸೉͍͠ • ࣌୅͕௥͍͍ͭͯͳ͍ • bundler͕·ͩඞཁ • IE11͍ͭ੾Δͷ໰୊

    • ϥΠϑλΠϜ͕·ͩ·ͩ͋Δ • Ҋ݅ͷҒ͍ਓIE11໰୊ ୤πʔϧ ೉͍͠… ΍ΊΖʔʂ

  43. TypeScript ಋೖฤ • npm init —yes • npm install -D

    typescript • tsc —init • npm-scripts • "build": “tsc" • VSCodeͷઃఆͳͲ Node.jsࣗମ͸ nodebrew͕͓͢͢Ίʂ Windowsͷ৔߹…ʁ

  44. TypeScript ܕFight • ܕఆٛϑΝΠϧࣗ࡞͸Ͱ͖Δͱخ͍͠… • Document & Handbook • www.typescriptlang.org/docs/home.html

    • Revised TypeScript in Definitelyland • qiita.com/vvakame • όʔδϣϯࠩ෼·ͱΊ ॻ͍ͯ·͢ ࣾ಺ʹ1ਓ ܕϑΝΠλʔ͕͍Δͱྑ͍ ಘ೉͍

  45. Language Server Protocol ུͯ͠LSPͩʂ

  46. Language Server Protocol • ͱΓ͋͑ͣLSPͱུ͢ • ޷͖ͳIDEɾΤσΟλΛ࢖͍͍ͨʂ • ޷͖ͳݴޠͰ։ൃΛ͍ͨ͠ʂ •

    ΑΖ͍͠ɺͳΒ͹LSPͩʂ

  47. LSPͷߟ͑ํ • ݴޠͷࣄΛҰ൪Α͘஌͍ͬͯΔͷ͸ʁ • ίϯύΠϥͷมߋʹ࠷଎Ͱ͍͍ͭͯ͘ͷ͸ʁ • ίʔυͱܕͷؔ܎ΛҰ൪Α͘஌͍ͬͯΔͷ͸ʁ • ίϯύΠϧΤϥʔʹͳΔ͔֬ೝͰ͖Δͷ͸ʁ •

    ͦ͏ʂίϯύΠϥࣗମ͕࠷ڧͩʂ ࠷ڧʹ೚ͤΔ is ࠷ߴ

  48. ΑΖ͍͠ͳΒ͹ίϯύΠϥͩʂ • ΤσΟλͱҰ൪஥ྑ͘͢Δ΂͖ͳͷ͸
 ίϯύΠϥͳͷͰ͸ʁ • ίϯύΠϥͳͲ͔ΒΤσΟλͰ
 ໾ʹཱͭ৘ใΛऔΓग़ͦ͏ʂ ݸผʹؤுΔ ͦΜͳͷ͸͍΍ͩ

  49. LSPͷ࢓༷ • Microsoft͕΍ͬͯΔ • github.com/Microsoft/language-server-protocol • ΤσΟλˠClient • ݴޠଆˠServer •

    JSON-RPCͰϓϩηεؒ௨৴ • ΤσΟλͰ໾ཱͭ৘ใΛ΍ΓͱΓ ࣮૷ݴޠґଘΛ͔ΘͤΔ

  50. LSP ಈ࡞Πϝʔδ

  51. ͜ΕɺTypeScriptʹ͋Γ·͢ • tsserverίϚϯυ • Language ServiceΛϥοϓ • ଟ͘ͷΤσΟλͰߴΫΦϦςΟͷ
 TypeScriptαϙʔτ •

    VSCode, Atom, WebStorm, Vim etc.. • ཪʹ͸tsserver͕ʂ • tsserver͸࣮͸LSP४ڌͰ͸ͳ͍… • ઌۦऀ͔ͩΒͶ ࢓ํͳ͍Ͷ goo.gl/HD4noG

  52. TypeScriptͷΞʔΩςΫνϟ github.com/Microsoft/TypeScript/wiki/ Architectural-Overview

  53. ࠓ·Ͱͷ։ൃ؀ڥͷߏ଄ http://langserver.org/ ΤσΟλ×ݴޠ ͜Ε͸ਏ͍

  54. after LSPͷߏ଄ http://langserver.org/ ΤσΟλ + ݴޠ ݸผ։ൃͩͱϚγ

  55. • JSX https://jsx.github.io/ • ͱ͍͏DeNA࢈ͷAltJS͕͋ͬͨ • Eclipse༻ϓϥάΠϯ͕ཉ͔ͬͨ͠ • https://github.com/vvakame/jsx-plugin-for-eclipse •

    ͍͢͝ਏ͍ • ݴޠ֦ுϓϥάΠϯͷ
 ࡞ΓํͷखҾ͕΄΅ͳ͍ JSX + EclipseϓϥάΠϯͷࢥ͍ग़ μϯδϣϯ͔ Կ͔ʹ͍ۙ

  56. εΩϧϛεϚον໰୊ • ݴޠ։ൃऀ • ػೳ։ൃ͍ͨ͠ • IDEɾΤσΟλ։ൃऀ • શݴޠରԠͱ͔ඇݱ࣮త •

    ϓϥάΠϯͰͳΜͱ͔ͯ͠Ͷ • ී௨ʹίʔυॻ͖͍ͨਓ • ↑࣌ʹ͸ϓϥάΠϯॻ͔͟ΔΛ͑ͳ͍ • ׳Εͯͳ͍ͷͰଟେͳۤ௧Λ൐͏ ୭͕టΛ ඃΔͷ͔

  57. LSPͷҙٛ • LSPʹରԠ͍ͯ͠Ε͹ݸผ։ൃෆཁʂ • ࠓͷͱ͜Ζӕ • ݸผ։ൃͷ޻਺͕େ෯ʹݮΔͷ͸ࣄ࣮ • OmniSharp͕ྑ͍ίϯηϓτΛ͍࣋ͬͯͨ •

    TypeScript΋tsserverΛ࣋ͬͨ • "ඪ४"͕͋Δͱ࿩͕ૣ͍

  58. LSP΍ͬͯΈͨ • ࣗ෼Ͱ࡞ͬͯΈͨ • prhͱ͍͏ٕज़ॻͳͲߍਖ਼༻πʔϧ • ͜ΕΛLSPରԠͤͯ͞ΈΑ͏ʂ • ࣮૷Ͱ͖ͨػೳ •

    ྑ͘ͳ͍දݱͷݕग़ • Quick Fix • จॻதͷશީิΛҰׅFix • ઃఆͷࣗಈ࠶ಡࠐ github.com/prh/ vscode-prh-extention

  59. LSP΍ͬͯΈͨ • ن໛ • languageserver ໿300ߦ • vscode֦ு ໿100ߦ •

    ࣦͬͨ΋ͷ ΰʔϧσϯ΢ΟʔΫ • σϞ • VSCode্Ͱಈ༷͘ࢠ Θ͔Ε͹؆୯ʂ

  60. Type Hierarchyͱ͔ ͋Γͦ͏Ͱͳ͍΋ͷ΋ goo.gl/aIZBeS

  61. ࢀߟࢿྉ • github.com/prh/prh-languageserver • github.com/Microsoft/vscode-tslint • github.com/Microsoft/vscode-languageserver-node • github.com/Microsoft/vscode-languageserver-node-example

  62. ؔ࿈npmύοέʔδ • Server • vscode-languageserver • vscode-uri • Client (VSCode

    ext) • vscode-languageclient • ֤Language Server΁ͷύε

  63. ࣮૷ͯ͠Έ͍ͨਓ޲͚ͷઆ໌ • ֤छΠϕϯτϋϯυϥΛŹžŹž࢖͑͹جຊOK • σόοάׂ͕ΓͱΊΜͲ͍ • Node.jsϓϩηεʹΞλον͍ͨ͠… • ϩάग़ྗͰ৐Γ੾Δ… •

    ***.trace.server Λඞͣ༻ҙ VSCodeҎ֎ͷ ಈ࡞ݕূ͸…

  64. ͱ͜ΖͰtsserver͸ • LSP४ڌͰ͸ͳ͍ʂ • v1.5.3Ͱొ৔ 2015/7/20 • LSPϦϙδτϦ 2015/9/4 ࢓ํͳ͍Ͷ…

    github.com/Microsoft/TypeScript/issues/11274

  65. ͦͷଞ • Rust Language Server • github.com/rust-lang-nursery/rls • Jonathand Turnerࢯͱ͔͕࡞ͬͯΔ

    • Rustࣗମ͸ػೳΛϗετͤͣ • ਫ਼౓͸ظ଴ͨ͠΄ͲͰ͸ͳ͍ • list.get(0). Ͱิ׬͕Ͱͳ͘ͳͬͨΓ Rust+WASMॻ͍ͨ goo.gl/kjMffu

  66. ͦͷଞ • ݴޠࣗମʹLanguage Service͕૊Έࠐ·ΕͯΔྫ͕ ͦ΋ͦ΋গͳ͍ • ࠓޙͲ͏ͳΔʁʁ • TypeScriptଚ͍… ॳظઃܭ͔Β૊Έࠐ·ΕͯΔͱڧ͍ʂ

  67. Language Service Plugin ུͯ͠LSPͩʂ

  68. Language Service Plugin • ͱΓ͋͑ͣLSPͱུ… ةݥ͕ةͳ͍ʂ • ΊΜͲ͍ͷͰϓϥάΠϯͱݺ΅͏ • ͜Ε͸TypeScriptݻ༗ͷػೳ

    • Language Serviceͷॲཧʹ1ຕטΊΔ • ͭ·Γtsserverʹ΋1ຕטΊΔ • tscʹ͸טΊͳ͍ ηογϣϯλΠτϧ ࠷ॳؒҧ͑ͯ·ͨ͠…

  69. ࠶ܝ github.com/Microsoft/TypeScript/wiki/ Architectural-Overview

  70. ͭ·Γ…ʁ • ΤσΟλΛ֦ுͰ͖Δʂ • LS→ϓϥάΠϯ→tsserver→ΤσΟλ • TSίʔυதͷผݴޠʹೖྗิ׬Λ͋ͯͨΓ • lintΛಈ͔ͨ͠Γ

  71. Ͱ͖ͳ͍ࣄ • tscͷॲཧʹ͸טΊͳ͍ • ίϯύΠϧ݁ՌΛม͑Δ • ίϯύΠϧͷ͍ͭͰʹtslintΛ૸ΒͤΔ tscͰ΋ಈ͘ͱ ଟ͘ͷπʔϧ͔Β ແବ͕ݮΒͤͦ͏…ʁ

  72. ࣮ੈքͰͷར༻ྫ • @angular/language-service • ts-graphql-plugin github.com/Microsoft/TypeScript/wiki/ Writing-a-Language-Service-Plugin

  73. ࣮ࡍʹ΍ͬͯΈͨ • github.com/vvakame/typescript-plugin-example • Quick Infoͱೖྗิ׬ީิʹ Λ͚ͭΔ • ͚ͩ •

    σϞ tsconfig.jsonʹ ઃఆ͕ඞཁͩͧ

  74. ͓͞Β͍ • TypeScript͸ • ϩοΫΠϯ͞ΕͮΒ͍ • IDE΍ΤσΟλ͕ߴػೳ • ࠾༻ࣄྫ΋૿͑ͨ •

    Language Server Protocol • ָ͍͠ʂ • ଞݴޠʹ΋ঃʑʹ޿͕Δ͔΋ ͜ͷޙAsk the speakerͰ ૬ஊͱ͔Ͱ͖·͢ʂ

  75. ͋Γ͕ͱ͏͍͟͝·ͨ͠

  76. NOTE • TS ϦϦʔεαΠΫϧͷ࿩ • TypeScriptίϯύΠϥ͸TypeScriptͰॻ͔Ε͍ͯΔ • tsfmtͷ঺հ • Salsaͷ࿩ʢJSͷΤϯδϯΛ݉ͶΔTS

    LSͷ࿩ʣ