TECH EXPERT 26日目 JavaScript 画面上の表示を変える 自由度の高いブラウザ基本表現
①HTMLファイルにJavaScriptファイルを読み込む記述をする
<script src="index.js"></script>
JavaScriptは「何かが起きたらコードを実行する」という概念に基づいて設計されてる
「何かが起きたら」の代表的な例 （イベントと呼ばれる）
loadイベント ＃ページ全体が全て読み込まれた後に、イベント発火する
clickイベント ＃指定された要素がクリックされた時に、イベントが発火する
mouseoverイベント ＃マウスカーソルが指定された要素上に乗った時に、イベントが発火する
mouseoutイベント ＃マウスカーソルが指定された要素上から離れた時に、イベントが発火する
JavaScriptではイベントを発火させるためには、addEventListenerというメソッドを使用する
要素.addEventListener('イベント名', 関数);
②イベント発火のための要素を取得
htmlファイルでidを指定します。
<li class="background-red" id="lists">
リストidを指定した要素を取得するため、index.jsを編集。
const pullDownButton = document.getElementById("lists")
※ console.log(pullDownButton) 一応確認しとく
③ページ読み込み後にJavaScript が表されるように lordイベントを使う
index.jsを編集。
window.addEventListener('load', function(){
const pullDownButton = document.getElementById("lists")
console.log(pullDownButton) ＃表示の確認
}
④イベントを発火させる
マウスカーソルが指定の要素上に存在している時だけ、イベントが発火するように実装
mouseoverイベントを用いて実装
window.addEventListener('load', function(){
const pullDownButton = document.getElementById("lists")
pullDownButton.addEventListener('mouseover', function(){
console.log("mouseover OK") ＃表示の確認 カーソルを併せたときだけ出る
})
})
マウスカーソルが指定の要素から出た場合に、イベントが発火するように実装
mouseoutイベントを用いて実装
pullDownButton.addEventListener('mouseout', function(){
console.log("mouseout OK")
})
クリックすることでイベントが発火するように実装
clickイベントを用いて実装
pullDownButton.addEventListener('click', function() {
console.log("click OK")
})
次はイベントが発火した後の処理を決める。 ①〜④ は下記の作業内でも繰り返す
⑤カーソルを要素上に載せるor離すと、色が変わるようにしよう。
これはmouseoverイベントが発火した際にインラインスタイルを追加し、mouseoutイベントが発火した際にインラインスタイルを取り除くことによって実現しています。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
インラインスタイル：要素の開始タグの中に直接CSSのソースコードを記述するプロパティの指定方法。インラインスタイルの追加と削除はそれぞれsetAttributeとremoveAttributeというメソッドを使用する。
setAttribute：指定した要素上に新しい属性を追加、また既存の属性の値を変更ができる。
要素.setAttribute(name,value);
nameは属性の名前を文字列で指定
valueは属性に設定したい値を指定
（例）
const sample = document.getElementById("test") ＃要素の取得
sample.setAttribute("style", "color: red;") ＃属性（の値と名前）を追加
removeAttributeを用いることで、指定した要素から、特定の属性を削除できる。
要素.removeAttribute(name,value); ＃書き方は setAttribute と同じ
nameは属性の名前を文字列で指定。
valueは属性に削除したい値を指定。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
mouseoverイベントで属性を追加
pullDownButton.setAttribute("style", "background-color:#FFBEDA;");
mouseoutイベントで属性を削除
pullDownButton.removeAttribute("style", "background-color:#FFBEDA;");
ここまでで、要素上にマウスカーソルを持っていくと、色が変化し、マウスカーソルが要素から出ると色が元に戻るように実装。
⑥要素をクリックすることでのプルダウンメニューの表示をしよう
事前準備として リストのクラスをクラスタにCSSファイルにdisplay: none; を使って
非表示状態にしておく。ブラウザ上でのプルダウンメニューの非表示状態
発火させる要素のidの指定 HTMLファイル編集
<ul class="show-lists hidden" id="pull-down">
指定したidの取得 JSファイル編集
const pullDownParents = document.getElementById("pull-down")
HTML要素はdisplay:none;を指定しているので、非表示の状態。この指定をdisplay:block;にすることで画面上に表示させる Jsファイル編集
pullDownButton.addEventListener('click', function() {＃イベント、要素をクリック時に
pullDownParents.setAttribute("style", "display:block;"); ＃display:block にする
})
これで指定の要素をクリックすることで、プルダウンメニューを表示することができる
番外：発火元の要素の取得
this
関数の中でthisを使うと、イベント発火元となった要素を取得できる。
イベントで記述してる pullDownButton を this に書き換えられる。
見やすいコードを意識する上でthisを用いる。
⑦ 要素をクリックすることでプルダウンメニューの表示・非表示が自由に行えるようにしよう
今のままだとクリックしたら出しっぱなので、条件分岐と getAttribute を使って編集
指定の要素をクリックした時に、プルダウンメニューにdisplay:block;が付与されているかどうかで分岐を決める。
getAttributeメソッド
要素上の指定した属性の値を返り値として返す
要素.getAttribute(‘属性名’);
例
<div class="contents" id="apple">りんご</div> ＃classは属性名 contentsは属性値
const apple = document.getElementById("apple") ＃要素の取得
apple.getAttribute("class")
// => contents ＃返り値に属性値
pullDownButton.addEventListener('click', function() {
// プルダウンメニューの表示と非表示の設定
if (pullDownParents.getAttribute("style") == "display:block;") {
// pullDownParentsにdisplay:block;が付与されている場合（つまり表示されている時）実行される
pullDownParents.removeAttribute("style", "display:block;");
} else {
// pullDownParentsにdisplay:block;が付与されていない場合（つまり非表示の時）実行される
pullDownParents.setAttribute("style", "display:block;");
}
})
⑧ デバックして条件分岐の処理が問題ないか確かめよう
debbuger
debuggerを用いることで、ソースコードに処理を一旦停止させる場所を指定することが可能。指定したブレークポイントまで処理が進むことで、処理を一時的に停止することができ、処理が停止している状態で、特定の変数の値を確認したり、１行だけ処理を進めたりなど、幅広いデバッグができる。
とりまバインデングプレイ？
ifの前に記述して検証で確認する。
pullDownParents.getAttribute("style") == "display:block;"
＃要素に "display:block;" が指定されてるか。
検証が終わったら debbuger の記述は消しとく。
⑨プルダウンメニューのリストの文字列を取得し、その文字列を画面上に表示させる実装をしよう （リスト１を表示してるとわかるように）
リストをイベント発火させるのでclass を指定 index.htmlを編集
<li class="pull-down-list">リスト1</li>
<li class="pull-down-list">リスト2</li>
：
要素の取得 JSファイル
const pullDownChild = document.querySelectorAll(".pull-down-list")
pullDownChild（配列になっている）に格納されている要素1つひとつに対して処理forEachを用いて記述
pullDownChild.forEach(function(list) {
})
イベント発火させる記述
list.addEventListener('click', function() {
※console.log(list) で要素それぞれに発火できてるか確認しとくと良い
要素の文字列を取得するためには innnerHTML というメソッドを使う
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
innerHTMLを使用するとHTML要素の中身を取得や書き換えを行うことができる。
変数sample1 = 要素名.innerHTML 変数に指定要素のhtmlコードを代入
要素.innerHTML = 変数sample2 指定要素に変数の値を代入
<div class="contents" id="apple">りんご</div>
const apple = document.getElementById("apple")
console.log(apple.innerHTML) ＃要素の中身を取得
// => りんご
apple.innerHTML = "青リンゴ" ＃青リンゴ とブラウザ上で表示（書き換え）
console.log(apple.innerHTML)
// => 青リンゴ
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
HTMLファイルを編集、 表示させたい場所のid設定
<span id="current-list">選択されていません</span>
JSファイル編集 idの取得
const currentList = document.getElementById("current-list")
pullDownChild.forEach(function(list) {
list.addEventListener('click', function() {
value = list.innerHTML
currentList.innerHTML = value
動作が問題なければ実装完了！
TECH EXPERT 25日目 JavaScript HTMLの取得 オブジェクトの生成とブラウザ上のwebページの見た目を変化
Webページの見た目を変化させたい
オブジェクトの作成
JavaScriptにおけるオブジェクトとは：データや機能をまとめた情報そのもの。
配列は順番でデータを管理しますが、JavaScriptのオブジェクトは名前と値をセットにしてデータを管理します。
生成方法：let human = {} ＃波かっこを使う
使わなかったらデータがとっちらかる。
ハッシュとディレクトリの考えに近い
オブジェクトのなかにオブジェクトをいいれることも可能。
プロパティ：オブジェクトが持つ属性を表します。人オブジェクトであれば、名前や年齢などの属性が存在。
例
let human = { name: 'yamada' }; ＃オブジェクトの作成（プロパティ名と値を定義）
console.log(human.name); ＃値の取得は オブジェクト名.プロパティ名 と記述
/ => yamada
※変数humanはnameプロパティを持つ。プロパティは必ず属性名である"プロパティ名"とデータである"値"をセットで持つ。
したがって、nameはプロパティ名、'yamada'は対応する値となる。
プロパティの追加
下のどっちでも可能
human.age = 25 オブジェクト.プロパティ=値 を代入する
human['address'] = 'Tokyo' オブジェクト['プロパティ']=値 を代入する
プロパティの値の変更
human.name = "yabe" オブジェクト.プロパティ=変更する値
作成したオブジェクトのメソッド（動作）を操作する。
JavaScriptはブラウザで働くプログラミング言語だったよね
其の為初めから備わってる、ブラウザを操作するオブジェクトの最高位 windowオブジェクト
JavaScriptで予め定義されている関数やオブジェクトは全てwindowオブジェクトのプロパティだったのだ。
JavaScript側であらかじめ用意されているwindowオブジェクトを用いることで、JavaScriptからブラウザに影響を及ぼすことができる
その中のwindowオブジェクトめっちゃ使うやつ
documentオブジェクト
ブラウザ上で表示された情報(HTML文章)を操作する事ができるオブジェクト
HTMLの要素を取得し操作する
事前知識として
DOM： Document Object Model(ドキュメントオブジェクトモデル)の略。HTMLを解析し、データを作成する仕組み。
解析されたHTMLは階層構造のあるデータになり、DOMツリーという。
JavaScriptの関数を使うと、DOMツリーを操作することができる感じ
1. ID名から取得する方法 document.getElementById("id名");
2. クラス名から取得する方法 document.getElementsByClassName("class名");
3. セレクタ名から取得する方法 document.querySelectorAll("セレクタ名");
TECH EXPERT 25日目 JavaScript 関数定義
JavaScriptの関数：Rubyでいうところのメソッド
関数宣言 Rubyの def と同じ
function 関数名(){ 処理 } と記述することで関数を定義できる。
※Rubyにおけるメソッドの定義と意味合いは同じ
（実例）
//関数宣言
function sayHello(){
console.log("こんにちは！")
}
sayHello() #こんにちは！と出力
数値の場合は、関数の戻り値をreturnを用いて明示する必要あり
function calc(num1,num2){
return num1*num2;
}
const num1 = 3;
const num2 = 4;
console.log(calc(num1,num2)); ＃ 12が出力
関数式 ＃ JavaScript における もう一つの関数定義方法
// 関数式
変数 = function( 仮引数 ){
// 関数内の処理
}
関数の定義方法が２種類ある。
関数式は変数が関数名になる感じ？→関数名がない無名関数というらしい
違いは Functionオブジェクトが生成されるタイミング
関数宣言は、宣言を含むスコープが実行されるまでにFunctionオブジェクトが生成される。対して関数式は、その式が実行されるときにFunctionオブジェクトが生成される。
下記関数に関わる構文
即時関数 ＃ ()の中にfunctionからはじまる関数定義そのものを配置することで、その関数を即実行する構文
(function countNum(num) {
console.log(num);
})(1);
アロー関数 ＃functionの記述を省略し、その代わりに（）=>という記述によって関数を定義する構文
const 変数名 = () => {
処理
}
実例
const countNum = (num) => {
console.log(num);
}
countNum(1)
両方とも省略、効率化を図れる
まとめちゃん
関数定義の種類 特徴
関数宣言 標準的な関数の定義
無名関数 関数を多く使用するコードであるときに使用する。関数名の重複を避けることができる。
即時関数 流用する可能性のない関数を定義するときに使う。 別途関数を定義する手間がない
アロー関数 無名関数または即時関数において、より省略した記述をしたい時に使用する
TECH EXPERT 25日目JavaScript 基礎文法
JavaSのことをもっと知りたい。
デベロッパーツール
使用法：ブラウザで右クリックで検証 or com+con+c
できること：
表示しているサイトのHTMLの要素の確認・編集
表示しているサイトのスタイルの確認・編集
JavaScriptの実行 上部ウインドウからコンソールへ
コンソール
使い方：デベロッパーツールから
Rubyにおけるirbポジ。 手軽にJavaScript実行。
console.log 〇〇 ＃〇〇の出力。 Rubyの puts
試したが文字列はダブルクオテーションもしくはシングルでで囲む必要あり
数値はなしでも出力された。
基礎文法
変数定義 letとconst
let sample="〇〇" ＃変数sampleに〇〇を定義 再定義不可 再代入可
const sample = "〇〇" ＃変数sampleに〇〇を定義 再定義不可 再代入不可
letは再代入する予定のある変数を定義する際に使用
constは再定義する予定のない変数を定義する際に使用
これらを使いこなすことで、チーム開発において視覚的に理解できるコードにできる
文字列のなかに変数を含める
変数に値を定義する際に
テンプレートリテラル（JavaScriptの構文、バッククォートで囲む）
を用いることで、文字列の中に変数を含めることができる。
やり方：shiftキー＋ ＠キー
文字列の中に変数や定数を埋め込める
改行挿入
HTMLの要素を作成することができる
例
const name = "Tom"
const age = 25
const introduction = `私の名前は${name}、${age}歳です`
console.log(introduction)
// => 私の名前はTom、25歳です
条件分岐
Rubyと同じでif構文であるが、相違点がある。
1.条件式は()でくくること
Rubyにおいては()はいらないが、JavaScriptは必要。
2.条件式の後に続く波括弧{}内の処理が実行されること
Rubyの記述においては{}で処理を囲む必要はない。JavaScriptでは条件式の後には{}をつける必要がある。
3.複数条件を指定する場合は、elseのあとに続けてif文を記述すること
Rubyではelsifですが、JavaScriptではelse ifと書くことを注意しましょう。
配列
配列はRubyと変わらず、添字の概念も一緒。
繰り返し処理
for構文を使う
for ([①初期化式]; [②条件式]; [③加算式]) {
// 繰り返す処理の内容
}
例
for ( let i = 1; i <= 100; i++ ) { ＃①変数iを1と定義 ②iが100を超えるまでを条件 ③i = i + 1の省略
/ 100回処理を繰り返す
}
forEach関数を使う＃配列に格納されている要素1つひとつに対し、繰り返し処理を行う
配列.forEach( function(value){
// 処理の記述
})
例
fruits = ["apple", "orange", "grape"] ＃配列の定義
fruits.forEach( function(item) { ＃コールバック関数の引数としてvalueを設定
console.log(item) // 配列に格納されている要素の数だけ実行される
})
TECH EXPERT 25日目 JavaScript について 世界で活躍する言語
JavaScript プログラミング言語
参照になるページ
「ブラウザ上でのアプリケーションの使いやすさ」や「リクエストの送り方の工夫」を担う言語
JavaScriptはクライアントサイドで活躍する。
世界で最も使われてる言語（ほとんどの開発現場で使われてる）
以下が可能になる。
・動的ホームページ、より機能的
（例）カテゴリウインドの作成
・ページのリアルタイム反映
画像を更新しないで、サーバーと通信可能。
（例）いいね機能 更新なしで数字増える
TECH EXPERT 24日目 実践的な Rails
Railsにおいて規約を守ことで性能を発揮する理念
DRY CoC
実態として結論付けるなら
ファイルの可読性、処理能力をよくするため
規約にのっとった記述の正確さ、記述の仕組み化して効率よく書こうって感じ
その規則の実体、オブジェクト指向に沿って考える。
MVCを見ていく。
ビュー
モジュールとヘルパーメソッド
モジュール インスタンスを生成できないクラス
Helper（ヘルパーメソッドを作成できるモジュール）
app/helpers配下に用意されており、application_helper.rbや、各コントローラーに対応したhelperのファイルに処理を記述することでヘルパーメソッドとして使用可能。
実際には〇〇Helperという形で定義されます。
application_helper.rb
module ApplicationHelper
def sample # sampleというヘルパーメソッドです
end
end
↑のようにApplicationHelper内へメソッドとして定義すると、ビューファイルで使用できる。
index.html.erb
<%= sample %>
ビューファイルへRubyの処理をたくさん記述してしまった場合や、繰り返し同じ処理を記述する場合は可読性考慮してヘルパーメソッドとして切り出す。
↓
仕組み化、効率化
コントローラー
Action Controller
Action Controllerとは、Ruby on Railsのアプリケーションにおいて、コントローラーの機能を実現するために必要なオブジェクト
コントローラーの役割「リクエストを受け取り、レスポンスを返すこと」
それ以外の記述は他に移すことで可読性が上がる。
例：データを加工する処理をモデルに切り出す
サービスクラスの定義：モデルにばっか処理を切り出すとモデルが太るから
複雑な処理はサービスクラスに切り出す。
app 直下に service ディレクトリを作成してクラスを定義する。
モデル Active Model オブジェクト
直接データベースを操作する処理はActive Recordという仕組み
「保存する前のデータを検証」などの処理を実現できるのはActive Model
Callbacksモジュール：データの保存時など「任意のタイミングでメソッドを実行する」を実現 処理の時間設定
Validationsモジュール：データの保存時にフィルター貼って検証するような役割 フィルター展開
Serializationモジュール： JSONなどで返却される値を調整できる。返す値を指定できる 戻り値の調整
フォームオブジェクト
フォームオブジェクト（Form Object）とは、フォームに関する処理を切り出す仕組み、大きく2つの場合に使用。
1つ目は、複数のモデルに関連するデータを一度に更新するフォームを作成する場合
2つ目は、モデルの存在しないデータを更新する場合
〇〇_form.rb
モデル Active Record
ORMとは、RDB（リレーショナルデータベース）のデータを、オブジェクト指向プログラミング言語でオブジェクトとして使用する為に変換する技術
SQL（エス・キュー・エル/シークェル）とは、Structured Query Languageの略で、RDBの操作を行うための言語ActiveRecordはSQLに変換されるためテーブルの操作が可能だったのだ
SELECT文とは、「データベースからデータを取得する」場合に使用しする、SQLの文法
（例） SELECT text FROM tweets;
＃tweetsテーブルからtextというカラムのデータを取得
find_by_sqlメソッド：Ruby on RailsでSQL文を使用し、データを検索し取得する際に使用するメソッド
復習が必要だなこりゃ
TECH EXPERT 24日目 正規表現
正規表現とはなんぞや
正規表現とは、文字列の一部分を抽出・置換したり、文字列が制約を満たしているかを調べるための表現方法です。
使用例 ユーザーA 電話番号にハイフン入力
ハイフンを取り除く処理をする技術→ 正規表現
メソッド
sub
sub:文字列の指定した部分を別の文字列に置き換えるためのメソッド。
第1引数に置き換えたい文字列を指定し、第2引数に変換後の文字列を指定。
操作したい文字列は/で囲む。gsubと違い初めの1つだけ置換する。
（例）電話番号のハイフン
irb(main):002:0> tel.sub(/-/,'')
=> "0901234-5678"
# 最初のハイフンしか置換されない
gsub
文字列内で指定した文字が複数含まれている場合、その全てを置換するという意味になります。
（例）電話番号のハイフン
irb(main):003:0> tel.gsub(/-/,'')
=> "09012345678"
match
match:引数に指定した文字列がレシーバの文字列に含まれているか否かをチェックするメソッド。含まれている場合は、指定した文字列がMatchDataオブジェクトの返り値で得られます。また、含まれていない場合は、返り値としてnilが出る。
パスワード
pass.match(/[a-z\d]{8,}/i)
=> #<MatchData "Huge1234">
※[a-z]はアルファベットのaからzまでのいずれかにマッチ
※[a-z\d]は英数字のいずれか１つにマッチ dは数字 特殊記号なので \ がいる。
※{n, m}は直前の文字が少なくとも n 回、多くても m 回出現するものにマッチすることを確認する。文字数の制約を追加できる。 今回は直前の文字が少なくとも８回出現するという意味
※ i 最後にiオプションを加えることで大文字・小文字を区別せずに検索
メールアドレス
irb(main):002:0> mail.match(/@.+/)
=> #<MatchData "@tech-camp.com">
※ . 全ての何かしらの文字にマッチ
+ 直前の文字が１回以上の繰り返しでマッチ
※ .+ は「何かしらの文字が１回以上繰り返すもの」にマッチ
先頭に@で、「＠から始まり、何かしらの文字が１回以上繰り返すもの」にマッチ
subが置換、matchが抽出・制約調査
正規表現のパターン
パターン 意味
[a-z] 角括弧で囲まれた文字のいずれか 1個にマッチ
\d 数字にマッチ
{n, m} 直前の文字が少なくともn回、多くてもm回出現するものにマッチ
. どの1文字にもマッチ
+ 直前の文字の1回以上の繰り返しにマッチ
\A 直後の文字が先頭にある文字列にマッチ
\z 直後の文字が末尾にある文字列にマッチ
[ぁ-んァ-ン一-龥] 角括弧に囲まれたかな、カナ、漢字いずれかにマッチ
?= 直後に設定した文字が続く文字列にマッチ
*? 直前に設定した文字が0回以上続く文字列をチェックし、?の直後 の文字が出た段階でその1文字を返す
正規表現をバリデーションに応用
郵便番号
→ 先頭に少なくとも3回の数字、そしてハイフン、末尾に少なくとも4回の数字
postal_code.match(/\A\d{3}[-]\d{4}\z/)
全角かな/カナ、もしくは漢字を区別
full_name.match(/\A[ぁ-んァ-ン一-龥]+\z/)
=> #<MatchData "山田はな子">
英数字が混合したパスワードを区別
password.match(/\A(?=.*?[a-z])(?=.*?[\d])[a-z\d]+\z/i)
