学習の書き留め プログラミング勉強中

プログラミングで学んだことを日記として残して行こうと思います

今日の学習

今日学んだこと 2021/01/23

学習項目

ajax

学習内容

ajaxとは非同期通信のことで、ページを更新せずに情報を更新する仕組みのことを言う。
通常の方法とは異なり、jsを使い行う。
jsを使うことで、そのままコントローラーに連絡ができ、他のページを更新する必要がなくなる。
主なサービスとしてはマップの埋め込みや、メッセージアプリなどがある。

ルーティングの設定としてはデータ返却のアクションを実行するためのURLとしてエンドポイントを設定する。簡単に言うとjson用のルーティング的なもだと思う。

例えばクリックしたら、既読にする等のアクションでは
まず、クリックしたら、アクションを動くようする。(イベントハンドラーと言う)
クリックしたあとはエンドポイントにリクエストを送る記述をする。(XMLHttpRequestと言うオブジェクトを使う。)
クリックしたものがどれかを判別するためにビューファイルにカスタムデータを記述(data-<情報>で記述)
リクエスト内容はXHR.open(HTTPメソッド, パス, 非同期かどうか)で記述
レスポンスの内容は何がいいのかをXHR.responseTypeで記述(例:XHR.responseType = "json";)
最後にXHR.sendを記述して、送信する。

function check () {
  const kidokus = document.querySelectorAll("既読をつけたい要素");
  kidokus.forEach(function(kidoku) {
    kidoku.addEventListener("click", () => {
      const kidokuId = kidoku.getAttribute("data-id");
      const XHR = new XHRHttpRequest();
      XHR.open("GET", `/kidokus/${kidokuId}`, true);
      XHR.requestType = "json";
      XHR.send();
    });
  });
}
window.addEventListener("load", check)

と言う感じになる。ここまでが、リクエストを送る内容。
レスポンスが返ってきたあとは、onloadを使用し、その後に記述する。
大体流れはこんな感じ。

まとめ

ほんとはどう言うことをしていくのかを書きたいが、内容が複雑のため、ゆっくり勉強する。
今日は今回のように流れがわかったのでよし。

今日の学習

今日学んだこと 2021/01/19

学習項目

Java Script 基礎 2

学習内容

機能の学習に続いて、取得した要素をどう動かしていくかを学んだ。

インラインスタイル

HTML要素の開始タグの中に直接CSSソースコードを記述するプロパティの指定方法。
インラインスタイルの追加と削除はそれぞれsetAttributeとremoveAttributeというメソッドを使用する。

setAttributeメソッド

指定した要素上に新しい属性を追加、または既存の属性の値を変更できる。

要素.setAttribute(name, value)

// nameは属性の名前を文字列で指定
// valueは属性に設定したい値を指定

removeAttributeメソッド

指定した要素から、特定の属性を削除する。

要素.removeAttribute(name, value)

// nameは属性の名前を文字列で指定
// valueは属性に設定したい値を指定

この二つを用いることで、例えば

<span id="change-hover">test</span>
#sample {color: red;}

といった文字がサイトに表示あったとして、

function changeColor() {
// IDを取得
const changeHoverColor = document.getElementById("change-hover")

// マウスを当てたときに色を変えるようにする
// 1.当てたときにイベント発火
changeHoverColor.addEventListener('mouseover, function(){
// 2.色を変える
  this.setAttribute("style", "color:blue;")
})

// マウスを離した時に色を元に戻すようにする(変更を消す)
// 1.離した時にイベント発火
changeColor.addEventListener('mouseout', function(){
// 2.色を戻す
  this.removeAttribute("style", "color:blue;")
})
window.addEventListener('load', change)  

というように記述することで、マウスを当てると赤→青、マウスを話すと青→赤
と変化する。
またthisを利用することで、イベントの発火元となった要素を取得することができるため、記述を少なくすることができる。

getAttributeメソッド

要素上の指定した属性の値を戻り値として返すメソッド。

要素.getAttribute('属性名')

このメソッドを使うことで、クリックをしたことで、変更する等の使用を実装できる。

<span id="change-click">クリックすると色が変わる</span>
#change-click {color: red;}
function changeColor() {
  // IDを取得
  const changeClickColor = document.getElementById("change-click")
  // クリックした時に色を変えるようにする
  // 1.クリックした時にイベント発火
  changeClickColor.addEventListener('click', function() {
  // 2.今の属性を取得し、if文で状況に応じて色を変える
    if (changeClickColor.getAttribute("style") == "color:blue;") {
      this.removeAttribute("style", "color:blue;")
    } else {
      this.setAttribute("style", "color:blue;")
    }
  })
}

window.addEventListener('load', changeColor)   

これで、cssが青の時は青色を取り除く(赤色にする)にし、そのほかの色の時は青色を付与するという実装ができる。

debugger

debuggerを用いることで、ソースコードに処理を一旦停止させる場所を指定することができる。処理が停止している状態で、特定の変数の値を確認したり、1行だけ処理を進めたりなど、幅広いデバッグが可能となる。

innerHTML

innerHTMLを使用すると、HTML要素の取得や書き換えを行うことができる。

<span id="change-html">選択すると文字が変わる</span>
  <ul>
    <li class="choice-class">1: 選択肢</li>
    <li class="choice-class">2: 選択肢</li>
    <li class="choice-class">3: 選択肢</li>
    <li class="choice-class">4: 選択肢</li>
  </ul>
function changeColor() {
// IDを取得
  const ChangeHtml = document.getElementById("change-html")
  const choiceClickHtml = document.querySelectorAll(".choice-class")

  // forEach文を使って、choice-classの全てが同じ処理をできるようにする
  choiceClickHtml.forEach(function(choice){
    // クリックした時にイベント発火
    choice.addEventListener('click', function() {
      // choice-classの文字列を取得し変数に代入
      value = choice.innerHTML
      // change-htmlの文字列に先程の変数を代入することで、文字を変える
      ChangeHtml.innerHTML = value
    })
  })
}
window.addEventListener('load', changeColor)   

HTML情報を取得し、ほかに代入することで文字を変えることができる。

また、昨日の記事では先頭にwindow.addEventListener('load', function(){}を記述していたが、一般的ではないらしく、 function 関数名(){} を記述して、関数を定義して、その中に記述し、その後に
window.addEventListener('load', 関数名)を記述して、関数を読み込むというのが一般的。

まとめ

なんとなく、文法、動かし方がわかってきたと思う。でもこういうのって、多分発想が重要になってくるから、ほかのコードを見たりすることも同じぐらい大事だと思った。

今日の学習

今日学んだこと 2021/01/18

学習項目

Java Script 基礎

学習内容

まず、script src でjsのファイルを読み込む。

<head>
  <link rel="stylesheet" href="index.css">
  <script src="index.js"></script>
  <meta charset="UTF-8">
  <title>JavaScriptの練習サイト</title>
</head>

jsではHTMLに対して行う処理の要求のことをイベントという。
また、イベントを認識して、コードが動き出すことをイベント発火という。

主なイベント発火の例

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

イベントの発火方法

要素.addEventListener(`イベント名`, 関数)

記入例

window.addEventListener('load', function(){
  const sample = document.getElementById("sample")
  sample.addEventListener('mouseover', function(){
    console.log("カーソルを当てた際のイベント")
  })
})

こんな感じになる。まず、javascriptのコードはbody要素より先に読み込まれる。
そのため、最初に window.addEventListener('load', function(){})の関数の中に記載し、ロードをした後に全てのイベントが発火するようにする。
その後constで何を動かしたいのかを定義する。その際にdocument.getElementById()を使って、どのIDかを指定し、その要素を取得する。 あとは、取得した要素をどう動かすのかをそれぞれのイベントに合わせて記載する。
このコードはページが表示された際に、HTMLのsampleIDを取得し、マウスが当たった際にイベントを行うように記載してます。

まとめ

まずはどう動かせばいいのかをつかむ!

今日の学習

今日学んだこと 2021/01/17

学習項目

Java Script 概要

学習内容

Java Scriptとはプログラミング言語の一つでクライアントサイドで力を発揮する。
サイトに動きをつけることができ、例えば
ページ遷移なしで画面表示を切り替えられる
画面更新をせずにサーバーと通信ができる
などのメリットがあり、使い勝手の良いWebページを作成できる。

デベロッパツール

開発者ツール、検証ツールと呼ばれる。HTMLやCSSの確認・編集はElements(エレメンツ)パネル、JavaScriptの実行はConsole(コンソール)パネルにて行うことができる。
console.log: ブラウザのコンソールにテキストを表示させるメソッド。

変数、定数定義

var: 再定義、再代入可能、古い書き方
const: 再定義、再代入不可
let: 再定義不可、再代入可能

var sample = "test"
const sample = "test"
let sample = "test"

テンプレートリテラル

テンプレートリテラルは``で囲むことで使用でき、${}のなかに記入する。

let sample = "test"
console.log(`これは${sample}です`)
// => これはテストです

条件分岐

if文の書き方

if (条件式1) {
  // 条件式1がtrueの時の処理
} else if (条件式2) {
  // 条件式2がtrueの時の処理
} else {
  // どちらもfalseの時の処理
}

配列の取得

rubyの変わらない

繰り返し処理

for文

for (初期化式; 条件式; 加算式) {
  // 繰り返す処理の内容
}

// 例
for (let i = 0; i < 10; i++) {
  console.log(i)
}
// 0~9を表示する

forEach関数
rubyのeachと似たようなやつ

配列.forEach( function(value) {
  // 処理の記述
})

関数定義

rubyでいうところのメソッドをjavascriptでは関数と呼ぶ。まぁ微妙に違うらしいが。
定義方法

function 関数名(仮引数) {
  // 処理
}
console.log(実引数)

また、javascriptでは戻り値をreturnを用いて明示する必要がある。

function calc(num1,num2){
  return num1*num2
}

const num1 = 3
const num2 = 4
console.log(calc(num1,num2))

関数宣言と関数式

見た方が早い

// 関数宣言
function 関数名( 引数 ){
  // 関数内の処理
}

// 関数式
変数 = function( 引数 ){
  // 関数内の処理
}

補足として、javascriptでは関数宣言が先に読み込まれるという性質がある

無名関数と即時関数

無名関数とはその名の通り関数名無しで定義すること。関数を多く使用するコードであるときに使用する。関数名の重複を避けることができる。

即時関数とは関数を定義すると同時に実行される構文のこと。流用する可能性のない関数を定義するときに使用する。別途関数を定義する手間がない。

// 無名関数
const sample = function(num) {
  console.log(num)
}
countNum(1)

// 即時関数
(function sample(num) {
  console.log(num)
})(1)

アロー関数

まぁざっくりいうと省略形のことです。無名関数または即時関数において、より省略した記述をしたい時に使用する。

const 変数名 = (引数) => {
  処理
}

javascriptにおけるオブジェクト

JavaScriptにおけるオブジェクトとは、データや処理といった情報を1つにまとめた集合体のこと。
データはキーとバリューのセットとなったプロパティを指し、突き詰めると、オブジェクトはプロパティの集合体から成り立っている。

JavaScriptにおけるメソッド

JavaScriptおけるメソッドとは、プロパティに紐づけられた処理のこと指し、関数を用いることで代入できる。

let sample {
  name: "sample",
  test: fuction(){...},
}

sample.test()

もともとあるオブジェクト

windowオブジェクト
ブラウザの情報を持っているオブジェクト
documentオブジェクト
ブラウザ上で表示された情報(HTML)を操作する事ができるオブジェクト

DOM

Document Object Model(ドキュメントオブジェクトモデル)の略。HTMLを解析し、データを作成する仕組み。
ざっくりいうとHTMLの要素をJavaScript上で取得し操作するための仕組み

HTML情報を取得する方法

document.getElementById("id名")
引数に渡したidを持つ要素を取得。
document.getElementsByClassName("class名")
classを指定して取得する。getElementsは複数形。
document.querySelectorAll("セレクタ名")
セレクタ名を指定して取得する。
document.querySelector("セレクタ名")
HTML上から引数で指定したセレクタに合致する要素のうち一番最初に見つかった要素1つを取得する。

まとめ

似てるところも多いけど、フロントよりの言語ということもあって、混乱する。
ゆっくり整理する。
ただ、他の言語を学ぶことで、オブジェクトとは何なのか、returnをどう使うのかとか、より内側を知ることができた気がする。

今日の学習

今日学んだこと 2021/01/16

学習項目

MVC応用

学習内容

View

railsのコントローラーでの処理後、レスポンスでHTMLが表示されるのはAction Viewという仕組みを搭載しているから。
Action Viewとは、ざっくりいうとビューの機能がまとまっているもの
これによってビューファイルが見れるようになっている。
注意としては、ビューファイルがそのまま表示されているわけではなく、ビューファイルの内容がAction Viewにまとめられてブラウザに返却されているということ。
また、コントローラーで取得したインスタンス変数はビューファイルでそのまま使えているように見えているが、実際は裏側で色々と複数のメソッドを経て読み替えられた後、再度同じインスタンス変数としてセットされて使用している。

ヘルパーメソッドについて

ヘルパーメソッドの仕組み自体はざっくりいうと、例えば、<%= link_to %>で書いた場合、< a hlef >となるように処理されている。
んで、このヘルパーメソッドは自作が可能。 Helperというヘルパーメソッドを作成できるモジュール(インスタンスを生成できないクラス、主にメソッドようかな、多分)が app/helpers に用意されている。 そこに def メソッド名 ~ end で定義するとビューファイルで、<%= メソッド名 %>で使用することができる。

Controller

railsのコントローラーがコントローラーの機能を果たすのはコントローラーの機能ではなく正確にはAction Controller という機能を搭載しているため。なんか説明がよくわからんけど、、、笑 コントローラーの役割はリクエストを受け取り、レスポンスをかえすことであるため、細かい処理はモデルに記述するのが好ましい。
そうすることで、可読性を上げることができる。

サービスクラス

また、モデルに記述する際に処理が複雑になる場合、モデルの記述が複雑になる。そういった場合はサービスクラスに切り出すのが好ましい。 app/servicesを作成し、内容のわかるファイル名を作成する。

# app/services/sample.rb

class Sample
  def self.sample(text)
    # 切り出したい処理
  end
end

# app/controllers/sample_controller.rb

class SampleController < ApplicationController
  def sample
    @sample = Sample.sample(params[:text])
  end
end

セッションとクッキーについて

自動ログインだったり、一時的に自分の情報が保存されている経験があると思う。
これはセッションとクッキーの二つで成り立っている。

セッション

Webサービスにおいて情報を一時的に記憶しておく仕組みのこと。
rails では ssession[:sample] と記述することで行うことができる。

クッキー

焼くやつじゃないです。お菓子でもないです。じゃあなにそれ美味しいの?と言われても食べ物じゃないです(笑)
最近のサイトだとクッキーを使用していいですかとか聞かれるんじゃないかな?多分あれのこと。
クッキーとはブラウザが持っているデータが保存できる領域のこと。
ブラウザにあるセッションの情報の保存場所のことをクッキーと呼ぶ。
rails ではデフォルトでCookieStoreに保存されている。

セッションとクッキーの違いについて

なにが違うのかというと、セッションはあくまで仕組み、技術をさしている。ユーザー情報をを一時的に保存するまでのやりとり。
クッキーは場所を指しているということ。一時的に情報を保存している場所のこと。

Model

rails ではモデルの機能を実現するためにActive Modelを搭載している。
また、モデルによるデータベースの操作はActive Recordによって実現しているが、この技術はORMという技術に分類される。ActiveRecord自体はテーブル操作する際に使うプログラムをまとめたもののことを指す。

ORM

RDBのデータを、オブジェクト指向プログラミング言語でオブジェクトとして使用するために変換する技術

RDBSQL

Relational Database(リレーショナルデータベース)の略語。
関係データベースと訳され、データを複数の表として管理し、表と表の関係を定義することで、複雑なデータの関連性を扱えるようにしたデータベース管理方式。
今回では、フツーにデータベースと思って良いと思われ。
実際にRDB、データベースを操作しているのはSQLと呼ばれる言語。
つまり、ActiveRecordなどのORMのメソッドは、SQLに変換されるためテーブルの操作が可能になる。

SQLの命令には大きく3つに分類されており、
データを定義するDDL(Data Definition Language)
→DBやテーブルを作成、削除
データを操作するDML(Data Manipulation Language)
→データを探す、登録する、更新する
データを制御するDCL(Data Control Language)
→変更を確定する、取り消す
になる。

まとめ

かなりrailsのコアの部分について学習したと思う。ここにげない。railsに振り回されるのではなく、今後も付き合っていくためにゆっくり自分に落とし込んでいく。

チェリー本のまとめ コツコツと。。。

チェリー本のまとめ 2-1

rubyの基礎知識
文字列
数値
真偽値と条件分岐
メソッドの定義

rubyの基礎知識

まず、全てがオブジェクトとなっている
!? そもそもオブジェクトとは
オブジェクトとは、とても簡単に言うと、関連する変数(値)とメソッド(動作)をまとめて、そのまとまりに名前を付けたもの。関連する変数やメソッドを1つのオブジェクト内で宣言してまとめてしまうことで、管理しやすくするのがオブジェクト指向

メソッドの呼び出しは「オブジェクト.メソッド(引数1, 引数2, ...)←ない場合は省略可」でできる
コメントは「#」で行う
変数やメソッド、クラスにつける名前を識別子といい、スネークケースで区切ることが多い。予約語は使うことができない。
!? 予約語とは
予約語とはあらかじめ意味が決まっている名前のこと、class,ifがこれに当たる。
変数の宣言と代入は「変数名 = 式や値」で同時に行う。

文字列

rubyで文字列を作る方法は「''」「""」のどちらかで囲う。「""」では式展開が使える。
どちらを使うべきか、はどちらでもいいらしい。企業によって決めれている場合もあるため社内規定に従うか、独学ならやりやすいやり方でいいと思います。

数値

数値は言葉の通りです。一応_を入れても無視されるので 100_000_000のようにわかりやすく区切りに使うといいかもしれません。
四則演算は「+」「-」「/」「*」で計算ができ、「%」で余り、「**」でべき乗が出せる。

真偽値と条件分岐

rubyでは真偽値は
falseまたはnilであれば偽
それ以外はすべて真
と言う性質がある。他の言語を知らないので、どう違うかがわかりません。。。
&&がかつ ||がまたわ でかつの方が優先順位が高い。
if文は

if 条件A
  # 条件Aが真だった場合の処理
elsif 条件B
  # 条件Bが真だった場合の処理
else 
  # それ以外の条件の処理
end

と記述する。気をつけなければいけないのは、上から順に処理がされるため、条件Aが真だった場合、条件Bは実行されない。つまり、上の方に細かい条件を書く必要がある。

メソッドの定義

メソッドの定義は

def メソッド名(引数1, 引数2, ...)
  # 必要な処理
end

と記述する。

FizzBuzzプログラム

FizzBuzz問題という有名な問題があるらしい。
3で割り切れる引数を渡すとFizzをかえす
5で割り切れる引数を渡すとBuzzをかえす
15で割り切れる引数を渡すとFizz Buzzをかえす
それ以外の数値はその数値を文字列に変えてかえす

def fizz_buzz(n)
  if n % 3 == 0 && n % 5 == 0
    "Fizz Buzz"
  elsif n % 3 == 0
    "Fizz"
  elsif n % 5 == 0
    "Buzz"
  else
    n.to_s
  end
end

# n = gets.chomp.to_i
# fizz_buzz(n)

20.times do |i|
  i += 1
  puts "#{i}: #{fizz_buzz(i)}"
end

という感じになりました。 実際はtimesをつかわないように書いてあるけれど、せっかくなので使いました。
%を使い、余りが0の時に該当する文字列をかえすこと、また、15の時は最初に記述しないと、FizzかBuzzを返してしまうので注意。

まとめ

今日の進んだところは基礎の当たり前に近い内容だったかもしれない。でも、当たり前を当たり前にしない。
初心者だからこそ、こういうところを不器用でも言葉にしていく。

チェリー本のまとめ コツコツと。。。

チェリー本のまとめ

rubyの登竜門であろう「プロを目指す人のためのRuby入門 著 伊藤淳一」(以下チェリー本)を購入しました。
スクールの内容プラスしてまとめを書いていきたいと思います。
railsだけを学んでいると、フレームワークしかできないエンジニアになるのでは、と個人的には思ってしまうので
せめて基本は抑えたいと購入した次第です。
これからはrailsを使うためにrubyを使うのではなく、
rubyの開発の一部としてrailsを使えるようにがんばります。