knvegr’s blog

学習メモ

【メモ】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'
  }
})

【実行結果】 f:id:knvegr:20181112032410p:plain

  1. Vue.js公式サイトのインストールページからCDN欄に記載されているソースをコピーしHTMLのbodyタグ末尾に貼り付ける
    2. <body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</body>
  2. divタグでid属性を割り当てる。
    3. <div id="app">
  3. JavaScript側でVueインスタンス生成処理を記載する。
    4. var app = new Vue({
})
  4. Vueインスタンス内にel: #appを記載する。 これによりdiv id=app配下でVue.jsが動作する。
    5. var app = new Vue({
  el: '#app'
})
  5. Vueインスタンス内にdataオプションを定義する。 HTML側ではここで定義したプロパティを参照する。
    6. var app = new Vue({
  el: '#app',
  data:{
    greeting:'Hello'
  }
})
  6. HTML側で二重括弧(Mustache構文)を使用しプロパティを参照。
    7. <h1>
  {{ greeting }}
</h1>

【メモ】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が２つしかないが今後増えていく可能性が高い。
  • ルートパラメーターの変更が発生した場合、対象のrouteを1つずつ修正しなければならない。
  • 修正漏れ等のリスク。

改善策

  • ルートプレフィックスの定義
  • 以下のように記載するとグループ内の全ルートのURIに'users/{id}'が付く
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ではAWS S3バケットに画像のアップロードができていることは確認済。

開発環境

  • 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;
    •