プログラミング学習記録

自動車メーカー勤務しながらプログラミング学習中。学習記録を残していきます。

Vue.jsの基礎、テンプレート構文

テンプレート構文とは

HTML

<div id="app">
  <p>{{ message }}</p>
</div>

HTMLコードを書いているのではなく、Vue.jsのテンプレート構文を書いている。 最終的にVue.jsがHTMLを出力してブラウザに表示している。

二重中括弧を使ってデータを描画

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<div id="app">
  <p>{{ message }}</p>
  <p>{{ number + 5 }}</p>
  <p>{{ ok? 'Yes' : 'No'}}</p>
  <p>{{ sayHi() }}</p>
  
</div>

Javascript

new Vue({
    el: '#app',
  data: {
    message: 'HelloWorld!',
    number: 3,
    ok: true,
  },
  methods: {
    sayHi: function() {
        return 'Hi';
    }
  }
})

Vueインスタンス内のdata要素に変数を定義する。 格納した変数はhtml側で{{ }}をつけると呼び出すことができる。

結果

HelloWorld!
8
Yes
Hi

thisを使って、methodからdataを使う

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<div id="app">
  <p>{{ sayHi() }}</p>
  
</div>

new Vue({
    el: '#app',
  data: {
    message: 'HelloWorld!',
  },
  methods: {
    sayHi: function() {
        return this.message;
    }
  }
})

インスタンス内で自分のインスタンスのプロパティにアクセスする場合はthisが必要。

プロパティとは

let user = {
  name: '山田太郎',
  age: 27,
  address: '東京都'
}

console.log(user.name);
>> 山田太郎

name、age、addressのこと オブジェクト.プロパティ名でアクセスできる。

scaffoldでMVCを確認

 

MVCモデル

①リクエスト

クライアントからのリクエストはWebサーバを介してアプリケーションへと渡される

②ルーティングとコントローラ

ルーティングがそのリクエストの処理を行うべきコントローラとアクション(メソッド)を特定し、アクションを呼び出す。

③アクション

モデルを利用する。ビューを利用してHTML等を生成する。

④モデル

データベースへの書き込みや呼び出しをする。

⑤レスポンス

コントローラがレスポンスを作成し、Webサーバを介してクライアントへ返す。

 

　コードで通り道を確認

$ rails new scaffold_app
$ cd scaffold_app
$ bin/rails db:create
$ bin/rails generator scaffold user name:string address:string age:integer
$ bin/rails db:migrate

　コントローラ

class UsersController < ApplicationController
  before_action :set_user, only: %i[ show edit update destroy ]

  # GET /users or /users.json
  def index
    @users = User.all
  end


省略

indexアクションがUserというモデルを使って、データベースから情報を取得している。

　モデル

class User < ApplicationRecord
end

中身がないように思われるが、親クラスを通じてデータベースとのやりとりをしている。

　ビュー

<p id="notice"><%= notice %></p>

<h1>Users</h1>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>Age</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= user.address %></td>
        <td><%= user.age %></td>
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit', edit_user_path(user) %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New User', new_user_path %>

ヘッダやフッタなどの共通部分はレイアウトと呼ばれるファイルにまとめられている。 <%= yield %>の部分にアクションに対するビューファイルの実行結果が埋め込まれる。

<!DOCTYPE html>
<html>
  <head>
    <title>ScaffoldApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

ActiveRecord::PendingMigrationErrorの解決について

　Versions

$ ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin19]
$ rails -v
Rails 5.2.6

　エラー内容

rubyとrailsインストール後、scaffold_app作成して bin/rails sをしたが以下のエラーが出る

ActiveRecord::PendingMigrationError


Migrations are pending. To resolve this issue, run: bin/rails db:migrate RAILS_ENV=development


 # Raises <tt>ActiveRecord::PendingMigrationError</tt> error if any migrations are pending.
      def check_pending!(connection = Base.connection)
        raise ActiveRecord::PendingMigrationError if connection.migration_context.needs_migration?
      end

      def load_schema_if_pending!

やったこと

　①エラー内容の通りに実行

$ bin/rails db:migrate RAILS_ENV=development

　②既存のテーブルを全削除し、再度マイグレーションの状態をupにする

https://qiita.com/KONTA2019/items/0444ae3b8c8936a56ee0

$ bin/rails db:migrate:reset

　③最新マイグレーションの実行を取り消す=(down)にするrails db:rollback、マイグレーションファイル更新rails db:migrate

$ rails db:rollback
$ rails db:migrate

　④rails のmigrationの状態を確認

$ bin/rails db:migrate
$ bin/rails db:migrate:status


Status   Migration ID    Migration Name
--------------------------------------------------
  down    20210609073651  Create users

db:migrateしたのにstatusを調べるとdownになっている…

　⑤migrateファイル確認

class CreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users do |t|
      t.string, :name
      t.string, :address
      t.integer :age

      t.timestamps
    end
  end
end

t.string, :nameと t.string, :addressに「,」が入っているのが原因かもしれない。 「,」を消してdb:migrate後にサーバー立ち上げてみる。

class CreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users do |t|
      t.string :name
      t.string :address
      t.integer :age

      t.timestamps
    end
  end
end
$ bin/rails db:migrate
$ bin/rails s

うあーーーサーバー立ち上がったー