【Javascript / jQuery】toggleClass()、addClass()、removeClass()メソッドの解説

ハロハロ〜　しゅんです😆
自分のアウトプット用に運営いているブログです。
今回は、、、、
「toggleClass()、addClass()、removeClass()メソッド」についてです。
処理内容が似ているのでここでしっかりとまとめておきます。

先ずは、それぞれのメソッドの処理内容を確認していきます。

○toggleClass()メソッド

「引数に指定されたクラス名が、jQueryオブジェクト内の要素のclass属性に指定されているか確認して、指定されていなければ追加、指定されていれば削除するメソッド」です。

○addClass()メソッド

「引数の文字列(クラス名)をclass属性に追加するメソッド」です。

removeClass()メソッド

「引数の文字列(クラス名)をclass属性から削除するメソッド」です。

toggleClass()メソッドはaddClass()メソッドとremoveClass()メソッドを足して2で割ったようなメソッドですね❣️
それぞれの処理をHTMLとJavaScriptの記述をみて確認していきます。

○元のHTML

<p id="add" class="add">add test class</p>

<p id="remove" class="remove test">remove test class</p>

<p id="toggle1">toggle test class</p>

<p id="toggle2" class="test">toggle test class</p>

○JavaScript

$("#add").addClass("test");

$("#remove").removeClass("test");

$("#toggle1").toggleClass("test");

$("#toggle2").toggleClass("test");

○メソッド実行後のHTML

<p id="add" class="add test">add test class</p>

<p id="remove" class="remove">remove test class</p>

<p id="toggle1" class="test">toggle test class</p>

<p id="toggle2">toggle test class</p>

これを見てもらえればそれぞれの機能が分かると思います。

【JavaScript / jQuery】繰り返し処理「for文」

ハロハロ〜　しゅんです⭐️

アウトプット用に運営しているブログです。
今日は「繰り返し処理」を行うfot文の使い方をまとめます。

○for文とは

「特定の処理を複数回繰り返す」際に使用する制御文」です。

○構文

for ( 初期化; 条件; 変更 ){

繰り返す処理

}

○構文の説明

①[初期化]で、[条件]などで使用するカウントしていく変数などを初期化する
②[条件]の真偽(trueかfalseか)を判断して、真(true)なら続きの③の処理を実行、false(偽)なら処理を終了する
③構文の「繰り返す処理」を実行する
④カウント用の変数を[変更]し、②に戻る
※変数を変更、というのは、1〜10までの数列を順に足していくという場合に、1回の処理が終わると「１加算」してまた足していく、みたいなことです。

○for文の使用例

var a = [1,2,3,4,5,6];

var b = 0;

for (var i = 0, length = a.length; i < length; i++ ){

b += a[i];

}

構文の説明の流れに沿って、この使用例の流れも確認します。

①[初期化]でカウント用の変数iに[0]を格納して、変数lengthに配列に含まれている要素の数(=6)を格納する
②[条件]を評価します。i < length→変数iが変数lengthよりも小さい場合に処理が繰り返されていきます
③[繰り返す処理]では、変数bに配列の値を加算していきます
※配列は格納されている順番に数が振られています。注意点は、最初は1ではなく"0"という点です。配列は「a[数を指定]」すればその値が取得出来ます。a[3]とすれば"4"が取得出来ます。今回はa[i]となっており、配列に格納されている数分足されていきます
④[繰り返す処理]の実行後に[変更]の処理を行い、②に戻ります(今回は変数iに1を加算していきます)
※i++←この++が1を加算する算術演算子です

○for文内にif文を記述してみる

var a = [1,2,3,4,5,6];

var b = 0;

for (var i = 0, length = a.length; i < length; i++ ){

var num = a[i];

if (num % 5 === 0){

break;

}else if (num % 2 === 1){

continue;

}

b += num;

}

この記述で「配列内の偶数は加算、奇数はスキップ、5の倍数の場合は処理を終了する」という条件になります。
最後に、今回の条件式で出てきたcontinue文とbreak文の説明をします。

○continue文とbreak文

continue文　処理をと途中で止めて、[変更]の処理にスキップする

break文　　　for文の処理を強制終了させる

○まとめ

制御文にはその他にもwhile文などがありますが、今回は「for文」に焦点を当てて見ました。
もし、間違いなどのご指摘がありましたら宜しくお願い致します。

【JavaScript】functionで関数"test"を定義した時と、無名関数を変数"test"に格納した時のスコープについて

ハロハロ〜　しゅんです。

自分のアウトプット用に書いているこのブログですが、今回のテーマは、、

●functionで定義した関数"test"と、無名関数を変数"test"に格納した時のスコープについてです。

どちらも実行する時は、test(引数1, 引数2...)という風に記述するので、違いがよく分かりませんが、この2通りの定義は「スコープ」の違いがあるのです。

●スコープとは

スコープとは「変数や関数を利用できる範囲（有効範囲）」のことです。変数や関数を定義したらプログラムのどこでも使えるという訳ではなく、使える範囲が決まっています。
（すご〜〜〜〜く極端な話、自作したアプリ内で定義した変数が違うアプリ内で読み込まれたら大変ですよねww）

では先ず、それぞれの定義の仕方から見ていきます。

●関数の定義（今回は便宜上、”通常の関数”と呼びます）

function test ( 引数1, 引数2....) {

//実行する処理

return 値; //何も値を返さない場合は省略出来ます

}

●無名関数を変数に代入する（今回は便宜上、”名前付き無名関数”と呼びます）

var test = function( 引数1, 引数2....) {

//実行する処理

return 値; //何も値を返さない場合は省略出来ます

}

どちらも実行する時は、

test( 引数1, 引数2....);

こんな感じです。

この2つの大きな違いは「関数を呼び出せるタイミング」が違います。

●通常の関数

test( 引数1, 引数2...) //実行できる

function test ( 引数1, 引数2...){

//実行する処理

}

test( 引数1, 引数2...) //実行できる

●名前付き無名関数

test( 引数1, 引数2...) //実行できない

var test = function ( 引数1, 引数2...){

//実行する処理

}

test( 引数1, 引数2...) //実行できる

このように、関数を実行できるタイミングが異なります。
通常の関数は、関数の作成箇所に関わらず、そのスコープ内であれば、どこからでの呼び出すことが出来ます。
一方、名前付き無名関数は、上記のように関数の作成箇所よりも下部でないと呼び出すことが出来ません。

●まとめ

スコープについては詳しくは説明しませんが、"function test"で定義した関数と、無名関数を"var test"で変数に代入した場合とでの「関数を実行できるタイミングの違い」の説明は以上になります。

無名関数は、処理を複数の場所で使い回すのでなく、引数として一連の処理を直接渡す際に用いるので無理やりな解説になりましたが、違いが分かって頂ければ嬉しいです。

【JavaScript】「this」を使う理由！

ハロハロ〜　しゅんです。
知識定着のアウトプット用のブログですが、今回の内容は題名の通り、、
JavaScriptで何で「this」を使うの？
です。

●「this」とは？

「データを取得する専用の変数」といった感じのものです。
変数のようなもの、という表現をした理由は、、

var this = 10;

上記のようにこちらで具体的な値を格納出来ないからです。
「this」に格納されるデータは、JavaScriptが実行内容に応じて自動で変化します。
じゃあ実際に何が格納されるのかというと、メソッドに指定してあるイベントが発生した要素が格納されています。

●結論

「this」を使用する理由は大きく次の３点です。

・処理パフォーマンスの向上

・コードの使い回し

・処理に切り分けが可能（ここが大事！）

一つ一つ深掘って解説していきます。

●処理パフォーマンスの向上

次のコードを見てください。

$(function(){

$('header, #inner, footer').on('mouseover', function(){

$(this).css('color', '#888');

});

});

このコードは、

$()関数で指定したセレクタに"mouseover"イベントが発生（マウスのカーソルが乗っかる）したら、記述してあるcssを発動！

というコードです。

この$()関数が実行されると、ブラウザは指定されたセレクタを手がかりにしてHTMLから要素を集めてくる処理を行います。

「this」を使わなくても探してくるHTML要素が分かればいいので、

$(function(){

$('header, #inner, footer').on('mouseover', function(){

$('header, #inner, footer').css('color', '#888');

});

});

このように記述してもcssの処理は実行されます。

しかし、n+1問題と同じようにこの記述だとこのHTMLから要素を集めてくる処理が繰り返し行われるので、CPUへ負荷が掛かり、処理に時間がかかってしまいます。

「this」を使用すると、on()メソッドで取得してきた要素を使いまわすことができるので、再度、HTMLから要素を取得してくる処理を行わなくてもよくなります。

●コードの使い回し

次のコードを見てください。

$(function(){

function ChangeColor(){

$(this).css('color', '#888');

};

$('#inner').on('mouseover', ChangeColor);

$('header').on('mouseover', ChangeColor);

});

見てもらえれば分かると思いますが、
上記のコードの処理の内容は同じですが、on()メソッドの処理対象は異なります。
「this」を使用すると処理対象を自動で切り替えてくれます。

●処理の切り分けが可能

今回、例で出しているコードは$()関数に複数のセレクタを指定していますが、
この時の処理の切り分けが出来ます。

$(function(){

$('header, #inner, footer').on('mouseover', function(){

$('header, #inner, footer').css('color', '#888');

});

});

$(function(){

$('header, #inner, footer').on('mouseover', function(){

$(this).css('color', '#888');

});

});

●処理パフォーマンス向上で出したコーデですが、確かにどちらもcssを効くのですが、
挙動に大きな違いがあります。

上部のコードのように「this」を使用せず、3つの要素を指定している場合でと、その3つ要素のどれかにマウスオーバーすると、指定されている3つの要素全てにcss()メソッドが適用されてしまいます。

下部のコードのように「this」を使用すると、
イベントが起きた対象の要素にだけ処理を実行できるようになります。

●まとめ

簡単ではありますが、以上です。
（まとめになってないw）

【Rails】"MVC"ってなに？改めて仕組みを説明！

●"MVC"ってなに？

MVCはRuby on Railsでも採用されているプログラミングのアプローチの一つです。

もっと噛み砕いて言うと、、、

「M（モデル）、V（ビュー）、C（コントローラー）の3つに大きく役割を分けて開発を行う設計パターン」です。

●それぞれの役割

M（モデル）・・Modelの略。モデルはデータベースとのやり取りを任されています。

アソシエーション（has_manyとかbelongs_toとか）やバリデーション（null:falseとか）などを記述しています。

データベースから取得してきた値に手を加えたり、テーブル同士の関係やレコード検索条件、データを保存する前にするメソッドなどを定義します。

V（ビュー）・・Viewの略。リクエストを送ってきたクライアントへのレスポンスです。

「このページが見たい！」とクリックして表示される画面ですね。

C（コントローラー）・・Controllerの略。リクエストに対するレスポンスを「返す」作業や、そのレスポンスに必要なデータをデータベースから取ってきてもらうようにモデルへお願いする「中間管理職」みたいな役割を担っています。

あくまでも、ビューを返す「だけ」、データを取ってきてもらう「だけ」です。

●ルーティング

MVCは、モデル（M）、ビュー（V）、コントローラー（C）のそれぞれの頭文字を取っていますが、加えて「ルーティング」についても触れておきます。

●ルーティングとは？

ルーティングは送られてきたリクエストが「どのコントローラーの何アクションに送られるか」を決めるものです。

routes.rbに記述します。

こんな感じで。

resources :items do

resources :comments, only: [:create, :destroy]

end

●まとめ

これを理解しておくことで、プログラミング初心者の方は処理の動きが見えてきて、理解が深まると思います。

また、エラーがおきた時に、今のエラーがどこで起きていてどこが問題なのかを判断する時の思考の手助けにもなるかと思います。

【Rails】"ajax"でupdateへリクエストを送るとredirect_toが機能しない！

ハロハロ〜　しゅんです。

本日は、題名の通り、
「"ajax"でupdateへリクエストを送るとredirect_toが機能しない！」

【結論】redirect_toは普通のHTTPリクエスト時に機能するものなのでajaxで送られたリクエストには反応しません。
（普通の〜というのが語彙力不足ですみません💦）
今回は、AjaxHelperというモジュールを作成し、該当のcontrollerを少し変更して対応しました。

●　Viewの変更

行いません。

●　Module作成

app/controller/concerns/ajax_helper.rb　を作成

module AjaxHelper

def ajax_redirect_to(redirect_uri)

{ js: "window.location.replace('#{redirect_uri}');" }

end

end

●　Controllerの記述

class ItemsController < ApplicationController

# ↓作成したmoduleをincludeします

include AjaxHelper

def update

# ↓これを追加。パスは適宜変えてください。

respond_to do |format|

format.js { render ajax_redirect_to(item_path(@item)) }

end

end

これでOK😄

この作業でajaxから送られてきたリクエストをredirectすることができました。

何か間違いやご指摘などありましたら、宜しくお願いします！

【Rails】自作アクションで" Couldn't find Item with 'id' = "「id」が見つからない！？

●7つのアクション

resourcesを使う事で7つのアクションが簡単に定義できますね😁

resources :hoges

この記述で、hogesコントローラーに対して、

index, new, create, show, edit, update, destroyの７つのルーティングを設定した事になります。

resources :hoges, only: [:index, :show]

上のようにonlyを記述して、指定したアクションだけを定義することもできます。

●自分でアクションを定義することもできます

今回に本題はここから！

７つのアクション以外にも自分でアクションを定義することもできます。

その中で、下のようなエラーが出ました！！！

「id」を見つけて来れなかったと言ってますね。。。。
idが分からんといっているので、パスにidが設定されているか、コントローラーにidを探して持ってくる記述をしているか確認します。

def selling

@item = Item.find(params[:id])

@images = @item.images

end

- @items.each do |item|

　　= link_to selling_mypage_path(item.id), class: "selling_my_item" do

　　.item_screen__box__items

問題なさそう。。。

●自作アクションで「全てのデータを取ってくるのか」「特定のデータを取ってくるのか」を定義する

今回の問題は、routes.rbへの記述の仕方でした。
自作アクションの場合、それに特定にのidを指定するかどうかが鍵になります。

resources :リソース名 do

member do

HTTPメソッド名 'アクション名'

end

collection do

HTTPメソッド名 'アクション名'

end

end

追加で作ったアクションは「memberブロック」か「collectionブロック」に記述します。
この２つの違いは、
member・・・特定のデータを対象としたアクション＝リクエストにidを含ませる
collection・・・全てのデータを対象としたアクション

つまり、今回は特定のデータを対象としたアクションなのにも関わらず、collection内に該当アクションを定義していたことが原因によるエラーでした🙂

resources :mypages do

member do # idありの自作アクション

get :selling

end

collection do #idなしのあ自作アクション」」

get :items_screen

get :logout

end

end

これで解決しまいした✨