もこたんぺ Learning Note

自分が勉強する上でわからなかったことを理解を深めていくためにまとめていく。

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

テンプレートについて

●HTML

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

<div id="app">
  <p>{{message}}</p>
  <button @click="reverseMessage">メッセージ反転</button>
</div>

●JS

new Vue({
  el: '#app',
  data: {
    message: 'HelloWorld!'
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

{{ message }}の中身はJSの中のdataの中で定義している。

今回の場合、message: 'HelloWorld'と書いてるので、それがブラウザに表示される。

ディレクティブについて

Vue.jsにおける特別な属性のこと。(Vue.js専用のもの)

v-text, v-bind, v-htmlなど

v-once・・・一度も出力される値を変えたくないときに使用する。

v-bind・・・属性に対してそのデータを表示させる(URLなど)

双方向データバインディング

v-model を使用する

ブラウザinputタグの中身を入力しなくてもdataの中の記述を読み取って表示する

また、ブラウザ上で違うことを入力すると、テンプレートからデータ側(モデル)を変更することができる

算出プロパティ(computed)

動的な処理をしたいときに使用する

Vueインスタンスプロパティ

el

Vueインスタンスを結びつけるHTML要素を指定。

このプロパティで指定した要素の配下のみVue.jsが有効になる。

data

Vue.jsで扱うデータを入れておく場所。

このデータをHTMLファイルから読み込み画面に表示することができる。

methods

Vue内で扱えるメソッド(機能)を定義する場所。

他の関数やHTMLテンプレート内から呼び出して使うことができる。

computed

算出プロパティと呼ばれる関数を定義する場所。

computedは、dataプロパティと同様に、データの変化を画面に即時反映するが、computedはデータに何らかの加工をしてから反映させる場合に使う。

template

コンポーネントを定するときに出力されるHTMLテンプレート。

JavaScriptコンポーネントを作成する際によく使われる。

components

外部モジュールとして取り込んだコンポーネントを登録し、HTMLテンプレートとして扱えるようにする。

Ajaxを使ってRailsサーバと通信

AjaxJavaScriptで表現したいことで、サーバ側からデータを新たに取得したり、データを裏側で更新したい時などに使用する。

Ajaxとは

Webブラウザ上で非同期通信を行い、ページの再読み込みなしに、ページを更新するためのJavaScriptのプログラミング手法。

Ajaxを使うことで、ページの一部だけをサーバから取得して、更新することが可能になる。

しかもこの処理は非同期に、バックグラウンドで行われるため、ユーザはページに比べて遷移待ちのストレスが発生しないので、スムーズに操作できる。


Ajaxを使ってタスクを削除したい場合

app/controllers/tasks_controller.rb

def destroy
  @task.destroy
  redirect_to tasks_url, notice: "タスク「#{@task.name}」を削除しました。"
end

削除機能としてやりたいことは以下の2つ

1. タスクを削除する
2. タスクが削除されたことを反映した一覧画面を表示する(削除した)

上記の実装は、ブラウザからPOSTリクエストを送ることで実現している。

これを以下のように変更する。

1. タスクの削除は、サーバサイドでやる必要があるものの、今表示しているタスク一覧画面をそのまま表示し続けていたいため、Ajaxでサーバにリクエストを飛ばす。
2. 次に削除されたタスクの非表示は、クライアントサイドにて、JavaScriptで行う。一つの処理が無事に行われたら非表示になるようにする。

やりたいこととしては、ページを遷移させるのではなく、Ajaxリクエストを発生させる


app/views/tasks/index.html.slim

= link_to '削除', task, nethod: :delete, data: { confirm: "タスク「#{@task.name}」を削除します。よろしいですか?" }, class: 'btn btn-danger'

mehod: :deleteを指定してリンクを出力する方法はJavaScriptを介しているが、HTMLのformを使ってリクエストを飛ばしていることと同じなので、ブラウザからrequestを発生させて、ページ遷移している。

Ajaxで削除アクションへリクエストを飛ばすにはremote: trueを追記する。


app/views/tasks/index.html.slim

= link_to '削除', task, nethod: :delete, remote: true, data: { confirm: "タスク「#{@task.name}」を削除します。よろしいですか?" }, class: 'btn btn-danger'

RailsAjax機能はこのremote: true属性を見て処理を実行するようになっている。

form_withメソッドはデフォルトでAjax機能を利用していて、無効にする場合はremote: trueオプションを追記する。

次にタスクはサーバサイドで削除して、一覧画面の再表示は必要ないので、

redirect_toの行を削除して、代わりにheadメソッドを用いてレスポンスボディなしでHTTPステータスとして204(成功と判定されること)が返るようにしておく。


app/controllers/tasks_controller.rb

def destroy
  @task.destroy
  head :no_content
end

この状態で削除を行なっても、画面はそのままになってしまう。

なので削除したら、削除したタスクを非表示する処理をJavaScriptを実装する。

Railsremote: trueをつけたa要素に対して、Ajax通信が成功したときにajax:successというイベントを発行してくれる。

そこでこれに対応するイベントハンドラを記述する。

対象となるa要素を簡単に特定できるようにしたいので、まずは削除リンクのa要素に「delete」というCSSクラスを目印として付与する。


app/views/tasks/index.html.slim

= link_to '削除', task, nethod: :delete, remote: true, data: { confirm: "タスク「#{@task.name}」を削除します。よろしいですか?" }, class: 'btn btn-danger delete'

次に、app/assets/javascripts/task.jsでこの目印を利用して、削除リンク(a要素)にイベントハンドラを設定する。


参考

Rails で JavaScript を使用する - Railsガイド

Ruby on Rails - RailsでJavaScriptを使う - このガイドでは、Railsに組み込まれたAjax/JavaScriptの機能(およびそれ以上の機能)をカバーしていますので、リッチでダイナミックなAjaxアプリ - 日本語

アセットパイプラインについて

アセットパイプラインとは

JavaScriptaやCSS、画像などのリソース(アセット)を効率的に扱うための仕組みのことをいう。

sprockets-rails gem にて提供されるSproketsの機能で、デフォルトで有効になっている。

アセットパイプラインって何をしてくれるの

開発者が書いたJavaScriptCSSを最終的にアプリを使う上で都合の良い状態ににするためのパイプライン処理を行う。

都合の良い状態=ブラウザが読み取れる形式で、実行速度が早く、ブラウザキャッシュに対して最適化される状態。

パイプラインの処理の順番は以下の感じ。

1. 高級言語コンパイル

CoffeScript, SCSS, ERB, Slimなどで書かれたコードをコンパイルして、ブラウザが認識できるJavaScript, CSSファイルとして扱う。

2. アセットの連結

複数のJavaScript, CSSファイルを一つのファイルに連結することで読み込みに必要となるリクエスト数を減らし、すべての読み込みが終わるまで時間の短縮をする。

3. アセットの最小化

スペース、改行、コメントを削除してファイルを最小化して、通信量を節約する。

4. ダイジェストの付与

コードの内容からハッシュ値を算出してファイル名の末尾に付与する。

このようにすると、コードが変更されればファイル名が変更されるので、ブラウザのキャッシュの影響で修正が反映されないという問題を防げる。

マニフェストファイルの記述

Railsのアプリケーションを作成した時点で以下のファイルが作成される。

app/assets/javascripts/application.js
app/assets/styleseets/application.css(scss)

JavaScriptマニフェストファイルを見てみると以下のようになっている。

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

JavaScriptマニフェストファイルでは「//=」から始まる行を、アセットパイプラインに指示を伝えるための特別な行として扱う。

require・・・指定したJavaScriptファイルの内容を、記述した位置に取り込む。上記だとrails-ujsturbolinksといったJavaScriptを指定している。

require_tree・・・指定されたディレクトリは以下の全ファイルを結合して、記述した位置に取り込む。上記の場合、「.」としているので、application.jsが配置されているディレクトリ配下が対象になる。

Sassで書くように置き換えている場合、Sassの@importを使ってディレクティブを記述する。

app/assets/stylesheets/application.scss

@import "bootstrap";
@import "tasks";


参考

https://railsguides.jp/asset_pipeline.html
アセットパイプラインについて | Railsドキュメント

モンキーパッチとは

モンキーパッチとは

オリジナルのソースコードを変更することなく、動的言語JavaScriptRailsなどのような)のコードを拡張したり、変更したりする方法のこと。

参考

Ruby on Rails アプリケーションにおけるモンキーパッチの当て方 - クックパッド開発者ブログ

Rails における gem へのモンキーパッチの方法をいくつか試した話 - R-Hack(楽天グループ株式会社)

404エラー、500エラーについて

404(Not Found)とは

ルーティングエラーのこと。
ルーティングで行き先となるActionが見つからない状態。
サーバー側から「このURLは存在しない」というエラーの応答を意味している。

500(Internal Server Error)とは

サーバー内でエラーが起こっている場合に発生するエラー
システム全般エラー

現場Rails Chapter6 RESTfulについて

RESTfulの概要について

まずRESTってなに?

REST(REpresentational State Transferの略)とはアプリケーションの設計方法の一つ。
操作の対象となるリソースをURLを使って表し、それに対して、HTTPメソッドの「GET」「POST「DELETE」「PUT」などを使って操作を行うというもの。

インターネットそのものやWebアプリケーションなどの、分散・ネットワーク化されたシステムやアプリケーションを構築するためのアーキテクチャのスタイルの一つ。

RailsアプリケーションにおけるRESTとは

アプリケーションを構成するコンポーネント(ユーザやマイクロポストなど)を「リソース」としてモデル化することを差す。

これらのリソースはリレーショナルデータベースのCRUD操作とHTTPメソッドの両方に対応している。

要するにRESTfulって
用意されたHTTPメソッドを使ってCRUD機能を手軽に操作できる型みたいなものという認識。


RESTfulなスタイルにすることで、作成すべきコントローラやアクションの決定が楽になる。
CRUDを行うリソースだけでアプリケーション全体を構成してしまうこともできる。


もっと具体的に!!!

RESTfulは以下4つに当てはまるもののことをいう。


⑴ HTTPリクエストはそのリクエストで必要な情報をすべて持ち、前のリクエストからの状態が保存されている必要がない。(ステートレスな状態という)

⑵ 個々の情報(リソース)への「操作」の表現がHTTPメソッドとして統一されている。⇦これ一番大事!!

⑶ 個々の情報(リソース)がそれぞれ一意なURI(ここではURLの認識でOK)で表されている。

⑷ ある情報(リソース)から別の情報を参照したいときは、リンクを利用する。

RESTfulの主な特徴

・URLが表す情報のことをリソースと呼ぶ。
(例:「/tasks/13というURLが示しているのは13という一意な識別子を持つtaskのリソースだ。」といった感じ)

・⑵の理由により、RailsではGETやPOST以外にPATCH、PUT、DELETE のサポートもする。

・⑵の理由により、RESTfulなシステムでは、操作はHTTPメソッドで表現するものであり、URLで表現するものではない。

なのでURLはなるべく情報(リソース)の名前を表す形にするという発想で作られている。

参考

第2章 Toyアプリケーション - Railsチュートリアル