非同期通信
非同期通信
・リクエスト後に、ブラウザが再読み込みされることなく、ブラウザの一部分のみが更新される通信方法
・ユーザーからすると待ち時間のストレスがなくWebアプリケーションの操作ができる
Ajax（エイジャックス）
・JavaScriptを使用して非同期通信を行う処理のプログラム手法のことです。
・ "Asynchronous JavaScript + XML"の略
「非同期通信時のレスポンスの流れ」
→HTMLではなくデータを返却
→コントローラーのアクションで返却するレスポンスはデータ
→そのデータを取得する時にアクセスするためのURLがエンドポイント
→そのエンドポイント(URL)をルーティングに設定
・エンドポイント
Ajaxでやり取りする際の、データ返却のアクションを実行するためのURL
・URLパラメーター
・queryパラメーターとpathパラメーターがある
・queryパラメーター→「？」以降の構造は、?<変数名>=<値>
・pathパラメーター→リソースを識別する場合に使う 一意の情報のときなど
・データ形式→CSV, XML, JSON
JSON
Rubyのハッシュに似てる
JavaScriptにおけるオブジェクトの表記
Ajaxなどの便利な通信を実装するためにはJavaScriptが必須
データをJavaScriptのオブジェクト指向で取り扱う場合、非常に相性が良い
JavaScript周辺の便利なライブラリ
JavaScriptのライブラリで便利なやつ
(開発の目的に沿ったライブラリ)
DOM操作（HTMLの取得や追加削除など）を短く簡単に書ける
・Node.js
サーバサイドで動くJavaScript
処理速度が非常に速く、大量のデータ処理が可能
リアルタイムで反応が必要なチャットアプリケーションの開発に向いてる
・TypeScript
静的型付け言語
型を宣言して開発を行うので、事前に起こり得るエラーに対応しやすい
・React
Facebookが開発をしたライブラリ
仮想DOMの概念によって、より早い高速なアプリケーション実装が実現
・Vue.js
Reactと同様に仮想DOMの概念があり、冗長な記述を減らす
・Angular
Google等が開発したライブラリ
Angular内に標準で多数のライブラリが用意されている
外部の機能を使わずとも、公式の機能のみで十分な開発を行うことができるほど
JavaScriptでのweb表示変え
JavaScriptでのweb表示変えをするには
前提知識
・イベント
HTMLに対して行われた処理の要求のこと
・イベントの発火
イベントを認識してJavaScriptのコードが動き出すこと
・addEventListener()
イベント発火時に実行する関数を定義
要素.addEventListener('イベント名', 関数)
機能の実装の流れ
1:イベントを発火させる要素の指定(HTMLのファイルに記述)
↓
2:指定した要素を取得し、変数に取得した要素を代入
記述例/const pullDownButton = document.getElementById("lists")
↓
3:取得した要素をaddEventListenerメソッドを使ってイベントを発火
記述例/pullDownButton.addEventListener('mouseover', function(){ 処理 })
代表的なイベント名
loadイベント ページ全体が全て読み込まれた後
clickイベント 指定された要素がクリックされた時
mouseoverイベント マウスカーソルが指定された要素上に乗った時
mouseoutイベント マウスカーソルが指定された要素上から外れた時
他必要な知識
・script要素
<script src="JavaScriptのファイル名"></script>
HTMLに記述
JavaScriptのコードの埋め込みや参照に使用
・プルダウンメニューを表示する方法
・this
イベント発火元となった要素を取得
・要素の属性を取得・指定・取り除く方法
・インラインスタイル
HTML要素の開始タグの中に直接CSSのソースコードを記述するプロパティの指定方法
setAttributeメソッド
removeAttributeメソッド
・innerHTML
HTML要素の取得や書き換えを行う
・getAttributeメソッド
要素上の指定した属性の値を戻り値として返す
・debugger
ソースコードに処理を一旦停止させる場所を指定することができる
■
JavaScriptでのweb表示変えをするには
前提知識
・イベント
HTMLに対して行われた処理の要求のこと
・イベントの発火
イベントを認識してJavaScriptのコードが動き出すこと
・addEventListener()
イベント発火時に実行する関数を定義
要素.addEventListener('イベント名', 関数)
機能の実装の流れ
1:イベントを発火させる要素の指定(HTMLのファイルに記述)
↓
2:指定した要素を取得し、変数に取得した要素を代入
記述例/const pullDownButton = document.getElementById("lists")
↓
3:取得した要素をaddEventListenerメソッドを使ってイベントを発火
記述例/pullDownButton.addEventListener('mouseover', function(){ 処理 })
代表的なイベント名
loadイベント ページ全体が全て読み込まれた後
clickイベント 指定された要素がクリックされた時
mouseoverイベント マウスカーソルが指定された要素上に乗った時
mouseoutイベント マウスカーソルが指定された要素上から外れた時
他必要な知識
・script要素
<script src="JavaScriptのファイル名"></script>
HTMLに記述
JavaScriptのコードの埋め込みや参照に使用
・プルダウンメニューを表示する方法
・this
イベント発火元となった要素を取得
・要素の属性を取得・指定・取り除く方法
・インラインスタイル
HTML要素の開始タグの中に直接CSSのソースコードを記述するプロパティの指定方法
setAttributeメソッド
removeAttributeメソッド
・innerHTML
HTML要素の取得や書き換えを行う
・getAttributeメソッド
要素上の指定した属性の値を戻り値として返す
・debugger
ソースコードに処理を一旦停止させる場所を指定することができる
JavaScriptの関数について
JavaScriptの関数
・複数の処理をひとまとまりにしたもの。メソッド。
・Function型のオブジェクト。関数をオブジェクトとして扱うことが出来るのはJavaScript特有の特徴。
・関数を扱うためには、まず関数を定義（作成）する必要がある。
JavaScriptにおける関数の役割
・関数を利用することで目的ごとに処理を分割したり、似たような処理を何度も書かなくて済む
関数定義
・function 関数名(){ 処理 }と記述することで関数を定義できる
・定義の仕方は大きく分けて二種類→関数宣言と関数式 この二つの違いは記述様式
・関数宣言は、function 関数名(){ ~ }
・関数式は、変数 = function( 引数 ){} 変数に無名の関数を代入または定義
無名関数と即時関数の違い
・無名関数は関数を多く使用するコードであるときに使用し即時関数はそのとき限りの使用
・無名関数→その名の通り関数名なしで関数を定義
・即時関数→定義と実行が同時行われる 宣言する手間がない
アロー関数
・functionを省略することでより短い記述で関数定義が可能
記述式/ const 変数名 = () => {
処理
}
Rails の思想
Rails の4つの思想
・DRY(Don't Repeat Yourself)
同じことを繰り返さない。情報の重複をなくし1つのことは１箇所だけに記述
・CoC (Convention Over Configuration)
設定よりも規約 規約に従うことで関心ごとがシンプルになりビジネスロジ
ックへ集中できる
・REST(Representional State Transfer)
「全てのリソースに一意となる識別子(URI)があり、URIを通してリソースを操
作する手段を提供する」という考え 機能追加のしやすい自然な設計
・自動テスト
自動テストを行う文化の重要視
テストフレームワークとしてMinitestが選択されている
RSpecもよく使われる
参考図書
パーフェクト Ruby on Rails[増補改訂版]
※RailsはデンマークのプログラマDavid Heinemeir Hansson氏が発表したwebアプリケーション開発のためのフレームワーク
