初級ガイド

技術ブログ

webpackメモ - 導入編1

近況

  • 様々な入門記事を試して様々なハマりを経験しました。
  • 下記はwebpack導入までの段階で参考になった記事です。

公式のデモプロジェクトを取りあえず動かすことができます。
公式Githubページからソースを引っ張っているため、バージョンの問題などでビルドエラーが出ることはありませんでした。


webpack + Vue開発環境の構造を簡潔に解説してあります。
公式のデモプロジェクトは上手く作られている反面、初見ではどのように動作しているか分かりづらかったため助かりました。


ホットリロードに関しては様々な記事があり、かなり混乱しました。
この記事を参考にしたときに上手く行きました。


最終的にやりたいことなのですが、この通りに作業したところエラーで詰まってしまったので後日リベンジします。


ホットリロードが作動しないとき

HMR / Hot Module Replacement:ブラウザのリロードをすること無くアプリケーションのJSを更新する開発ツール。ホットリロードのこと。

Vue.jsメモ - 入門編

インストール

> npm install -g vue

記事


Vuexによる開発デモです。大変参考になりました。

src/page1/Card.vue
src/page1/Search.vue
src/page1/TimeLine.vue

App.vue
import TimeLine from './components/page1/TimeLine'

となっているところ、記事中のディレクトリ構成に従えば

src/components/Card.vue
src/components/Search.vue
src/components/TimeLine.vue

App.vue
import TimeLine from './components/TimeLine'

になると思います。

また、ソースの最終行に空行が入っていないとエラー(Newline required at end of file but not found)を吐かれます。ESLintによるチェックが原因のようですがよく分かりません(下記記事参照)。最終行に空行を入れたらエラーは無くなりました。

最終的に下記のエラーが解決できずに詰まってしまいました。

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Search.vue
Module not found: Error: Can't resolve '../../vuex/mutation-types' in 'C:\Users\cometqp\Desktop\gipfy-vue\src\components'
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Search.vue 5:0-67
 @ ./src/components/Search.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/TimeLine.vue
 @ ./src/components/TimeLine.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

webpack形式で整えられたデモをインストールする
> vue init webpack 任意のディレクトリ名

依存関係を良い感じにやってくれる
> npm install

フロント開発環境 - パッケージ管理

背景・ゴール

  • 開発環境を整備する。
  • その前にパッケージ管理ツールを整える。

作業

  • node.jsとnpmを導入する。

環境

win10 Home 64bit

最終的な状態

> node -v
v6.10.3

> npm -v
4.5.0

node.jsから直接ファイルを落としてインストールしました。
v4がそろそろサポート終了するらしくv6が公式推奨だそうです。(2017年5月現在)
npmはnode.jsと一緒にインストールされます。


> npm update -g npm

というコマンドでnpm本体のアップデートができます。
また、webpackやVueなどのパッケージを導入する際には下記のコマンドを多用します。

パッケージをインストール
> npm install パッケージ名

パッケージを全体にインストール
> npm install -g パッケージ名

参考 [JavaScript]npmをインストールしたら最低限覚えないといけなそうなコマンドまとめ

フロント開発環境 - webpack / Vue.js

背景・ゴール

  • 次の優先作業はフロントを改良してゲーム画面を作成すること。
  • まずは開発環境を整える。

作業

  • Firebaseと相性の良いらしいVue.jsを使ってみる。
  • 最近ちやほやされてるらしいwebpackを触ってみる。

Firebaseメモ - paypal連携

■ 背景・ゴール

  • 課金システムを実装したい。

■ 作業

■ 所感

  • 他のweb決済についても調べる。
  • 決済情報をトリガーにする別の方法がある?
  • 決済情報のトリガーでDB操作をするなら別のプラットフォームの方が安くあげられる?

(17/05/02追記) milkcocoa というMBaaSがあった。詳細は後ほど。

Firebase中間報告(17/04/29)

■ 進捗

作業内容 状況 進捗
発言の削除機能 無し 0%
フロントエンド改造 10%
ログイン方法の改良 ぼちぼち 50%
名前表示の変更 ほぼ完了 85%
発言アイコンの変更 ぼちぼち 30%
cronコマンド 完了 95%

cron処理

実装しました。 初めの2週間は有料機能も使えてしまう状態なので、念のため期間終了後に動作確認をして進捗100%とします。

ログイン改良

公式ヘルプに従ってソースを書き換えるだけで良いということが分かりました。利便性を検討してからログイン方法を決定しようと考えたため、まだ実装には手を出していません。

フロント改造

チュートリアルのFrendlyChatはApacheLisence2.0のため、このままベースとして使用していこうと思います。 ソースを把握しきれていないので、このまま読み込み作業を継続していきます。

発言アイコン・発言者名の変更

ソースコード内で指定箇所を特定しました。 名前はほかに影響を出さずに変更できたので、システムの発言だけ条件分岐するなど少し書き加えるだけで良さそうでした。
アイコンはデフォルトアイコンの指定箇所などを把握しましたが、チャット画面の大きさや位置で今後変更が出そうなのでまだ触れていません。


作業優先度を以下のように変更しました。

■ 次やること

作業 優先度 難易度
ログイン方法の改良 低い
フロントエンド改造 高い
発言の削除機能 高い
名前表示の変更 低い
発言アイコンの変更 低い
cronコマンド