【パーフェクト Ruby on Rails】を読む - その4

1-4-4

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

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

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

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

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


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

【パーフェクト Ruby on Rails】を読む - その3

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)での1つ目のコネクションの確立を行ったら、そのまま繋いだままにしておく事ができます。
なのでリアルタイムのやり取りにおけるチャット機能で用いると良さそうです。

WebSocketってそもそもなに??

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

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

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

各層の役割

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

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

    インターネット層(Layer2)

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

    トランスポート層(Layer3)

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

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

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

イーサネットとは

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

1-4-2

rails dbconsoleコマンドライン上からデータベースの中身の確認や編集をすることができるコマンドです。
MySQLPostgreSQLSQLite、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

Reactを知る-その2

Reactで出てくる言葉

トラハックさんの動画や書籍と教材から知っておくべき部分のまとめ

importとexport

主にjsのモジュールと同じ考え
「入れ込むのか」「出力するのか」を書いてあげる https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export

更に、エントリポイントと呼ばれるファイルを作りimportしたものを他へexportさせたりすることが出来る。index.jsで行うことが多い印象。 f:id:michimo_10:20210830142431p:plain
例えば、export default Fuga;の様にdefaultという部分が名前になっており、defaultは他ファイル(コンポーネント)でも使ってexportしているので、index.jsにまとめて出力(export)する時にファイル名(コンポーネント名)が被らないようにしないといけない。なので、index.jsと言うエントリポイントを作り、そこでexportの名前を変えることが出来る。
(Railsなどでいうroutes.rbの様なルーティングをコンポーネント同士で行うイメージ)

なぜそんなことをするのか?🤔

index.jsといったエントリポイントで数々のコンポーネントを纏めていると他の子コンポーネントなどでimportする時に、index.jsで名前をdefaultからTitleに変えたことによって

import {Title,Hoge,Fuga,Hage,Foo} from "./index";

といった様に少ない記述でimportすることが出来る。
もし、index.jsにまとめていないと

import Title from './Title'
import Hoge from './Hoge'
import Fuga from './Fuga'
import Hage from './Hage'
import Foo from './Foo'

といった様に読み込むコンポーネントが増えると記述が増えて管理も面倒になると言うデメリットがある。

Reactを知る-その1

Reactで出てくる言葉

トラハックさんの動画や書籍と教材から知っておくべき部分のまとめ
*JavaScriptは長いのでjsと書く

Component(コンポーネント)

- UIの部品、またはそのUIを表現するパーツの単位
- パーツなので1コンポーネント = 1ファイル(再利用できる!)
- ファイルを分けることで管理がしやすい
- 一箇所変えれば使っているコンポーネント全てに反映される
- コンポーネントを組み合わせてページを作る
- 2つの記述方法がある (classと関数)
- 頭文字は大文字で書く事
○ <Welcome /> 
x <welcome /> 

以下2つの記述例です

  • Class component(クラス コンポーネント)
    よく見るClassを定義するような形で定義していきます
import React, {Component} from 'react'
// ↑でReactのConponentというのを読み込む
class Welcome extends React.Component { 
// ↑ ReactのComponentを拡張してWelcomeというclassを作ります
  render() {
// ↑ renderメソッドの中に
    return <button> Hello, {this.props.name}</button>
// ↑ボタンタグの中のHello,{this.props.name}を返す(.jsxと呼ばれるファイル)
  }
}

/* ------
{this.props.name}
 classコンポーネントで props を使うときは this が必要
------*/
  • Functional Component(ファンクショナル コンポーネント)
    jsの関数の定義と同じような感じ
    React Hooksが出たことにより記述量が少ない
    基本的にこっちを使うのが多い
// ↓バージョン17以降は省略できる
// import React from 'react';

const Welcome = (props) => {
// 定数Welcomeというコンポーネントを宣言しpropsを渡す、アロー関数で
  return <button> Hello, {props.name}</button>;
// jsxを返す
}

jsx

JavaScriptの構文拡張。最終的にjsにコンパイルされる。ぱっと見はHTMLに見えて実はjs。ファイルの拡張子で.jsxをつける。

tsx

TypeScriptの記述ができるjsxファイル。拡張子は.tsxをつける。

コンポーネント、子コンポーネント

例えば、、、

- App.jsxファイル
(子ファイルのデータを使いたい時はimport Hoge fromの記述してね)

- compoonents/Hoge.jsxファイル
(他のファイルで使う時は子ファイル内でexport default Hoge;の記述しないと使えないよ)

props

データの受け渡し
親→子みたいに、異なるコンポーネントにデータを渡す時に使う。主に子コンポーネントで使う。
f:id:michimo_10:20210830045945p:plain https://youtu.be/Q-df0QgZuhE トラハックさん分かりやすい

りあクト!輪読会 - その1

りあクト!輪読会[第3.1版]【 1.言語・環境編】

2021年8月22日

Node.jsはなぜ必要?

  • JavaScriptsはWeb上(ブラウザ上、クライアントサイド)で動かすための言語
  • Node.jsとはJavaScriptsをローカル上で動くようにするためのソフトウェア
  • Node.jsを使うと、JavaScriptRubyや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の改良版。より高速、サブコマンドのタイピング数が少ない。
  • $ noderubyでいう$ 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と相性が良い。
  • 同時コーディングとかめっちゃ便利やで。(Vimを敵に回す発言)

参考

初心者向け!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

【パーフェクトRuby on Rails】 を読む - その2

2021年8月27日輪読会

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

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

Springとは

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


個人的にMacが熱くなるのでアクティビティモニタのCPUを見ると80%とかになるので

$ bin/spring statusで状態を確認

$ bin/spring stop でstopする


config ディレクト

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

rails runner

Rakeタスクと同じようなものです。rails runnerはrakeタスクのようにnamespaceやdescなどをきちんと定義しないといけないといったお作法がないのである意味では書きやすいです。rake taskはRSpecのような書き方があります。

例えば、

  • 1日に一回実行する処理などはRakeタスクを使う方が最適です。(定期的)
  • データベースの準備段階など、画像などをスクレイピングして最初の1回のみ取得したい場合は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

【パーフェクトRuby on Rails】 を読む - その1

※ちゃんとしたやつ書こうと思い書きました。

パーフェクトRails 1章

1-1-1

  • プロジェクトを新規登録する際、git init で作業を記録する場を構築します。
  • Ruby2.7とRails6.0の組み合わせは警告が発生する場合があります。

1-1-2

Rubygemsとは

RubyGemsは、Ruby言語用のパッケージ管理システムであり、ライブラリの配布用標準フォーマットを提供しています。gemを容易に管理できます。 $ rails _バージョン名_ -vと入力するとインストールしているバージョンの中から任意のバージョンを指定できる

1-1-3

rakeタスク

実行したい内容をあらかじめ定義するもの。実行方法は時間指定でも手動でも関係ないです。(例:顔を洗う,歯を磨く,など) Linuxはmake == rubyはrake

rakeタスクの生成についての基本構文

desc 'rails, muzukashi'
task 'rails' do
    puts 'rails muzukashi'
end
  • desc・・・タスクの説明
  • task・・・タスク名称と実行内容

cronとwhenever

事前に定義したrakeタスクを時間という概念をもとに実行する機能のことです。 (例: 毎朝7:00に顔を洗う, 7:30に朝ご飯を食べる,など)

rakeコマンド

rakeタスクを実行するためのコマンドです。

1-1-4

bundleコマンドとは

gemパッケージの仕組みを利用してどのgemパッケージを使用してどのバージョンを使用しているのかを明示する仕組みです。

$ bundle execをつけるとGemfile.lockに書かれているバージョンのgemが動きます。ディレクトリで定義しているバージョンがつかわれます。$ bin$ bundle execは同じです。($ bundle exec$ bin の中に含まれるものというイメージです。)

bundlerでよく利用するサブコマンド

$ bundle install
 -> bundle iまたはbundleでも可
$ bundle update [ライブラリ名] -> バージョン更新
$ bundle list -> インストール済みのgemパッケージの一覧表示
$ bundle init -> Gemfileを生成。
$ bundle exec [コマンド名] -> Bundlerでインストール

$ bundle install--path vendor/bundleつける??付けなくともいいと思います。→ bundlerを使っているから!!!(書くことで家の中にもめっちゃ鍵かけるイメージ)

1-2 Railsの思想

CoC(Convention over Configuration)

設定より規約という意味です。 規約に従うことで関心ごとがシンプルになり、本来注力すべきビジネスロジックへ集中できるようになります。

DRY(Don't Repeat Yourself)

同じ事を繰り返さないという思想です。情報の重複をなくし、一つのことは一箇所だけに記述します。 DRY原則を守る事によって変更が生じた際に何箇所もコードを修正する事がなくなり、メンテナンス性が高まります。

REST(Representational State Transfer)

  • URL web上の住所

  • URN web上の名前

  • URI web上の住所 + web上の名前

自動テスト

デフォルトはMinitest。基本はRSpecを使用します。

アーキテクチャ

アーキテクチャ(木造建築)>フレームワーク(家の建て方)>ライブラリ(工具箱)>コンポーネント(材料、道具、部品)

参考

bundle install --path vendor/bundleについて https://qiita.com/jnchito/items/99b1dbea1767a5095d85

フレームワークアーキテクチャの違い - Yahoo!知恵袋 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14158287509

技術負債の内容について - Qiita https://qiita.com/erukiti/items/9cc7850250268582dde7

URIについて https://ferret-plus.com/4637

bundle execについて https://qiita.com/d0ne1s/items/fa2dafcee02e963fe997

Rakeタスクについて https://pleiades.io/help/ruby/rake.html

肉さんNotion

https://www.notion.so/rake-cron-9f0512dd664d45238780512a8c304979#f9e3c558cd2343408eec8ffb0551bf85