TypeScript 入門

TypeScriptのイントロがDev.office.comにあるので眺めてみた。 tsとして以下の例が載っている。 class Student { fullName: string; constructor( public firstName, public middleInitial, public lastName){ this.fullName = firstName + ” “+ middleInitial + ” ” + lastName; } } interface Person { firstName: string; lastName : string; } function greeter(person: Person){ return “Hello, “+ person.firstName + ” ” + person.lastName; } let user =new Student(“Jane”,”G.”,”Doe”); document.body.innerHTML=greeter(user); これをJSにコンパイルするとこうなる(WebStormはプラグインが動いてダイナミックに自動生成する) var Student = (function () { function Student(firstName, middleInitial, lastName) { this.firstName = firstName; this.middleInitial = middleInitial; this.lastName = lastName; this.fullName = firstName + ” ” + middleInitial + ” ” + lastName; } return Student; }()); function greeter(person) { return “Hello, ” + person.firstName + ” ” + person.lastName; } var user = …

SharePoint Framework

去年の暮れぐらいだったか、MSのお知らせでSharePoint Frameworkという新しい開発環境を使った SharePoint SiteのCustomizationが可能になりました。という連絡があった。  自分がやりたいSPサイトのCustomizationは 基本的にJavaScriptをページに埋め込むJavaScript Injectionという手法だ。 これでクライエントサイドの描画をコントロールするCSRフックとかリストやファイルのアイテムをAjaxで読み書きするREST APIなどを使ってカスタムページを作るという方法で用が足りてしまうので、あまり気にしていなかったのだが、この方法、最近、その進化が目立つModern view  pageでは使えない。 これは開発するのにVisual Studioが必須であるSharePoint Add-Inでも同じ様で、 どうも今の時点でModern Look componentのCustomizationをサポートしているのはSharePoint Frameworkのみのようなのだ。 で、Dev.Office.comのDocumentationを眺めてみると、なんとこれ、 Node.JS上で全部動いているのだ。 NPMで yo,  gulpと @microsoft/generator-sharepoint を導入し Project folderを作って以下を実行 yo @microsoft/sharepoint これで必要なファイル群がフォルダーにインストールされる。 hello worldのテンプレートになっているので、これでもうnode.js 上のローカルPCで動くSharePointのページを模したWorkbench上での実行が可能(下記コマンドでDefaultブラウザが勝手に立ち上がる) gulp trust-dev-center gulp serve ここまで、SharePointサイトにアクセスする必要すらない。 Step by Stepはdev.office.comに詳しいので割愛 (Build your first SharePoint client-side web part (Hello World part1)) SharePointのサイトでもすでにDevelopper siteが例えば”https://mysite.com/sites/dev”などとして設定されているなら、 ”https://mysite.com/sites/dev/_layouts/workbench.aspx” にアクセスすると、開発中のwebPart のWorkbenchがSharePoint上で作動する。 そしてこのTool Chainによる開発、Visual Studioが必要ない、というか使えない。dev.office.comのお勧めEditorはVS Code. IDEの例としてJetBrainのWebStormがあげられているなどVisual Studioへの依存性が一切ない。(C#もドットnetも使わないなら当たり前というべきか) ただ、使われているコードが通常のJavaScriptではなく、TypeScriptなのだ。 TypeScriptのコードは実行時にはJavaScriptにばらされるのでそんなに大きなLearning Curveにはならない、と予測はしているのだが、これは学習する必要があるんだろう。 Node.jsは言語というより開発環境のベースとして使われるので、これ自体を学ぶ必要はない。 VSで使っていたNugetだとかMS buildーtoolなどのツールが、下のようにNode.JS上で動くツールにおきかわっているわけで、今わかっている範囲でまとめると Node.js: Install するだけ、普通のJavaScriptの知識で十分のはず。 NPM :DependencyのUpdateなど、使い方は学んだほうがよさそう。yarnでもいいのかな yeoman(yo):Install するだけ、学習の必要性はなさそう gulp: コマンドをいくつか覚えるだけで学習の必要性はなさそう typescript: 学習の要あり webpack:@microsoft モジュールを導入したときに含まれている。さわらなくてよい。何本ものファイルを、一本に圧縮する、というような作業をやっているらしい。 VS CodeまたはWebStorm:Dev.office.comはVS Codeを使った用例を挙げているが、自分は従来からつかっているWebStormを使う。 というわけで、なんと開発環境的には、2,3,4,5,6は1のNodeJSが動けば動くのでなんでもよく、VS codeもWebStormもマルチOS環境で動くので 要するに Linux上で開発できてしまうのだ。 というわけで、javaScriptをかじっている人間にはハードルが低そうな予感。 Linux環境でぼちぼちやってみようかな?