りあクト！ 輪読会 ver3

2021年9月3日

What is JavaScript？

const hoge = "Hello"

値のこと。上記コードで言えば、Helloがリテラル（文字リテラル） 変数の中にある値を示す。

オブジェクトはプロパティの集合です。プロパティとは名前（キー）と値（バリュー）が対になったものです。 プロパティのキーには文字列またはSymbolが利用でき、値には任意のデータを指定できます。 また、1つのオブジェクトは複数のプロパティを持てるため、1つのオブジェクトで多種多様な値を表現できます。

第一級関数とは？ 関数がその他の変数と同様に扱われる。 https://jsprimer.net/basic/function-declaration/#first-class-function

// 関数の定義の仕方①
function func1(str) {
  return str;
}
console.log(func1("これはfunc１です"));
// => "これはfunc1です"
==============================
// 関数の定義の仕方②　変数の中に関数を入れることもできる
const func2 = function(str) {
  return str;
}
console.log(func2("これはfuc2です"));
// => "これはfunc2です"
=============================
// 関数の定義の仕方③　アロー関数　
const func3 = (str) => {
  return str;
}
console.log(func3("これはfunc3です"))
// => "これはfunc3です"

// 関数の定義の仕方④　省略したアロー関数
const func3 = (str) => str;
console.log(func3("これはfunc3です"))
// => "これはfunc3です"

  • JavaScriptの標準仕様のことをECMAScriptといい、2021年の最新版はES2020

  • ES5とES6（ES2015）で大きく仕様が変わった。（もはや別の言語レベル）

  • JavaScriptは後方互換性を重視した言語であり、バージョンが変わることによるエラーはほぼ無い

  • ECMAScriptはバージョンではなくて、「仕様」（エディション）の名称。

2-2 変数の宣言

varは今後二度と使ってはいけません！！！！ 変数はconstとletで定義しましょう！！

できればletもあまり使わない様にしましょう！

変数を宣言する前に変数に代入して使用することを「巻き上げ」といい、他の言語ではあまり見られない仕様で、よくない。

# constを使った良い例
const a = 100;
console.log(a);

paiza.ioは話半分よりちょい上くらいの感覚で試してください 実際のコンソールでの挙動と若干違う時があります

以下はTypeScriptでの例
const
let
var
varを書かない

2-3 JavaScriptのデータ型

型とは

オブジェクトは全て型を持っていることを踏まえた上で考える。 静的型付けの場合は、データ型を先に宣言してから変数を定義して、値を代入する。そして、宣言した型以外の代入は認めない。（TypeScriptは静的型付け言語） 　　
- JavaScriptはRubyらと同じ動的型付け言語なので型が変わる

  • TypeScriptは静的型付けなのでエラーが出る

JavaScriptのデータ型はプリミティブ型とオブジェクト型に大別され、プリミティブ型はさらに７種類に分類される。 プリミティブ型はそれ自体はオブジェクトではないので、インスタンスメソッドが存在しない。

①Boolean型

trueもしくはfalse。真偽を表す値。

②Number型

整数も少数も含めた全ての数字。最大９千兆。

③BigInt型

Number型よりも大きな値。Numberとの互換性はない。 ※ 扱える環境が限定的だからあまり活用できる場面がない。

④String型

文字列

⑤Symbol型

固有の識別子を表現する際に用いる。プロパティキーとして仕様が可能。 ※ JSONでのパースができないのであまり活用できる場面がない。

⑥Null型

データが存在しない状態を明示している。

⑦Undefined型

宣言のみが行われた変数や、存在しないプロパティを参照した際の型

プリミティブ型とオブジェクト型

  • プリミティブ型
    • 一般的な文字の型（数字とか、文字とか）
    • 一度作成したらその値を変更することができない
  • オブジェクト型
    • 配列とか正規表現とか。。
    • 一度作成した後も、その値自体を変更することができる

ターミナルでTypeScriptを試す場合(REPLモード)

ts-node -v

で現環境にTypeScriptが入っているか確認します。 もし、入っていなかったら、

npm install -g typescript ts-node

で現環境にTypeScriptを導入しましょう。-vで確認が取れた段階で

ts-node  -- <--こいつレプル！

をターミナルで入力するとTypeScript用のコンソールを開くことができます。

truthyとfalsy

falsyとして定義された値 (つまり、false, 0, -0, 0n, "", null, undefined, NaN(Not a Number)) を除くすべての値はtruthyです。

parseInt() : 文字列を整数に変換する関数

参照

オブジェクト - JavaScript Primer

https://jsprimer.net/basic/object

プリミティブ型について

https://wa3.i-3-i.info/word15876.html

プリミティブ型とオブジェクト型の違い

https://qiita.com/ta1fukumoto/items/effaa42cd296a2648d41

truthyとfalsyについて

https://developer.mozilla.org/ja/docs/Glossary/Truthy

パーフェクトRails輪読会 ver5

2021年9月2日　パーフェクト Ruby on Rails

第2章 Ruby on RailsとMVC

2-1 MVCアーキテクチャ

  • M(Model)
    • データベースとの接続
  • V(View)
    • 視覚表現を行う部分
  • C(Controller)
    • ModelとViewをつなぐ部分

2-1-2

モデルの役割 - データベースと接続し、データベースのレコードをActive Recordオブジェクトを結びつける役割(Active Record) - バリデーションや、レコード保存時などに実行する様々なコールバックなどを実行する役割。（Active Modelが担っている）

Active Record RailsにはModelにActiveRecordが適用されているおかげで、Rubyを用いてDBからデータを探したり、持ってきたりすることができます。 - Active Recordがあるおかげでcreateやnew,find,all…などのメソッドが使うことができます。 生のSQLを書かなくていい様にしてくれています。

Active Model Active Recordの多くのモジュール含むライブラリです。

Actioin Pack MVC のうち View と Controller を司るのが ActionPackというライブラリです。

MVCのモデルとは

あるシステムを作るという事は、そのシステムが解決する問題に対して必要な概念を探して、名前を付けたり相互の関係性を整理したりする事であり、その行為をモデリングと呼び、これがMVCのモデルです。 モデリング : ER図みたいなものを作ること

CRUD

データベースのレコードに対する基本的な操作のことです。 Create、Read、Update、Delete ※ Readはデータに影響を与えないので参照系、それ以外はデータに影響を与えるので更新系です。


2-2 モデルを扱う

モデルを通じて検索を行う = Railsの書き方でSQL検索

2-2-1

  • データベースに登録されているレコードを一件だけ検索
    • findメソッド : idを使用してレコードを取得
      • 検索結果が見つからないとActiverecord::RecordNotFound例外が発生
    • find_byメソッド : id以外を使ってレコードを取得
      • 検索結果が見つからないとnilを返す
  • 複数件のレコードを検索する場合
    • whereメソッド

ActiveRecord::Relation

  • SQLのそれぞれの表現に対応したメソッドをチェーンみたいに繋げていくことが可能です。（例：Book.where("price>?", 3000).limit(3).order(:name)みたいな感じ）
  • 実行結果のデータを普通の配列と同じような感覚で扱えます。

メソッドチェインを使うメリット

必要以上にデータベースとの通信が発生してしまうのを防ぐ効果があります。また、処理の流れを明確にできることがあります。 非同期処理を挟まない限り、前から後ろに向けて順番に処理されます。処理がメソッドチェインの各スコープの中で完結するため、一時変数を定義したり命名する手間が省けます。

Query Interface

Active Recordのメソッド（select、where、limitなど）のこと。

クエリ

「問い合わせ」。データベースに対する命令文のことです。
SQLは「言語」でクエリ（SQL文）は「命令（文）」です。

scopeの定義

よく利用する検索条件に名前をつけてひとまとめにしたもの (例：名前を"物件の条件"とした場合、内容を"バス・トイレ別, 室内洗濯機置き場"などにし、その後"物件の条件"という名前で呼び出せば、毎回内容を記載する必要がないため使い回しに便利です。)

scope :高級物件, -> { where("家賃 > ?", 100,000円)}
scope :トイレ, -> (toilet){ find_by(toilet: toilet) }

トイレのscopeを例にするとトイレがない場合はActiveRecord::Relationが返る。。

scopeで定義した場合は結果がnilでもActiveRecord::Relationを返します。もしnilを返したい場合はクラスメソッドとして定義したほうが良いです。

クラスメソッド

モデルで定義するメソッドのことです。

User.hoge # クラス名.クラスの中にあるメソッド名 で呼び出す


class Home
    def self.toilet(toilet)
        Home.find_by("あるよ")
        puts "トイレつきだあ"
    end
end


Home.toilet("あるよ")
=> トイレつきだあ
Home.toilet("ないよ")
=> nil

参照

Active Record

https://qiita.com/ryokky59/items/a1d0b4e86bacbd7ef6e8

Action Pack

https://magazine.rubyist.net/articles/0008/0008-RubyOnRails.html

クエリとは

https://wa3.i-3-i.info/word11290.html

scopeとクエリについて

https://qiita.com/ozin/items/24d1b220a002004a6351

クラスメソッドとは

https://qiita.com/right1121/items/c74d350bab32113d4f3d

パーフェクトRails輪読会 ver4

2021年8月31日　パーフェクト Ruby on Rails

1-4-4

http://localhost3000/rails/info/routesにアクセスすると現在のルーティング情報が表示されます。

  • コントローラー内で定義されたpublicメソッドのことをアクションと呼びます。
  • (:format)
    • アクセスしたURLの拡張子によってレスポンスを変化させるために利用 (.htmlや.json等、送りたいデータ形式によって変わります。基本的には表示されません。)
  • Prefix
    • 番号や符号、識別名などの先頭部分に付加し、何らかの意味や情報を表す短い部分のこと

      「変数名のプレフィックスは『sayo_』にすること」というルールがあったとしましょう。

その場合、変数の名前を「sayo_a」や「sayo_b」のようにします。 変数名の前に必ず「sayo_」を付けるわけです。

このように、その単語なり何なりの前にくっつける文字列がプレフィックスです。


PUTとPATCHの違い - PUT - リソースそのものの更新 - PATCH - リソースの部分の置き換え

ユーザー名を更新する時などは部分更新なのでPATCHを使用します。


RESTとRESTful RESTとはルール（原則） RESTfulはRESTのルールに沿って開発されたWEBシステム

RESTの原則 - 統一インターフェース：あらかじめ定義・共有された方法(WebであればHTTP)で情報がやりとりされる - アドレス可能性：すべての情報が一意なURLの構造で示される - 接続姓：やりとりされる情報にはリンクを含めることができる

- ステートレス性：やりとりは1回ごとに完結し、前のやりとりの結果に影響を受けない

ActionCableの場合RESTfulなの？

WebSocketをActionCableで使うとrubyで記述することができるようになり、RESTfulの思想を受け継ぎ実装することができます。

1-4-5

一章のまとめ

ルーティングでURLとコントローラ内のメソッドをひも付ける事でURLに対するアクションを定義し、そのアクションの中でモデルを通じてデータを取得します。そして、そのデータを元にテンプレートファイルを通じてHTMLを生成、描画しています。

参照

prefix

https://e-words.jp/w/%E3%83%97%E3%83%AC%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B9.html

https://wa3.i-3-i.info/word1208.html

(:format)とpatchとputの違いについて

https://books.google.co.jp/books?id=VCFHDwAAQBAJ&pg=PA59&lpg=PA59&dq=URL%E3%81%AE%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%80%80(:format)&source=bl&ots=Ex3ZaViTRj&sig=ACfU3U0lLws9wQ034U2d5e9nGkLQG8p_4g&hl=ja&sa=X&ved=2ahUKEwiIlceh0dryAhWKGaYKHWWlCUg4ChDoAXoECAwQAw#v=onepage&q=URL%E3%81%AE%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%80%80(%3Aformat)&f=false

パーフェクトRails輪読会 ver3

2021年8月30日　パーフェクト Ruby on Rails　次回1-4scaffoldを使ってRailsでの開発を体験しよう

1-4-1

% ls -1FA db/migrate

lsコマンド : ファイルやディレクトリの情報を表示することができます。 ls -1FA db/migrateの分解 ・・・ 1 = ハードリンクの数(ハードリンクはファイルのあだ名のことです。) ・・・　　F = 名前の後ろにファイル識別子を付ける ・・・ A = カレントディレクトリ(.)と親ディレクトリ(..)以外のピリオド始まりのファイルやフォルダも表示されるようになります。 　　　　　　　　　　　　　　　aをつけるとカレントディレクトリ(.)と親ディレクトリ(..)も表示されます。

--skip-action-cable?🤔

フロントのWebSocketとバックエンドのRails周りをシームレスに統合する、フルスタックなフレームワーク。つまり？…
ユーザーが任意のタイミングで通信を開始した時にフロントとバック(Rails部分)の繋ぎ目をなくす役割。それが無いと何の影響が出るのかわからない。

Action Cableとは

Action Cableとは双方向通信を低コストで行うために、WebSocketsとRailsをつなぎ目がないくらい、自然な感じで統合するためのフレームワークという認識でOKです。

Action Cableを利用することで、たとえばリアルタイムで更新されるチャット機能を実装することができます。

3ウェイハンドシェイク(web技術の基本P61)での１つ目のコネクションの確立を行ったら、そのまま繋いだままにしておく事ができます。なのでリアルタイムのやり取りにおけるチャット機能で用いると良さそうです。

WebSocketってそもそもなに？？

WebSocketはXMLHttpRequest(WebサーバーとHTTP通信を行うためのAPI)の欠点を解決する技術として開発された。

TCP/IPプロトコル通信とは

ネットワークインターフェイス層(１層)、インターネット層(2層)、トランスポート層(3層)、アプリケーション層(4層)で構成され、機器やOSが異なっても共通のプロトコルを用いて通信を成立させることができるものです。

各層の役割

ネットワークインターフェイス層(Layer1)

  • 同一のネットワーク内でデータを転送すること。有線のイーサネットと無線LANのWi-Fiを組み合わせることでローカルネットワークを構築を可能にする。
  • 端的にいうと「データを共有する始まりの場所」

    インターネット層(Layer2)

  • 多数のネットワーク同士をルータを用いることでネットワーク間でデータを転送を行います。これをルーティングと呼びます。
  • 端的にいうと「データを色々な所に送る場所」

    トランスポート層(Layer3)

  • パソコンやスマートフォンでネットワークを介した複数のアプリケーションを普段使う中で、適切なアプリケーションに流れているデータを送る役割をはたします。
  • 端的にいうと「データの目的地、住所を示す場所」

    アプリケーション層(Layer4)

  • アプリケーションで扱うデータのフォーマットや手順を決める役割を果たします。
  • 端的にいうと「データを人間が見てわかるように変換してくれる所」

イーサネットとは

イーサネットというのは、パソコンなどの機器を有線接続する際の通信規格の一つです。 「規格」なので、有線接続のルールともいえます。 ... 「イーサネット対応機器」というのは一般的に、LANケーブルを差せるということです。 そのため、イーサネットとLANケーブルはほぼ同義と考えても問題ありません。

1-4-2

rails dbconsoleはコマンドライン上からデータベースの中身の確認や編集をすることができるコマンドです。（MySQL、PostgreSQL、SQLite、SQLite3といったデータベースでも利用可能） - .table : テーブル一覧の表示 - .schema テーブル名 : 指定したテーブル構成の確認

$ rails dbconsole
SQLite version 3.32.3 2020-06-18 14:16:19
Enter ".help" for usage hints.
# 作成したテーブル一覧を表示
sqlite> .table
ar_internal_metadata  bookmarks             schema_migrations   
boards                comments              users 
# usersテーブルの内容
sqlite> .schema users
CREATE TABLE IF NOT EXISTS "users" ("id" integer NOT NULL PRIMARY KEY, "email" varchar NOT NULL, 
"crypted_password" varchar DEFAULT NULL, "salt" varchar DEFAULT NULL, "created_at" datetime NOT NULL,
"updated_at" datetime NOT NULL, "last_name" varchar NOT NULL, "first_name" varchar NOT NULL,
"avatar_image" varchar DEFAULT NULL, "reset_password_token" varchar DEFAULT NULL, 
"reset_password_token_expires_at" datetime DEFAULT NULL, "reset_password_email_sent_at" datetime DEFAULT NULL, 
"access_count_to_reset_password_page" integer DEFAULT 0, "role" integer DEFAULT 0 NOT NULL);
CREATE UNIQUE INDEX "index_users_on_email" ON "users" ("email");

rails db:migrate を実行すると、まず初めにschema_migrationテーブルを読みに行きます。実行されていないmigrationファイルを実行し、新たなmigration IDを付与します。migrate IDは日時（UTC）が入ります。

**20200514151200**_create_tasks.rb

参照

lsコマンドとオプションについて

https://qiita.com/chihiro/items/6e1404c41e1236a9efe1

WebSocketとAjaxの違いについて

https://teratail.com/questions/1037

TCP/IPとは

https://www.itmanage.co.jp/column/tcp-ip-protocol/

rails dbconsole(rails db)で利用できるコマンド

https://qiita.com/k-o-u/items/a9b5e5472ba8415dd1aa

りあクト！ 輪読会 ver2

2021年8月27日

Create React Appは何をしてくれているのか

CRA（Create React App）とはFacebook社が社内でReactを使うときに使っていた環境整備の方法をコマンド化したもの。

実行することでアプリケーションのスケルトン（空のアプリ）が生成される。


$ create-react-appコマンドで作られるもの

  • react ・・・　React 本体のパッケージ
  • react-dom　・・・　DOMを抽象化してReactから操作できるようにするレンダラーのパッケージ
  • react-scripts


Create React Appで「Hello, World!」

npxコマンド

npmがインストールされていば、ネット経由で最新版ないし該当のパッケージをインストールし一回のみ実行してくれる。実行した後はキレイに削除してくれる。

実際にハンズオン！

$ npx create-react-app hello-world --template=typescript →TypeScriptのためのテンプレートを指定（このオプションを指定しないと素のJSで開発するためのcra-templateが適応される）

  • 上記コマンドはrails newと同じ役割だと想像してください。ディレクトリの移動を忘れないよう気をつけましょう。
  • cd hello-world ←これやってから①
  • yarn start ←これをやります②

CRA実行時のエラー

pretty-format@27.1.0: The engine "node" is incompatible with this module.
Expected version "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0". Got "14.4.0"

記述されているnodeのversion以上を期待している。 エラー発生時は14.4.0だった。 14.15.0にすることで対応。

回った！！


参考

Ruby on Railsの動作にNode.jsが必要な理由 https://www.xenos.jp/~zen/blog2/index.php/2019/03/19/post-1831/

【3分でわかるシリーズ】Ubuntuとは？ https://eng-entrance.com/what-is-ubuntu

JavaScriptを単体テストする流行りのフレームワークJestを試してみる https://qiita.com/mima_ita/items/558ec8cee2c0e1005ffd

りあクト！ 輪読会 ver1

りあクト！輪読会

2021年8月22日

Node.jsはなぜ必要？

  • JavaScriptsはWeb上（ブラウザ上、クライアントサイド）で動かすための言語
  • Node.jsとはJavaScriptsをローカル上で動くようにするためのソフトウェア
  • Node.jsを使うと、JavaScriptをRubyやPhytonみたいにサーバーサイド言語として使えるようになる
  • npm(NodePackageManager)とはrubyでいうbundlerのようなもの、バージョン管理ツール
  • rails sでローカルが起動した時にサーバー立ち上げ(rackとかミドルウェアも含んで)とwebpackerが自動で走ってくれていたりしてる？
  • パッケージとは、JavaScriptのプラグインやモジュールのこと

Node.jsをインストールしてみよう

  • UbuntuはOS、Linuxの一族
  • Node.jsはバージョンマネージャーを使ってプロジェクトごとに異なるバージョンをインストールするのが一般的。
  • バージョンマネージャーとしてnvmやnodenvが一般的
  • mkdir -p (-pはオプションで必要に応じてディレクトリも作成する)
  • node global 14.4.0とすることでデフォルトのバージョンを指定できる
  • node local 14.4.0とすることでディレクトリごとにバージョン指定ができる
  • Yarnはnpmの改良版。より高速、サブコマンドのタイピング数が少ない。
  • $ nodeはrubyでいう$ irbコマンド (REPL(リプル)っていうらしい)
  • anyenv updateで現在インストール可能なバージョンを取得できる。
  • nodeで対話環境でnodeが実行できる。
  • 終了するときは.exit

npmってなんだ？！

npmとは、「Node Package Manager」の略で、その名の通りNode.jsのパッケージを管理するためのシステムのことです。 ここでいうパッケージとは、JavaScriptのプラグインやモジュールのことです。

nodenvがNode.jsのバージョンの管理 npmがJavaScriptのパッケージ(bootstrapみたいなjQueryみたいな)の管理

VScode使おうぜ？

  • VScodeはTypeScriptと相性が良い。
  • 同時コーディングができるのでペアプロなどに役に立ちます。

参考

初心者向け！3分で理解するNode.jsとは何か? https://eng-entrance.com/what-is-nodejs#PHP

知っておいて損はなし！新人Webデザイナーのための「npm」入門 https://ferret-plus.com/6104

ESLint 最初の一歩 https://qiita.com/mysticatea/items/f523dab04a25f617c87d

コンテンツデリバリネットワーク (CDN) https://wa3.i-3-i.info/word16730.html

https://wpmake.jp/contents/knowledge/about_cdn/#CDN%E3%81%AE%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88

パーフェクトRails輪読会 ver2


2021年8月27日パーフェクト Ruby on Rails　 1−3 Railsを始めよう!!

  • rails newしたときに使うrailsのバージョンをgem install rails -v 6.0.3でインストールできます。

bin とは

binstub

binディレクトリに用意されているファイルのことをbinstubと呼びます。それはbundle execをつけなくても実行できるファイルです。

ラッパースクリプトを動かすためのファイル。 アプリケーションごとに、ファイルやコマンドを管理するために用いる。

binディレクトリはサランラップ！！！！！！

rails newで作成したアプリケーションはbinディレクトリに包まれてるんやで！！！！

preloader（プリローダー）

（pre + load = 前もってロードしておくこと）bin/rails や bin/rake コマンドの2回目以降の起動時間が短縮されます。(参考)

CPU

中央演算処理装置 コンピュータにおける中心的な処理装置（プロセッサ）。コンピュータの頭脳に例えられることが多い。

springとは

ギアの重い自転車を漕ぐ初動を軽くする為に、前もって漕いでくれている装置というイメージと考えられます。 binディレクトリ配下のコマンドを常に起動できる状態にしておくイメージです。 二回目以降のbin/railsやbin/rakeコマンドの起動時間が短縮されます。

config ディレクトリ

アプリケーションの設定ファイルや、アプリケーション起動時に必要な情報などを定義する定義するディレクトリです。

rails runner

Rakeタスクと同じようなもの。rails runnerだとrubyの記法を用いることができるので書きやすいです。rake taskはRSpecみたいな書き方があります。

例えば、 - 1日に一回実行する処理などはRakeタスクを使う方が最適です。(定期的) - データベースの準備段階など、画像などをスクレイピングして最初の１回のみ取得したい場合はrails runnerの方が最適です。（1回のみ）

【用語解説】 バッチ・・・「一回分の処理」を表す英語batch。 バッチ処理・・・大量の反復なデータジョブを実行する方法です。 コンピューティングリソースが利用可能なときにデータを処理でき、ユーザー操作をほとんど/まったく伴いません。 バッチ処理では、ユーザーはデータを収集して保存し、「バッチウィンドウ」と呼ばれるイベント中にデータを処理します。

参考

RailsでSpringを導入して開発する

https://easyramble.com/install-spring-into-rails.html

rails new するとできる bin ディレクトリまとめ https://qiita.com/ayasuda/items/7edcef9f9508d35cb3dd#%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82%E8%AB%96%E3%81%AE-binstub

binstubを理解する https://techracho.bpsinc.jp/hachi8833/2016_08_24/25037

Railsでバッチを書く時によく使うrails runnerとrake taskの違い https://qiita.com/rllllho/items/672e336a03335cba6b34