gw まとめ　プログラミング基本

# プログラミング　基本

- ruby
- rails
- javascript !
- coffee script !
- sql !
- react
- redux
- react rails
- rspec
- elasctisearch
- sidekiq
- redis
- 情報処理 !
- api !
- aws !
- 英語基礎文法

### ruby


```:joins

## postsの投稿月が、8の【User】を取ってくる

User.joins(:posts).where(posts: { month: 8 })

Userクラスにアクセスしてるのに postにアクセスできる？


- joinも階層深くまでもてる

User.joins(posts: [:categories]).where(posts: { month: 8 })



記事
https://www.sejuku.net/blog/26522
```

```:build

pry(main)> user.projects.count
→ 5


user.projects.build
=> #<Project:0x007ff505efc4f8
 id: nil,
 name: nil,
 description: nil,
 due_on: nil,
 created_at: nil,
 updated_at: nil,
 user_id: 2,
 completed: nil>

同じくレコードは5
pry(main)> user.projects.count
→5

lastの値はbuildしたもので、保持はできる
[7] pry(main)> user.projects.last
=> #<Project:0x007ff505efc4f8
 id: nil,
 name: nil,
 description: nil,
 due_on: nil,
 created_at: nil,
 updated_at: nil,
 user_id: 2,
 completed: nil>


```


```:置換

def to_camel_case(str)
  str.gsub!(/-/,'')
end
   
   
to_camel_case("the-stealth-warrior")


```


```:join
2.3.0 :001 > aa = "hon"
 => "hon"
2.3.0 :002 > bb = "beth"
 => "beth"
2.3.0 :003 > [aa, bb].join(' ')
 => "hon beth"
2.3.0 :004 > [aa, bb].join('')
 => "honbeth"
2.3.0 :005 >
```


```

a = [1,2,3]
b = [2]
c = [4]

a & b
→ 2

a & c
→ []

```


イテレーション:

```:next

条件を付け足す

繰り返しするけど、ooに当てはまるものはスルーしてねみたいな

count = 0

("aa".."az").each{|str|
  count += 1
  if count % 3 != 0 then
    next
  end

  print(str + "¥n");
}


記事:

https://www.javadrive.jp/ruby/for/index10.html
```



### rails

### javascript


- 基本画面操作

```:基本操作

取得（getElamentById）

document.getElamentById(".message")

属性取得（getAttribute）

var message = document.getElamentById(".message")

messag.getAttribute("属性名)


※記事
https://javascript.programmer-reference.com/js-getattribute/

追加、更新

append inseartHTML

削除

remove


```


- 関数

```
function 関数名(){

console.log("hello")
}

```


- クラス

```:クラス

class 名前{} & constructor(){} & method() & this
のつかい型

class Person(){
 constructor(name,age,tall){
  this.name = name
  this.age = age
  this.tall = tall
   
 }
 
 evaluation(){
   var score = this.age * this.tall
   if (score >= 80){
    console.log("cool") 
   }else{
     console.log("not so cool")
   } 
 }
}

bob = new Person("bob",23,170)

console.log(bob.name) # bob

console.log(bob.evaluation) # cool 

extends 継承

```

```:アロー関数
let normalFunc = function(x){
    console.log(x);
}

let arrowFunc = (y) => {
    console.log(y);
}

normalFunc('今までの関数');
arrowFunc('アロー関数式');

※記事
https://qiita.com/mejileben/items/69e5facdb60781927929

```


- 標準ライブラリ
https://qiita.com/takeharu/items/d75f96f81ff83680013f


- map（）
- find（マッチした値を取得 find(params[:id]とかかな？)）

```
const cityList = [
    { name: '東京', value: '1' },
    { name: '神奈川', value: '2' },
    { name: '千葉', value: '3' },
    { name: '埼玉', value: '4' },
];

const target = cityList.find((city) => {
    return (city.name === '東京');
});

console.log(target); // { name: '東京', value: '1' }
```

- filter（条件の適応するもの取得　配列かな）


```
var items = [5,2,7,8,3,1,6,8,4];
 
var result = items.filter( function( value ) {
 
    //5よりも小さい数値だけを抽出
    return value < 5;
 
})
 
console.log( result );
#[2, 3, 1, 4]
```


- forEach（ruby eachと同じ）
- for ()
- includes（含まれてるか確認 bloolean）

```

 var mystr = "Hello, world!"; 
 var res1 = mystr.includes("Hello"); 
 var res2 = myarray.includes("Ohayo"); 
 console.log(res1)  # true
 console.log(res2)  # false
```


- Object.assgin（コピー　値の更新）

```:Object.assigin

let obj1 = {a:1, b:2};
let obj2 = Object.assign({}, obj1);
console.log(obj2);  // {a:1, b:2}

※詳細記事
https://qiita.com/SE-studying-now/items/ecdbc0317ba1806aed61

```


- Object.keys values（キー　バリューをとる）
- 


- Array
追加,結合,取得,削除。

追加
push,splice


```
var array = ['a', 'b'];

array.push('c');
```

```
var array = ['a', 'b', 'c'];

array.splice(1, 0, 'A'); // 二番目に挿入
console.log(array); // ['a', 'A', 'b', 'c']
```


結合
concat

```
var array1 = ['a', 'b'];
var array2 = ['c', 'd'];

var array = array1.concat(array2);
console.log(array);  // ['a', 'b', 'c', 'd']
```
取得

添字で

```:バリューを取得
var array = ['a', 'b', 'c'];

var value = array[0];
console.log(value); // 'a'

var value = array[array.length - 1];　お尻を
console.log(value); // 'c'
```

```:添字を取得
var array = ['a', 'b', 'c'];

var index = array.indexOf('b');
console.log(index); // 1

```

削除

```:お尻から
var array = ['a', 'b', 'c'];

array.pop();
console.log(array); // ['a', 'b']
```

- for イテレーション

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...in

- if
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/if...else

- switch

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/switch

- extends 継承

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes/extends

- アロー関数

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

- メソッド

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions

- オブジェクト

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Working_with_Objects

### coffee script

・初期設定
node.js必要
拡張子 .coffee
実行 coffee hello.coffee
terminalでの扱い coffeeで irbみたいになる

- 基本文法

インデントでブロックを作る

- 関数

```
【ポイント】

= : 代入
-> : function的な

【before】

var hello;

hello = function(){
  return console.log("hello");
}

【after】

hello = -> console.log "hello"
```

- 定義

```:文字列
var name = "hello";


name = "hello";

```

```:配列

var colors;

colors = [1,2,3,4]

これだけ
colors = [1,2,3,4]

```

```:オブジェクト

var shapes;

shapes = {
  sahpeA: {
    x: 0,
    y: 0,
    width: 15px,
    height: 15px
  },
  sahpeB: {
    x: 15,
    y: 0,
    width: 30px,
    height: 15px
  }
}


shapes =
 sahpeA: 
    x: 0
    y: 0
    width: 15px
    height: 15px
 sahpeB: 
    x: 15
    y: 0
    width: 30px
    height: 15px
```

- データの扱い

```:for

※_をつけるのは慣習

var fruit, fruits, _i, _len;

fruits = [ "apple", "orange", "banana"]

for(_i = 0, _len = fruits.lenght; _i < _len; _i++){
 fruit = fruits[_i];
 console.log(fruit);
}


【after】

fruits = [ "apple", "orange", "banana"]

for fruits in furits
  console.log(fruit)
```


```:レンジ
menths = [1..12]

menths = [1,2,3,4,5,6,7,8,9,10,11,12]

weekdays = menths[1..5]

weekdays # [1,2,3,4,5]

```


```:thisと@
@name : this.name

class Bird
  constructor: 
    @name = "インコ"


```

- ライブラリ

undercores.js

```:使えるようになるメソッド

_each
_filterなどなど

```

- イベント（EventEmitter） 

or jqulayでかくっぽい？

https://qiita.com/yukiyukki/items/b5778aa7ffd0bf2886cf

```:EventEmitter

{EventEmitter} = require 'evenets'

emitter = new EventEmitter


emitter.on 'click', () ->
  console.log("hello")


```


- クロージャー

do を入れる


### sql

- 起動

pg_ctl -D /usr/local/var/postgresql@9.6 -l logfile status or satrt


- アクセス

psql -h hostname -U username -d databasename



- level1
カラムの指定 select
テーブルの指定 from
条件 where 

- level2 

集計結果に対してアプローチ

group by
order by
サブクエリ where price > (select ~~~)
検索 where like '%単品%'

- sqlの種類

DDL 箱の操作　create
DML 操作 select 
DCL 制約 commit 

- 応用
window関数


- ruby と sql 

```
Blog.where "user_id = :user_id AND created_at >= :created_at", { user_id: params[:user_id], created_at: params[:created_at]}
```

```
SELECT "blogs".* FROM "blogs" WHERE (user_id = 3 AND created_at >= '2014-02-17 19:15:35.523440')
```


https://babiy3104.hateblo.jp/entry/2014/03/05/224525

### react

```:基本構文

- 変数定義
- class構文
- 継承（extends）
- テンプレートリテラル（jsの式展開）
- 分割代入
- props
- state
- イベント
- key
- 繰り返し（map）
```

```:設計

- PresentationalとContainer

Presentationalはレイアウト
Containerは、コントローラーとデータ管理（更新はcontainer）をもつ

- local state（例外）

Presentationalでも、stateを持つことがある。（flagとか）
```

```:Redux

- Jsでもフローを管理したいという背景（MVC）
- Flaxが期限（Action Dispatcher: Conteollr Store: Model Presentational: View）
- Store vs State

Storeはアプリケーションの状態のデータをもつ
StateはUiの状態（flagとかだと思う）
```


```:用語

Action
ActionCreater
Dispatcher
Reducer
Store
Object.assign
```


```:AtomicDesignとComponentBase

- AtomicDesignは因数分解のルール（BEMみたいなモノ）
- ComponentBaseはコンポーネントを基準として、管理する事
　※ディレクトリ構成に影響する。
　※コンポーネント単位で、ファイルもまとめる
```

```:開発環境

- jsx
- babel（jsxをjsにコンパイル）
- webpack（コンポーネントをbundle.jsにまとめる）
```

```:ライフサイクル（ミニマム）

- cunstructor（初期化）
- render（rerender）
```

```:テストコード

- jest
- rspecと原則は基本的に変わらない
- factoryみたいな仕組みもある

- 記事（基本的な書き方）

https://qiita.com/chimame/items/e97883fd46b67529d59f
```



```:配列から特定のオブジェクトを取得する方法

const FRIENDS = [
  {
    id: 'serval',
    nameJa: 'サーバル',
    nameEn: 'Serval Cat',
    family: 'ネコ目ネコ科ネコ属'
  },
  {
    id: 'raccoon',
    nameJa: 'アライグマ',
    nameEn: 'Common raccoon',
    family: 'ネコ目アライグマ科アライグマ属'
  },
  {
    id: 'fennec',
    nameJa: 'フェネック',
    nameEn: 'Fennec',
    family: 'ネコ目イヌ科キツネ属'
  }
]

const friendById = id => FRIENDS.find(friend => friend.id === id)

friendById('serval')
→　{id: "serval", nameJa: "サーバル", nameEn: "Serval Cat", family: "ネコ目ネコ科ネコ属"}


```


- routhing


```:react-router

インストール


$ npm install -S react-router-dom


記事
https://qiita.com/muiscript/items/b4ca1773580317e7112e


```



```:関数


getFullname = () => "坂本龍馬" ;

return(

  <h1> hello {this.getFullname}</h1>
)
# 坂本龍馬
```

```:属性

<input value=" some value">

```

```:jsxってcreateElemant

jsx
element = <h1 className="title">hello world</h1>


jsxなし
element = React.createEelement(
 "h1",
{className: "title"},
"hello world"
)

```

- babel

convert jsx to javascript

jsxをjavascriptに変換する

高級言語をマシン語にコンパイルするのと同じ


```:関数コンポーネント

const Greet = () => {
    return <div>こんにちわ</div>
}

```

```:クラスコンポーネント

import React {Component} from 'react';

class Greet extends Component {
  state = {  }
  render() { 
    return (<div>こんにちわ</div>  );
  }
}
 
export default Greet;


※関数とクラスの違いは`state`と`ライフサイクルメソッド`

```

```:props

キーとバリュー的な

class Board

  numbers =[ 1,2,3,4,5,6]

 <Square numbser={numbers}/>

/////////////////////////

class Square


  {this.props.numbers}
# Square上でのnumbersは下記になる
prpos = numbers = [ 1,2,3,4,5,6]


```

- propTypes （バリデーション）

```:propTyps

class greeting
 {this.props.name}
 


Greeting.propTypes = {
  name: PropTypes.string
};
```






### redux

```:provider


記事
https://kde.hateblo.jp/entry/2018/06/12/205722
```

```:mapStateToPropd

書き方

const mapStateToProps(state){
 return { state.header;
 }
}

const mapStateToProps = state => state.header;

```

## react rails

axios コントロラー動かす
$ npm install axios --save


これ参考にする
https://qiita.com/yoshimo123/items/9aa8dae1d40d523d7e5d

```:react-rails

記事
https://github.com/reactjs/react-rails

documentに従った

1
$ rails new my-app
$ cd my-app

2 gem

gem 'webpacker'
gem 'react-rails'

3 初期設定

$ bundle install
$ rails webpacker:install       # OR (on rails version < 5.0) rake webpacker:install
$ rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react
$ rails generate react:install

4 application.html.erb
<%= javascript_pack_tag 'application' %>

5 component

rails g react:component HelloWorld greeting:string


6 controller

rails g controller hello index

7 routing
 root "hellos#index"

8 hellos/index.html.erb

<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>

9 起動

rails s

```


### rspec


```

userを複数作る為のfactory


sequence(:email) { |n| "tester#{n}@example.com" }


[1] pry(#<RSpec::ExampleGroups::Project>)> @user2
=> #<User id: 2, email: "tester2@example.com", created_at: "2019-05-11 08:46:11", updated_at: "2019-05-11 08:46:11", first_name: "Joe", last_name: "Tester", authentication_token: "RX3TcvspfmiTn5pucx_j", location: nil>
[2] pry(#<RSpec::ExampleGroups::Project>)> @user3
=> #<User id: 3, email: "tester3@example.com", created_at: "2019-05-11 08:46:11", updated_at: "2019-05-11 08:46:11", first_name: "Joe", last_name: "Tester", authentication_token: "YZtX81yYtvkSvsKb5joo", location: nil>
[3] pry(#<RSpec::ExampleGroups::Project>)> @user4
=> #<User id: 4, email: "tester4@example.com", created_at: "2019-05-11 08:46:11", updated_at: "2019-05-11 08:46:11", first_name: "Joe", last_name: "Tester", authentication_token: "RawynDCUM4PydHy_RfiZ", location: nil>



アソシエーション

project と　user

projects.rbに

方法1.association :owner 


@project.owner
=> #<User id: 1, email: "tester1@example.com", created_at: "2019-05-11 08:52:28", updated_at: "2019-05-11 08:52:28", first_name: "Joe", last_name: "Tester", authentication_token: "TFynies9C7jgFMyye8A4", location: nil>


方法2.

@user = FactoryBot.create(:user)
    @project = FactoryBot.build(:project, owner: @user)



データの更新
user = FactoryBot.build(:user, first_name: "John", last_name: "Doe")

```


controller


メソッド
　get, post, patch, delete
 
引数（controllerのアクション）
:index,:new,:create, :destroy

マッチャ
create
attributes_for

捕捉
Devise
  sign_in

rails_helper.rb

config.include Devise::Test::ControllerHelpers, type: :controller




- rsepcとは？
期待と結果を比較する言語

- 比較対象
インスタンス
json
ビュー
文字列

- 検証箇所

model
controller
service
searchなど

- devise

```:設定

spec/rails_helper.rb

config.include Devise::Test::ControllerHelpers, type: :controller

→ sign_inが使えるようになる

```


```

ログインをカスタマイズ

def login_admin_user

sigin @user

```



```:index

ここは単純にリクエストを投げて、レスポンスをもらう


curl -X GET "localhost:3000/posts"
みたいな
※sigin_inは必要かな


be_success
status （have_http_status "200"）
```


```:show

show actionは何をやっているのか？（やりたいのか？）

→projectsの詳細ページに行きたい
→localhost:3000/projects/2にアクセスしたい
→ 2が欲しい

def show 

 @project = Project.find(params[:id])

params[:id]

idが欲しい

→get :show, params: {id: @project.id}

```

```:create

何をやりたいか？

1.buildする
@project = current_user.projects.new(project_params)
2.アップデート（saveする）
@project.save

だから、アップデートに必要な、【パラメーター】が欲しい

※下記のような
[3] pry(#<ProjectsController>)> params
=> <ActionController::Parameters "project"=>{"name"=>"dsd", "description"=>"dsda", "due_on(1i)"=>"2019", "due_on(2i)"=>"5", "due_on(3i)"=>"12"}, "commit"=>"Create Project", "controller"=>"projects", "action"=>"create"} permitted: false>


rspecでは

パラメーター

@project_params = FactoryBot.attributes_for(:project)


expect {
 post :create, 
 params: { project: project_params }}.to 
 change(@user.projects, :count).by(1)
```

### Capybara

```:Capybara設定

gem 

Gemfile.rb

group :test do

gem 'capybara', '~> 2.15.2'


rails_helper下記を追加

require'capybara/rspec'

```

```:ファイル生成
$ rails generate rspec:feature projects
```

```:考え方

※Capybaraには、メソッドがあり、そのメソッドで、流れを作成する
※ビューのアクションを作成した、結果の値をexpect , evaluateする

1.流れの作成
2.期待と結果を比較

scenario "user creates a new project" do
 user = FactoryBot.create(:user)

 visit root_path
 click_link "Sign in"
 fill_in "Email", with: user.email
 fill_in "Password", with: user.password
 click_button "Log in"


2.期待と結果を比較

expect(page).to have_selector '.information', text: '大事なお知らせ'


メソッドがまとまった記事

https://qiita.com/jnchito/items/607f956263c38a5fec24
```

### APIのテスト

```:設定
1.ファイル作成
$ bin/rails g rspec:request projects_api

typeがrequestのモノが作成される

RSpec.describe"ProjectsApis",type::requestdo describe "GET /projects_apis" do
it "works! (now write some real specs)" do get projects_apis_path 

```

```:考え方

基本、コントローラーテストと変わらなそう
```


### ファイル構成


```:構成

1.基本は`rails helper`をみる
 spec/rails_helper.rb


2.helperに関連ファイルを読み込ませる
 
config.include RequestSpecHelper, type: :request

3.追加機能を個別ファイルで作成する 
spec/support/request_spec_helper.rb

```

### DRYに書くために

```
- let
- shared_context
- カスタムマッチャ（spec/support/matchers/content_type.rbとか）
- aggregate_failures
```

```:構文の略式記法（早くテストを書くために）

- is_expected

before

it "returns a user's full name as a string" do user = FactoryBot.build(:user) expect(user.name).to eq "Aaron Sumner"
end


after


subject(:user) { FactoryBot.build(:user) }
it { is_expected.to satisfy { |user| user.name == "Aaron Sumner" } }
```

### モックとスタブ


```:用語
モック(mock)
本物のオブジェクトのふりをするオブジェクト

スタブ(stub)
オブジェクトのメソッドをオーバーライドし、事前に決められた値を返します
```

### elasticsearch

###redis

### 情報処理

- pc の５装置

入力装置
記憶装置（メモリ）
演算装置（cpu:プロセッサとも言うらしい）
出力装置
制御装置（cpu）

- cpu 

割り込み処理があるらしい
例）仕事してて、電話かかってきて。。。


- ネットワーク osi（open sysetem interconnection）基本参照

- lan wan（ネットワーク:利用可能範囲）
- ルーター（中継地点）
- ipアドレス（住所）
- プロトコル（ルール）
- パケット交換方式
（データを分割して送る:シーケンス番号でパケットを探す）
- bps（ビーピーエス:速度）

- 層

応用層 http smtp dns 
プレゼンテーション
セッション           　上位
==================
トランスポート（TCP,UDP）　下位
ネットワーク（ip）
データリンク（イーサネット:ケーブル）
物理（イーサネット:ケーブル）


### api（web APIを読んで）


```:わかった事

1
apiも設計思想がある思想がわるとリクエストの出し方がわかる

セキュリティの掛け方がわかると、ブロックされないためには？と考える

2　apiとは？

リクエストを出して、特定の処理を実行。値をもらう

パラメーターを付与するのは、処理を限定するため。全てのリクエストが all見たいなら処理に時間がかかかる

3 欲しい情報をもらうためには？（ブロックされないために）

下記の3つはマスト

key
token
parameter

リクエストを出すには、`curl`コマンド 

-X:httpメソッドの指定
-d:パラメーターの
-q:クエリー

4 apiの理解にマストは httpの理解

- リクエスト、レスポンスの構成は3つ

（リクエスト、レスポンス）ライン
（リクエスト、レスポンス）ヘッダ
（リクエスト、レスポンス）ボディ

- ステータスコードからわかる事

2XX （成功）
3XX　（遷移）
4XX　（クライアント側のエラー）
5XX　（サーバー側のエラー）

- キャッシュ

　通信のやりとりを減らす

データ的に更新頻度が多くないくてもいいやつ

例えば、明日の天気予報の情報を毎時間こと取得の必要あるのか。。？的な


- メディアタイプ（content-type）

  Caontent-type: application/json 

セティリティの関係もあるらしいよ

```


### aws

- 用語

vpc
ec2（サーバー）
iam（管理者設定　グループと併用する）
ami（OS）
アベイラビリティゾーン（物理的なサーバーの位置）
route53
cloundwatch（動作の管理）
ロードバランサー（elb）
s3（ストレージ）
http（port 22:ssh 80:アプリ）
サブネット（パブリック（webサーバー）、プライベート（dbサーバー））
natゲートウエイ（プライベートサブネットとネットをつなぐ）
インターネットゲートウェイ（ネットと繋げる）
バッションサーバー（webサーバー
からdbサーバーにアクセス）


![nondefault-vpc-diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286971/3f82686a-b63c-baee-242f-8af41119b992.png)

### 英語基礎文法

```:接続詞

- 役割

意味の追加

- 種類 2つ

小さな接続詞(等位接続詞)
大きな接続詞(従位接続詞)

- 小さな接続詞(等位接続詞)

名詞+名詞の例: you and me
形容詞+形容詞の例: safe and accurate
動詞+動詞の例: wait and see
文章+文章の例: I went to the gym, but it was closed already. (私はジムに行ったが、既に閉まっていた。)

- 大きな接続詞(従位接続詞)

She is still very active although she has retired. (彼女はまだとても元気だ、既に引退しているにも関わらず。)

```

https://toiguru.jp/english-grammar#smoothplay13