※この記事は、Railsの基礎知識があることを前提に書いています。
そのため、基本的な説明は省略しています。予めご了承ください。
JavaScript
変数と定数
-
let：変数の宣言 -
const：定数の宣言（再代入不可）
バッククォーテーション（`）で囲み、文字列の中で${定数}とすることで、文字列に変数や定数の値を埋め込める
比較表
| var | let | const | |
|---|---|---|---|
| 再宣言 | ◯ | × | × |
| 再代入 | ◯ | ○ | × |
| スコープ | 関数 | ブロック | ブロック |
<補足>
varは一見便利なように見えるが、スコープが広いため、意図しない参照やエラーの原因になりやすい
その場合には修正作業にもたくさんの時間を消費してしまうことが多いため、現在はほとんど使われていない
モダンな開発では、できる限りconstが推奨されており、変数には一部letを使用する方針が主流
変数の巻き上げ（Hoisting）
変数の巻き上げとは、関数内のどこで変数を宣言しても、その宣言が関数の冒頭で行われたかのように扱われる現象のこと
ただし、巻き上げによって変数の宣言（var）のみが関数の先頭に移動
代入は巻き上げられず、そのままの位置に残る
そのため、関数の冒頭で変数を使用すると値は undefined になる。
具体例
var str = "Hello Javascript";
function foo() {
var str;
console.log(str);
}
foo();
// 出力結果：undefined
つまり、関数内で var を使用すると、変数の巻き上げにより意図しない挙動が発生する可能性がある
具体的には、関数の途中で再宣言された場合、値がリセットされるように見えることがある
関数（function）
コードの重複を避けて処理を簡単にするためのもの
処理に変更が必要な場合、関数内を変更するだけで済むため、保守性が高くなる
function 関数名(引数){
処理
return 戻り値;
}
入力する値を「引数（ひきすう）」、出力される値を「戻り値（もどりち）」という
jQuery
jQueryはJavaScriptのライブラリであり、DOM操作やAjax処理を簡単に実装でき、ブラウザの違いを意識せずにコードが書ける
※jQueryは、HTMLがすべて読み込まれてから動作するように設定しなければならない
基本書式
$(function() {
// jQueryプログラムの内容
});
.slideDown(1000);
上から下へスライドして表示する。数値（1000など）でスライドの速度を設定できる。
初期状態で非表示にするために、CSSファイル（例：app.css）に display: none; を設定しておく。
.slideUp()
下から上へスライドし、表示されている要素を隠す。
表示されている要素を隠すアニメーションになるので、display: none;の記述は不要
.show();
.css({'background-color': '#0000FF'});
非表示の要素を表示する
最初は非表示になるように、display: none;を追加
.hide();
逆に、表示されている要素を非表示にする
display: none; を削除
.slideDown();、.slideUp();、.show();、.hide();の4つを使えるようになると、さまざまなスタイルに応用可能
代表的な使用例
- 詳細情報や追加情報の表示
記事一覧や製品一覧の画面で、「もっと詳しく」ボタンを押すと詳細が表示され、再度押すと非表示になる仕組み
初期状態では簡潔な情報だけが表示され、ユーザーが必要に応じて詳細を確認できるため、画面が見やすくなる
- FAQページでの質問・回答の表示
質問一覧の中から、クリックした質問の回答のみを表示する仕組み
- モーダルウィンドウ（ポップアップ）の開閉
ログインフォームやお知らせなど、画面上にポップアップ表示したいときに使用。
現在では<dialog>要素を使用する方法が推奨されており、これにより、フォーカス制御や背景要素の無効化が簡単に実装可能。
- タブの内容切り替え
タブをクリックすることで、そのタブに対応した内容のみを表示し、他の内容を非表示にする