VueJS入門講座(目次)

目次

１．基本

・なぜVueJSを使うのか。

・インストールと設定

・テンプレート、データ、ディレクティブ

・v-ifとv-show

・テンプレートのループ処理

・バインディング

・リアクティブ

・二方向データバインディング

・HTMLを動的に設定する

・メソッド

・算出プロパティ

・ワッチャー

・フィルター

・refを使って直接要素にアクセスする

・入力とイベント

・ライフサイクルフック

・カスタムディレクティブ

・遷移とアニメーション

２．コンポーネント

・コンポーネントの基本

・データ、メソッド、算出プロパティ

・データの受け渡し

・Slotsを使ってコンポーネントにコンテンツを渡す

・カスタムイベント

・ミックスイン

・vue-loaderと.vueファイル

・非プロパティの属性

・コンポーネントとv-for

３．スタイルシートの適用

・クラスバインディング

・インラインスタイルバインディング

・vue-loaderにおけるスコープCSS

・vue-loaderにおけるCSSモジュール

・プリプロセッサー

４．vue-routerでフロントエンドの画面遷移

・インストール

・基本的に使い方

・HTML5ヒストリーモード

・動的なルーティング

・ネストルーティング

・リダイレクトとエイリアス

・ナビゲーション

・ナビゲーションガード

・ルート順

・ルート名

５．Vuexで状態管理

・Vuexのインストール

・Vuexのコンセプト

・ステートとステートヘルパー

・ゲッター

・ミューテーション

・アクション

・プロミスとアクション

・モジュール

６．コンポーネントのテスト

・シンプルなコンポーネントのテスト

・vue-test-utils

・DOMの問い合わせ

・mount()オプション

・データのモックとスタブ

・イベントについて

システム設計をWeb化すべきか

IT業界におけるシステム設計は主にマイクロソフトのオフィス製品を使って記述される。つまりは、ワードやエクセルやパワーポイントを使って記述される。

ここでまず問題が生じる。ワードであるかもしれないし、エクセルであるかもしれないし、パワポであるかもしれないのだ。

しかも、設計書の種類によってファイル形式が違ったりする。基本設計書の画面操作設計書はワード、画面設計書はパワポ、詳細設計書はエクセルでといった具合だ。

オフィス製品にはファイルのバージョン管理機能が備わっていない。また、GitやSubversionなどのバージョン管理システムを導入しても、差分が分かりずらい。人によってはエクセルの差分をうまく見つけるツールのようなものを知っているが、標準的ではないので、オフィス製品が標準で導入してくれない限りは、差分は分かりづらいということになる。

一方で、プログラム(ソースコード)の管理と、進捗管理はうまくウェブ化がされている。

ソースコードにおいては、ほぼ全てのシステム企業が、GitやSVNを導入しており、いつ、だれが、どのファイルをどのように変更したかが明確に記録され、容易に差分を見ることが出来る。

進捗管理においても、多くの企業がRubyのredmineのようなものを導入しており、開発の進捗や、バグの報告、修正などがウェブを通してやりとりされている。僕のイメージでは固い感じの会社はsvnとredmine、カジュアルな企業、先進的な企業はgithubとbacklogを使っている気がする。まぁどちらでもよい。svnもredmineも嫌いではない。

しかしなぜ、設計はウェブではなく、オフィス製品なのだろうか。

設計はヒューリスティックで反復的な行為だとしても、製造担当の僕としては、その変更具合を見れるようにしてほしい。設計者はバージョンが上がる度にファイル名の後ろに「ver1.1」などとするが、このバージョン上げは意味が分からない。

また、設計ファイルには変更履歴欄が設けられているが、これも適当で、空欄の場合もあれば、記載されている場合もあるが、記載されていない変更もある。

また、設計者は変更箇所の文字を赤にしたり水色にしたりするが、これも色付けを忘れることもあるだろう。

設計書がオフィス製品で作られる理由としては、お客さんに提示するのが大きいだろう。そしてお客さんがレガシーな人だからかもしれない。しかし、やはり設計書をオフィス製品で作成するのはよろしくない気がするよ。

誰かウェブ設計書作成システムを設計してください。

もちろんオフィス製品で。

コーディングと単体テストは一心同体

製造を始める前に、単体テスト仕様書を作ってもよい。むしろこれが推奨されることもある。テストドリブンなんちゃら。

 単体テスト仕様書を作成する際には、詳細設計書を見て作るので、詳細設計書の理解も進むし、単体テストはすべてを網羅する必要があるので、実装漏れ防止につながって良い。

 ただし、製造と単体テストの境界線がない。コードを書いて、動作を確認するが、この確認をどの程度までやるか、完璧に確認したならば、それは単体テスト実施完了である。製造中の確認と単体テスト時の確認は区切りが無い。

 まぁこれは製造と単体テストを一人の人間が行う場合。別の人がテストする場合は、単体テストが単体として意味がある。

 工程とかドキュメントは複数の人間が１つのプロジェクトを進めていくときに意味を持つのだらう。ドキュメントは誰かにレビューされるために作られる。

アドワーズ広告掲載開始

有料のPROプランにしたので、早速アドワーズ広告を貼ってみた。意外と手間取った。まずは、無料プラン時のはてな側のアドワーズ広告が消えなかった。これは自分で設定を変えないと消えない。消し方はググれば出てくるし、設定画面をよく見れば消せる。

そして、アドワーズ広告には何種類かあるので戸惑った。<head>タグに挿入すると自動でコンテンツにさりげなく広告を挿入してくれるものもあり、最初はどうやって<head>タグにスクリプトを挿入していいか分からなかったが、やはり設定画面から挿入できたので、挿入してみたが、お世辞でもさりげない広告表示とは言えない。

ヘッダーにも、フッターにも、サイドバーにも広告を挿入してみた。これが資本主義社会だと言わんばかりに。「俺の夢」とかいう求人系の広告しか出ない。単価高いんかね。労働ってすごいなぁ。

まぁ、これで少し様子を見てみようと思う。

ついに有料プランにする

ほんとはユニークアクセスが100を超えたらって思っていたが、有料に切り替える事にした。今は一日の平均ユニーク50くらい。

理由としては、ボチボチ金融系の記事がアクセスあるので、アドワーズのクリック単価が高いのではないかという推測と、自分はフリーエンジニアなので、そこらへんの情報を投稿することで、エンジニア求人もまた高単価なんじゃねっていう淡い期待、そして金を払うことで、記事更新も進むんじゃね？っていう気持ち。

あとは、まぁ経費やね。

ボチボチ更新していきたい。

LaravelのHomesteadでローカル開発環境を構築する方法(Windows10編)

何回かつまったりしたので、記事にしておく。(2018年2月24日時点)

OSはWindows10。つくづくMacにしたほうがいいのかなって。

VirtualBoxとVagrantとComposerを頑張る

まずはGitとVirtualBoxとVagrantを事前にインストール。あとComposerもインストールして、必要なら環境変数の設定とか頑張って、コマンドプロンプト上から「vagrant -v」「composer -v」でバージョン情報が出るようにしておく。事前準備は取り合えずこんなもんかな。

作業フォルダを作成

どこでもいいので作業フォルダを作る。今回は「C:\myworks\myproject」とする。

Laravel HomesteadのバーチャルBOXを追加する

コマンドプロンプトを起動して以下のコマンドを実行

「cd C:\myworks\myproject」(パスは人それぞれな)

「vagrant box add laravel/homestead」(非推奨)

ここでひとハマり、「vagrant box add laravel/homestead」だとダウンロードが途中で止まってしまう現象に見舞われ、以下のコマンドにするとダウンロードが完了した。

「vagrant box add --insecure -c laravel/homestead」

inaba629.hatenablog.jp

なんか選択肢が出るけど「3) virtualbox」なので(だよね？)「3」を押してENTERを押して、しばし待つ。

Laravel Homesteadをダウンロードする

以下のgit cloneで

「git clone https://github.com/laravel/homestead.git Homestead」

ローカルに「Homestead」っていうフォルダが出来るのでその中の「init.bat」をダブルクリックする。これが公式マニュアルとかには載っていないのよね。

公開鍵と秘密鍵の生成

これもやんなきゃいけない。PuTTYgenというソフトをダウンロード＆インストールして起動する。「Generate」ボタンをクリック。真ん中あたりでマウスを動かすとプログレスバーが進んでいく(この挙動いる？)。「Save public key」を押して公開鍵ファイル(名前はmypublickey.pubなど)を、「Save private key」を押して秘密鍵ファイル(名前はmyprivatekey.ppkなど)をダウンロード。まぁこの2ファイルを「Homestead」フォルダ内とか周辺に置く。どこでもいいけどね。

Homestead.yamlの編集

「Homestead」フォルダ内に「Homestead.yaml」というファイルがある。これを編集する。

さきほど作った秘密鍵ファイルの絶対パスを「Homestead.yaml」の「authorize: xxx」「keys:(改行) - xxx」のxxxの部分に記述。

以下参考にしてね。

authorize: C:\myworks\myproject\Homestead\mypublickey.pub

keys:
- C:\myworks\myproject\Homestead\myprivatekey.ppk

folders:のmap:のところにlaravelのコードを置くローカルフォルダの絶対パスを記述。今回は「C:\myworks\myproject\Homestead」配下に「code」フォルダを作ってそこをコード置き場(Laravelファイル群置き場)とする。to:はそのまま「/home/vagrant/code」でよいだろう。

folders:
- map: C:\myworks\myproject\Homestead\code
to: /home/vagrant/code

Vagrant up

次にコマンドプロンプトから「cd C:\myworks\myproject\Homestead」「vagrant up」とコマンドを実行して少し待つと、サーバが起動するはず。とりま「C:\myworks\myproject\Homestead\code」配下に「public」フォルダを作って、index.phpを作って「<?php echo 'yap';」みたいに書いてブラウザに「homestead.test」と打ち込んでみて、画面に「yap」とだけ表示されればOK。

確認が出来たら「public」フォルダを削除してLaravelのインストールに進むべし。

Laravelをインストールする

上記が上手くいけば次はLaravelをインストールする。コマンドプロンプトで「vagrant ssh」とする。「cd /home/vagrant/code」して、「composer create-project --prefer-dist laravel/laravel code」する。

そして再度「homestead.test」にアクセスすると、Laravelの最初の画面が表示されるはず。

 

あとがき

っていうか「Windows Subsystem for Linux」とかでやる方がいいのかな？これも別記事にして書いてみよーっと。

フリーの常駐勤務をやってみて

だいぶ間が空いてしまったし、2018年一発目のブログとなる。

昨年の11月末ごろからシステム開発の常駐勤務を始めている。常駐勤務は毎月決まった額、といっても160時間～180時間固定で、それより増えると残業代がつくが、160時間を切ると時給2500円程度減っていくという、フリーター的な要素もあるが、高額フリーターなのでよしとする。

うれしいのは消費税がもらえること、そして年間売り上げが1000万円を超えない個人事業主は消費税を納める必要がないので、そのまま消費税分が貰えるということである。

月額の報酬は38万円で消費税込みで41万円くらいになる。これが税引きされずに直接自分の銀行口座に振り込まれるのはうれしい。

しかし、交通費や保険や税金は自分で払っていかないといけないので、使い込み過ぎには注意である。

今回の38万円という金額はどうも少ないらしい。レバテックにはフリーランスのシステムエンジニアの報酬は40万円を下回ることはないと言われたが下回っている。これは一重に間に4社もかんでいるからだろう。これは今後改善していきたいと思う。

具体的にどうするかというと、派遣会社に対して「月45万円以上の案件をお願いします」とお願いすることだろう。

そして、もっと報酬を増やすとなると一番手っ取り早いのが東京に行くということである。レバテックによると大阪と東京では報酬に10万円～15万円の開きがあるとのこと。であれば東京に行けば自動的に単価が上がるわけだ。東京だと仕入れ単価(お客さんが派遣会社に払うお金)は100万円を超える案件がたくさんあるそうな。

今は、銀行カードローンや、クレジットカードの返済が合計で150万円くらい残っているので、借金の返済に集中するが、これがなんとかなったら、東京に行くことを考えていきたい。