TIS ENGINEER NOTE

ITエンジニアのためのキャリア向上ノウハウブログ

プログラミング

シンプルな構成から学ぶVue.jsのコンポーネント

更新日:

今ノリに乗っているjavascriptフレームワーク『Vue.js』

Vue.jsを利用するなら是非とも身に付けたいコンポーネントを使った構成について、今回は超簡易的なソースコードを例に挙げて解説していこうと思います。

概要

今回は非常に簡易的なログイン画面のようなものを作ってみます。

あとはComponent間のデータの受け渡しを把握しやすくするために、入力中の値をリアルタイムで表示する機能も実装します。

入力フォームに値を入力し、送信ボタンを押すことでサーバーにデータを送信し登録する形になります。

サーバー側は送信されたemailをユーザーテーブルに登録するという処理を行なっていますが、今回は関連性が薄いため説明は省略します。

最終的に出来上がるページはこんな感じ。無骨ですね。

ログイン前

ログイン後

ソース

HTML

<div id="main-flame">
  <div v-if="!login">
    <preview-email v-bind:disEmail="email"></preview-email>
    <email-input @input-email="emailValue"></email-input>
    <email-submit @submit-email="sendEmail"></email-submit>
  </div>
  <div v-else>
    Welcome!
  </div>
</div>
<script src="bundle.js"></script>

この後紹介するjavascriptソースで作成するカスタム要素を中心にして記述しています。

javascript

import Vue from 'vue'
import axios from 'axios'

// プレビュー表示
Vue.component('preview-email',{
  template: '<p>email:{{ disemail }}</p>',
  props: ['disemail']
})

// 入力フォーム
Vue.component('email-input',{
  template: '<input v-on:input="emailInput" v-model="inemail" placeholder="edit me">',
  data (){
    return {
      inemail: ''
    }
  },
  methods: {
    emailInput: function(){
      this.$emit('input-email', this.inemail)
    }
  }
})

// 送信ボタン
Vue.component('email-submit',{
  template: '<button v-on:click="createUser" >送信</button>',
  methods: {
    createUser: function() {
      this.$emit('submit-email')
    }
  }
})

// メインフレーム
new Vue({
  el: '#main-flame',
  data:{
    email: '',
    sendResult: '',
    login: false
  },
  methods:{
    emailValue: function(inEmail){
      this.email = inEmail
    },
    sendEmail: function(){
      axios.post('http://localhost:1323/users/',{
        email: this.email
      })
      .then(response => {
        this.login = true
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  }
})

基本的には親要素である、main-flameのIDを保持するdiv要素を経由させて入力フォーム、プレビュー箇所のデータのやりとりを行なっていくイメージです。ちなみにformタグを使用していないため、一般的な登録画面とは異なりますが、説明の便宜上このような構成を取っております。

以下でもうちょっと細かく見ていきます。

メインフレーム(親要素)

まずは

  • 入力フォーム
  • 送信ボタン
  • プレビュー表示箇所

を内包する親要素です。

// メインフレーム
new Vue({
  el: '#main-flame',
  data:{
    email: '',
    sendResult: '',
    login: false
  },
  methods:{
    emailValue: function(inEmail){
      this.email = inEmail
    },
    sendEmail: function(){
      axios.post('http://localhost:1323/users/',{
        email: this.email
      })
      .then(response => {
        this.login = true
        this.email = ''
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  }
})

こちらはVue.jsを使い始めると紹介される一番ベーシックな書き方で定義しています。

el要素にコンポーネントを包み込むためのdivタグのidを記載します。これによって指定したdivタグ配下の要素が以下の処理の管理下に置かれるイメージです。

dataはこのメインフレーム内で扱うデータを定義しています。例えばemailであれば、このデータを元に入力フォームのデータをプレビュー表示箇所に受け渡しなりを行うために用意しています。

で、最後にmethodsですが、こちらは名前の通り実行する処理を書いていきます。上で説明したようなフォームの入力の保持であったりサーバーとの通信を行う処理を記述しています。

emailValueでは引数として渡された値(inEmail)をdataで用意したemailに代入します。

sendEmailではdataのemailの値をサーバーにPOSTする処理を行なっています。転送が成功した場合、表示制御に使っているloginをtrueに設定しています。これによって、Welcome!が表示されるようになります。

ここで宣言されているメソッドは子要素から呼び出されて処理を開始します。呼び出し方などの詳細は子要素の方で解説します。

入力フォーム

次は入力フォーム部分のコンポーネントです。

// 入力フォーム
Vue.component('email-input',{
  template: '<input v-on:input="emailInput" v-model="inemail" placeholder="edit me">',
  data (){
    return {
      inemail: ''
    }
  },
  methods: {
    emailInput: function(){
      this.$emit('input-email', this.inemail)
    }
  }
})

子要素は全てComponent形式で利用していきます。

templateには実際に描画するためのHTMLタグを記述します。

v-on:input="emailInput"によって、値が入力された時にmethodsで宣言しているemailInputが実行されます。

v-model="inemail"ではdateにあるinemailを入力フォームの値に紐付けています。

dataの記述の仕方がメインフレームの時と異なりますが、Componentではdataは関数である必要があるため、このように記述しています。

methodsemailInputの内容がちょっとわかりにくいのですが、一旦HTMlのemail-inputを見てみてください。

<email-input @input-email="emailValue"></email-input>

email-inputタグにおいて@input-email="emailValue"とありますが、これは親要素であるフレームワーク内で用意されている関数であるemailValueをinput-emailという要素に結びつけています。

あとはmailInputの$emitにinput-emailを渡したい引数と共に渡すことで親要素のemailValueコールされます。

この$emitは親要素のイベントを発火させるためのメソッドです。

上で説明済みですが、親要素では引数に渡された入力フォームに入力された値を自身のdataにセットしているわけです。

ここでセットした値がプレビュー表示やボタン押下時のサーバー通信に利用されることとなります。

プレビュー表示

次に入力した値がリアルタイムで表示させるプレビュー表示部分の処理です。

// プレビュー表示
Vue.component('preview-email',{
  template: '<p>email:{{ disemail }}</p>',
  props: ['disemail']
})

わかりやすいようにHTMLファイルの記述も再度載せておきます。

<preview-email v-bind:disEmail="email"></preview-email>

ここではそこまでややこしいことはやっておりませんが、HTMLのカスタム要素が少しわかりづらいかもしれません。

templateでは入力フォームの時と同じように、画面に表示される際のHTMLタグを記述しています。今回はpタグの中に{{ disemail }}と記述されることで、javascriptで処理された値を表示するようにしています。

表示させる値はpropsで宣言されている値です。このpropsは親要素からデータを受け取り、値が変化することになります・

HTMLの方でv-bindを利用して、propsに親要素で宣言されているdata、emailをセットしているのが確認できると思います。

送信ボタン

最後のコンポーネントである送信ボタンです。

// 送信ボタン
Vue.component('email-submit',{
  template: '<button v-on:click="createUser" >送信</button>',
  methods: {
    createUser: function() {
      this.$emit('submit-email')
    }
  }
})

そしてこちらが対応するHTMLのコード。

<email-submit @submit-email="sendEmail"></email-submit>

基本的にやっていることは入力フォームと同じで、emitを使って親要素のイベントを発火しています。

ボタンをクリックすることで、

  • 送信ボタンコンポーネントのcreateUserが呼ばれ
  • その中で親要素のsendEmailが呼び出され
  • axiosを利用したサーバー通信が行われる

といった流れになります。

まとめ

いかがだったでしょうか。親子関係においてどのようにデータが流れ、イベントが動き出すのか、ということがイメージできればそこまで難しくないことかと思います。

もし今回の投稿で不明な点、うまく行かない点などあれば、twitterや問い合わせから質問を投げてもらえればできる限りの対応をさせていただきます。

Vue.jsには単一ファイルコンポーネントという面白そうなアプローチもありますので、そちらについても取り組んでみて共有できればなと思います。

Vue.jsはこれからもどんどん盛り上がっていき、需要も増えるフレームワークでしょう。是非一度触ってみてください。

閲覧いただき、ありがとうございました。

よく読まれている記事

エンジニア独立

2019/4/15

文系出身エンジニアが語る「弱いエンジニア」戦い方

こんにちは、フリーランスエンジニアのてぃすです。 僕は文系大学を卒業し、新卒で入ったITコンサル会社で入社半年後に軽くC#を扱う機会が訪れるまで、プログラミングやエンジニアリングに触れたことが一度もありませんでした。 パソコンも基本的に動画を見たりゲームをするための便利な箱くらいな印象。 一方、エンジニア業界には中学生時代から趣味でプログラミングをしてきたり、理系大学でバリバリ情報系を学んできたエンジニアがゴロゴロいるわけです。もう機械語で会話すればいいのにと思うレベルの猛者揃いです。 そうなると僕のよう ...

続きを読む

エンジニア独立

2019/4/26

プログラマー・エンジニアが情報発信をするべき2つの理由

こんにちは。フリーエンジニアのてぃすです。 プログラマー・ITエンジニアとして働いている人が、SNSやブログで積極的に技術的なTipsや働き方に関する考え方を発信しているのをよく見ると思います。 情報発信をしたことのない人からすると、なんでそんな一銭の得にもならない行為をやっているのか、という疑問も湧いてくるでしょう。 知っている人は知っていることですが、エンジニアにとって情報発信ってすごいメリットがある行為なんです。 そこで今日はプログラマー・ITエンジニアが今すぐにでも情報発信を始めるべき2つの理由を ...

続きを読む

エンジニア独立

2019/4/15

【地方も強いフリーランスエージェント】PE-BANKを徹底分析

ITエンジニアという職業の魅力についてはこのブログでなんども書いていますが、その中でもフリーランスエンジニアという働き方は、 年収1000万以上も珍しくない高収入 リモートワークや時短勤務などの自由な働き方 を実現する可能性を秘めています。 しかし有名どころのエージェントは基本的に都内、関東のみしか扱っていないケースが多いです。 また現状ITエンジニアがフリーランスとしてやっていく場合、都内で働くことが案件数・単価の都合上もっとも効率がいいです。 しかし地元に愛着があったり、離れることが難しい状況下にある ...

続きを読む

エンジニア独立

2019/4/15

他のエンジニアと差をつけるための面談前の下準備

こんにちは、フリーエンジニアのてぃすです。 僕は正社員から派遣、フリーランスへと転身する際に、絶対に妥協したくないという意志の元、半年ほどの間に10件近くの面談を体験してきました。 今日はその時の体験を元に、エンジニアが面談を受ける前に下調べしておくべきコンテンツについて紹介していこうと思います。 なぜ下調べが必要か エンジニアって面談を軽視している人が多いんですよね。 ある程度の経歴があるエンジニアは、売り手市場であることも手伝い、まあまあ満足できる就業先を得られるのでそこまで面談対策をじっくりしている ...

続きを読む

エンジニア独立

2019/5/30

レガシーな技術を扱っていたSES正社員がモダンな技術を扱うフリーエンジニアになるまでにやったこと

こんにちは。フリーエンジニアのてぃすです。 僕は独立する前、SESの正社員として非常に歴史の長いプロジェクトに常駐で参加していました。 Javaを使ったシステムなのですが、他のJavaエンジニアに聞いても「なにそれ」と言われてしまうような非常にマニアックなフレームワークを最新から数年遅れのバージョンで扱っていました。 自動テスト?クラウドサーバー?なにそれ?的な非常にレガシーかつ面白みのない状況に嫌気と不安を感じて独立を志したわけです。 で、この時のような僕と同じような状況で悩んでいる人ってのをエンジニア ...

続きを読む

-プログラミング
-,

Copyright© TIS ENGINEER NOTE , 2021 All Rights Reserved Powered by AFFINGER5.