Webサービスを開発する

データエンジニアが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

 

▼経験の棚卸しで納得のキャリアを▼
▼相場に消耗しない資産運用▼
マネースクエア
目の前の仕事に追われて伸び悩んでいませんか?

エンジニアとして働き早◯年・・・職場の仕事をただ「真面目に」こなし、職場での評価に一喜一憂していませんか?

少し立ち止まって自分の市場価値を確認し、自分のために伸ばしたいスキルを見つけて前向きに働けるかどうかで、1年後・3年後、自分のキャリアに大きな差が出てきます。

中の下・中の上でいま一つ突き抜けられないエンジニアこそ、転職や部署異動という選択肢も視野に入れて、伸び悩むエンジニアから脱出する方法を探してみませんか。

伸び悩むエンジニアから脱出する!

COMMENT

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

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