Node.js
Express
MaterialDesign
React
VisualStudio2015

Visual Studio 2015 で始める Express + React + マテリアルデザインアプリの開発

More than 1 year has passed since last update.


はじめに

2016年7月28日に、NTVS 1.2 (Node.js Tools for Visual Studio) が公開されました。

どうやらかなり機能が強化されたようです。

https://www.visualstudio.com/ja-jp/features/node-js-vs.aspx

というわけで、今回はこの NTVS を導入して、Visual Studio 2015 で React アプリを開発してみようと思います。


NTVS をインストール

↓からインストーラをダウンロードし、実行します。

https://www.visualstudio.com/ja-jp/features/node-js-vs.aspx

002.png


プロジェクトを作成

Visual Studio 2015を起動し、プロジェクトを作成します (「ファイル」->「新規作成」->「プロジェクト」)。

本稿では、「JavaScript」->「Node.js」->「Basic Node.js Express 4 Application」というテンプレートを使います。

004.png


実行

コードを何も書き換えず、そのまま実行してみます。

「デバック」->「デバッグの開始」をクリックしてください。

006.png

ブラウザが起動し、「Welcome to Express」というメッセージが表示されるはずです。

008.png


Jadeテンプレートを修正

View フォルダ直下に .jade というファイルが幾つかあります。これは Jade というテンプレートエンジンの一種です。

layout.jade というファイルを開いて、以下のようにコードを修正しヘッダとフッタを追加してみましょう。


layout.jade

doctype html

html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block header
+ block content
+ block footer

次に index.jade を開き、ヘッダとフッタのブロックを以下のように追加します。


index.jade

  extends layout

block content
h1= title
p Welcome to #{title}
+ block header
+ .header
+ h1 Hello!
+ block footer
+ .footer
+ h1 Bye!



再び実行

もう一度「デバックの開始」をクリックし、実行してみてください。

今度は以下のように、ヘッダとフッタのブロックに書いた「Hello!」「Bye!」という文字が <h1> タグで表示されるはずです。

010.png


React を使う

今度はいよいよ React を使ってみます。


layout.jade を編集

layout.jadeファイルを開き、以下のようにコードを追加してください。


layout.jade

doctype html

html
head
title= title
script(src='https://fb.me/react-15.3.0.js')
script(src='https://fb.me/react-dom-15.3.0.js')
script(src='https://cdn.muicss.com/mui-0.6.8/react/mui-react.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js')
//script(src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js')
link(rel='stylesheet', href='https://cdn.muicss.com/mui-0.6.8/css/mui.min.css')
link(rel='stylesheet', href='/stylesheets/style.css')
body
block header
block content
block footer
script(type='text/babel' src='/javascripts/example.js')

これで React を CDN 経由で利用できるようになりました。

また、Babel-Core 5.x も CDN 経由で読み込んでおきましょう。これで JSX が使えるようになります。

(Babel 6.x だと別途設定が必要なので、今回は 5.x でいきます)

他に マテリアルデザインのCSSフレームワークである mui も読み込みます。


example.js を作成

public/javascripts フォルダの下に example.js ファイルを作成します。


public/javascripts/example.js

let Appbar = mui.react.Appbar,

legend = mui.react.legend,
Button = mui.react.Button,
Form = mui.react.Form,
Input = mui.react.Input,
Textarea = mui.react.Textarea,
Panel = mui.react.Panel,
Container = mui.react.Container;

class Example extends React.Component {
render() {
return (
<div>
<Appbar><h1>Welcome to My World !</h1></Appbar>
<Panel>
<legend>Contact Form</legend>
<Input hint="Input 1" />
<Input hint="Input 2" />
<Textarea hint="Textarea" />
<Button variant="raised" color="primary">Submit</Button>
</Panel>
</div>
);
}
}

ReactDOM.render(<Example />, document.getElementById('example'));



index.jade を編集

index.jade ファイルを開き、#example というコードを追加します。

footer にもテキストを書いておきます。

extends layout

block content
+ #example
block footer
.footer
+ Copyright 2016 Kent | Powered by Qiita


実行

「デバッグの開始」をクリックしてみましょう。

014.png

こんな感じに、マテリアルデザインの綺麗なフォームが表示されたはずです。

以上。