DEV Community: koki-takishita

[JS]forではなくmapを使う

koki-takishita — Sun, 04 Dec 2022 05:23:01 +0000

ドキュメント

`for`と`map`コード例

cartItemsに商品の税込み価格(includeTax)を追加する.

before

const cartItems = [
  {
   name: '掃除機',
   price: 10000
  },
  {
    name: '電子レンジ',
    price: 8000
  },
  {
    name: '冷蔵庫',
    price: 30000
  }
]

after 税込価格であるincludeTaxを追加する

const cartItems = [
  {
   name: '掃除機',
   price: 10000,
   includeTax: 11000
  },
  {
    name: '電子レンジ',
    price: 8000,
    includeTax: 8800
  },
  {
    name: '冷蔵庫',
    price: 30000,
    includeTax: 33000
  }
]

`for`と`map`比較

for

const cartItems = [...] // 長いので省略
for(let index = 0; index < cartItems.length; index++){
  const taxRate = 10  
  const tax = cartItems[index].price * (taxRate/100)
  cartItems[index].includeTax = cartItems[index].price + tax
}

forのイケてない点

forでは、下記のようにindexを指定する必要があります.
助長になりますし、可読性も良いとは思えません.

const tax = cartItems[index].price * (taxRate/100)
cartItems[index].includeTax = cartItems[index].price + tax

map

const cartItems = [...] // 長いので省略
cartItems.map((item)=>{
  const taxRate = 10
  const tax = item.price * (taxRate/100)
  return item.includeTax = item.price + tax
})

forと比べてイケている点

それに比べてmapはどうでしょうか？
mapでは下記のように複数の要素を順番に取り出します.

cartItems.map((item)=>{...}

順番に取り出したオブジェクトはitemという変数に渡され下記のように各パラメーターにアクセスできます.※名前は自由に決められます.
forのようにindexを指定する必要はありません.

const tax = item.price * (taxRate/100)
item.includeTax = item.price + tax

可読性もforよりかなりよいかと個人的には感じます.
ケースバイケースですが、積極的にmapを使っていきましょう！

最後に

2022年4月から新潟県佐渡島でwebエンジニアとして働いています！
普段は、幹事が得するグルメ予約サイトリザくるの開発しています！
お店によりますが還元される金額の単位は万〜です!
開発や、個人学習していくなかで「おっ」と思ったことを記事として発信しています.

rails generators 制限設定

koki-takishita — Mon, 10 Jan 2022 15:49:23 +0000

rails g コマンドで生成されるファイルを制限する

ドキュメント

`config/application.rb`内に下記のように設定する

config.generators do |g|
  g.jbuilder       false
end
① # p config.generators

各種設定項目はドキュメント内で確認できた Rails::Generators
コード①を有効化して、サーバログを確認すると下記のように設定項目を確認できる

ドキュメントに記述されていない項目...

skip_routesソース

わからなかったこと

ルーティング生成の有無の設定項目であるskip_routesは、railsガイド、APIドキュメント、その他の公式と思われるリソースを調べたが見つからず個人ブログなどの2次、3次などのリソースでしか知ることができなかった。

分かったこと

railsのリポジトリにて、Rails::ControllerGenerator::ControllerGeneratorオブジェクトclass_optionの引数にskip_routesが記述されていることを確認できた。上記のコードとどのように絡んでくるかはわかっていないが、skip_routes true or falseを記述することで、rails g controller実行の際に設定を読み込み、config.generators.skip_routes falseならば、ルーティング生成を無効にするという動きをすると思われる。

感想

APIドキュメントなどの公式リソースから情報を読み取っているが、もし公式リソースに情報がない、もしくは見つけられない時の調べ方に課題を感じた。

Vueコンポーネント一例

koki-takishita — Wed, 27 Oct 2021 18:01:37 +0000

はじめに

vue.jsの公式サイトで学んだことをアウトプット

vue.js 公式

コンポーネントとは

ある機能を持った付け外し可能な、部品(スクリプト)のことで、Vue.jsでは部品を組み合わせてページを完成させる.

例　順番付きリストのコンポーネント

<html>
  <head>
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <ol>
        <order_lists
          v-for="ol in order_lists"
          v-bind:item="ol"
          v-bind:key="ol.id">
        </order_lists>
      </ol>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Vue.component('order_lists', {
  props:    ['item'],
  template: '<li>{{item.text}}</li>'
})

var app = new Vue ({
  el: '#app',
  data: {
    order_lists: [
      { id: 0, text: 'aiueo' },
      { id: 1, text: 'kakikukeko' },
      { id: 2, text: 'sasisuseso' }
    ]
  }
})

出力

属性値を設定することで、コンポーネントの値を変化させる

<div id="app">
  <ol>
    <order_lists

      // 配列を一つずつ取り出してolに代入
      v-for="ol in order_lists"

      // item(変数)にolを代入
      v-bind:item="ol"

      // kyeを設定
      // 順番付きリストを扱う際はkeyを設定するのがベターらしい
      v-bind:key="ol.id">
    </order_lists>
  </ol>
</div>

Vue.component('order_lists', {

  // itemを取得後、テンプレートをレンダリング
  // propsでデータを受け取ることができる.
  props:    ['item'],
  template: '<li>{{item.text}}</li>'
})

vue サーバーからデータを取得して表示する

koki-takishita — Fri, 15 Oct 2021 15:43:41 +0000

前提条件

バックエンドはRails
自作のAPIサーバーからデータを取る
vue_cliで作成
パッケージ管理はnpm

一次情報

手順

axiosインストール
export default {}内にサーバーとやり取りするコードを記述
Rails側設定

axiosインストール(HTTP通信ができるようになる)

pakage.jsonがあるディレクリに移動後下記のコマンド実行

$ npm install axios --save

サーバーとやり取りするコードを記述

コンポーネントmethods内にaxiosのコード追記

-----------
  template
-----------

<script>
  import axios from [インストール先パス];

  export default {
  name: 'test',
  data: {
    test: []
  },
  methods{
    // メソッドreadが発火したら取りにいくという想定
    read(){
      axios
      .get('https://取得したいサーバドメイン名')
      .then((response) {

        // responseが実際に取得するデータ
        console.log(response);

        // responseの中のdata属性に取得したいデータが格納されている.
        // thisはvuecomponentオブジェクト 配列であるtestに格納している.
        // 取得するデータがJSONだとdataでいいっぽい APIそんな触らないから他のパターンもあるかも
        this.test = response.data;
      })
      .catch((error) {
        // handle error
        console.log(error);
      })
    },
  }
  };
</script>

長々と書いたが、実際に気にするのはどこから取得するかと、取得したデータの格納先今回記述したコードはaxiosのサンプルコードとほぼ同じ.サンプルコードを下記に示す.

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

Rails側設定

CORS対策でRails側の設定が必要

gem 'rack-cors'

config/initializers/cors.rbコメントアウトを有効に

# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.

# Read more: https://github.com/cyu/rack-cors

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://データを贈りたいパス'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

変更するのはoriginsの指定のみ
Railsサーバーを再起動させて、データをこれで取得できるはず.

TCP/IPとは

koki-takishita — Wed, 29 Sep 2021 17:22:04 +0000

TCP/IPとは

はじめに

TCP/IPの理解があやふやで毎回調べているので、一度まとめてみます.
この記事ではアプリケーション層に関して深堀ります.
他の層に関しては簡略化します.
図は参考サイトの図を使用しています.

参考サイト

TCP/IPとは

インターネットを通してデバイス同士の通信を確立する際のルール(通信プロトコルともいう).
TCPがルール、IPがIPアドレスを示している.

なぜ必要か

下記のようにデバイス同士の通信の際、個々のハードの構成、メーカー、OSが異なっていても通信できるようにするため. 通信の手順を統一することで、異なるデバイス同士の通信が可能になる.

【図引用】TCP/IPとは

仕組み

TCP/IPは通信の際に４工程を経て、通信を確立している. 下記に工程の図を示す.

【図引用】TCP/IPとは

図の通り物理的なEhernet(有線接続技術)からアプリケーションでのデータのやり取りまでのルールが決まっている. １層〜4層までの工程ひとつひとつに通信プロトコルがあり、これらの工程すべてを総称してTCPと言っていると思う.(自信なさげ) 今回は４層を詳しく見ていく.

４層を深ぼる

4層・アプリケーション層とは

webサーバー(アプリケーション・サーバー)とアプリケーション間の通信時の決まりごと(通信プロトコル)

【図引用】TCP/IPとは

Railsを使用すると実際は下記の通りになる.

webサーバー ⇔ アプリケーションサーバー ⇔ Rack ⇔ Rails

アプリケーション層プロトコル

webサイト上のやりとりはHTTP・HTTPS

HTTPはwebサーバーとアプリケーションの通信時のプロトコル. ブラウザからのリクエストであるGET・POST・PUTCH・UPDATE・DELETEがこれに当たる. リソース取得はGETデータの送信はPOSTといったルールがある.

メールのやり取りはSMTP・P0P3

メールのやり取りを行う際はSMTP・P0P3というプロトコルになる.

Railsでは使用する物によっては設定が必要.

Mailer設定

DHCP・DNSはアプリケーション通信をするための準備を行うプロトコル

DNSはドメインサーバーへアクセスし、ドメインのIPアドレスを取得することが目的です.

あくまでIPアドレスがなければ、webサイトへアクセスすることはできません.
DNSサーバは目的のドメインが見つかるまで、各DNSサーバーへアクセスしますが、毎回行っていると時間がかかるのでアクセスした情報をキャッシュに保存しておき、キャッシュの情報から目的のDNSサーバーへ直接アクセスすることができる.

【図引用】TCP/IPとは

終わりに

TCP/IPの理解度としては全体の20%程でしょうか. インフラを構築する際に知見が必要だと思うので、引き続き学習していきます.

dockerファイル作成

koki-takishita — Fri, 24 Sep 2021 02:51:45 +0000

dockerファイルとは

Docker イメージというコンテナの土台となるファイルのこと.

イメージに関するドキュメント(ja)

dockerファイルの基本的なコマンド

コマンドに関するドキュメント(ja)
FROM
OSを指定する.
```
FROM ubuntu:latest
```
RUN
使用するパッケージの指定とパッケージ保守プログラムを記載.
```
RUN apt-get update && apt-get install -y ruby ruby-dev
RUN gem install sinatra
```
CMD
Dockerを起動した時に走らせるプログラム
```
CMD ["/bin/bash"]
```
COPY
```
COPY something /new_dir/
```

実際に作成してみる

ディレクトリ作成

mkdir docker

dockerファイル作成

touch Dockerfile

# 今回の実習でCOPYするファイル
touch something

dockerファイルにプログラムを書き込む

# OSを指定する
FROM ubuntu:latest

# パッケージをインストール 「\」は改行しても１行とみなされる.
# 「&&」は複数のコマンドを同時実行 １行でまとめることでレイヤーを少なくする.
RUN apt-get update && apt-get install -y \
    bzr \
    cvs \
    git \

RUN mkdir app
COPY something /app/

# run後に走らせるプログラム shellを起動させている
CMD ["/bin/bash"]

buildしてイメージを作成

# .はカレントディレクトリを指定している.
docker build .

# 作成できているか確認
docker images

runしてパッケージがインストールされているか && somethingファイルが存在するか確認

docker run -it <image id>

# docker内でパッケージとファイルを確認 パッケージはbin/〜
ls

キャッシュをうまく使う

下記のように１行で記述すると、レイヤーの数を削減できるがパッケージの追加や編集の際にいちからbuildしてるとインストールに時間がかかってしまう。

RUN apt-get update && apt-get install -y \
    bzr \
    cvs \
    git \

ファイル編集時や構築時にはすべて１行づつ記述する.
キャッシュにより前回インストールしたものはインストールせずに進むため時間短縮になる。
すべてのプログラムが動くことを確認してから１行でまとめるのがベストプラクティス

RUN apt-get update
RUN apt-get install -y bzr
RUN apt-get install -y cvs
RUN apt-get install -y git

exit code :100

一度buildした後、再度ファイルを編集してbuildすると、エラーが起こる.
理由は不明だが、updateを記述しない状態でbuildするとエラーが発生する.
updateを記述することで解決する.

RUN apt-get update
RUN apt-get install -y bzr
RUN apt-get install -y cvs
RUN apt-get install -y git

GitHub flowとは

koki-takishita — Sun, 19 Sep 2021 02:17:09 +0000

はじめに

GitHubFlowについてまとめてみました。

GitHubFlowとは

GitHub Flowは「GitHub」の開発で使用されているワークフローであり、「git-flow」に比べてシンプルな構成になっています。
参考記事
- 詳細な解説記事
- git-flowとは(英語)

開発の流れ

作業を開始する際は、mainブランチから開発ブランチを切る。 ※ mainブランチは常にリリース可能な状態のこと
開発が完了したらリモートへpushし、PRを依頼する。
PRがOKならば、mainへマージする

実際にやってみる

リポジトリ作成
ローカルへclone
ブランチを切って編集
作業内容をpush
PRを依頼

リポジトリ作成

リポジトリを作成します。自分のGiuHubへアクセスしてリポジトリを作成しましょう。

HTTPSかSSHどちらかコピーしましょう。

ローカルでcloneしましょう。

$ git clone <コピーしたurl>

cloneしたらcdコマンドでcloneしたディレクトリへ移動します。

$ cd git-proactice

ブランチを切って編集

feature/add_sample.txtブランチを切リます。

$ git checkout -b feature/add_sample.txt

ファイルを追加して、ファイルを更新します。

# ファイル追加
$ touch sample.txt

# ファイル編集
$ vim sample.txt

ステージングエリアへ追加し、コミットします。

# 更新されていること確認
$ git status

# ステージングエリアへ追加
$ git add sample.txt

# コミット
$ git commit -m "new file add sample.txt"

# コミットされたことを確認
$ git log --oneline

作業内容をpush

# pushする前にリモートの変更がないか確認します。
$ git pull origin main

# push先はmainではなく、ローカルで作成したブランチです。
# mainは常にリリース可能状態にするためです。
$ git push origin feature/add_sample.txt

PRを依頼

github上でPRを贈ります。

マージして完了(実際はレビューした人が行います。)

cookieとセッションのアウトプット

koki-takishita — Fri, 17 Sep 2021 14:47:51 +0000

はじめに

cookieとセッションの理解が曖昧なのでアウトプット
今回は概要のみで具体的にどこに、なんのデータが入ってくるかは書かない

ブラウザとwebサーバー間の通信時は、前回の情報を保持しない

ブラウザとwebサーバー間のデータのやり取り(HTTP通信)はステートレスで、前回の情報を保持しません。
つまり、ECサイトでショッピングカートに商品を入れ、購入ボタンを押し、確認ページに飛ぶ際にはショッピングカートの情報を保持しなければなりません。
しかしステートレスな通信では前回の情報を保持できないため、商品の情報を次のリクエスト時には忘れてしまいます。

ECサイトでのステートレスな流れ

上記のようにステートレスだと、前回のカートの中に入っていた情報を覚えていません。
そのため２回目のレスポンス時には、カートに何も入ってない状態で返ってきてしまいます。
これでは、ECサイトので購入の処理、ログイン状態の保持ができなくなってしまいます。

cookieのおかげで前回の情報を保持できる

状態を保持するためにcookieという仕組みがあります。
cookieとはサーバーとwebサーバー間の状態を管理することができます。
順序を下記に示します。
1.webサーバーがwebブラウザに状態を区別するidを割り当てHTTPヘッダーに含め、レスポンスを返す
2.ブラウザはリクエストを送るたびに、webサーバーから受け取ったidをHTTPヘッダに含めリクエストする
3.サーバーはそのidからコンテンツの内容に紐付いている情報をもとに、内容を変化させユーザーに返す
2,3を繰り返すことによって、状態を保持する事ができる。

cookieを用いたステートフルな流れ

最初のリクエスト時にwebサーバーはidを発行します。
それをcookieとしてブラウザに返します。
ブラウザは受け取ったcookieをヘッダーに含めリクエストします。
ブラウザから受け取ったcookieのデータから、ブラウザを識別します。
識別後、ブラウザごとに内容をカスマイズしてブラウザに返します。

セッションとは

セッションとはwebサーバーとブラウザ間の関連のある、一連の処理流れのことを指します。
ECサイトの「商品をカートに入れる」→「購入確認ボタンを押す」→「注文を確定する」といった一連の処理流れのことです
複数のブラウザから、一連のセッションを管理するにはセッションIDを用いて管理します。
セッションIDとはブラウザを識別するためのIDのことです。
ブラウザからwebサーバーにリクエストが来た際に、webサーバーが発行しcookieに格納後、ヘッダーに含めてレスポンスとして返します。
セッションIDはどのブラウザがセッションのどこまで処理が進んだか管理することができます。
セッションデータを用いて、ログイン情報や、ECサイトならカートに商品は入っているのかなどを参照します。
セッションデータはセッションIDに紐付いているため、セッションIDさえ識別できればデータを取り出せます。

おわりに

まだ理解があやふやです。
特にセッションまわり
今回は概要のみにしましたが、次回は厳密にどこにデータが入るかコードで示した記事を書きます。

tmux コマンドリスト

koki-takishita — Wed, 15 Sep 2021 17:10:24 +0000

はじめに

tmuxの頻出コマンドリスト + 用語説明
()内に筆者のイメージを書いてます。厳密には異なるのであくまで参考程度に

新規セッション作成

セッションとは言い換えると作業エリア(セッション)
セッションの中では画面分割、タブ切替などキーボードのみで操作可能
また複数のセッションを作成可能、プロジェクトごとにセッション(作業エリア)を切替可能

# セッション作成
$ tmux new -s セッション名(任意の名前)
# セッション名変更
$ prefixキー + $

セッション削除

# 指定して削除
$ tmux kill-session -t セッション名
# すべてのセッション削除
$ tumx kill-server

アタッチ

作成したセッションにアタッチする(接続する)

# セッション一覧取得
$ tmux ls
# セッションにアタッチ(接続という表現がしっくりくる)
$ tmux attach -t 名前
# 上記と等価
$ tmux a -t 名前

デタッチ

アタッチ(接続)中のセッション(作業エリア)からデタッチ(ログアウト)する

# セッションデタッチ(接続中のセッションからログアウトする)
# prefixキーは設定ファイルで変更可能(デフォルトは CTR+q)
$ prefixキー + d

ウィンドウ

セッション内でタブのような役割をする。
タブごとに役割を分けるなど結構使う

# 新規作成
$ prefixキー + c

# ウィンドウ名前変更
$ prefixキー + ,

# ウィンドウ切替
$ prefixキー + インデックス番号
# 次のウィンドウ 1→2 
$ prefixキー + n
# 戻る 2→1
$ prefixキー + p

# ウィンドウ削除
$ prefixキー + &

# ウィンドウリスト
$ prefixキー + w

# ウィンドウ検索
$ prefixキー + f

パネル

画面分割ができる
ターミナル専用などにして使ったりする
筆者はvimで分割しがちなので正直あまり使わない...

# 画面分割(横)
$ prefixキー + "

# 画面分割（縦）
$ prefixキー + %

# 削除
$ prefixキー + x

# 画面切替
prefixキー + o

# 番号が表示されている間に押す
prefixキー + q

おわりに

バッファと設定ファイルはまた別記事で書きます。
正直筆者自身上記の２つはほとんど使ってないので、使いこなしだしたら記事を書ます。

NERDTree コマンドリスト

koki-takishita — Tue, 14 Sep 2021 11:15:28 +0000

ファイル操作

cmd	分割	カーソル
o	なし	ファイル
i	あり(横)	ファイル
s	あり(縦)	ファイル
go	なし	Tree
gi	あり（横）	Tree
gs	あり（縦）	Tree

ディレクトリ操作

cmd	動作説明
O	子要素をすべて展開
x	`カーソル上`の親要素を閉じる
X	`カーソル上`の子孫要素すべて閉じる

Tree間移動

cmd	動作説明
P	ルートディレクトリへカーソル移動
p	親ディレクトリへカーソル移動
K	子要素間で一番最初の要素へカーソル移動
J	Kと反対の動き

Tree構造操作

cmd	動作説明
C	ルートディレクトリを`カーソル上`のディレクトリに変更
u	ルートディレクトリを、現在のルートディレクトリ一つ上のディレクトリへ変更
U	tree構造は展開したまま、uの動作をする
m	カーソル上のファイル、ディレクトリの操作(コピー、移動、削除など)

ブックマーク

cmd	動作説明
B	ブックマーク表示
:Bookmark [任意の名前]	カーソル上の要素をブックマークへ登録
:OpenBookmark [ブックマーク指定]	指定したブックマークを開く
:ClearBookmarks [ブックマーク指定]	ブックマーク削除

DEV Community: koki-takishita

[JS]forではなくmapを使う

ドキュメント

forとmapコード例

forとmap比較

最後に

rails generators 制限設定

rails g コマンドで生成されるファイルを制限する

config/application.rb内に下記のように設定する

ドキュメントに記述されていない項目...

わからなかったこと

分かったこと

感想

Vueコンポーネント一例

はじめに

コンポーネントとは

例 順番付きリストのコンポーネント

出力

vue サーバーからデータを取得して表示する

前提条件

一次情報

手順

axiosインストール(HTTP通信ができるようになる)

サーバーとやり取りするコードを記述

Rails側設定

TCP/IPとは

TCP/IPとは

はじめに

参考サイト

TCP/IPとは

なぜ必要か

仕組み

４層を深ぼる

4層・アプリケーション層とは

webサーバー ⇔ アプリケーションサーバー ⇔ Rack ⇔ Rails

アプリケーション層プロトコル

webサイト上のやりとりはHTTP・HTTPS

メールのやり取りはSMTP・P0P3

DHCP・DNSはアプリケーション通信をするための準備を行うプロトコル

終わりに

dockerファイル作成

dockerファイルとは

dockerファイルの基本的なコマンド

実際に作成してみる

ディレクトリ作成

dockerファイル作成

dockerファイルにプログラムを書き込む

buildしてイメージを作成

runしてパッケージがインストールされているか && somethingファイルが存在するか確認

キャッシュをうまく使う

exit code :100

GitHub flowとは

はじめに

GitHubFlowとは

開発の流れ

実際にやってみる

リポジトリ作成

ブランチを切って編集

作業内容をpush

PRを依頼

cookieとセッションのアウトプット

はじめに

ブラウザとwebサーバー間の通信時は、前回の情報を保持しない

ECサイトでのステートレスな流れ

cookieのおかげで前回の情報を保持できる

cookieを用いたステートフルな流れ

セッションとは

おわりに

tmux コマンドリスト

はじめに

新規セッション作成

セッション削除

アタッチ

デタッチ

ウィンドウ

パネル

おわりに

NERDTree コマンドリスト

ファイル操作

ディレクトリ操作

`for`と`map`コード例

`for`と`map`比較

`config/application.rb`内に下記のように設定する

例　順番付きリストのコンポーネント