むじんブログ　”３歩進んで２歩下がる”

37歳未経験からのエンジニア転職を目指す営業部長

学習のアウトプット（JavaScript4＋その他）

【プルダウンメニューの表示・非表示（前回の続き）】

 

〜中略

pullDownButton.addEventLestener('click', function() {

  if (pullDownParents.getAttribute("style") == "display:block;") {

    pullDownButton.removeAttribute("style", "display:block;")

  } else {

    pullDownButton.setAtrribute("style", "display:block;")

  }

})

 

※JavaScriptの条件文はendを用いず、条件式を（）、条件文を｛｝で囲む。

 

---------------------------------------------------------------------------------

【debugger】

コードの処理を止めたいところで記入すると、挙動が一時停止される。

Railsのbinding.pryのようなもの。

 

処理を止めた状態で、デベロッパーツールのコンソールに入力をして要素の状態を確認したりするのに活用できる。

 

---------------------------------------------------------------------------------

【プルダウンリストの実装】

「プルダウンリストを選択すると、選択したプルダウンリスト名が表題として表示される」という実装を行なった。

 

プルダウンリストを取得し、forEachメソッドで1つ1つ取り出す

→取り出した各リストの要素の文字列（開始タグと終了タグで囲まれた中身）を抽出して変数に代入する

→表題部分の文字列に抽出した変数を入れる

という流れ。

 

プルダウンリストの取得のため、プルダウンリストそれぞれに同じクラス名を与えて、「document.querySelectorAll」を使った。

※document.ElementsByClassNameを用いなかったのは、forEachを使うから。

（両者では戻り値が異なり、それにより使えるメソッドが変わるため）

 

---------------------------------------------------------------------------------

【innerHTML】

○○.innerHTMLで、開始タグと終了タグに囲まれている「要素の文字列」を取得できる。

また、○○.innerHTML = "△△"とすると、文字列を変えることも可能。

 

---------------------------------------------------------------------------------

【window.addEventListener('load')】

実装初期においてはJavaScriptコードの冒頭に記述したが、そうすると

中の処理に名前を付けることができないので、切り出してコードの最後に配置を変えた。

→代わりにfunction(関数名）{ を頭に持ってくることで、処理全体に関数名を付与した。

 

この方式はJavaScriptの記述においてよく採用されているらしい。

 

---------------------------------------------------------------------------------

【VS CODE豆知識】

・command+/：選択した箇所全てをコメントアウトできる

・command＋O：他のディレクトリを開く

・command+P：作業中のファイルを選択できる

・command+enter：カーソルの下に行を挿入

・command+shift+enter：カーソルの上に行を挿入

・ターミナルでカーソルが有効になっている時に上キーを押すとファイル名がそのまま表示される

 

【RubyのReturnについて】

Rubyの条件式で用いるreturnは、戻り値を返すだけの役目なので

その戻り値を出力するところまでは行なってくれない。

もし出力まで必要な場合は、returnを使わずに「puts 戻り値」という書き方でメソッドを終了させるか、メソッド自体の呼び出し時にputsを記載しておく必要がある。

 

---------------------------------------------------------------------------------

【thisメソッド】

イベント発火元となった要素を取得できる。

要素名を何度も書かなくてよいので、記述がシンプルになる。

 

---------------------------------------------------------------------------------

【getAttributeメソッド】

要素の属性の値を取得するためのメソッド。

要素名.getAttribute("属性名")と記述する。

 

---------------------------------------------------------------------------------

【JavaScriptのライブラリ】
処理を速くしたり記述をシンプルにしたりなど、様々なライブラリを使用できる。

 

---------------------------------------------------------------------------------

【Ajax通信】
JavaScriptを用いた非同期通信のこと。
通信を行なった際に、ブラウザの再読み込みをしないのでスピーディーに通信ができる。
GoogleMapなどで活用されている技術。

 

非同期通信を行うには、JavaScriptがリクエストをコントローラーに送るという処理になる。
そのために、appディレクトリ傘下のJavaScriptフォルダにJavaScriptのファイルを作成し、そこに「送信ボタンが押されたら動作が起こる（イベントが発火する）」ように記述していく。

 

 ---------------------------------------------------------------------------------

【隠しディレクトリ】

リポジトリを含むGitの情報は、隠しディレクトリである.gitの中で管理されている。

lsコマンドに-aを付けると、非表示になっている.から始まるディレクトリを確認することができ、　grep ○○と加えるとその文言を含むディレクトリを検索することも可能。

また、rmコマンドで削除ができる。

 

---------------------------------------------------------------------------------

【ローカルリポジトリの作成】

ターミナルでgit initコマンドで作成することができる。

 

---------------------------------------------------------------------------------

【JavaScriptファイルの読み込み】

新たに作成したJavaScriptファイルはそのままでは読み込めないため、

application.jsというファイルに、require(../○○）と記述して読み込みをする。

※..は「1つ前のディレクトリ」を意味し、○○はファイル名が入る。

 

---------------------------------------------------------------------------------

【FormDataオブジェクト】

フォームに入力された値を取得することができるオブジェクト。

new FormData（フォームの要素）と記述する。

引数の「フォームの要素」で指定されているフォームに入力された値を取得することができる。

 

今回の実装では、一度getElementbyIDでフォームをID名で取得し、その情報をformという変数に代入して、その変数を引数としてnew FormDataに渡した。

（また、それによって取得したフォームの入力値はさらにformDataという変数に代入した）

 

---------------------------------------------------------------------------------

【XMLHttpRequestオブジェクト】

JavaScriptを使ってサーバーとHTTP通信をする時に使用するオブジェクト。

new XMLHttpRequest（）と記述することでオブジェクトを生成できる。

 

実装では、XHR = new XMLHttpRequest()

として、生成したオブジェクトを変数に代入した。

 

---------------------------------------------------------------------------------

【openメソッド】

リクエストの内容を指定するためのメソッド。

（XMLHttpRequestオブジェクトのメソッド）

 

XHR.open("POST", "/posts", true）のように記述する。

左から「HTTPメソッドの指定」「パス」「非同期通信のON・OFF」の順で第3引数までを指定する。

 

---------------------------------------------------------------------------------

【responseTypeプロパティ】

受け取るレスポンスのデータフォーマットを指定するプロパティ。

（リクエスト送信時に、レスポンスの形式は指定しておく必要がある）

 

XHR.responseType = "json"と記述した。

 

※今回は形式をJSONに指定したが、JSONとは「JavaScript Object Notaion」の略で、JavaScriptを基に構成されたデータフォーマットらしい。

 

---------------------------------------------------------------------------------

【sendメソッド】

フォームの内容をコントローラーに送信するメソッド。

XMLHttpRequestオブジェクトのメソッドの1つ。

 

---------------------------------------------------------------------------------

【フォームデータを非同期通信としてリクエスト送信する一連の流れ】

function post () {

  const submit = document.getElementById("submit");

  submit.addEventListener('click', () => {

    const form = document.getElementById("form");

    const formData = new FormData("form");

    const XHR = XMLHttpRequest();

    XHR.open("POST", "/posts", true);

    XHR.ResponseType = "json";

    XHR.send(formData);

  });

}

 

window.addEventListener('load', post);

学習のアウトプット（JavaScript3）

【script要素】

HTMLのタグの1つで、headタグの中に記述する。

JavaScriptだけで使うものでは無いようだが、基本的にはJavaScriptのコードを埋め込んだり参照したりするのに使うらしい。

 

<script src=ファイル名></script>

とする事で、ファイル（今回は○○.jsという名称のJavaScriptファイル）を読み込める。

 

この記述をした後に、jsファイルを編集していく。

（JavaScriptは、編集後にブラウザのリロードをしないと反映しない）

 

---------------------------------------------------------------------------------

【イベント】

JavaScriptは「何かが起きたらコードを実行する」という仕組みになっている。

この「何かが起きる」ことを『イベント』と呼ぶ。

また、イベントによってJavaScriptのコード（関数など）が起動することを

『イベント発火』と表現する。

 

・イベント例

ボタンをクリックする、カーソルを乗せるなど

 

・イベント発火の例

イベント名 説明
loadイベント ページ全体が全て読み込まれた後に、イベント発火する
clickイベント 指定された要素がクリックされた時に、イベントが発火する
mouseoverイベント マウスカーソルが指定された要素上に乗った時に、イベントが発火する
mouseoutイベント マウスカーソルが指定された要素上から外れた時に、イベントが発火する

 

---------------------------------------------------------------------------------

【addEventListener】

イベント発火の時に起動する関数を定義するメソッド。

 

要素.addEventListener('イベント名', 関数）と記述する。

※Listenerはリスナー

※要素はgetElement○○のメソッドで取得する

 

---------------------------------------------------------------------------------

【loadイベント】

JavaScriptのコードは、そのままではHTMLのコードより先に読み込まれる。

その為、例えば上記のgetElementメソッドをそのまま用いると、

ブラウザにHTMLが読み込まれる前に指定の要素を取得しようとする。

（→取得できず、結果がnullとなってしまう）

 

これを避けるために、loadイベントを使う。

loadによって、順番がページの読み込み→JavaScriptのコード実行

となる。

 

・書き方

window.addEventListener('load', function(){

　関数の内容

}

例えば「○○の要素を取得して、この要素にカーソルが乗った時に色を変える」というような内容が関数の中身に入る。

（詳しくは後述）

 

---------------------------------------------------------------------------------

【インラインスタイル】

HTMLの開始側のタグに、CSSを直接書き込む方法。

 

インラインスタイルの追加：setAttributeメソッド

インラインスタイルの削除：removeAttributeメソッド

を用いて記述する。

 

---------------------------------------------------------------------------------

【setAttributeメソッド】

指定した要素に新しい属性を追加（または上書き）するメソッド。

※attributeは「属性」という意味。

 

要素.setAttribute(name, value)

nameは属性の名前、valueは属性に指定したい値を記述する。

 

例）

const sample = document.getElementById("test")

sample.setAttribute("style", "color: red;")

→「idがtestである要素に対して、styleがcolor redの状態で取り出す」という意味。

 

【removeAttributeメソッド】

指定した要素から、特定の属性を取り除くメソッド。

書き方はsetAttributeと同じ。

 

---------------------------------------------------------------------------------

【カーソルを乗せると色が変わり、外すと色が戻る実装】

window.addEventListener('load', function(){

loadイベントによって、ページが読み込まれてからJavaScriptコードが実行される

  const pullDownButton = document.getElementById("lists")

  listsというid名の要素を取得して、pullDownBottunという変数に代入する

  pullDownButton.addEventListener('mouseover', function(){

  pullDownButtonにマウスを乗せるとイベント発火する

    pullDownButton.setAttribute("style"; "background-color: #FFBEDA;)

    pullDownButtonにstyle→背景色#FFBEDAを属性追加する

    }

 

  pullDownButton.addEventListener('mouseout', function(){

    pullDownButton.removeattribute("style"; "background-color: #FFBEDA;)

    マウスを外すとstyle→背景色#FFBEDAが解除される

    }

})

---------------------------------------------------------------------------------

【プルダウンメニューの実装】

プルダウンメニューは、単にプルダウンメニューを記述しただけでは表示されたままになるので、予めdisplay: none;を仕込んでおき、クリックした時にdisplay: blockに変わるようにすればよい。

 

window.addEventListener('load', function(){

 

  const pullDownButton = document.getElementById("lists")

  const pullDownParents = document.getElementById("pull-down")

  pull-downというid名の要素を取得して、pullDownParentsという変数に代入する

 

  pullDownButton.addEventListener('mouseover', function(){

    pullDownButton.setAttribute("style"; "background-color: #FFBEDA;)

    }

 

  pullDownButton.addEventListener('mouseout', function(){

    pullDownButton.removeAttribute("style"; "background-color: #FFBEDA;)

    }

 

  pullDownButton.addEventListener('click', function(){

  pullDownButtonをクリックするとイベント発火する

    pullDownParents.setAttribute("style", "display: block;")

    pullDownParentsにstyle→display: block;を属性追加する

  }

})

学習のアウトプット（JavaScript2）

【関数】

Rubyでいうメソッド。

 

・Rubyの場合

def メソッド名

処理の内容

end

 

・JavaScriptの場合

function 関数名（引数） {

処理の内容

}

※引数がない場合でも（）は記入が必要であることに注意。

 

例）

function sayHello(){

  console.log("こんにちは”)

}

 

sayHello()

→コンソールにこんにちはと表示される

-----------------------------------------------------------------------------------

【戻り値】

JavaScriptでは、戻り値を返すためにはreturnが必須となる。

 

-----------------------------------------------------------------------------------

【関数定義の種類】

関数宣言と関数式があり、どちらもよく使うので把握しておく必要がある。

関数式は、無名の関数を変数に代入する方式。

 

・関数宣言（上述）

function 関数名（引数） {

処理の内容

}

 

・関数式

変数 = function（引数）{

処理の内容

}

 

【関数宣言と関数式の違い】

関数宣言は先に読み込まれ、関数式は記述の順番通りに読み込まれる。

例えば関数の呼び出しが関数定義より前にあった場合、

関数宣言：呼び出し可能（関数部分が先に読み込まれるため）

関数式：エラーになる（定義される前に呼び出しを行なっているため）

 

-----------------------------------------------------------------------------------

【無名関数】

関数式のfunction（引数）{処理の内容}の部分。（変数＝以外の部分）

関数宣言と比べ、関数名を用いずに関数定義ができるので記述がシンプルになる。

 

-----------------------------------------------------------------------------------

【即時関数】

関数自体の呼び出しを行わなくても、すぐに処理が行われる関数。

（関数を定義すると同時に実行される）

 

例）

（function countNum(num) {

  console.log(num)

})(1)

 

-----------------------------------------------------------------------------------

【アロー関数】

近年よく使われている記述の方法。

function()の部分を() =>に差し替えて記述する。

より短い記述になるというメリットがある。

 

例）

・関数式

const 変数 = function（引数）{

処理の内容

}

 

・アロー関数

const 変数 = () => {

処理の内容

}

 

-----------------------------------------------------------------------------------

【関数定義の種類まとめ】

関数定義の種類 特徴
関数宣言 標準的な関数の定義。
無名関数 関数を多く使用するコードであるときに使用する。関数名の重複を避けることができる。
即時関数 流用する可能性のない関数を定義するときに使用する。別途関数を定義する手間がない。
アロー関数 無名関数または即時関数において、より省略した記述をしたい時に使用する。

 

---------------------------------------------------------------------------------

【JavaScriptにおけるセミコロンについて】

変数定義の文章の最後などにセミコロンをつけて、文章の終わりであることを

示すことができる。（セミコロンは省略することも可能）

 

セミコロンは、ルール上省けるものと、そもそもつけないものがあり、

煩雑になるのでカリキュラムでは省略で統一されている。

（ただし、場合によってはつけないとエラーが出ることもある）

 

セミコロンは、必須か不要か様々な意見があり分かれているので、

どちらが正解ということではない。

 

---------------------------------------------------------------------------------

【JavaScriptにおけるオブジェクトの概念】

JavaScriptでは、データや処理をまとめたものをオブジェクトと呼ぶ。

（オブジェクトの中にデータや処理が含まれている）

 

データはキーとバリューで構成されている。

キーとバリューがセットになったものをプロパティと呼ぶ。

 

例）

オブジェクト→human

データ→名前：鈴木　年齢：25歳　性別：男性（3つのプロパティ）

処理：歩く・食べる

 

つまり、オブジェクトはプロパティが集まってできている。

 

---------------------------------------------------------------------------------

【プロパティの書き方】

プロパティはハッシュで括られている。

 

変数 = {キー: バリュー}

 

例）

let human = {

  name = "Suzuki"

  age = 25

  jender = "man"

}

 

---------------------------------------------------------------------------------

【オブジェクトの値の取得】

オブジェクト名.プロパティ名で取得できる。

（プロパティ名はキーの部分になる）

 

例）

上記のhumanオブジェクトに対して

console.log(human.name)

→Suzukiが出力される

 

---------------------------------------------------------------------------------

【オブジェクトへのプロパティの追加】

・オブジェクト名.プロパティ名 = バリュー

・オブジェクト名['プロパティ名'] = バリュー

上記のどちらの記述でも追加できる。（どちらを使うべきかなどは特に言及なし）

 

---------------------------------------------------------------------------------

【プロパティの変更】

オブジェクト名.プロパティ名 = （変更したい値）

上記を記述して上書きをする。

 

---------------------------------------------------------------------------------

【JavaScriptにおけるメソッド】

オブジェクトに対してある動作をさせる為の処理。

プロパティの後に、メソッド名: function(){}を用いて記述する。

 

例）

let human = {

  name = "Suzuki"

  age = 25

  jender = "man"

 

 talk: function(){

    console.log(`私の名前は${human.name}です`)

  }

 

human.talk()

→私の名前はSuzukiです

 

---------------------------------------------------------------------------------

【windowオブジェクト】

ブラウザ全ての情報を持っているオブジェクト。

ブラウザオブジェクトとも呼ばれ、ブラウザが起動するタイミングで自動的に生成される。

 

JavaScriptで予め定義されているメソッドやオブジェクトは全てwindowオブジェクトの

プロパティという扱いになる。

（その為、本来は各メソッドは頭にwindow.が付くが、省略されている）

 

---------------------------------------------------------------------------------

【documentオブジェクト】

ブラウザ上のHTMLに対して何らかの処理を行うオブジェクト。

行う処理によってプロパティやメソッドが複数ある。

 

---------------------------------------------------------------------------------

【alert()】

（）の中の文字をアラート（ポップアップのようなもの）で表示させることができる。

本来はwindow.alert()だが、省略可能。

 

---------------------------------------------------------------------------------

【DOM（Document Object Model）】

HTMLを解析する仕組み。

 

HTMLをDOMで解析→CSSやJavaScriptで装飾→ブラウザが受け取ってユーザーに渡す

 

HTMLは階層構造なので、DOMで解析された際も階層構造のデータとなる。

これをDOMツリーまたはドキュメントツリーと呼ぶ。

JavaScriptではDOMツリーの一部を取得し、装飾などを行うことができる。

 

---------------------------------------------------------------------------------

【DOMツリーからのHTMLの取得】

主に3つの種類（id名から取得・class名から取得・セレクタから取得）がある。

 

①document.getElementById("id名")

②document.getElemenstByClassName("class名")

③document.querySelectorAll("セレクタ名")

 

※クラスは同名で複数存在することがあるので、Elementが複数形になる。

同じクラス名を持つ要素は全て取得する。

 

※セレクタ名は、最も頻繁に出てくるのは「クラス名」「id名」「HTMLタグ」であり、

それぞれ(".クラス名")、("#id名")、("タグ名")と記述する。

 

※②と③では戻り値が異なる。

②はHTML collection、③はNodeListを戻り値とし、見た目は同じようだが

この2つでは使えるメソッドが異なる。

（例えばforEach関数は後者）

学習のアウトプット（JavaScript）

新しい言語であるJavaScriptの学習に入った。

Rubyとの相違点などを整理しながら、比較するRuby自体の理解度も高まるように

掛け合わせて学びたい。

 

【JavaScript】

世界で最も使用されているとされるプログラミング言語の1つ。

実際にほとんどの現場で使用されている、人気の高い言語。

 

（GitHubのリポジトリで使われている言語を統計すると、下記の順番で使われている）

1位：JavaScript

2位：HTML＆CSS

3位：Java

4位：PHP

5位：Ruby

 

JavaScriptを使うと、

カーソルを合わせるだけでウインドウが表示されたり、

いいね!ボタンを押すと画面遷移なしで反応したりする実装が可能となる。

これにより、ユーザーの体感待ち時間を削減するサイトが作成できる。

 

---------------------------------------------------------------------------------

【JavaScriptの練習】

ブラウザ→デベロッパーツール（検証ツール）からコンソールを立ち上げて

入力を行う。（テキストエディタを使うよりも簡便な為）

 

※検証ツールはデフォルトではブラウザ右側に表示されるが、

配置を下などに変更することも可能。

 

---------------------------------------------------------------------------------

【console.log】

コンソールにテキストを表示させるメソッド。

console.log（文字列）と入力する。

この文字列には変数を入れることもできる。

 

---------------------------------------------------------------------------------

【JavaScriptにおける変数定義】

var・const・letのいずれかを用いて定義する。書き方は、例えばvarなら

var name = “Suzuki”

のように記述する。

 

var：再代入・再定義が可能

const：再代入・再定義ともに不可能

let：再代入は可能、再定義は不可

 

複数人で作業をすることが多い中で、

varを用いると「今後再代入を行う予定があるのか」などが判然とせず

共通認識を持てず作業効率が上がらないことから、

基本的には「再代入予定のないものはconst、予定がある場合はlet」を使い、

varは使用しないのが一般的になっている。

 

---------------------------------------------------------------------------------

【テンプレートリテラル】

文字列の中に変数を入れ込む方法。

記述が短くなるメリットがあるので、積極的に活用する。

 

テンプレートリテラルなし→introduction = ”私は” + name + “です”

テンプレートリテラルあり→introduction = `私は${name}です`

→どちらもconsole.log(introduction)で出力

※テンプレートリテラルを使用する場合は、SHIFT＋＠でバッククウォートを

出力して囲む。

 

---------------------------------------------------------------------------------

【条件分岐】

Rubyと同様に条件分岐を行うことができるが、異なる点がいくつかある。

書き方は以下の通りで、

・条件式を（）で囲む

・条件に該当する処理を｛｝で囲む

・elsifではなくelse ifを使う（else ifは複数回使用可能）

 

if (条件式1) {

~~~~~~~~~~~

} else if (条件式2) {

~~~~~~~~~~~

} else {

~~~~~~~~~~~

}

 

※なぜかRubyでelsifは一度しか使えない認識になっていたが、

同様に繰り返し使えることを今回再学習した。

 

---------------------------------------------------------------------------------

【配列】

Rubyと同様に配列も使用可能。

添字も使えて、0から始まる点も同じ。

 

const list = [“○○”, “△△”, “□□”]

 

console.log(list)

console.log(list[2])

 

---------------------------------------------------------------------------------

【for文】

JavaScriptの繰り返し処理を実現する構文。

下記のように記述する。

 

for (①初期化式; ②条件化式; ③加算式） {

  繰り返す処理の内容

}

 

初期化式などの名称は暗記する必要はないが、

どのような内容を入力するかは把握すること。

 

例）

let count = 1

for (let i = 1; i <= 10; i++ ) {

  console.log(`${count}回目の出力`)

  count += 1

}

 

iが初期値1で、10以下である間は処理を繰り返す（＝10回繰り返す）

i++はi = i + 1（i += 1）と同じ意味で、繰り返し処理が1回完了した後に加算される。

1回目の処理では「1回目の出力」と出力され、以降回数分だけ処理が行われる。

 

---------------------------------------------------------------------------------

【forEach関数】

配列の繰り返し処理を行う関数。（Rubyでいうeachメソッド）

※関数＝Rubyでいうメソッド

 

配列.forEach( function(value){

  処理の記述

})

 

※functionも関数

 

例）

fruits = ["apple", "orange", "grape"]

fruits.forEach( function(item) {

  console.log(item)　// 配列に格納されている要素の数だけ実行される

})

 

functionの引数（今回はitem）に配列の各要素が入る。

配列の数だけ要素を変えながら処理が繰り返されていく。

全ての配列が入り終わると繰り返し処理は完了する。

 

学習のアウトプット（モデルの深掘り）

モデルの深掘り。

複数の用語が出てきて、それぞれの関係性を理解するのに手間取った。

 

 

 

モデルによるデータベースの操作は、

ActiveRecordというオブジェクトによって実現している。

ActiveRecordはORMという技術に分類される。

 

【RDB】

リレーショナルデータベース

→表形式でデータを管理するデータベース

 

【RDBMS】

リレーショナルデータベースマネジメントシステム

→リレーショナルデータベースを管理するシステム（MySQLなどがこれに当たる）

※カリキュラムでは、便宜上なのか「RDBはMY SQLを使っている」と表現されていた。

 

【ORM】

RDBのデータを、オブジェクト指向プログラミング言語でオブジェクトとして

使用するために変換する技術。

Ruby on RailsのActiveRecordもこれに当たる。

 

【SQL】

SQL（エス・キュー・エル/シークェル）とはStructured Query Languageの略で、

RDBの操作を行うための言語。ActiveRecordなどのORMのメソッドは、

SQLに変換されるためテーブルの操作が可能になる。

 

SQLはデータベースやテーブルに対してさまざまな命令を行うが、

その命令は大きく3つに分類される。

 

・データを定義するDDL（Data Definition Language）

→DBやテーブルを作成する・削除する


・データを操作するDML（Data Manipulation Language）

→データを探す・登録する・更新する


・データを制御するDCL（Data Control Language）

→変更を確定する・取り消す

 

---------------------------------------------------------------------------------

【上記を自分の言葉でまとめると】

☆MY SQLで管理されたRDBをオブジェクトとして使用する為に、ORM技術であるActiveRecordを使っている。

このORM（ActiveRecord）のメソッドは、SQLという言語に変換されてテーブル操作を行なっている。

→つまり、Ruby言語とSQL言語の間でORM（ActiveRecord）が変換を行なっているというイメージ？

 

SQLとは言語の1つで、データベースの操作を行うことを可能にするもの。

ちなみにSQLには様々な命令があるが、国際基準で文法が定められているので、

MySQL以外のリレーショナルデータベースを用いた場合でも

文法はあまり変わらず、知識は汎用的に活用できる。

 

---------------------------------------------------------------------------------

【find_by_sql】

RailsでSQL文を使用し、データを検索し取得する際に使用するメソッドのこと。
（ActiveRecordメソッドのfindをSQL文で表現し直す際に用いた）

学習のアウトプット（ヘルパーメソッド復習）

ヘルパーメソッドの復習。

form_withとlink_toが以前から苦手だったが、今回の復習とまとめで理解が出来た。

 

【ヘルパーメソッド】

HTMLでタグを出現させたり、テキストを加工させたりするのに使うメソッドで、

主にビューで使う。

ヘルパーメソッドは、使える時には基本的には使った方が良い。

（記述がシンプルになるのと、セキュリティ上の問題のため）

 

【form_withについて（復習）】

 

・form_withの書き方

<%= form_with url:”○○”,method: :HTTPメソッド（デフォルトはpost）, local:  true do |form| %>

  <%= form.text_field :content %>

  <%= form.submit ‘投稿する’ %>

<% end %>

 

 

ルーティングとコントローラーアクションを予め作成し、rails routesでURIを確認

→確認したURIとHTTPメソッドをform_withに設定すると、フォーム起動時に

その内容でリクエストがなされる。

（先にform_withのURIやHTTPメソッドを作成してから、対応するルーティングを

作る流れでも良いようで、カリキュラムではその順番で行なっていた。

ただし、ルーティング部分を作成しないとrails routesでは出てこない）

 

※メソッドの記述は、postの時は省略することができる。

 

・フォームの内容

doからendの中に記述する。

text_fieldやsubmitもフォーム部品のヘルパーメソッドで、ブロック変数のformと

組み合わさることでフォーム部品を生成することができる。

（部品部分のヘルパーメソッドは検索すればすぐに出てくるので覚えなくて良い）

 

フォーム部品のヘルパーメソッド

用途例

text_field

1行のテキストボックス

password_field

パスワード入力ボックス（入力したテキストがアスタリスクなどに置き換えて表示される）

check_box

チェックボックス（複数選択可能）

radio_button

ラジオボタン（複数の中から1つしか選択できない）

submit

送信ボタン

 

表ではsubmit以外で、ヘルパーメソッドの引数にname属性に当たる名前が入る。

これがデータを扱う際の名前であるキーになる。

 

local trueは、リモート通信機能であるAjaxをオフにする為に記述している。

（今は必要ない為）

 

-----------------------------------------------------------------------------------

【form_withのmodelオプション】

form_withでは、modelオプションに指定されているインスタンス変数の状態によって

リクエストを送るアクション先を判断している。

例えばnewアクションで定義した空のインスタンス変数がmodelオプションで

指定されていた場合、フォーム実行時はcreateアクションに送信される。

→わざわざURIやHTTPメソッドを指定しなくて良くなるので便利

 

また、フォーム自体が判断を行なってくれるので、部分テンプレート化して、

editなど他のアクションと記述を共通化するなどの活用もできる。

（カリキュラム「pic tweet 〜ツイートを編集しよう〜」に挙げられている動画が

分かりやすい）

 

-----------------------------------------------------------------------------------

【link_to】

ルーティングを先に作っておき、

リクエストを送って動かしたいルーティングに基づいてパスを入力する。

 

・リンク先をURLで指定する場合

<%= link_to 'リンクに表示する文字', 'リンク先のURL' %>

 

・リンク先をパスで指定する場合

<%= link_to 'リンクに表示する文字', 'パス', method: :HTTPメソッド %>

※パスで指定する場合、デフォルトのHTTPメソッドはGETになり、

省略することもできる。

※パスとはrails routesの「URIパターン」のことで、Prefixではない。

 

学習のアウトプット（TECH CAMP 発展コース序盤）

今日は時間割学習で、朝から夜まで10時間学習。

アウトプット量もかなり多くなった。

 

【学習宣言】

明日は4時間学習する。

 

----------------------------------------------------------------------------------

【indexメソッド】

コントローラーアクションではなく、Rubyのメソッドの方。

 

ある文字列で、自分の検索したい文字（またはワード）が

何文字目にあるかを確認できるメソッド。

例1）

「こんにちは」の文字列で「にち」は3文字目から書かれている・・・というもの。

 

さらに、検索したい文字が

「○文字目を頭とした場合に△文字目にある」という調べ方も出来る。

例2）

「こんにちは」の文字列で「ん」を頭とした場合、「にち」は2文字目から書かれている・・・というもの。

 

※注意点

indexメソッドでは、頭の文字は「0番目」という扱いになるので

上記の例1では実際には3番目ではなく2番目になる。

もし頭を1番目にしたい場合は、単純に結果に1を足すと良い。

 

・書き方

def メソッド名（引数）

　puts 引数.index(“探したい文字”, 何番目を頭として探すか）

end

 

----------------------------------------------------------------------------------

【課題解決について】

分からないことがあった場合に、整理せずにすぐ質問するのではなく、

・自身で深掘り、課題解決能力を向上させる

・理解度を深め、相手に伝える技術が高まる

上記の観点から、以下のフォーマットに沿って自己解決を図る時間を設けることが大切。

（現場に入っても重要な考え方となる）

 

■解決したいこと

■自力で調べた内容

■仮説と検証作業の結果

 

----------------------------------------------------------------------------------

【Ruby on Railsの基本理念】

・DRY

Don’t Repeat Yourselfの略で、同じ情報・コードを繰り返し使わないということ。

可読性の向上・バグの予防・処理速度向上のため

 

・CoC

Convention over Configurationの略で、設定よりも規約を優先するという考え方。

railsで予め定義された処理を自分で書かないという意味。

開発スピードや質だけでなく、開発者同士が共通認識できて可読性も向上する。

※ディレクトリも規約に基づいて構築されている

 

・オブジェクト指向

全てを「モノ」として捉える方針のこと

 

----------------------------------------------------------------------------------

【Action View】

Railsアプリケーションにおいて、ビューの機能を実現するオブジェクト。

Action Viewの中にテンプレートエンジンのERBが含まれているので、

~.html.erbファイルをビューファイルとして使える。

 

ビューファイルは直接レスポンスとして返っているのではなく、

Action Viewによってまとめられた後に返されている。

 

コントローラーで定義したインスタンス変数は、直接ビューファイルで使えるのではなく、

Railsの裏で動いている様々な機能を介した後にAction Viewを通じてビューファイルに渡されている。

（仕組み自体はソースコードを読めば分かるが、今はそこまでは不要）

 

※コントローラーは複数あり、それに対応したビューファイルもその数だけある。

名前もそれぞれ相関している。

----------------------------------------------------------------------------------

【ヘルパーメソッド】

ビューファイルで記述したヘルパーメソッドは、HTMLとして読み替えられる。

例）link_toメソッド→aタグに読み替え

 

ヘルパーメソッドは数が多く、暗記する必要はない。

また、ヘルパーメソッド自体を自作することもできる。

 

----------------------------------------------------------------------------------

【モジュール】

インスタンスを生成しないクラスのようなもの。

インスタンスを使用せずに処理だけを使う場合はモジュールで作成する。

 

モジュールの中にさらにクラスを定義することもできる。

メリットとしては、同じクラス名でも別々のモジュールの中に入れておけば

別のクラスとして認識されて使用できる。

 

module モジュール名

　class クラス名

　end

end

 

モジュール名：：クラス名

で呼び出し可能。

 

----------------------------------------------------------------------------------

【Helper】

ヘルパーメソッドを作成できるモジュール。

app/helpers配下のディレクトリに存在している。

このディレクトリには、各コントローラーに対応したヘルパーファイルなどもある。

 

application.helperファイル内で新しいヘルパーを定義すると、

ビューファイルで<%= %>で使用できるようになる。

 

ビューファイルで同じRubyの記述を繰り返してしまった場合などは、

切り出してヘルパーファイルに記述してヘルパー化すると

可読性が向上する。

 

----------------------------------------------------------------------------------

【部分テンプレート（復習）】

renderメソッド→部分テンプレートを呼び出すためのメソッド

partialオプション→どの部分テンプレートを呼び出すかを指定する

localsオプション→呼び出した部分テンプレートで、指定した変数を用いることができる

 

<% render partial: “sample”, locals { post = “hello” } %>

→_sample.etml.erbファイルを部分テンプレートとして呼び出す。

　また、部分テンプレート内では変数postが使用できる。

 

----------------------------------------------------------------------------------

【rawメソッド】

raw(文字列）と記述し、HTMLを正しく表示させるのに活用する。

rawメソッドの中に入れることで、記号などがフォーマット化されて文字化けをしなくなる。

 

----------------------------------------------------------------------------------

【Action Controller】

Railsでコントローラーの役割を実現するために必要なオブジェクト。

これがあることでリクエストの受け取り・レスポンスの返却を行うことができている。

 

----------------------------------------------------------------------------------

【whereメソッドとLIKE句（復習）】

whereメソッドは、モデルが使用できるActhiveRecordメソッドの1つ。

where（条件）で、条件を満たしたレコードを

テーブルからインスタンスで配列の形で取得する。

※条件には「検索対象となるカラム」を含んだ条件式を記入する。

※whereメソッドを連続させると、複数条件に一致したレコードを取得できる

 

例）

Tweet.where('id < 3')

→IDが3未満のレコードを全て配列の形で取得する

 

LIKE句は曖昧な文字列を検索する時に用いるもの

where('title LIKE(?)', "a%")

aから始まるタイトル

where('title LIKE(?)', "%b")

bで終わるタイトル

where('title LIKE(?)', "%c%")

cが含まれるタイトル

where('title LIKE(?)', "d_")

dで始まる2文字のタイトル

where('title LIKE(?)', "_e")

eで終わる2文字のタイトル

※「title」は「text」など、カラムによって変わる。

 

----------------------------------------------------------------------------------

【コントローラーとモデルの役割】

コントローラーはあくまでリクエストを受け取りレスポンスを返すのが役割なので、

データを引用するなどの細かい処理は記載せずに他に切り出す。

各エンジニア間で共通認識として持つことで共有がしやすくなり、

レスポンスとして返るものが何かなども分かりやすくなる。

 

※以前はモデルに切り出していたが、本来は今回学んだサービスクラスに切り出す方が好ましいらしい。

 

----------------------------------------------------------------------------------

【レンダリング】

HTMLなどのビューファイルを画面に表示させること。

（index.html.erbなど）

 

【JSON】

データを扱う場合のフォーマットの1つ。

他にもフォーマットはあるが、動作が軽く、新しい言語との親和性が高いことからよく用いられている。

 

----------------------------------------------------------------------------------

【コントローラーとビューの関係性】

コントローラーにアクションを定義すると、それに対応したHTMLファイルが返却するレスポンスとして決定される。

（例えはindexアクションであれば、index.html.erb）

もしビューファイルを任意のものにしたい場合はrenderメソッドのtemplateオプションを使う。

JSON形式にしたい場合は、render json：{ ~ }とする。

 

----------------------------------------------------------------------------------

【サービスクラス】

実はコントローラーの記述をモデルに切り出すのもあまり好ましくない

（モデルはモデルでき必要な記述がある）ため、切り出し専用のファイルを作ると利便性が高まる。

appディレクトリにフォルダ・ファイルを作ってサービスクラスを記述して

それを引用することでコントローラー・モデルともにスッキリさせることができる。

 

----------------------------------------------------------------------------------

【セッション】

サイトなどにおいて、前回の情報を一時的にそのまま保存しておく仕組み。

ショッピングサイトでの買い物カゴのデータや、ユーザーログイン情報などが

これにあたり、WEBサービスの利便性向上につながっている。

 

コントローラーでsessionというオブジェクトを使って実装できる。

（deviseでは内部でセッションが既に実装されている）

 

【クッキー】

ブラウザが持っているデータの保存場所。

セッションはデータベースではなくクッキーに保存されている。

 

【CookieStore】

Railsでクッキーを使用する場合のデフォルトの保存場所（セッションストレージ）のこと。

セッションはハッシュ形式で保存される。

一時的に保存しているユーザーセッションが悪意のあるユーザーに

盗まれたりしないように、CookieStoreではセッションを暗号化したり

定期的にリセットしたりしている。

 

----------------------------------------------------------------------------------

【ActiveModel】

Railsでモデルの機能を実現するために必要なオブジェクト。

様々なモジュールが利用できる。

 

【Callbacksモジュール】

「データを保存する時」などの任意のタイミングで実行する処理を設定することができるActiveModelのモジュール。

設定する処理のことをコールバックと呼ぶ。

コールバックの登録は普通のメソッドと同じように記述する。

 

コールバックのタイミングは、after_validationのように指定する。

 

【Validationsモジュール】

ActiveModelのモジュールの1つで、バリデーション機能のためのもの。

 

【Serializationモジュール】

JSONで戻ってくるデータを整えることができるモジュール。

例えば、レスポンスとして戻す時に、必要のないカラムを含めないなど。

※シリアルは「一続き」のような意味。必要なものだけを一続きにするイメージ？

 

【Formオブジェクト】

①フォームから送られたデータが複数のモデルに関連するもので、それぞれのモデルでデータを更新させたい場合

②フォームから入力された値に対応するモデルはないが、バリデーションをかけたい場合

に用いるオブジェクト。