【メモ】Vue.jsの設定から動作確認
- Vue.js読み込みにはCDNを利用
【index.html】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <div id="app"> <h1> {{ greeting }} </h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="js/main.js"></script> </body> </html>
【main.css】
var app = new Vue({ el: '#app', data:{ greeting:'Hello' } })
【実行結果】
- Vue.js公式サイトのインストールページからCDN欄に記載されているソースをコピーしHTMLのbodyタグ末尾に貼り付ける
- divタグでid属性を割り当てる。
- JavaScript側でVueインスタンス生成処理を記載する。
- Vueインスタンス内にel: #appを記載する。 これによりdiv id=app配下でVue.jsが動作する。
- Vueインスタンス内にdataオプションを定義する。 HTML側ではここで定義したプロパティを参照する。
- HTML側で二重括弧(Mustache構文)を使用しプロパティを参照。
<body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </body>
<div id="app">
var app = new Vue({ })
var app = new Vue({ el: '#app' })
var app = new Vue({ el: '#app', data:{ greeting:'Hello' } })
<h1> {{ greeting }} </h1>
【メモ】別ブランチに作業内容を移行する方法
git stashコマンドで変更分をstashに避難させる
git checkout
でブランチを切り替える git stash listで避難させた作業を確認
git stash apply stash@{num}で変更分に該当するstashを切り替えたブランチに復元する
【メモ】Git初期設定
- GitHubのユーザー名登録
$ git config --global user.name "githubname"
- GitHubのメールアドレス登録
$ git config --global user.email "github@github.com"
- Gitで使用するエディタ登録
$ git config --global core.editor "atom --wait"
- 上記が登録できているかどうかの確認
$ git config user.name $ git config user.email $ git config core.editor
- 設定情報はgitconfigファイルに登録されている
- ホームディレクトリにて以下コマンドで設定内容が確認できる
$ cat .gitconfig
【Laravel】prefixメソッドの使い方
概要
- URLからユーザーのidを取り出したいためルートパラメーターを以下のように定義した。
Route::post('users/{id}/match', 'UserMatchController@store')->name('user.match'); Route::delete('users/{id}/unmatch', 'UserMatchController@destroy')->name('user.unmatch');
ソースの問題点
- 今はまだusers/{id}を定義しているrouteが2つしかないが今後増えていく可能性が高い。
- ルートパラメーターの変更が発生した場合、対象のrouteを1つずつ修正しなければならない。
- 修正漏れ等のリスク。
改善策
Route::group(['prefix' => 'users/{id}'], function () { Route::post('match', 'UserMatchController@store')->name('user.match'); Route::delete('unmatch', 'UserMatchController@destroy')->name('user.unmatch'); });
【Laravel】HerokuでAWS S3を使用する際にハマったこと
概要
Herokuでファイルアップロードを実現するために画像アップロード先をAWSのS3に設定。
S3の環境設定はenvファイルに行った。
開発環境
- Cloud9
動作環境
Laravel5.5
PHP7.1
mysql5.5.6
ハマったこと
- Herokuへのデプロイ後に画像アップロードの動作確認を行った際、以下のエラーが発生した。
原因
S3関連の環境変数を設定していなかったため
env ファイルはローカル(Cloud9)で利用する際の設定ファイルとなる。 *そのためHerokuでS3を利用する際には別途環境変数を設定する必要がある。
解決策
- heroku config:set コマンドでenvファイルに登録した同様の設定を行う。
【Laravel】migrationでカラム変更の際にハマったこと
概要
eventsテーブルのevent_remarksカラムの型変更を行った。
string型->text型に変更するようマイグレーションファイルに記載。
動作環境
Laravel5.5
PHP7.1
mysql5.5.6
ハマった箇所
- migrateをした際に以下のようなエラーが発生。
SQLSTATE[42000]: Syntax error or access violation: 1170 BLOB/TEXT column 'event_remarks' used in key specification without a key length (SQL: ALTER TABLE ev ents CHANGE event_remarks event_remarks TEXT DEFAULT NULL COLLATE utf8mb4_unicode_ci)
原因
- event_remarksカラムにindexを設定していたことが原因。
解決策
public function up() { Schema::table('events', function (Blueprint $table) { $table->dropIndex('events_event_remarks_index'); });
何故ハマったのか
Laravelのリファレンスをきちんと読んでいなかったこと。型変更の際に、changeメソッドでindexを指定しなければindexが消えると思い込んでいた。
該当カラムにindexがはっているかどうかをmysqlで確認しなかった。 以下コマンドでtbl_nameにindexが設定されているカラムが確認できる。
SHOW INDEX from tbl_name;