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

0e797080b64e6b03ed00964cf69b5058?s=47 Masahiro Wakame
May 24, 2017
Programming
19
3.1k

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

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

0e797080b64e6b03ed00964cf69b5058?s=128

Masahiro Wakame

May 24, 2017
Tweet

More Decks by Masahiro Wakame

See All by Masahiro Wakame
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
1
340
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
26
11k
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
7
520
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
13
1.2k
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
15
3.8k
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
3
7.2k
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
4
590
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
3
7.8k
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
0
510

Other Decks in Programming

See All in Programming
35761e3936deba2f8189c2d20982c771?s=48 getify
1
550
0063efb4c7066273b877fdabcdcd15b3?s=48 dora1998
0
120
9178046d79f7b01ec590297c019fdd56?s=48 nagworld
1
230
C302e84057a922dce0ecbe80207e3fcc?s=48 mu_zaru
1
130
75486cbfd37125f121cf4a6c5614601c?s=48 hideokamoto
1
120
B1bddcb899ec3060fe9913f3cb70dbb6?s=48 lmt_swallow
8
2.4k
C0e29dade6ec33081689ac135a269b45?s=48 crgarridos
1
150
Cc90ea0f1ad7a6770cab81c4ef151eee?s=48 yotahada3
0
1.1k
827dbd19908541482bac51ace8b86426?s=48 anchorcable
1
130
20c5ddcad23304aed77ce8c3aa020562?s=48 tkmru
2
240
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
1
310
874fb6168eaee95c155b850a934de418?s=48 wtsnjp
0
400

Featured

See All Featured
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
8.7k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
66
260k
78b475797a14c84799063c7cd073962f?s=48 holman
460
280k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
220
110k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
52
2.7k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
479
150k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
223
47k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
192
8.4k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
500
36k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
155
6.3k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
337
16k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
7
340

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ͷ࿩ʣ