こんにちは。投資データエンジニアの三年坊主（@SannenBouzu）です。
マナブさんのツイートを見て、自分も久しぶりに新しいWebサービスを開発したい気持ちが湧いてきました。
ちなみに、サービス開発の過程を無料で公開しつつ、それをさらにブログにまとめようと思っています。
最近の風潮だと「プログラミング＝稼ぐツール」という空気感もありますが、それだけじゃなく「サービス作り」も楽しいですよ。現在プログラミング学習中の方に、楽しさが伝わるといいなと思います— マナブ@バンコク (@manabubannai) 2019年1月24日
今回は、久しぶりに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をインストールしてバージョンを管理することにします。
1 2 3 4 5 6 7 8 9 10 | curl -L git.io/nodebrew | perl - setup ls -l ~/.bash_profile echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.bash_profile source ~/.bash_profile nodebrew help nodebrew install v10.6.0 # nodebrew install stable で安定版をインストールしてもOK nodebrew use v10.6.0 nodebrew list |
以下のバージョンで作業を進めます。
1 2 3 4 5 6 7 | ➜ ~ nodebrew -v nodebrew 1.0.1 ... ➜ ~ node -v v10.6.0 ➜ ~ npm -v 6.1.0 |
Vue CLI 3をインストール。
1 2 3 | # 旧バージョンの vue-cliをインストールしている場合はアンインストール npm uninstall vue-cli -g npm install -g @vue/cli |
以下のバージョンで作業を進めます。
1 2 | ➜ ~ vue --version 3.3.0 |
vueコマンドを使ってターミナルから簡単にプロジェクトを作れるようですが、一旦vueコマンドに頼らずに進めてみたいと思います。
注意点として、初心者が vue-cli で始めることは推奨しません（特に、Node.js ベースのツールについてまだ詳しくない場合）。
Vue.jsで簡単なお買い物リストを作成する
以下のようなindex.htmlとmain.cssをローカルに準備して、index.htmlをブラウザで開くと、お買い物リストの完成です！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shopping List App</title> <link rel="stylesheet" href="main.css"> </head> <body> <div id="shopping-list"> <div class="header"> <h1>{{ header.toLocaleUpperCase() }}</h1> <button v-if="state === 'default'" class="btn btn-primary" @click="changeState('edit')">Add Item</button> <button v-else class="btn btn-cancel" @click="changeState('default')">Cancel Adding Item</button> </div> <div v-if="state === 'edit'" class="add-item-form"> <input v-model="newItem" type="text" placeholder="Add an item" @keyup.enter="saveItem"> <button class="btn btn-primary" :disabled="newItem.length === 0" @click="saveItem">Save Item</button> </div> <ul> <li v-for="item in reversedItems" :class="{strikeout: item.purchased}" @click="togglePurchased(item)">{{ item.label }}</li> </ul> <p v-if="items.length === 0">Nice job! You've bought all your items.</p> </div> <script src="https://unpkg.com/vue"></script> <script> var shoppingList = new Vue({ el: '#shopping-list', data: { state: 'default', header: 'shopping list app', newItem: '', items: [ { label: '10 party hats', purchased: false, highPriority: false, }, { label: '2 board games', purchased: true, highPriority: false, }, { label: '20 cups', purchased: false, highPriority: false, }, ] }, computed: { reversedItems() { return this.items.slice(0).reverse(); } }, methods: { saveItem: function() { this.items.push({ label: this.newItem, purchased: false, }); this.newItem = ''; }, changeState: function(newState) { this.state = newState; this.newItem = ''; }, togglePurchased: function(item) { item.purchased = !item.purchased; } } }) </script> </body> </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
