学習メモ0218 - とりあえず学習メモ

JavaScript

同期通信
リクエストを投げ、サーバーから応答があるまでブラウザ側の表示しないような通信
非同期通信
リクエストを投げた直後からブラウザ側での操作ができるような通信
サーバーからの応答があり次第、コールバック（登録された関数）を実行する通信中にもブラウザ操作が可能なため、ユーザビリティを高めることができる

windowオブジェクト
navigator・・・ブラウザ自身に関する情報をもつオブジェクト
location・・・現在のページに関する情報をもつオブジェクト
history・・・ブラウザの履歴をたどるback(),forwrd()をもつオブジェクト screen・・・画像に関する情報をもつオブジェクト
document・・・ページのHTML文書に関する情報をもつオブジェクト
window.location = 'URL' ・・・URLへジャンプする
window.history.back()・・・戻る

Ajaxを使った非同期通信

Ajax(Asynchronous JavaScript + XML)
JavaScriptによる非同期通信を用いたプログラミング手法のこと

JSON(JavaScript Object Notation)
サーバーからのデータのレスポンス形式のひとつ？？

$ajax()
JavaScriptkらHTTPリクエストを発行するための関数第一引数にURL,第二引数にオプションのオブジェクトをとる

const API_KEY = '取得したAPI Key';

$(function() {
  $('#weather-form').on('submit', function(e) {
    var cityName = $(this).find('#weather-form-city').prop('value');
    $.ajax()
      .done(function(data) {    //レスポンスのJSONをJavaScriputの連想配列としたものを引数としている？
        // 通信に成功した時の処理
      })
      .fail(function(data) {　//XMLHTTPRequestオブジェクトを引数としている？？
        // 通信に失敗した時の処理
      });
    e.preventDefault();
  });
});

API

APIとは
サーバーからの返り値をHTMLだけではなくJSONなどの形式で返す仕組みのこと
APIの作り方
1.HTMLを返すためのコントローラーを共有してAPIとして使えるようにする
2.API専用のコントローラーを作成する
3. APIを作成するためのgemを利用する
**respond_toメソッド・・・リクエストがHTMLやJSONなど何を求めているのか拡張子等から判断し、自動的に条件分岐する

respond_to do |format|
  format.html{redirect_to :root}  //HTMLリクエスト時はrootアクションにリダイレクトする
  format.json{render json:@todo}   //JSONリクエストの時はjsファイルで作成したtodo(@todo)を返す
end

非同期通信を実装する（Pictweet）

jquery-rails(gem)をインストール
application.jsに記載する
//= require jquery
//= require jquery_ujs
**コメント機能を非同期通信化する
1.jQuery記述ファイルを作成（assets/javascripts/comment.js）
2.フォームが送信されたらイベントが発火するようにする
FormData()・・・form内のデータの送信にしようできる

var fomData = new FormData(this)  //セレクタで指定したフォームの情報を取得する

デバグの方法
console.log(this)・・・引数内の内容をconsoleに出力する 3.非同期通信でコメントが保存されるようにする
attr()メソッド・・・引数ないで指定された属性値を返す

var url = $(this).attr('action')  //　thisで指定されたセレクタのaction属性値を返す

processDataオプション：false要復習！わからん！
contentTypeオプション：false FormDataでフォーム情報を取得した場合はfalseにする

js.studio-kingdom.com
5.作成したメッセージをJSON形式で返す jbuilder
デフォルトでrailsに入っているgem。入力データをJSON形式で出力するテンプレートエンジン
jbuilderファイル（views/comments/create.json.jbuilder)を作成してJavaScriptで必要な情報を渡す

json.text @comment.text
json.user_id @comment.user.id
json.user_name @comment.user.nickname

6.返ってきたJSONをdoneメソッドで受け取り、HTMLを作成
テンプレートリテラル記法
HTMLをバックティック文字で囲むことで、複数行の文字列や文字列内挿入昨日が使用できる

$(function(){
  function buildHTML(comment){
    var html = `<p>
                  <strong>
                    <a href=/users/${comment.user_id}>${comment.user_name}</a>
                    ：
                  </strong>
                  ${comment.text}
                </p>`
    return html;
  }
  :
  :
  :
  :

    .done(function(data){
      var html = buildHTML(data);
      $('.comments').append(html)
      $('.textbox').val('')
    })
  })
});

※アプリケーションをデプロイする際にエラーになる場合あり。
下記のコメントアウトする必要がある
config/enviroments/production.rb

// config.assets.js_compressor = :uglifier

7.エラー時の処理を行う