フロントエンドエンジニアをやっています。
頑張るから読んでほしい。

AWSでサーバー構築してみました。

AWS

少しサーバーのこととか勉強したいなあ、と思ってAWSでサーバーを構築してみました。 とりあえず、インスタンスの作成、LAMPのインストール、apacheのテストページを表示させるところまでです。

1. アカウントの作成

アカウントを作成します。

2. AWSにサインイン

コンソールにログインします。

3. EC2のインスタンスを作成

EC2をクリックします。

f:id:cidermitaina:20180711231203j:plain

インスタンスの作成をクリック。

f:id:cidermitaina:20180711231330j:plain

OSを選びます。
とりあえずAmazon Linux 2 AMI (HVM), SSD Volume Type を選んでみました。

f:id:cidermitaina:20180711231343j:plain

インスタンスタイプの選択をします。 無料枠のt2.microを選びました。

f:id:cidermitaina:20180711231402j:plain

インスタンス作成の確認画面です。 確認ができたら、作成を押します。

f:id:cidermitaina:20180711231424j:plain

4. キーペアの作成

サーバーへの接続は公開鍵認証になるので、秘密鍵を作成します。

新しいキーペアの作成を選択してキーペア名を入力し、
キーペアのダウンロードをクリックしてダウンロードします。

ダウンロードが完了したらインスタンスの作成をクリックします。

5. インスタンスの作成中

インスタンスの表示ボタンをクリックし、作成が成功していれば以下の画面になります。 インスタンスの状態がrunning、ステータスチェックが2/2のチェックに合格しましたであれば成功です。

f:id:cidermitaina:20180711231433j:plain

6. サーバーに接続

接続ボタンをクリックすると、接続方法が書いてあるので、手順通りに進めます。

作成したキーは適宜置き場所を変えます。

windows環境だと、以下の手順で接続しました。

ssh ec2-user@パブリック IP -i C:\Users\キーの場所\*****.pem


7. LAMP ウェブサーバーをインストール

ブラウザからURLにアクセスしたいので、LAMPをインストールします。

LAMP?

Linux ＋ Apache ＋ MySQL ＋ PHP（Perl、Python）で構成される環境のこと

手順は以下のチュートリアル通りです。 https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ec2-lamp-amazon-linux-2.html

以下に手順を書いていますが、内容はさっきのURLと同じです。

1. ソフトウェアの更新を実行

すべてのソフトウェアパッケージが最新の状態であることを確認します。
$ sudo yum update -y

2. LAMP MariaDB と Amazon Linux 2 PHP パッケージの最新バージョンを取得

sudo amazon-linux-extras install lamp-mariadb10.2-php7.2 php7.2

3. Apache ウェブサーバー、MariaDB、PHP ソフトウェアパッケージをインストール

sudo yum install -y httpd mariadb-server

4. Apache ウェブサーバーを起動

sudo systemctl start httpd

5. systemctl コマンドを使用して、システムがブートするたびに Apache ウェブサーバーが起動するように設定

sudo systemctl enable httpd

httpd が有効であることを確認

sudo systemctl is-enabled httpd

6. インバウンド HTTP (ポート 80) 接続をインスタンスに許可する。

コンソールのセキュリティグループをクリック、アクションの中のインバウンドルールの表示を選択。

次の値で新しいインバウンドセキュリティルールを追加。

  • Type: HTTP
  • Protocol: TCP
  • Port Range: 80
  • Source: Custom

f:id:cidermitaina:20180711231549j:plain

7. ウェブサーバーのテスト

ウェブブラウザで、インスタンスのパブリック DNS アドレス (またはパブリック IP アドレス) を入力します。

Apache テストページが表示されると成功です。



ふう。
次の記事はバーチャルホストの設定のこととかを書く予定です。。。



Vue.js + Vue-cli + bulmaで作るSPA

Vue.js

SPAを作ってみたいなあ、と思って実際に作ってみたのでメモです。

実際にページを作成してSPAを試してみたかったのでcssフレームワークbulmaを使って作りました。

こんな感じのページができます。

https://cidermitaina.github.io/spa-page/#/

（vue init webpackでできるVueアプリケーションの中身解説が多めです。bulmaの使い方は触れません。）

1.vue-cli のインストール

Vue.jsを使う環境を準備するためのコマンドラインインタフェースをインストールします。

vue-cliでインストールを行うとVue.jsの環境をものすごく簡単に構築できます。

npm install -g vue-cli

2.プロジェクトを作成

vue init webpack プロジェクト名

3. ローカルで確認する

cd プロジェクト名

npm run dev

ブラウザで http://localhost:8080/ をアクセスするとサンプルが表示されます。

4.Vueアプリケーションの中身は？

npm run build

をすると実際に動くソースが作られます。（./dist フォルダ）

├── dist
  ├── index.html
  └── static
      ├── css
      └── js

./dist/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>spa-site</title><link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet>
</head>
<body>
  <div id=app></div>
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js>
</script>
<script type=text/javascript src=/static/js/vendor.7fed9fa7b7ba482410b7.js>
</script>
<script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js></script>
</body>
</html>

index.html → buid → ./dist/index.htmlになったみたいです。

./src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

./src/App.vueをコンポーネントとして登録しているようなので見てみます。

./src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<router-view/>?

vue-routerライブラリがパスに応じて表示するコンポーネントを切り替えています。

設定されているかというとsrc/router/index.jsです。

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

pathで'/'にアクセスすると、<router-view/>にHelloWorld.vueが表示される

import HelloWorld from '@/components/HelloWorld'の＠って？

webpack.base.conf.jsの

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }

にsrc ディレクトリの alias を定義しています。

Webpack を使っていてファイルの相対パスを書くのがつらくなったとき - kitak blog

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

dataで持っているmsgの値を{{ msg }}で表示しています。 Vue単一コンポーネントはコンポーネントスコープCSSという機能があり、<style scoped>の部分でスコープ宣言されてます。これによって、CSSが他のコンポーネントに影響を与えることなく分離し、CSSの管理がしやすくなります。

5. 中身を変更していく

中身が理解できたところで、編集してページを作成していきます。

1.ルーティングの設定

まずはコンポーネントファイルを作成します。 HelloWorld.vueをコピーして、必要なページ分作成します。 今回はtopページ、aboutページ、noteページ、apiページ、contactページを作成します。

├──components
  ├── about.vue
  ├── api.vue
  ├── contact.vue
  ├── note.vue
  └── top.vue

次にルーティングの設定です。

./router/index.jsを編集します。

import Vue from 'vue'
import Router from 'vue-router'
import top from '@/components/top'
import about from '@/components/about'
import note from '@/components/note'
import api from '@/components/api'
import contact from '@/components/contact'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'top',
      component: top
    },
    {
      path: '/about',
      name: 'about',
      component: about
    },
    {
      path: '/note',
      name: 'note',
      component: note
    },
    {
      path: '/api',
      name: 'api',
      component: api
    },
    {
      path: '/contact',
      name: 'contact',
      component: contact
    }
  ]
})

2.リンクの設定

次にApp.vueを編集してリンクをつけていきます。

<ul>
  <li>
    <router-link to="/">Top</router-link>
  </li>
  <li>
    <router-link to="about">About</router-link>
  </li>
  <li>
    <router-link to="note">Note</router-link>
  </li>
  <li>
    <router-link to="api">Api</router-link>
  </li>
  <li>
    <router-link to="contact">Contact</router-link>
  </li>
</ul>

これで仕組みは完成です。 あとは、ページを作成していきます。

3.bulmaのinstall

bulmaをinstallします。

npm install bulma

npm install bulma sass-loader node-sass --save-dev

App.vueにbulma本体のimportの記述を追記します。

<style lang="scss">
@import "../node_modules/bulma/bulma.sass";
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

これでbulmaを使って簡単にページを作成できるようになりました。

あとは、自由にbulmaを使ってページを作成していくだけです。

思ってたよりも簡単にできました◎

今回はbulmaを使ってページを作る手順は省略しますが、公式を見れば詳しく書いてあるので簡単に作れちゃうはずです。

bulma.io




今回作成したページのソースを参考に貼っておきます。

github.com

Go言語でhttpサーバーを立ち上げる

Go言語

Go言語でHTTP通信をするには、net/httpパッケージを使用します。

package main

import (
    "io"
    "net/http"
)

func infoHandler(w http.ResponseWriter, r *http.Request) {
    // HTML テキストをhttp.ResponseWriteへ
    io.WriteString(w, `
  <!DOCTYPE html>
  <html lang="ja">
  <head>
  <meta charset="UTF-8">
  <title>hello</title>
  </head>
  <body>
  <h1>Hello World</h1>
  </body></html>
  `)
}

func main() {
    // /hello にアクセスした際に処理するハンドラーを登録
    http.HandleFunc("/hello", infoHandler)

    // サーバーをポート8080で起動
    http.ListenAndServe(":8080", nil)
}


ハンドラ関数の定義

HTTPリクエスト発生時に呼び出される具体的な処理が書かれています。(infoHandler関数) ハンドラ関数は、必ず以下形で定義します。

func 関数名(w http.ResponseWriter, r *http.Request) {
    // 実行する処理
}

http.ResponseWriterインタフェース

ハンドラ関数の第一引数には、http.ResponseWriterインタフェース型のオブジェクトが渡されます。 このオブジェクトはHTTPレスポンスヘッダへの値セットや、HTTPレスポンスボディへの出力に使用します。

ioパッケージ

基本的な入出力のための型とインターフェイスがまとめられたパッケージ。

WriteString関数

func WriteString(w Writer, s string) (n int, err os.Error)

WriteStringは、wに文字列sの内容を書きこみます。

ハンドラ関数の登録

main関数内でhttp.HandlerFunc関数を使用することで、 アクセスパスとハンドラ関数を結びつけています。

http.HandleFunc("/hello", infoHandler)

サーバの起動

全てのハンドラ関数の登録が完了したら、サーバの起動を行います。

http.ListenAndServe(":8080", nil)

プログラムを実行するには？

基本的には、go run hoge.goもしくはgo build hoge hoge.go | ./hogeとすることで実行することができます。

go build

goはコンパイル型言語なので、CやJavaのように基本的にはコンパイルする必要があります。

go build [コンパイル後のファイル名] [コンパイルしたいファイル名]

コンパイルし,コンパイル後のバイナリファイルを実行するには

./[コンパイル後のファイル名]

で実行します。

go run

自動的にコンパイル・実行してくれる便利なコマンド。

go run ファイル名

コンパイルして実行せずに実行できます。


webpackについて丁寧に。

webpack

webpack4になったので、これを機に丁寧に理解したいなあ、と思ってまとめました。 自分用メモです。

webpackとは

モジュールバンドラのこと。 まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。

モジュールバンドラ
複数のモジュールを1つにまとめたファイルを出力する
ツールのこと


なんでモジュールバンドラを使うの？

  • 機能ごとにファイルを分割（モジュール化）できるから
  • 自分が作成したモジュールだけではなく、外部モジュール（npmなどでインストールできるパッケージなど）も利用できるから
  • リクエスト数を減らせるから
  • 依存関係を解決したファイルを出力できるから

    自分が作成したモジュールだけではなく、外部モジュール（npmなどでインストールできるパッケージなど）も利用できます。


ファイルを分割（モジュール化）するメリットは？

  • コードが見やすくなる
  • 名前空間を生成できる（変数の競合やグローバル汚染を防ぐ）
  • モジュールの保守性を高められる
  • モジュールの再利用性を高められる


webpackを使ってみる

実際にwebpackを使う手順です。

1. webpackローカルインストール

npm install webpack --save-dev
or
yarn add webpack --dev

2. webpack-cliのインストール

webpackコマンドでwebpackを実行するために、以下のコマンドでwebpack-cliをインストールします。
（webpack 4から必要になったみたいです。）

npm install webpack-cli --save-dev
or
yarn add webpack-cli --dev

3. webpack.config.jsの設定

webpack.config.jsとは？

webpackの設定ファイルのことです。

// output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく
const path = require('path');

module.exports = {
  // モードの設定、v4系以降はmodeを指定しないと、webpack実行時に警告が出る
  mode: 'development',
  // エントリーポイントの設定
  entry: './src/js/app.js',
  // 出力の設定
  output: {
    // 出力するファイル名
    filename: 'bundle.js',
    // 出力先のパス（v2系以降は絶対パスを指定する必要がある）
    path: path.join(__dirname, 'public/js')
  }
};

4. webpackコマンドで実行

npx webpack

or

npm run webpack

or

yarn webpack

を実行するとbundle.jsという名前のファイルがpublic/js/配下に出力されます。


webpack.config.jsを詳しく

webpack.config.jsの設定に関してさらっと流しちゃったので、詳しくまとめます。

module.exports = {
    mode: 'development',
    entry:'./src/assets/js/main.js',
    output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'public/assets/js')
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
}

1. mode

モードはdevelopment、production、noneが存在します。

・production

productionにすれば、何も指定しなくてもコードが圧縮されます。 自分で設定をカスタマイズする場合は、uglifyjs-webpack-pluginというプラグインが必要になります。

たとえば、

bundleしたソースのconsoleを消す

uglifyjs-webpack-pluginをinstallします。

npm install uglifyjs-webpack-plugin --save-dev

or

yarn add uglifyjs-webpack-plugin --dev

or

const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public/js'),
  },
  optimization: {
    minimizer: [
      new UglifyJSPlugin({
        uglifyOptions: {compress: {drop_console: true}},
      }),
    ],
  },
};

www.npmjs.com

・development

差分ビルドの高速化がされている。

・none

すべての設定が無効。

2. entry

出力の設定

3. output

出力の設定。 出力するファイル名や出力先のパスを指定する。 OSによってパスが異なることを防ぐために、出力先のパスの指定にはpath.join()を利用

4. loader

画像やCSSなどのJavaScript以外のファイルをJavaScriptで扱えるように変換したり、バンドルする前にモジュールに対して実行する機能のことです。 TypeScriptをJavaScriptに変換、画像をDataURLに変換、コードをチェックするなど、ローダーによって機能は様々。 js以外のどんなファイルでもloaderさえ使えば読み込むことができます。

module: {
    rules: [
        {
        // 拡張子 .js の場合
            test: /\.js$/,
            exclude: /node_modules/// node_modules は除外する
            //利用するローダー
            use: [{
                  loader: 'babel-loader',// Babel を利用する
                  options: {
                      presets: ['env']
                  }
            }],
        }
    ]
}

babel-loader
ES2015（ES6）のコードをES5のコードに変換するローダー。

www.npmjs.com






って感じです。

node,jsの続きを書こう書こうと思って、webpackのを書いちゃいました。。。 忘れないうちにnode.jsの続きも書こうと思います。

音楽のことも書きたい...

はじめてのNode.js 2

Node.js

昨日の続きです。

express-generatorで吐き出されたapp.jsのコードを読んでみたのでまとめてみました。
（以下のソースは全て吐き出されたapp.js上のコードです。）

あと、せっかくなのでHerokuを使ってサーバー公開してみるところまでやってみたので手順をまとめました。

1. expressのapp.js

  • サーバー起動時に実行するファイル
  • 必要なURL（ルーティング）を決めていく
  • 使用するミドルウェアを設定していく



2. app.set

expressで使うテンプレートエンジンを設定する

var express = require('express');
var path = require('path');
var app = express();

 // view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
  1. expressとnode.jsのpathモジュールを読み込む
  2. appを用意、ejsを置くディレクトリを決めて、 view engineとして指定する


  • app.set()
    • アプリケーションを必要とする各種の設定情報をセットするためのオブジェクトとメソッド
  • view engine
    • テンプレートエンジンの種類を示す。具体的には第二引数で’ejs’をテンプレートエンジンを使用しているということになる
  • path.join関数
    • 返り値として第1引数以降のパスを順番に結合したパスが得られる
  • __dirname



以下がexpressの公式ドキュメントです。app.setのことをもっと詳しく書いてくれてます。
http://expressjs.com/ja/4x/api.html



3. app.use

使うミドルウェアの設定、URLの設定（ルーティング）を行う。
next();が呼ばれる度に実行される。

必要なモジュールを読み込んだり、/や/usersのようにルーティングを記述。

var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');


 // morganを使ってlog出力を行う 
app.use(logger('dev')); 

// body-parserでユーザーのリクエストのbody情報を取得
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false })); 

// リクエストを受けてcookie情報を取得する
app.use(cookieParser());

// 静的ファイルの場所を指定する。ここでは public/ 以下のファイルが静的ファイルとして設定される
app.use(express.static(path.join(__dirname, 'public')));

// routes/index.js のルーティング内容を 'http://domain/' をGETで受け取った時に実行する
app.use('/', routes);
// routes/users.js のルーティング内容を 'http://domain/users' をGETで受け取った時に実行する
app.use('/users', users);


  • morgan

    • logの出力。
      morgan() の引数に文字列を渡すか、format: を指定することで、ログのフォーマットを指定することができる。

  • body-parser

    • HTTPリクエストボディのデータを取得する

  • express.static

    • 静的ファイルの読み込み
      img、CSS ファイル、JavaScript ファイルなど



4. module

//routesというモジュール
var routes = require('./routes/index');

app.use('/', routes);

routes/index.js のルーティング内容を 'http://domain/' をGETで受け取った時に実行 

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

. /routes/index.ejsをrenderして返す処理

5. Herokuを使う

herokuとは?

gitでコードを送られると、自動でサーバー公開までやってくれる便利なサービス。

Herokuに登録、Heroku Toolbelをインストール

Heroku

jp.heroku.com

Heroku Toolbel devcenter.heroku.com

Procfileを用意する

Procfileとは？

herokuがこのプロジェクトを起動するときに実行するコマンドを記載している。

Herokuにpush

  1. Herokuにログイン
    heroku login

  2. Herokuに新しいアプリケーションを作成
    heroku create XXX

  3. Herokuにpushする
    git push heroku master

  4. Herokuコマンドでサーバーを起動
    heroku ps:scale web=1

6. まとめ

  • express-generatorで吐き出されたapp.jsの中身を確認。
  • herokuのリモートリポジトリを使い公開




はじめてのNode.js 1

Node.js

この間、社内用のテンプレートファイルを作成するにあたってgulpfileを作成していたのですが、 謎のエラーに遭遇しました。。。

このエラーが、気になって気になってもやもやしてたのですが、 調べてるうちにNode.jsのことを何も分からずに書いてたなあ、と思い勉強したことのまとめです。


1. node.jsとは

javascriptを使ってサーバーサイドのコードを書くことができるプラットフォーム。 イベントループモデルで、ノンブロッキングI/Oを使用している。

特長

  • V8エンジンで動いている

  • イベント駆動

    • 何かのきっかけで処理を行う仕組み

  • ノンブロッキングI/O

    • ファイルの読み込みのような時間がかかる処理を非同期に実行ができる
    • 処理を詰まらせずにできる




2. node.jsはイベントループなサーバー

WEBサーバの種類

apache →接続ごとにメモリを確保する為、同時リクエスト数に上限がある。

NGINX →イベントループで非同期の為同時リクエストに強い。

イベントループなサーバーだと何がいいの？

多くのユーザーの同時アクセス・大量リクエストを捌きやすい。 イベントループで処理を待たずに、イベントが呼ばれるまでループする

node.jsはjavascriptを知っていれば使える。



3. node.jsでwebサーバーを立てる

httpのcreateServerを使います。

var http = requre('http');  //モジュールを読み込む、使う

http.createServer(function(req, res){
    res.writeHead(200, {'content-Type': 'text/plain'});
    res.end('Hello World');
}).listen(3000);

node.jsのモジュール群

Index | Node.js v8.17.0 Documentation



4. expressを使う

expressとは

  • Node.jsで一番使われているフレームワーク
  • スケルトンプロジェクトのジェネレーターもある
  • 基本的な機能はほぼ揃っている

expressで使ったスケルトンサイト作成

  1. グローバルにexpressをインストール
    npm install -g express-generator

    ※「express-generator」というnpmモジュールを使用すると、アプリのひな型を自動生成することができます。 ビューのテンプレートエンジンも選択でき、すぐに動作を確認することが可能

  2. expressアプリケーションの作成
    express -e myapp(-eはejs、myappというプロジェクト)

  3. サーバー起動
    cd myapp,npm install,npm start




5. サーバーから静的ページ配信

Webサーバーは何してる？

ブラウザからのGETリクエストにレスポンスしてデータを返している

expressでGETする流れ

GETとは?

  • ブラウザからサイトを見るときに送るHTTPメソッド
  • 他にはPOST / PUT / DELETE がある。 用途で分ける
app.get('/newpage', function(req, res){
    res.render('newpage', {text: 'ejsに文字列を渡す'});
});


上記コードを詳しく見ていくと、

app.get('/newpage'
ブラウザからどのURLにリクエストが来た時の挙動なのか記述

function(req, res){
    res.render('newpage', {text: 'ejsに文字列を渡す'});
});

コールバック関数のレスポンス(res)で指定ejsファイル名をレンダリングするように記述。 このときにテンプレートへ渡す引数があれば引数にいれる




6. まとめ

  • node.jsはサーバーサイドでJavaScriptを書くことが出来るプラットフォーム
  • 同時アクセスが多く、大量のリクエストがあるサーバー向き
  • expressを使えばWebアプリ構築が簡単にできる
  • 基本的なサーバはGET / POST などのHTTPメソッドを捌いているだけなので怖くない




はじめてのVue.js

Vue.js

化粧品案件で診断コンテンツを作るっていうお仕事がありました。スタイルとカラー選択で診断結果が変わるというコンテンツなのですが、選んだスタイルによって選べるカラーの種類が変わるという診断コンテンツです。

いつもはjQueryで書いていたのですが、Vue.jsで書いてみようかなと思い（データの更新の簡素化、記述量を減らしたい）、診断コンテンツ作成前にVue.jsについて簡単にまとめて見ました。

※実装した診断コンテンツの仕組みは今度書くつもりです。。。


1. Vue.jsとは？

MVVMの代表。画面表示とデータ管理するモデルの間をつなぎ、スムーズにデータの更新を行う機能を提供。双方向データバインディングを行う（双方向に接続し、どちらかが更新されるとリアルタイムにもう一方も更新される）

MVVM

「model」「view」「viewmodel」の略。「model」（データの管理、ビジネスロジック）「view」（ユーザーインターフェース）「viewmodel」（ModelからViewへ出力データを渡す、ViewからModelへ入力データを渡す）



2. Vue.jsを使ってみる

はじめてのVue.jsということで

・ どうやって文字を表示させるの？
・ どうやってdataを変更させるの？
・ どうやってイベント処理を書くの？
・ クラスのバインドって？

っていうところを今回はまとめています。

※環境設定などは省略してます。。。

1. Vueオブジェクト

まずは文字を表示させてみます。

VueオブジェクトとはVue.jsに用意されているViewModelオブジェクト。 Vueオブジェクトを作成し、データと画面表示を関連づけ、処理していく。

var 変数 = new Vue({　オプション情報　});

el：値を表示する対象のタグ（Element）を指定。タグのID情報を用意。 data：渡す値を用意。この値はオブジェクトとして用意し、その中に値をまとめておく。

これでHello world！という文字が表示される。

【html】
<p id="msg">
    {{ message }}
</P>

【js】
var initial = new Vue({
    el: '#msg',
    data: {
      message: 'Hello world！'
    }
});




2. HTML側からVueに値を設定する

HTML側から入力した値をVueオブジェクト側に渡すには？

【html】
<body>
  <div id="msg">
    <p>
      {{message}}
    </p>
    <input type="text" v-model="message">
  </div>
</body>


v-model

v-modelはインスタンス上のデータの名前を渡すことで、データと入力フォームの結びつけをすることができます。

v-model="message"はVueのdata内にあるmessageという項目と同期されるようになる。



3. イベントとメソッドの利用

イベント処理の方法

【html】
<body>
  <div id="msg">
    <p>
      {{message}}
    </p>
    <input type="text" v-model="txt１">
    <input type="button" v-on:click="doaction" value="click">
  </div>
</body>

【js】
var initial = new Vue({
    el: '#msg',
    data: {
      message: 'Hello world！',
      txt1: ''
    },
    methods: {
      doaction: function(){
        var str = this.txt１;
        this.message ='you typed: ' + str + '.';
      } 
    }
});



4. methods

Webページ側に割り当てて使われるメソッドをまとめたもの。イベントなどを使ってWebページのタグに割り当てるメソッドは、ここに。

this.txt1は、Vueオブジェクト内に用意されているtxt1の値を示す。data内の値はこのようにthisを使って参照できる。

  1. 入力フィールドの値がtxt1にバインド
  2. txt1を取り出すことで、入力フィールドの値が得られる。
  3. その値を加工、messeageに設定
  4. messageに表示される。



5. クラスのバインド

v-bind:class="{クラス名：プロパティ}"

プロパティは、真偽値を扱う。値がtrueならクラスがon、偽ならfalse。

【html】
<button class="btn" :class="{active: isActive}" v-on:click="isActive=!isActive">button</button>

【css】
.active{
  color:red;
}






公式ガイドを参考に初歩的なところをまとめています。

jp.vuejs.org

今度は実践っていうことで作った診断コンテンツの仕組み部分を忘れないようにまとめようかなあ、と思っています。