[2日目] 初心者が作るアプリ開発 ~Typescriptを書くためにVimの準備とHelloWorld~

2日目（Vimの環境設定とHelloWorld表示）

まずは、Typescriptをいじるため、きちんとシンタックスハイライトしてもらわないと使いづらくてしょうがないです。

Neobundleでシンタックスハイライトのモジュールを入れちゃいましょう。

• Neobundle

let g:syntastic_typescript_tsc_args = "--experimentalDecorators --target ES5"
NeoBundle 'leafgarland/typescript-vim'

この2行を書けば次にVimを開いたときにインストールが走ります。

では、HelloWorldを表示させてみましょう。

HelloWorldを書く

まずは前に作ったプロジェクト構成を見てみます。

▸ hooks/                       
▸ node_modules/                
▸ platforms/                   
▸ plugins/                     
▸ resources/                   
▾ src/                         
  ▾ app/                       
      app.component.ts         
      app.html                 
      app.module.ts            
      app.scss                 
      main.ts                  
  ▾ assets/                    
    ▾ icon/                    
        favicon.ico            
  ▾ pages/                     
    ▾ about/                   
        about.html             
        about.scss             
        about.ts
    ▾ contact/
        contact.html
        contact.scss
        contact.ts
    ▾ home/
        home.html
        home.scss
        home.ts
    ▾ tabs/
        tabs.html
        tabs.ts
  ▾ theme/
      variables.scss
    index.html
    manifest.json
    service-worker.js
▸ www/
  config.xml
  ionic.config.json
  package-lock.json
  package.json
  README.md
  tsconfig.json
  tslint.json

こんな感じです。

これの下にあるアイコン勢が「about」「contact」「Home」のそれぞれのページを構成しているっぽいですね。

では、HomeにHelloWorldを追加してみます。

src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Hello World</h2>
  <p> 
    hello hello
  </p>
</ion-content> 

うん！いい感じです！
では、次から実際にアプリを作る段階に入っていきます。