【パーフェクト 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周りをシームレスに統合する、フルスタックなフレームワーク。つまり?…
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)
- 同一のネットワーク内でデータを転送すること。有線のイーサネットと無線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
Reactを知る-その2
Reactで出てくる言葉
トラハックさんの動画や書籍と教材から知っておくべき部分のまとめ
importとexport
主にjsのモジュールと同じ考え
「入れ込むのか」「出力するのか」を書いてあげる
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export
更に、エントリポイントと呼ばれるファイルを作りimportしたものを他へexportさせたりすることが出来る。index.js
で行うことが多い印象。
例えば、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
データの受け渡し
親→子みたいに、異なるコンポーネントにデータを渡す時に使う。主に子コンポーネントで使う。
https://youtu.be/Q-df0QgZuhE
トラハックさん分かりやすい
りあクト!輪読会 - その1
りあクト!輪読会[第3.1版]【 1.言語・環境編】
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使おうぜ?
参考
初心者向け!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
【パーフェクト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
Node.jsのversionを切り替える[詰んだ]🤦♀️
[環境構築]のおはなし
Node.jsのversionを切り替える
-
See???
See.ruby-version. See Gemfile.
ただ単に「見てね」って事らしい コマンドじゃない事は分かっていたがそういうこと
やらかした🤦♀️
指定されたNode.jsのバージョンを切り替える時になんやかんややってて、
homebrewを消してしもた。。。雑魚過ぎる
nodebrewも無い…
もっと言えばruby -vでエラーが出るのでrubyすらも消えたっぽい…yarnも
(その時のターミナルの写しは無い。)
※ただ、nodeとnpmが無い時のはあった
% node -v
zsh: command not found: node
% npm -v
zsh: command not found: npm
うぅ…
\(^o^)/
入れ直す
MacにNode.jsをインストールしてnpmを使えるようにする(Nodebrew利用) | Hirooooo's Labo
【Mac版】node.jsのアンインストールと再インストール手順メモ - Qiita
homebrewとnodebrewをもっかいインストールし直す。rubyも。
% brew -v # homebrewはインストールされたっぽい
Homebrew 3.1.8
% nodebrew -v # nodebrewもインストールされたっぽい
nodebrew 1.1.0
しかし
% npm -v
zsh: command not found: npm
ん〜。
% curl -L git.io/nodebrew | perl - setup
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
0 0 0 0 0 0 0 0 --:--:-- 0:00:01 --:--:-- 0
0 0 0 0 0 0 0 0 --:--:-- 0:00:01 --:--:-- 0
100 24696 100 24696 0 0 13591 0 0:00:01 0:00:01 --:--:-- 13591
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew
========================================
Export a path to nodebrew:
export PATH=$HOME/.nodebrew/current/bin:$PATH # パス通してね
========================================
% export PATH=$HOME/.nodebrew/current/bin:$PATH # はいよ
% nodebrew ls
v12.14.0
current: none # nodebrewはあるけど指定されていない
% nodebrew use v12.14.0 # このバージョン使うよ
use v12.14.0
% nodebrew list
v12.14.0
current: v12.14.0 # 適用された!
# パスを通してあげよう
% export PATH=$HOME/.nodebrew/current/bin:$PATH
% npm -v
6.13.4 # でた!やったね!
🐥 <でかした!
yarnも入れる
% brew install yarn
…
% yarn --version
1.22.10
とりあえず入ったけど、
ワシが使いたいのは0.20.1なんじゃあ🧠🚿
-
バージョン指定しないといけないと思ったが
後から言われる
Yarnは0.20.1以上のバージョンであれば大丈夫です。
え、あ、、そうなん…。
rubyもバージョン違うんで変更する
rbenv rehashをちゃんと理解する - MogLog
% ruby -v
ruby 2.6.4p104 (2019-08-28 revision 67798) [x86_64-darwin20]
# rubyは2.6.5にしたいので
% rbenv install 2.6.5
rbenv: /Users/######/.rbenv/versions/2.6.5 already exists
continue with installation? (y/N) n
# 既にあるっぽいので no
% rbenv local 2.6.5 # localを2.6.5にする
% ruby -v
ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-darwin20]
# でけた!
でかした!
これで勝つる!
環境構築もだがPCの信頼構築もしないといけない感
Macはトモダチ...⚽️