本サイトにはプロモーションが含まれています

趣味プログラミング

データエンジニアがWebサービス開発に再入門?【技術調査:Vue.jsでフロントエンド】

こんにちは。投資データエンジニアの三年坊主(@SannenBouzu)です。

マナブさんのツイートを見て、自分も久しぶりに新しいWebサービスを開発したい気持ちが湧いてきました。

 

今回は、久しぶりにWebサービスを自分で1から作るエンジニアの悩みに答えます。

Webサービスを作るワクワクをまた味わいたい。前回は途中で挫折してしまったので、作り切って公開するためのフロントエンド技術を調査しておきたい

2年ほど前に、自分でWebサービスを企画・設計・開発しました。

リリース直前まで行ったのですが、なんとなく自分の中で熱が冷めてしまって、結局一般公開せずに終わってしまった経験があります。

本記事では、このような挫折を防ぐためにフロントエンド技術を調査した結果を紹介します。

 

この記事はこんな方におすすめ!

  • Webサービスを久しぶりに1から開発したい方
  • Webサービスを自分で作ったけど公開できなかった経験がある方
  • Webサービス開発に必要そうなフロントエンド技術を予習したい方

 

Webサービス開発でフロントエンド技術に求める条件

今回想定している、個人でのWebサービス開発に求める条件は、以下の3点です。

  • 熱が冷める前に短期間でシンプルに作り切って公開する
  • 多くの機能を詰め込まない
  • Webサービス自体も技術要素もポートフォリオにできる

 

アフィリエイトの成果レポートのように公開しないものであっても、一般ユーザ向けのWebサービスのように公開するものであっても、いずれにせよプライベートの開発で使用した技術要素は「ポートフォリオ」に含めるべきかなと思っています。

転職エージェントに相談した時にも、Webサービス(個人)開発の経験は好印象を与えていましたし、職務経歴書に載せるのも有効な場合が多いでしょう。

加えて、転職などに特に関係ない個人的なこだわりもあり、今回は「作り切って公開」まで実施してみたいと考えています。

 

これを踏まえて、フロントエンド開発経験が少ない私が使用するフロントエンド技術には、以下のような条件を求めました。

  • 仕様がシンプル
  • 日本語・英語での情報収集がしやすい
  • 業務・プライベートで一度も使用したことがない

 

2019年現在では、フロントエンドのJavaScriptフレームワークとしてAngular, React, Vue.jsが有力候補のようですが、今回はVue.jsを使ってみることにしました。

WebサービスのフロントエンドをVue.jsでお手軽に

Vue.jsは、フロントエンド構築に使われるJavaScriptフレームワークです。

技術的な詳細は省きますが、必要な部分に少しずつ適用していけるフレームワークのようなので、あまり仕様が複雑ではない個人Webサービス開発にも手軽に使えるのではないかと期待しています。

 

Vue.jsでフロントエンドを作ってみる【簡単なお買い物リスト】

Vue Schoolというオンライン学習サイトのVue.js Fundamentalsという動画が分かりやすかったので、動画にしたがって簡単なお買い物リストを作成しながらVue.jsの基礎を学びました。

Vue.jsの開発環境を構築する

Node.jsをインストール。

必要に応じてNode.jsのバージョンを切り替えられるように、先にnodebrewをインストールしてバージョンを管理することにします。

 

以下のバージョンで作業を進めます。

 

Vue CLI 3をインストール。

 

以下のバージョンで作業を進めます。

 

vueコマンドを使ってターミナルから簡単にプロジェクトを作れるようですが、一旦vueコマンドに頼らずに進めてみたいと思います。

注意点として、初心者が vue-cli で始めることは推奨しません(特に、Node.js ベースのツールについてまだ詳しくない場合)。

はじめに — Vue.js

 

Vue.jsで簡単なお買い物リストを作成する

以下のようなindex.htmlmain.cssをローカルに準備して、index.htmlをブラウザで開くと、お買い物リストの完成です!

vueschool/vuejs-fundamentalsより引用

 

  • 24行目:scriptタグで直接Vue.jsを読み込む
  • 26,27行目:Vueインスタンスを作成し、データとDOMを関連づける
  • 17,20行目:v-bind属性(ディレクティブ)でDOMに振る舞いを与える
    • “v-bind:” -> “:” と省略可能
    • 例:newItems.length === 0 が満たされる時に、button要素にdisable属性を与える
    • 例:item.purchased であれば、li要素にstrikeoutクラスを追加する
  • 12,13,15,22行目:v-ifディレクティブで条件つきレンダリング
    • 例:state === ‘default’ なら、”Add Item”のボタンを表示
    • 例:v-elseディレクティブを使い、それ以外の場合には”Cancel Adding Item”のボタンを表示
    • etc.
  • 20行目:v-forディレクティブで配列を要素にマッピングする
    • 例:配列reversedItemsの中身を一つずつitemに格納して、item.labelを表示する
  • 12,13,16,17,20行目:v-onディレクティブでイベントリスナを追加する
    • “v-on:” -> “@” と省略可能
    • 例:”Add Item”ボタンがクリックされたら、”changeState(‘edit’)”を実行する
    • 例:アイテム入力欄でエンターキーが押されたら、”saveItem”を実行する
    • etc.
  • 16行目:v-modelディレクティブでinput/textarea/select要素に双方向データバインディング
    • HTMLで入力値を変えるとデータが変わる。逆も然り。
  • 28行目:Vueインスタンスのdataオブジェクト
  • 55行目:methodsでVueインスタンスにメソッドを定義。
    • メソッドの中でVueインスタンスのデータにアクセスする時は”this”が必要
  • 50行目:Vueインスタンスに組み込まれる算出プロパティcomputed

 

  • Vue.js DevtoolsというChrome拡張機能が便利です
    • ローカルファイルを直接ブラウザで開く時は”Allow access to file URLs”にチェック
  • methodsとcomputedの使い分け
    • データを変更したいならmethod、いまあるデータの表現方法を変えたいならcomputed

 

▼経験の棚卸しで納得のキャリアを▼
▼自宅で簡単・お得にふるさと納税▼
【期間限定】無料登録でプレゼント

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください