【応用53％】TECHCAMP名古屋20日目

どうも、ジュンです

いつもご視聴、コメント、高評価、ありがとうございます

TECHCAMP名古屋 73期 副業フリーランスコース20日目で学んだことについてお話します
Ajaxで10個、railsで5個、jbuilderで1個、jQueryで5個、CSSで1個、gitで2個、その他2個のことについて学んだので、それぞれ説明します

★Ajaxで学んだこと★
1.FormData
formタグ内の要素のデータをJavaScriptのオブジェクトにしたものです
input要素に入力された情報が、JavaScriptのオブジェクトとして
キーバリュー形式で表されます

2.attrメソッド
要素が持つ指定属性の値を返します
要素が指定した属性を持っていない場合はundefinedを返します

3.processDataオプション
dataに指定したオブジェクトをクエリ文字列に変換します
デフォルトでtrueです
FormDataを利用する場合は、falseにする必要があります

4.contentTypeオプション
サーバにデータのファイル形式を伝えるオプションです
text/htmlでコンテンツタイプをXMLとして返します
デフォルトでtrueです
FormDataを利用する場合は、falseにする必要があります

5.クエリ文字列
webブラウザなどがwebサーバに送信するデータをURLの末尾に
特定の形式で表記したものです

6.FormDataを利用するときの注意点
processDataオプションおよびcontentTypeオプションで
falseを指定します

7.jbuilder
入力データをJSON形式で出力するテンプレートエンジンです

8.JSONの書き方
json.text @comment.text

json.キー　値の形で記述します

9.disabled属性
Formのsubmitボタンを押したときにtrueになり、
再度押しても反応しなくなります
再度押すためには、disabled属性をfalseにします

10.テンプレートリテラル記法
`(バックティック文字)で囲むことで、テンプレートリテラル記法となります
${}(プレースホルダー)で変数を扱うことができます

★railsで学んだこと★
1.debuggerを起動する方法
debuggerを起動させたい部分でdebuggerと記述します
ブラウザ上で検証を使って、変数の中身を知ることができます

2.binding.pryとdebuggerの違い
binding.pryは処理が止まったあと、ターミナルでコマンドを打って変数の中身を知ることができます
debuggerは止まったあと、ブラウザ上で変数の中身を知ることができます

3.ajaxを実装する時に気をつけること
Gemfileからturbolinksをコメントアウトか削除します
また、turbolinksに関する記述を削除します
自作のAjaxと競合してうまく動かない可能性があるためです

4.非同期通信の実装手順
1.gem 'jquery-rails'を追加します
2.gem 'turbolinks'をコメントアウトします
3.application.jsやapplication.html.erbおよびhamlにturbokinksの記述がある場合は削除します
4.jsファイルを追加しますこのとき、同名のcoffeeファイルがある場合は削除します
5.bundle installします
6.jsファイルでpreventDefaultを利用してデフォルトイベントを解除します
7.jsファイルで$.ajaxを利用し、url,type,data,dataTypeを指定します
FormDataを利用する場合は、processDataとcontentTypeをfalseに設定します
8.コントローラーファイルで、非同期通信を行う箇所でrespond_toを利用してHTMLとJSONの条件分岐を記述します
9.JSONファイルを追加し、コントローラーからjavascriptにデータを送信します
10.jsファイルで$.ajaxに対応するdoneとfailを記述します
11.done側でappendを利用し、イベントに応じてHTMLを追加する処理を記述します
12.fail側で、非同期通信に失敗したときの処理を記述します
いくつかのアプリケーションで非同期通信を実装したものをGithub上に3つ上げているので、
詳しくは概要欄のURLにあるGithubのプルリクとコミットコメントを参照してください
https://github.com/EL93019205/pictweet/pull/5
https://github.com/EL93019205/ajax_drill/pull/1
https://github.com/EL93019205/chat-space/pull/9

5.インクリメンタルサーチの実装手順
1.gem 'jquery-rails'を追加します
2.gem 'turbolinks'をコメントアウトします
3.application.jsやapplication.html.erbおよびhamlにturbokinksの記述がある場合は削除します
4.jsファイルを追加しますこのとき、同名のcoffeeファイルがある場合は削除します
5.bundle installします
6.jsファイルで入力フォームでキーが上がった時に対してイベントを作成します
7.jsファイルで$.ajaxを利用し、url,type,data,dataTypeを指定します
8.コントローラーファイルで、非同期通信を行う箇所でrespond_toを利用してHTMLとJSONの条件分岐を記述します
9.JSONファイルを追加し、コントローラーからjavascriptにデータを送信します
10.jsファイルで$.ajaxに対応するdoneとfailを記述します
11.done側でDOMの子要素を全て削除したあと、入力された値に応じてHTMLを追加する処理を記述します
12.fail側で、非同期通信に失敗したときの処理を記述します
いくつかのアプリケーションでインクリメンタルサーチを実装したものを2つGithub上に上げているので、
詳しくは概要欄のURLにあるGithubのプルリクとコミットコメントを参照してください
https://github.com/EL93019205/search_pictweet/pull/3
https://github.com/EL93019205/chat-space/pull/10

★jbuilderで学んだこと★
1.array!メソッド
JSON形式で配列で返したい時に便利なメソッドです
コードの記述量を減らすことができます

★jQueryで学んだこと★
1.keyupメソッド
キーを離したら処理をさせたい場合に利用します
インクリメンタルサーチでも利用します

2.emptyメソッド
指定したDOM要素の子要素のみを削除するメソッドです
指定したDOM要素自体を削除するremoveメソッドとは異なる点に注意です

3.forEachメソッド
与えられた関数を配列に含まれる各要素に対して1度ずつ呼び出します

配列名.forEach(function(配列の要素を表す変数){
console.log(配列の要素を表す変数);
});

4.animateメソッド
メソッドを利用したオブジェクトが持つプロパティなどを、
指定した値まで徐々に変化させることのできるメソッドです

5.document
最新のHTMLの情報を取得します

★CSSで学んだこと★
1.要素内でスクロールするようにする方法
親要素でoverflow: scroll;を記述します
たったの1行で実現できます

★gitで学んだこと★
1.空のコミットをする方法
git commit --allow-empty -m '空のコミット'

2.GithubDesktopのdescriptionに当たる部分をコマンドで記述する方法
git commit -m "説明" -m “詳細説明"
-mを2つ続けて記述します

★その他★
1.terminalでtabを移動する方法
shift+commandを押しながら十字キー左右で移動できます

2.メモリの使用量を確認する方法
comannd+spaceでspotlight検索を開いて
アクティビティモニタと打ち、Returnキーを押します