OmniAICreator/Qiita-1.07M huggingface dataset:
[Rails] ActiveRecord

# ActiveRecord
ActiveRecordとは
Railsが採用している ORM (Object RDB Mapper) です。

ModelとDBの間でRuby → SQL に翻訳をしてくれています。

基本的にDBにはDB言語としてSQLが使われており、
SQLでないとDBの操作ができませんが、
RailsにはModelにActiveRecordが適用されているおかげで、Rubyを用いてDBからデータを探したり、持ってきたりすることができます。
(厳密にはModelにApplicationRecordを介してActiveRecordが適用されているため)

---
Modelを見ると下記のようになっていると思います。これは
ApplicationRecordにActiveRecordを継承し、
user.rbなど、その他のModelにApplicationRecordを継承しているということです。

ちなみにself.abstract_class = trueの詳しい意味は分かりませんが、
必要性・意義については下記の通りです。

ActiveRecord::Base を継承したクラスをモデルとして作成すると、Rails はそのクラス名に対応したデータベースのテーブルを自動的に探そうとします。対応するデータベースのテーブルを用意しない場合は、self.abstract_class = true を書く必要があります。なので
ActiveRecord::Base を継承したクラスを作成し、さらにそのクラスを継承させたい場合にはself.abstract_class = true と書く必要があるそうです。

```application_record.rb
class ApplicationRecord < ActiveRecord::Base
  self.abstract_class = true
end
```

```user.rb
class User < ApplicationRecord
  
end
```

# メリット
モデルおよびモデル内のデータを表現する
モデル同士の関連付け(アソシエーション)を表現する
関連付けられているモデル間の継承階層を表現する
データをデータベースで永続化する前にバリデーション(検証)を行なう
データベースをオブジェクト指向スタイルで操作する
Rubyで直感的に書ける
どのDBを使用していてもRubyで同じように書ける


# CRUD
CRUDとは、4つのデータベース操作を表す「Create」「Read」「Update」「Delete」の頭字語です。Active Recordはこれらのメソッドを自動的に作成するので、テーブルに保存されているデータをアプリケーションで操作できるようになります。

Create(生成)　Read(表示)　Update(更新)　Delete(削除)


# ActiveRecordメソッド
モデルがテーブル操作に関して使用できるメソッドです。
テーブルに情報を保存したり取得するために使用します。
CRUD順に主要なメソッドを紹介していきます。

#○Createメソッド

メソッド |	用途                                  
------| ------------------------------------- 
new   |クラスのインスタンス（レコード）を生成する 
build |クラスのインスタンス（レコード）を生成する 
save  | クラスのインスタンス（レコード）を保存する 
create| クラスのインスタンス（レコード）を生成する と同時にDBへ保存する。

#○Readメソッド

メソッド |	用途                                  |
------| ------------------------------------- |
all   | テーブルから全レコードを配列として取得
first | テーブルのidが一番小さいレコードを取得
last  | テーブルのidが一番大きいレコードを取得
find  | 引数に入っている数字と同じidのレコードを取得
find_by| 引数に入っている条件と合っているもので一番若いidのレコードを取得
where |引数に入っている条件と合っている全てのレコードを取得
order | 引数に入っているカラムを:asc(昇順)または:desc(降順)に並び替えてレコードを取得
select| 引数に入っている名前のカラムのみを取得
limit | 引数に入っている数字の数だけidの若い順にレコードを取得


#○Updateメソッド

メソッド |	用途                                  |
------| ------------------------------------- |
update| findやfind_byで取得したレコードを元に更新
update_by|複数のレコードを一度に更新
update_all|全てのレコードを一度に更新

#○Deleteメソッド

メソッド  | 用途                                  |
-------| ------------------------------------- |
destroy| findやfind_byで取得したレコードを削除
destroy_by|複数レコードを一括削除
destroy_all|全てのレコードを一括削除

---
この記事は下記２つの記事を参考させていただきました。
https://railsguides.jp/active_record_basics.html#active-record%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

https://qiita.com/ryokky59/items/a1d0b4e86bacbd7ef6e8
Reactでいい感じの拡大サブウィンドウを実装する ① 入門編

# Reactでいい感じのサブウィンドウを作れるパッケージを見つけたので紹介します。

今回使用するパッケージ : react-rnd 
https://github.com/bokuweb/react-rnd

上記のパッケージを使うといい感じのウィンドウを作成できます。

![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606623/65a1f8a3-1f10-c394-24ee-ca0b70a0bd77.gif)

# 使い方

## プロジェクト作成

```
npx create-react-app my-app
```

## パッケージのインストール

``` 
yarn add react-rnd
```

## App.js　のファイルを以下の内容に変更

``` javascript
import "./App.css";
import React, { useState } from "react";
import { Rnd } from "react-rnd";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={() => setIsOpen(true)}>サブウィンドウを開く</button>
        {isOpen ? (
          <Rnd
            style={{
              background: "#fff"
            }}
            default={{
              x: 0,
              y: 0,
              width: 320,
              height: 200
            }}
          >
            <button onClick={() => setIsOpen(false)}>
              サブウィンドウを閉じる
            </button>
          </Rnd>
        ) : (
          <></>
        )}
      </header>
    </div>
  );
}

export default App;
```

やってることは、サブウィンドウで表示したい内容をRndの中に書くだけです！
これだけでいい感じのサブウィンドウが作れるので、よかったら使ってみてください

次回は[拡大縮小](https://qiita.com/aokisinn1192/items/dd5f2598aef88d5a824f)の方法を書いていきます

[まとめ記事](https://qiita.com/aokisinn1192/items/32ade691b0fc60dedef0) もあるのでよければこちらもみてください
Vagrant + Virtulbox CentOS7.8 を構築そして共有フォルダを作成した時にエラーで詰まった話

# Vagrant + Virtulbox CentOS7.8 + Laravel6系
上記の構成で環境構築した時によくホストOSとゲストOSとの
共有を設定する時にエラーで詰まって解決まで３日ぐらいを使って
やった事を書きます。

Vagrant関連はVersionに依存しまくるので
Version記載は意識して備忘録投稿します。

訳あってmacOS Mojaveです。
・ProductName:　Mac OS X
・ProductVersion:　10.14.6
・BuildVersion:　18G6042

Homevrew で cask 一元管理
・vagrant 2.2.13
・virtualbox 6.1.16,140961

LAMP環境
CentOS7.8構成
・Apache/2.4.6 (CentOS)
・PHP 7.3.24 (cli) 
・mysql  Ver 14.14 Distrib 5.7.32
※conf設定はそれぞれだと思うので省きます。

Composerをインストール
※インストール方法は長くなるので省きます。
・Composer version 2.0.7

ローカル環境なのでCentOSはいつものセキュリティを全部無効
・SELinux 無効
・ファイーウォール無効

##Laravelインストール

```
$vagrant ssh
$cd /vagrant
$composer create-project --prefer-dist laravel/laravel laravelsample "6.*"
```

## Laravelプロジェクトの作成完了後、Apacheディレクトリへ

```
$cd /var/www/html
$sudo ln -s /vagrant/laravelsample laravelsample
```

いざ確認。
速攻エラー！！ orz....

内容は以下↓

###Vagrant環境でLaravelを実行してアクセスした時にPermission denied問題
ログファイルを作る際にエラーになる、あるある現象

やったこと
>LaravelでCreateしたプロジェクト配下実行権限を777にしたら解決したよ！

の記事を目にする。

```
$ sudo chmod -R 777 laravelsample
```

・・・解決しねんだわ

>共有フォルダのオーナーがapacheユーザじゃないからダメだからよ！

の記事を目にする。

```Vagrantfile
config.vm.synced_folder ".", "/vagrant",
 :owner => 'apache',
 :group => 'apache',
  mount_options: ['dmode=777','fmode=755']
```

を追加

Vagrant up時にエラー・・・ orz

・・・解決しねんだわ
<br>
<br>
だが、LaravelプロジェクトディレクトリのオーナーとグループはApacheである必要がある
のは理解できた。

### Guest Additionsのバージョンが正しくない？
>　「vagrant-vbguest のプラグインを入れたら解決したよ」の記事がいっぱい

これで解決だ！！

```shell
$ vagrant plugin install vagrant-vbguest
```

・・・解決しねんだわ


どうやら調べていくとconfig.vm.synced_folderの記述ルールが変わってるみたい。

```shell
config.vm.synced_folder ".", "/vagrant",
     owner: "apache",
     group: "apache"
```

見れた！！！

３日ぐらいかかった（爆汗）

#教訓
まずエラーの内容を熟読して解決策を考える。
そして公式リファレンスを読み直す。

英語だからといって避けて、日本語で書かれた
解決策を拾い読みするとこうなるという
教訓でした。

みんなも英文エラーをちゃんと読もうね！
じゃ！
my_helpで自分だけのメモを作る

\![macOS-11.1](<https://img.shields.io/badge/macOS-11.1-brightgreen>) \![ruby-2.7.2p137](<https://img.shields.io/badge/ruby-2.7.2p137-brightgreen>) 


# Preface (はじめに)

あまり使わないコマンドの使い方や, ターミナル上のツールを久しぶりにアップデートしたら出てきたエラー文を無くす解決法, その場その場で調べて解決では時間の無駄になる. 

こういった問題は\`my\_help\`というEmacsのorg-modeでメモを作り, それらを一律管理するツールで解決することができます. 本記事はその\`my\_help\`のインストールや主に使うコマンドを紹介します. 


# my\_help

インストールは

```
> gem install my_help
```

入ったかどうか確認するためにとりあえず以下のコマンドを実行. 

```
> my_help
```

以下のような出力が返ってくればインストールは無事完了.

```
Commands:
  my_help delete HELP             # delete HELP
  my_help edit HELP               # edit HELP
  my_help git [push|pull]         # git push or pull
  my_help help [COMMAND]          # Describe available commands or one specific command
  my_help list [HELP] [ITEM]      # list all helps, specific HELP, or ITEM
  my_help new HELP                # make new HELP
  my_help set_editor EDITOR_NAME  # set editor to EDITOR_NAME
  my_help setup                   # set up the test database
  my_help version                 # show version

```

以下によく使うコマンドだけを記述します. 


## list

```
> my_help list
```

と入力すると, いくらか出力が出た後, 最終的に

```

List all helps
       org: - emacs org-modeのhelp
      todo: - my todo
     emacs: - Emacs key bind

```

という出力が返ってくるはずである.

これは現在自分が持っているmy\_helpのメモである. 


## new

自分に合わせたmy\_helpのメモを作りたい時は

```
> my_help new memo
```

と打つ. これにより

```
> my_help list
-> 
List all helps
       org: - emacs org-modeのhelp
      todo: - my todo
      memo: - ヘルプのサンプル雛形
     emacs: - Emacs key bind

```

新たにmemoというmy\_helpのメモが作成されました. 


## edit

先ほど作ったmemoを編集して自分だけのメモにしていく.ただ, その前に編集する際に用いるエディタを指定する. 

```
> my_help set_editor emacs
```

その後, 

```
> my_help edit memo
```

と打ち, \`Shift-Tab\`で各項目を展開すれば, 

```
* head
 - ヘルプのサンプル雛形
 -   headに常に表示される内容を記述
* license
 -      cc by Shigeto R. Nishitani, 2016
* item_example
 - itemの例
```

と表示される. 

これで自分の好きなようにmemoを編集することができます. 


# 参考資料

-   [my\_help (GitHub)](https://github.com/daddygongon/my_help)
NullReferenceException: Object reference not set to an instance of an object の解決例

## エラーの様子
####エラー文
![スクリーンショット 2020-12-28 16.25.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555157/b7b93c4e-6e24-edc7-444f-6f32fe28db3c.png)
和訳サイトにかけたところ
`NullReferenceException：オブジェクト参照がオブジェクトのインスタンスに設定されていない。`
とのこと。

#### エラーで指定されているファイルの全体（修正前）

```
using UnityEngine;
using UnityEngine.AI;

[RequireComponent(typeof(NavMeshAgent))]
[RequireComponent(typeof(EnemyStatus))]
public class EnemyMove : MonoBehaviour
{
    [SerializeField] private LayerMask raycastLayerMask;
  // [SerializeField]private PlayeController playercontroller;
  private NavMeshAgent _agent;
  private RaycastHit[] _raycastHits = new RaycastHit[10];
  private EnemyStatus _status;

  private void Start()
  {
    _agent = GetComponent<NavMeshAgent>();
  }

  // private void Update()
  // {
  //   _agent.destination = playerController.transform.position; 
  // }

  public void OnDetectObject(Collider collider)
  {
    if(!_status.IsMovable)
    {
        _agent.isStopped = true;
        return;
    }
    if(collider.CompareTag("Player"))
    {
      _agent.destination = collider.transform.position;
      
      var positionDiff = collider.transform.position - transform.position;
      var distance = positionDiff.magnitude;
      var direction =positionDiff.normalized;
      var hitCount = Physics.RaycastNonAlloc(transform.position,direction,_raycastHits,distance,raycastLayerMask);
      Debug.Log("hitCount: " + hitCount);
      if(hitCount == 0){
        _agent.isStopped = false;
        _agent.destination = collider.transform.position;
      }
      else
      {
        _agent.isStopped = true;
      }
    }
  }
}
```

これらからわかるように、今回のエラーは`if(!_status.IsMovable)`が呼び出せていないことエラーだった。

## 解決までの試行錯誤
とりあえず検索したところエラーの解決方法はスペルミスか、inspectorのcomponentのattachし忘れを確認するべしとのこと。
確認したがあっていた。困ったので参考にしている本をまた最初から見直した。その結果記述漏れしている部分があり、追記によって修正できた。

## 解決方法

このファイルで使える変数の用意だけでなく、他のファイルで決めている値（component）をもってくる記述をすることでエラー解消した。具体的には下記の通り。

```
略
  private void Start()
  {
    _agent = GetComponent<NavMeshAgent>();
    _status = GetComponent<EnemyStatus>();
  }
略
```

※`EnemyStatus`は親クラスにattachしていたが、無条件に子要素にそれがそのまま適用されることはなかったので、GetComponentする必要があった。

## 原因
requireによって呼び出されたクラスをインスタンス化させることをしなかったため。

詳しく書くと、ファイルを跨いでデータのやり取りをする場合は

- `[RequireComponent(typeof(EnemyStatus))]`のように指定されたファイルを読み込み、
- 値の入れものを`private EnemyStatus _status;`のように準備し、
- `_status = GetComponent<EnemyStatus>();`のように呼び出されたクラスをインスタンスで使えるようにする

という手順が必要で、その３つ目を飛ばしてしまったのが原因だった。


## 参考
別パターンの解決方法：
https://qiita.com/KONTA2019/items/3a47a1a297bb18e2b795
糞なスペックな私が応用情報処理試験を受けた結果

**まぁ、落ちましたとさ**

                                               ―――――(終)――――


#はじめに
10月応用情報処理受けましたが、落ちましたっと。
それだけだと短いので軽く書いていこうと思います。

なお、応用情報処理は2回目ですね。何年か前に受けたっきりです。

#受けようとしたきっかけ
コロナのせいか、暇すぎて。(=ﾟωﾟ)ﾉ
後、転職時にあったら多少はプラスになるかなとか考えてました。

そのため、試験ギリギリになって
「そうだ、応用情報処理受けておくか」
となりました。
基本情報処理もありますが、4月みたいにまた中止になる可能性がありますからね。
と言っても、応用もあるんですがね？

#結果

午前：45点
と、全く足りてないやん？

36問で、12問分不足してましたね。うん。

ちょっと（？？）やりこみ不足でした。

#勉強方法
8月頭から休みなので、それまでに以下をやりました。
※10日ぐらいですかね。

1．午前のテキスト選び → 皆さんよく使われるキタミ式のです。
2．勉強時間割当 → 8月頭から夏休みなので夏休み1週間は8時間ぐらい（できれば）。
平日は仕事から帰ってきたら4時間しかないので２～３時間割当。休日は6時間割当。
睡眠時間は6時間切らないように！！

午前は、テキスト見つつ、応用情報処理過去問道場回していく感じですね。
午後は、どういう感じで出題され、問題を書いていくかというところを
しっかりと抑えて置く形でいけるか？

と、言う感じでしょうか。

##8月中
午前テキストの、不明な単語を紙に書きつつ、
応用情報技術者過去問道場 を回してました。
(結局、何回やったか不明)
ついでに、数学の問題解きつつですかね？
一応計算問題もあるのでそれ対策ってことで。

勉強は、休日は家族がいる所でやってましたね。
自室は静かだけど、試験中は回り、静かだけど人が居るので気が散るかと思いましてね。
多少は訳になった気がします。

##9月中
午前テキストが、終わらん！！
と、いう事で・・・中ぐらいまで午前をやってました。

後半に午後の過去問をやったのですが、だめだ・・・これ、テキスト買ってこないと多分無理！
となりましたので、技術評論社の奴を買ってきました。
本当はお勧めのテキストがあったのですが、売ってないんですよねーーうーんっと。

##10月に入り‥‥‥‥‥
さて、10月に入り受験票きました。
基本情報と、情報セキュリティーの試験が中止となったようですね。
そして、応用情報も試験地が、神戸から大阪に‥‥‥

逝くの嫌なんだけど？ってなったんだが、勿論行きました。

##試験当日
6時半ぐらいに起きて試験に向かいました。
梅田スカイビル30F(だったかな）と、高く、眺め最高ですね！！
「ふはははは！人がゴミの様だ！！！」とか、昔ならやってたわ。

##試験を受け終えて
いえね‥‥‥試験は、午前は感触よかったんですけどねぇ？
午後は、作文難しかったですね。そっちで落ちたと思っていました。

#まとめ

次回は、2021年4月ですね。
どうしよう？
試験勉強中にちょっと燃え尽きてたんですよね。メンタルが………
1月になって1周目ぐらいにどうするか考えますわ。
多分、受けたら点数は伸びるだろうと思いますけどね。
いや、今回落ちても受かっても、もう受けないとか言ってたんですが、
3度目の正直ということもあり。Uum

#追記

いやーー・・・
メンタル、凄かった。プレッシャーと言えばいいのかな。
完全にマイナス方面になっているときの状態で、胃がキリキリしていく感じでしたね。
9月からずっと。
午前の問題をループしまくっているときに、なんで間違うねん同じところ、
とか、若干追い込み入れていたせいかもしれませんね。
仕事は、今はリモワと併用で出社したりとかありましたので、
出社時に人と会いにくい状態だったのはよかったかもしれません。
※ちょっと牙剥いて話しそうでしたので、ね。

試験前までそんな感じでした。
途中で運動して発散したりもしてましたが、どうも難しかったです。

後は、記憶力か。
劣ってきている気はしないのですが、元から阿呆なところ、特に暗記系はすげー苦手なので。
こういう試験は結構厳しいです。
WSL1と同じ感覚でWSL2を使ったらプログラム実行速度が爆遅化した

ごきげんよう、ちゃまおです。

先日、C言語で作成したシミュレーションプログラムの実行速度を向上させて、作業効率を改善させる事を理由に、ゲーミングPCを予算購入してもらいました。
初めて触るゲーミングPCだったので、ハイテンションになりながら、プログラミング環境を整え、シミュレーションを回した結果...爆速化せず、むしろ爆遅化しました。

#スペック比較
今まで使用していたPCと、今回購入してもらったPCの主なスペックを比較したものが、以下の表です。CPUのカッコ内数値は、CINEBENCH R23のSingle coreテスト結果です。今回購入してもらったPCの方では、専用ソフト使ってPCのパフォーマンス設定が出来たので、CPUの性能が最大限に発揮される設定としました。

||今まで使用していたPC|今回購入してもらったPC|
|:--|:--|:--|
|CPU|i7-4770HQ (593pts)|i9-10980HK (1304pts)|
|メモリ|16GB|32GB|
|SSD|500GB|2TB|
|GPU|Intel Iris Pro Graphics 5200|NVIDIA GeForce RTX 2070 Super|
|WSLのバージョン|WSL1|WSL2|

CPUのベンチマーク結果を見ると、今回購入してもらったPCの方が約2.2倍良いので、プログラム実行速度は爆速化するはず！

#プログラム実行速度の計測方法
コンパイル→実行→結果のグラフ作成の処理内容を記載したシェルスクリプト実行時に、timeコマンドをつけて計測しました。

マシンによる性能差を見たいだけなのと、機密情報に関わる為、実行したプログラムのソースコードは非公開とさせて頂きます。また、普段は100回くらい連続で回していますが、今回は1回分としました。

#プログラム実行速度比較(1回目)
timeコマンド結果の"real"の数値を抜き出したのが、以下の表となります。

||今まで使用していたPC|今回購入してもらったPC|
|:--|:--|:--|
|実行速度|0m26.997s|1m43.908s|

…あれ？？？今回購入してもらったPCの方が約3.8倍遅いぞ...？？？

#原因っぽいものの特定と、プログラム実行速度比較(2回目)
上記の問題が生じてから数日間は、原因が一切不明で、詰んでいました。

今まで使用していたPC上では、VSCodeの既存のターミナルをWSL1にしていた為、今回購入してもらったPC上でも同様の環境にしようと思い、[こちらの記事](https://qiita.com/EBIHARA_kenji/items/12c7a452429d79006450)をぼんやりと読んでいたところ、WSL2ではWindows側のファイルアクセスが悪いのでは？と言う考えが出てきました。
1回目の実行速度比較の際は、2台のPCとも、「WSL上からWindows側のファイルにアクセスして実行」していたのですが、今回購入してもらったPCの方で、試しに「WSL2上で実行」してみた結果、以下の通りとなりました。

||今まで使用していたPC|今回購入してもらったPC|
|:--|:--|:--|
|実行環境|WSL1上からWindows側のファイルにアクセスして実行|WSL2上で実行|
|実行速度|0m26.997s|0m11.240s|

やっと、今回購入してもらったPCの方が約2.4倍速くなりました！！！

#現時点で取れる対策
自分は普段、Windows側でソースコードの管理をしている為、WSL側でソースコードの管理をする事に抵抗があります。その為、WSL上で実行した後に、関連ファイルをWindows側にコピーするしか対策は無いのかなぁと思っています。
技術的負債（Technical Debt）とは何かをやさしく説明

#はじめに
技術的負債についての記事は沢山ありますが、開発に携わる全ての人々（特にビジネスチーム）が「やさしく理解」できる記事が欲しかったので、自分で作成しました。
PMP-ACP Exam Prepを元に意訳、再構成しているため若干片言ですがご留意ください。

#技術的負債とは
技術的負債とは、プロダクトが作られる中で日常的に整理整頓・メンテナンス・標準化などを行わないことによって発生する作業バックログのことです。将来的に仕事を進めやすくするために実施しなければならない作業のバックログでもあります。
技術的負債は改修コストの増加と密接に関わりがあります。標準化や整理整頓を延期し続けることで、将来的に莫大な開発コストがかかる可能性があります。

#技術的負債を車に例えると
私達は車を運転しますが、車をメンテナンスする必要もあります。もしメンテナンスをせずに運転し続けると、最終的に車は故障し、運転が全くできなくなります。ソフトウェア開発においても同様に、チームは生産性が高いことが大事ですが、生産効率を維持・向上し続ける必要もあります。

#技術的負債への解決策
ソフトウェア開発において技術的負債への最も効果的な解決策はリファクタリングです。
（リファクタリングとは何かは割愛）
私達は頻繁にリファクタリングを行うことで、コードを綺麗な状態に保ち、技術的負債を減らす必要があります。

チームに作業見積もりを確認する際には、リファクタリングを彼らの習慣的なルーチン作業として行うことが出来るよう、リファクタリングの時間も含めて確認する必要があります。

#リファクタリング
リファクタリングは年末の大掃除ではなく、日常の衛生活動として行うべきものです。これは、リファクタリングの時間をまとめて設けるのではなく、私達の日常的な作業の中に組み入れるものであることを意味します。
チームがリファクタリングと技術的負債を減らす時間を設けることには覚悟と勇気が必要かもしれません。なぜなら、ビジネス側からは機能を提供し続けることを推し進められる可能性があるからです。そのような場合には、技術的な負債を減らし、時間をかけてリファクタリングを行うことが彼らの最善の利益になることを説明する必要があります。

#おわりに
作業のリファクタリング、整理整頓、標準化や簡略化に時間をかけることで、チームが将来的により多くの機能を生み出すことが出来るようになります。技術的負債を減らすことで開発環境が整理され、私達が作るプロダクトが整理・効率化・標準化されます。
プロジェクトを効果的に進め成功させるために、技術的負債をなくしていきましょう。
docker-compose up 実行時エラーが出たときのDockerの停止、再起動方法　【Cannot start service database: driver failed programming external connectivity on endpoint 】


#【Dockerの停止、再起動方法について】

docker-compose upして

```ruby
Cannot start service database: driver failed programming external connectivity on endpoint 
```

エラーが出た際などに使える、現在立ち上がっているDockerの確認と停止方法です。

##①  Dockerの現状確認
```ruby
docker ps
```
を実行し現在立ち上がっているDockerの確認をします。

```ruby
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                               NAMES
4db7e2473829        mysql:latest        "docker-entrypoint.s…"   8 days ago          Up 8 days           0.0.0.0:3306->3306/tcp, 33060/tcp   hello_world_database_1
```
こんなかんじで表示されます。
（見にくいのでウィンドウを画面いっぱい横幅広げたほうがいいですね）

CONTAINER IDを確認しコピー
（上記だと 4db7e2473829 をコピーします。）

##②Dockerの停止
```ruby
docker stop 'CONTAINER ID'
```
を実行する。
'CONTAINER ID' には先程コピーした値が入ります。

今回だと

```
docker stop 4db7e2473829
```

となりますね。

##③再度Dockerの確認　（指定したDockerが停止できているか）

再度

```
docker ps
```
を実行します。

```ruby

CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
```

Dockerが全て停止していると、上記の様な表示（値の入っていない状態）になっています。
②で停止したDocker以外に起動しているDokerがあった場合は停止したDocker以外の値が表示されます。

##④Dockerの起動
上記の作業が完了したら、いつもどおり

```
docker-compose up
```
を実行しましょう。エラーなく実行できるはずです。
Githubでストーリーポイントを管理・集計する方法

## 前提
ZenHubやJIRAを導入するほどでもない場合に、Githubのissueのラベルに「SP:任意の数値(例：SP:0.5)」という形式でストーリーポイントを付与する運用にすることで、未完了のストーリーポイントの合計を集計できます。

## Github APIを叩いて未完了のissue一覧をjsonで取得
`curl -H "Authorization: token [API Token]" "https://api.github.com/repos/:owner/:repo_name/issues?state=open"`

## jqでjsonからラベルのストーリーポイントを集計する
`cat issues.json | jq -r '[.[] | .labels[] | select(.name | startswith("SP")) | .name | split(":")[1] | tonumber] | add'`

## 参考記事
[GitHubのPR内容をcurlで取得する \- Qiita](https://qiita.com/do7be/items/316d535c786f244dc69e)

[jq コマンドを使う日常のご紹介 \- Qiita](https://qiita.com/takeshinoda@github/items/2dec7a72930ec1f658af)

jqコマンドでJSONのキーの集計(キーの数・合計・平均・最大・最小等を求める)を行う | 俺的備忘録 〜なんかいろいろ〜 https://orebibou.com/ja/home/201605/20160509_001/

[jqを使って少し複雑な条件式でフィルタリングする方法をまとめてみた \- Qiita](https://qiita.com/ttiger55/items/150e9a18313a55841a32)

[cURL \+ jq でGithub IssuesをCSV出力する \(v3 API\) \- Qiita](https://qiita.com/fukmaru/items/30415652c40f90ae3ff9)
【初心者でもわかる】市松模様（いちまつもよう）やチェック柄をCSSで再現

#どうも7noteです。市松模様やチェック柄を再現します

模様の再現は画像でやる方が簡単だったりしますが、CSSでも再現が可能です。
CSSなら色を変えたり大きさを変えたりが安易にできるので、使えるようになると便利かもしれませんね。

そんなわけで今回は2つの模様（柄）の作り方をまとめていきます。

**市松模様（いちまつもよう）**

![shirokuro.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/f2c81419-5ff3-e833-b0e4-8768876a0c9e.png)
![tanjiro.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/12e904be-df33-34a0-eb4a-72df1826e8ba.png)




**チェック柄**

![plaid.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/49557d73-ec52-8de6-ab7a-a7e76e880726.png)



## まずは、CSSで市松模様（いちまつもよう）の作り方

```index.html
<div class="ichimatsu"></div>
```

```style.css
.ichimatsu {
  width: 200px;  /* 横幅を200pxに指定 */
  height: 200px; /* 高さを200pxに指定 */
  background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%),
	  linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%); /* 市松模様になるようグラデーションで単色を入れる */
  background-position: 0 0, 30px 30px;  /* 「0 0」と1マス（1色）の大きさ「30px 30px」をそれぞれ指定 */
  background-size: 60px 60px;           /* 1マス分の倍の大きさを指定「60px 60px」 */
  background-color: #FFF;               /* もう一つの単色を入れる */
}
```

**結果**
![shirokuro.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/73ebde7b-965f-97bf-53a3-6d59b0639eb3.png)

仕組みはこんな感じ。

### background-imageで指定している2つのグラデーションを色分けしてみると・・・
![hikaku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/16f1ff68-0945-a6d4-744d-e4aafbe248e3.png)
このように連続する三角形の2種類がうまく重なり、正方形が並んでいるように見える。

![tanjiro.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/7ef80a12-38ff-ff2b-bea9-e5c3539394e2.png)

これも1パーツでみるとこんなかんじ。
![double_parts.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/f290e570-dab5-0562-bf5b-32539feb6b8f.jpeg)

この赤枠と青枠がそれぞれ上下左右にリピートされることで、市松模様が作られている。

## つぎは、CSSでチェック柄の作り方

```index.html
<div class="plaid"></div>
```

```style.css
.plaid {
  width: 200px;  /* 横幅を200pxに指定 */
  height: 200px; /* 高さを200pxに指定 */
  background-image :
    repeating-linear-gradient(to bottom,
    rgba(255, 77, 77, 0.50),
    rgba(255, 77, 77, 0.50) 30px,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 60px),
    repeating-linear-gradient(to right,
    rgba(255, 77, 77, 0.50),
    rgba(255, 77, 77, 0.50) 30px,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 60px);
  background-color : #fff;
}
```

**結果**
![plaid.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/c7095c54-cea5-f495-7b10-76a32d7b61c4.png)

こちらは市松模様よりはまだシンプルなので理解しやすいかなと思います。

こちらも背景グラデーションを2つ重ねて作成しており、格子状の薄いピンクの線を縦方向・横方向それぞれに繰り返して重ねて配置することで、チェック柄にしています。
重なる部分の色を濃くするために色の指定は16進数ではなく、rgbaで指定することで透明度を指定し、このような再現が可能になっています。

こちらは簡単に作成できるWEBツールもありましたので、ご紹介しておきます。
![cman.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/b59152d2-f387-a933-8068-a19f47214265.png)
https://webparts.cman.jp/box/plaid/

## まとめ
背景模様のリピートはコーディングを続けていればいつかは出会うかなと思います。
私も空で書けるほど優秀ではないので、このように形にして残しておいていざというときに使えるよう準備しておこうと思います。

**参考**
https://mrtc.jp/265
https://webparts.cman.jp/box/plaid/

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
Kotlinアプリ開発はじめます

####~目次~

[1.はじめに](#1.はじめに)
[2.概要](#2.概要)
[3.開発環境](#3.開発環境)


##1.はじめに
はじめまして、たけしです。
KotlinでAndroidアプリ開発を始めました。
プログラミングの学習は趣味で少しばかりしていましたがアプリ開発ははじめてです。
よろしくお願いします:)

##2.概要
AndroidStudioで開発を始めたのですが、開始早々行き詰ってばかりです。
(調べても出てこないorでてきても英語ばかり、、)
そんなわけで同じ悩みを持つ方を減らすため、また備忘録としても僕が直面した問題を中心に記事を投稿していけたらなと思っております。

Webで何かを投稿するのはこれが初めてなので、文章も拙いかもしれませんが、温かい目で見守っていただけたら嬉しいです。
(改善点などコメントしていただけたら嬉しいです！)

##3.開発環境
何のせたらいいかわからないので現在の開発環境をのせておきます。

- Surface Pro6(Windows10)
- Android Studio(4.1) 

(開発環境も何書けばいいのかわからない。)
ransackの複数ワード検索、複数モデル検索、複数タグ検索（acts-as-taggable-on）の実装

ransackの複数モデル検索、複数タグ検索に少してこずったので、同じような人の参考になればと思って投稿します。

今回はUserモデル、Articleモデル、Tagモデル（acts-as-taggable-onっていうgemを使用）のケースで実装します。。投稿された記事のarticleのtextカラム、Userのnameカラム、そしてUserに紐づいているtagのnameカラムから（複数ワード）検索を行うというものです。
（今回はtagはUserに紐づいていてarticleには紐づいていません）

はじめにview側ですが、下記のようになります

```articles/index.html.erb
<%= search_form_for(@search, url: articles_path) do |f| %>
  <%= f.search_field :text_or_user_name_cont_all  , class:"search_field", placeholder:"検索" %>
  <%= f.submit '検索', id:"search_button" %>
<% end %>
```
このsearch_form_forやsearch_field、cont_allはransakの書き方となります。
この辺りの説明は省きます。


controller側ではransackのスコープ機能（ransackable_scopes）を呼び出しています。
引数で検索ワードを渡してarticleのmodel側で検索しています。

```articles_controller.rb
   .
   .
@search = Article.ransack(params[:q])
  if params[:q].present? #paramsのnil対策
    @search_articles_result = Article.by_any_texts(params[:q][:text_or_user_name_cont_all])
  end
   .
   .
```




```article.model.rb
scope :by_any_texts, -> (string){
  words = string.split(/[\p{blank}\s]+/)
  searchs = search(text_or_user_name_cont_all: words).result(distinct: true)
  search_tag = User.by_any_tag(words).flatten
  search_result = searchs + search_tag
  search_result.uniq
}

def self.ransackable_scopes(auth_object = nil)
  %i[text_or_user_name_cont_all]
end
```
引数で渡されたparams[:q][:text_or_user_name_cont_all: words]をsplitして["word1","words2"]という形にします。
そのあとransackしますが、ransackのモデルを跨いでの検索はアソシエーションの記述感覚で簡単に実装できます。
今回の場合だとArticleのtextとUserのnameを検索したい場合は、text_or_user_nameとします。
書き方としては、関連するモデル名(user)＋カラム名(name)で実装できます。
さらにuserに紐づいているtagも調べたいときはtext_or_user_name_or_user_tags_nameで検索できます。
tagsと複数形になるのはuserとtagが１対多の関係にあるためです。
ただ、今回のtag機能の実装はacts-as-taggable-onのgemを利用したためだと思いますが、複数のワード検索をしたときに引っ張ってきませんでした。（一単語だと引っ張ってきましたが複数ワードで検索するとダメでした、、、）
そこでtagに関しては別途Userモデルにscopeを作り、acts-as-taggable-onの検索機能(tagged_with)を使って実装しました。

```user.model.rb

scope :by_any_tag, -> (words){
  user_tag = User.tagged_with(words, named_like_any: true)
  user_tag.map{|tag| tag.articles}         
}
```
article側でsplitしたwordsを引数として受け取ってUserに紐づいているタグを検索します。
その後にmapメソッドで検索結果に紐づいているarticleの配列を新しく作っています。

article側ではby_any_tagを呼び出して、二次元配列になっているのをflattenして、元々のtext_or_user_name_cont_allの検索結果とuser側で検索したtagの検索結果を足し合わせています。重複している結果があるかもしれないのでuniqして終了です。
【Rails】N+1問題と対策

#N+1問題とは
たとえば、.eachメソッド等を使って、複数(N個)のデータを取り出そうとしたとき、N回SQLが発行されてしまい、パフォーマンスの低下につながる問題。


# 例
このような、1対多のUseとMessageモデルがあったとする。


```app/model/user.rb
class Message < ApplicationRecord
  has_many :messages
end
```

```app/model/message.rb
class User < ApplicationRecord
  belongs_to :user
end
```
コントローラにて、ビューに渡す値を取得

```app/controllers/message_controller.rb
def index
  @messages = Message.all
end
```
contentとそれに紐づくnameを表示

```app/views/index.html.erb
<% @messages.each do |m| %>
  <span><%= m.content %> </span>
  <span><%= m.user.name %> </span>
<% end %>
```
その時のSQLはというと、こんな感じでレコードごとにSQLが発行されてしまいます。

```
Message Load (3.7ms)  SELECT `messages`.* FROM `messages`　# +1の部分
  ↳ app/views/messages/index.html.erb:5
  User Load (9.4ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1
  ↳ app/views/messages/index.html.erb:8
  User Load (1.0ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 3 LIMIT 1
  ↳ app/views/messages/index.html.erb:8
  CACHE User Load (0.0ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 3 LIMIT 1  [["id", 3], ["LIMIT", 1]]
  ↳ app/views/messages/index.html.erb:8
  CACHE User Load (0.0ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 3 LIMIT 1  [["id", 3], ["LIMIT", 1]]
  ↳ app/views/messages/index.html.erb:8
　　・
　　・
　　・
　（N個分続く）
```




#対策
gem bulletを導入する。
そうすると、こんな感じのSQLが発行され、パフォーマンスが向上します。

```
Message Load (1.1ms)  SELECT `messages`.* FROM `messages`
  ↳ app/views/messages/index.html.erb:5
  User Load (0.9ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` IN (1, 3, 4)
```
【VSCode】保存時に一時的に自動整形しない

# コマンド

`Ctrl + k` → `Ctrl + Shift + s`


# メモ

保存時に自動整形するようにすることについての記事は腐るほど見つかるのに、自動整形しないで保存したいという記事はなかなか見つからなかいので自分用の備忘録です。
vercelでホスティングしてみた

無料で簡単に使えるホスティングサーバはないかな〜と探してみて、いくつか見つかったのですが、最終的にvercelにしました。

最初、xserverとか広告が出なくて無料のサーバを使おうかと思っていたのですが、アップロードとかめんどくさいな。と思い、vercelにしました。
使い方を書こうかと思ったのですが、githubアカウントでvercelにログインしてしまえば、操作は迷うことなかったので、特徴だけ載せることにしました。

サイト公開まで1分くらいで終わります。



## vercelの特徴
* 個人利用なら無料
* 日本からのアクセスが早い (CDNのエッジサーバが東京にもある)
* 操作が簡単 (gitのアカウントを連携して、レポジトリを選ぶだけ！)
* 独自ドメインが使える
* httpsも勝手にやってくれる
* プルリク毎にプレビュー環境を作ってくれる


作ってアクセスした感じは、爆速でした。
静的ファイルしかあげてないですけど。


ちなみに、ドメインは、お名前.comでとりました。

 * .workドメイン 取得: 1円
 * whois代行: 300円
 * 合計 331円(税込)

やすい！！
Unity Shader Graph基礎　炎シェーダーの解説　全体、Sample Gradient編

ShaderGraphもShaderのコードも触ったこと無い人向けに
ShaderGraphで作った炎シェーダーを使ってShaderGraphの基礎を解説します

目次
<a href="#samplegradient">SampleGradientによる色つけ</a>
<a href="#Multiply">Multiplyによる色つけ</a>

まずこちらが例の炎シェーダーです
(マウスポインターウロウロしてごめんなさい)
![FireShader.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/985818/d6a2902c-90e5-36ce-ab90-11f931e7ba63.gif)
早速中身の解説に入リます
まず、このシェーダーグラフの大まかな流れですが、白黒のシェーダーを作って最後に色を塗っています。
大体のシェーダーグラフはこの方法が使われているので、本格的な白黒の部分は後に回して、まず色つけの部分を解説します
<h2 id="samplegradient">SampleGradientによる色つけ</h2>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/985818/bbe99ef9-c500-d71d-85cb-d1dc33707595.png)

これが色付けの部分のノードですね。Sample Gradientというノードを使っています
公式の説明ページ
https://docs.unity3d.com/Packages/com.unity.shadergraph@6.9/manual/Sample-Gradient-Node.html
をみても僕にはナンノコッチャ分かりませんでしたが、
おそらく「Gradient(G)」で受け取ったグラデーションの左端を0,右端を1とし、「Time(1)」から受け取った0～1の値でグラデーションの1部分から色を抽出して表示する
という作業をピクセルごとに行っている感じだと思います
![samplegradient.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/985818/8cb7f4ba-64de-2efb-1e39-f26386c986bd.gif)
今回のシェーダーグラフでは白黒画像の真っ黒～真っ白が0～1の値を持っているのでそれを使っています。
あとグラデーションはブラックボードからプロパティに追加できるのにインスペクターでいじることはできなさそうです

とりあえずSample Gradientにグラデーションと白黒画像繋ぐと
真っ白～真っ黒をグラデーションの左端～右端で色つけてくれるってことです。

<h2 id="Multiply">Multiplyによる色つけ</h2>
SampleGradientだけでなく、Multiplyでも色つけができます（むしろこっちのが一般的かも）
Multiplyというのは乗算、つまり掛け算ですね
こちらも公式にページ貼っておきます
https://docs.unity3d.com/Packages/com.unity.shadergraph@6.9/manual/Multiply-Node.html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/985818/40ddea6f-f6cc-8869-3cbd-4ac7b17f3f5e.png)
こうノードを繋ぐとできます
これは単純で白黒画像の0～1の値をオレンジの色のRGBAにそれぞれ掛けているだけです。
一応ですが白黒画像の値はR=G=B=Aです
Multiplyは色つけ以外でも画像を混ぜ合わせる時とかによく出てくるんで覚えていてください

とりあえず色つけに関してはこんなもんで。次回から本格的なシェーダーグラフ作りって感じです。
マークアップする際に忘れちゃいけないInternet Explorerのこと 2020

# 前提：IEのシェアは未だに巨大
**IEの国内シェアは2020年1月時点で未だに12.4%もある**（[【出典】WebブラウザシェアランキングTOP10(日本国内・世界)](https://webrage.jp/techblog/pc_browser_share/)）。この1割という数を切り捨ててよいかどうかは場合によるのだろうが、今回はそこもケアしてコーディングするという方針に立つ。なお、この記事中で単純に「IE」というときのVerは11を指すものとする。

# 余談：なんでそんなこと調べたか
クライアントによっては社内の標準ブラウザがIEということが実はあるにはある。セキュリティ的にあんま良くないと思いますよとやんわり伝えても、外注先の担当の若造にそんな事言われてもなぁ〜となるだけなので、それはそれで別の問題としてそれとなくフォローアップしとくにせよ、（弊社内の現体制では）SEが絡まない案件（コーポレートサイトのリニューアル等）においては、誰も対応状況とかをフォローしようとする人がおらず、この記事を書いたときは、さんざんES6でJSを書いてしまったあとにそれを知り、てんやわんやでトランスコンパイルした。そもそも初手でどういう環境で確認されますか、を詰めてなかった自分のミスだが、それに加えて、**いわゆるモダンブラウザが全人類にとって当たり前だと思っちゃいけない**のだなとそのとき思い知ったのであります。

# ということで気をつけることリスト
- **IEはJavascript ES6から新登場した記法にほとんど対応していない**。（[【参考】ECMAScript 6 compatibility table](https://kangax.github.io/compat-table/es6/)）
    1. そもそもES5で記述する
    2. babelでトランスコンパイルする（[【参考】Babelの使い方入門編｜ES6をコンパイル（JavaScript）](https://barikanblog.com/javascript-es6-babel/)）
- **SVG周りの挙動が独特**
    - wrapperではなくsvgそのもの（もしくはimgそのもの）にheightもしくはwidthを指定しないといけない（max-height・max-width等ではダメ）（[【参考】SVGをimgで表示した場合にIEだけサイズが変になる現象を直す](https://qiita.com/Shitsu/items/4edf6fae3329c4904f29)）
    - cssの中にurl()で記述する際にも一手間が必要（[【参考】CSSの背景画像でSVG要素を使う場合にIEにも対応させる書き方](https://yukiyuriweb.com/using-data-uri-scheme-for-svg-in-background-image-compatible-with-ie/)）
- **css lintのvendor-prefix設定に気をつける**
    - 何かしらのLintで補正してcss（sass）を書いているとしても、vendor-prefixがちゃんとIE用の記述も加筆するようになっているかは確認したほうが無難。
[HTML] ファビコン（Favicon）を指定する

#ファビコン（Favicon）とは
運営者がWebページに設置するシンボルマークのことです。
ブックマークした時やタブ表示した際にWebページ名の横に並ぶ小さなアイコンなどを指します。
指定しておくと、ユーザーがどこのサイトか認識しやすくなり、記憶やリピートに繋がります。

#ファビコン指定方法
HTMLの `head` に `<link rel="icon" href="URI">` 追加します。

```
<link rel="icon" href="/default.jpg">
```
css基本

ーーーーーセレクタの種類（4種類）ーーーーー
1.タイプセレクタ(h2,main,divとか)、ユニバーサル(*)
html要素を直接指定するもの

2.id,class
＃idはそのhtmlで一つだけ指定できる。
.classは、複数に指定できる。
html
class=title
css
.title
基本的にclassでオッケー

3.疑似クラス（：）、疑似要素（：：）
.title:hover{}
hoverした時にのみ適用される
一つの要素として出てくる。
h2::after{
content:"🎅";
}
h2の最後に🎅

４.結合子
子結合子
main > h2
直下のh2に適用してね

子孫結合子
main h2
これは、メインのh２全てに適用してねということ
子だけじゃなく孫の下までしてね

隣接兄弟結合子
article + article {}
articleの隣り合ったarticleからしてね
二つ目のアーティクルから適用される
ブログとかで、記事一覧で間を開けたい時
二個目以降のマージントップを空ける。


ーーーーーブロック、インライン、インラインブロックーーーーー
インライン要素は、
width,heigthが効かない。
改行されない。
padding,margin,borderは、効くが他の要素にまたがるのであまり使われない

ブロック要素は、
改行される。

インラインブロック要素は、改行されない
displayflex,gritが出てきてからは、あまり使われない？？

display: block;
display: inline;
display: inline-block;
で変更できる。

インラインは、文字を装飾するときとかに使いやすい。
display: block;は、aタグを大きくするときに使いやすい。

ーーーーーボックスサイジングーーーーー
box-sizing: border-box;
width: 400px;
height: 200px;
padding: 20px;
border: 2px solid black;
とすると、paddingとborderを含めて400×200になる。
box-sizing: border-box;が無ければ、444×244になる。
含めて400とかの方が直感的で分かりやすい。
全部box-sizing: border-box;にしたいとき
↓
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

ーーーーー位置を真ん中にしたいときとかーーーーー
その要素全てを真ん中に寄せたい。
.container {
  width: 500px;（適当）
  margin: 0 auto;
}

headerのh1(ロゴ)を真ん中にしたい。
header {
  padding: 30px 0;（適当）
}
header h1 {
  display: flex;
  justify-content: center;
}

footerなどの文字だけを真ん中にしたい。
footer {
  padding: 12px 0;（見た目の意味で）
  text-align: center;
}
【初学者用】AWS無料枠でサーバ構築+コンテナ管理をする

####■はじめに
このページでは個人アプリ製作や、未経験転職エンジニア向け対象です。
AWSをなるべくお金をかけずに、コンテナ管理を構築し学びたい時用になります。
今回は概要のみお伝えしますが、別で設定編は投稿します。
※あくまで個人的な考えなので、参考程度にしてください。

***

####■結論
サーバ構築：AWS EC2 / コンテナ管理：AWS ECSが良いと考えます。
なお無料で１２ヶ月利用(条件付き)が可能です。
***

####■なぜAWS EC2なのか？
AWSのサーバ構築(linux)で唯一無料期間で12ヶ月の使用期間がある。
他にサーバ構築をLightsailにして、その中でDockerを使用する方法がありますが、
試用期間が30日なので短いです。。

####■なぜAWS ECSなのか？
EC2と連動して使える。
他のサービスとして、EKS,Fargateがあります。
ただどちらも使用すると課金されるので、無料では使えないです。

***
####■EC2+ECSを使った場合の使用条件について
AWSのt2.micro インスタンスのみを使用する(要は1アプリしか作れない)。
またECSはEC2の条件に紐づくため、サーバ構築,コンテナ構築においては、インスタンスのみ守っていれば問題ないです。

***
####■まとめ
個人で一つのアプリを試しに作るだけであれば、上記条件にも引っかかる事はないため
１２ヶ月無料で使う事ができます。
初めはECSでコンテナ管理を行い、他も試したくなればLightsailContainerやEKS,Fargateを
１ヶ月トライアルで使ってみるのが良いと考えます。
【Rails】bundle install vs bundle update

＜はじめに＞
Railsで自作アプリを作る過程でgemをインストールした時に、
ふと"bundle install"と"bundle update"の違いが気になりました。
調べてみたので備忘録として投稿します！


"bundle install"も"bundle update"も、
railsアプリにgemをインストールするという点では同じです。
しかし、インストールのされ方が異なるため、しっかり違いを理解したいところです。
※操作を間違えると、エラーが発生してアプリが動かなくなることもあります！

bundle install = bundlerを使ってGemfileからgemをインストールするコマンド

Point：①Gemfile.lockにないgemをGemfileから探し、見つけたgemをinstallする
　　　 ②--pathオプションを使えば、どこにインストールするか指定できる(よくあるのはvendor/bundle)
      ③アプリの中にインストールすればgemはアプリの中に、もし指定がなければ 
        ~/.rbenv/versions/projectのrubyバージョン/lib/ruby/gems/projectの
        rubyバージョン(x.x.0)/gemsにインストールされる。

bundle update = Gemfile.lockに書かれている内容は無視して、
                Gemfileに書かれているgemを全てインストールするコマンド

Point：①Gemfile．lockの中身に関係なく、Gemfileに書かれているgemをupdateする。
　　　 ②updateできるgemがあれば、Gemfile.lockmのバージョンをupdateする。

こうなると、このupdateにより今まで動いていたアプリが急に動かなくなる可能性もあります、、
さらに、チーム開発においてはGemfile.lockを更新してそれをgitであげると、
他の開発メンバーがpullしてフリーズすることも💦

そのため、特に初心者はbundle updateコマンドは慎重に使って、
bundle installだけで統一するように心がけましょう！
16bit画像をヒストグラム平坦化する

## はじめに

16bit の dicom画像をヒストグラム平坦化したかったのだが、OpenCV の equalizeHist() は、8bit しか受けとらないということで、できなかった。8bit に変換すると情報がだいぶ失われてしまうので、ImageJ を使ってヒストグラムを平坦化した。
私は dicom画像を扱っていたが、dicom画像 である必要はない。

[こちら]("https://satoshithermophilus.hatenablog.com/entry/2017/08/08/222531")の記事を参考に行った。


## ImageJのインストール
ImageJ については、[こちら]("https://satoshithermophilus.hatenablog.com/entry/2017/06/07/233144")を読めばわかる。

https://imagej.net/Fiji
ここから自分のOSにあったImageJ Fijiをインストールする。

## ヒストグラム平坦化
ImageJ Fiji を開いて、File > Open から対象の画像を開く。
ヒストグラムを確認したければ、Analyze > Histogram から確認することができる。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396851/88bde423-4659-7c8f-b369-3eb8f5cd22ef.png" width=200>

ヒストグラム平坦化は、Process > Enhance Contrast を開き、Equalize histogram にチェックを入れOKを押す。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396851/d84b755e-b096-4da9-7dae-43c4c443db1a.png" width=200>

ヒストグラムを確認すると、ちゃんと平坦化されている。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396851/a305f3a5-d839-ddde-6ccc-59ec52eccb1c.png" width=200>

dcm, tif, jpg 等よしなに保存する。ただし、16bit の場合、jpg で保存すると 8bit に変換されて保存される。

## フォルダの全画像に対して適用する
画像が大量にある場合にこれを1枚1枚やるのはあり得ないので、まとめて処理する。
先に、16bit の dicom画像をヒストグラム平坦化して jpg画像 (8bit) として保存するコードを記載する。
\# your script の部分が画像処理に対応する。

```Scripts.py
from ij import IJ
from ij.io import DirectoryChooser
import os


def Analysis(imagepath):
    imp = IJ.openImage(imagepath)
    savefilepath = os.path.splitext(imagepath)[0]
##########################
    # your script
    IJ.run(imp, "Enhance Contrast...", "saturated=0.3 equalize")
    IJ.saveAs(imp, "Jpeg", savefilepath + ".jpg")
##########################
    imp.close()

srcDir = DirectoryChooser("Choose Folder").getDirectory()
IJ.log("directory: " + srcDir)

for root, directories, filenames in os.walk(srcDir):
    for filename in filenames:
        if filename.endswith(".dcm"):
            path = os.path.join(root, filename)
            IJ.log(path)
            Analysis(path)

IJ.log("Finish")
```

### Recorderで処理を記録
\# your script の部分は ImageJ での処理を記録することで容易に取得できる。
ImageJ で画像を開いたのちに、Plugins > Macros > Record を選択すると Recorder が開く。
以後、ImageJ 上で行った操作は全てここに記録される。Record は BeanShell にしておく。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396851/cb9f0eb9-6c31-22c5-6ee4-c0c2853b3d58.png" width=500>


例えば、白黒反転である Invert を行うと、
``IJ.run(imp, "Invert", "");``
が Recorder に追加される。

今回は、
``IJ.run(imp, "Enhance Contrast...", "saturated=0.3 equalize")``
``IJ.saveAs(imp, "Jpeg", "xxx.jpg")``
となったものを後からファイルのパスを書き換えた。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396851/a54017f0-d50d-04c1-9c21-d6d5447fed33.png" width=500>

### 実行ファイルの作成・実行
File > New > Text Window からエディタを起動し、上記のコードをコピペし、Language で Python を選択する。
\### に囲まれた部分には先ほど記録した Recorder の中身をコピペする。
Run を押して、画像の入ったフォルダの選択を行うと、一括処理が開始する。
上記のコードでは、そのフォルダ内にある、拡張子が".dcm"であるファイルを対象にしている。

## 終わりに
記録用にざっくりと書きました。
ちなみに、私は全然処理が適用されないなと思ったら、ウイルスバスターズが見事にブロックしていたので、うまくいかない場合はセキュリティのブロックも確認してみましょう。
(未)気長に続ける論文収集

# はじめに
**情報収集に苦労している**
皆さんは，日々の情報収集をどのようにおこなっていますか？
普段論文を読んだり，ライブラリの情報を得たりすることは膨大に時間がかかります．
私自身今までいろいろな方法を試しましたが，普段自分が利用している情報収集ツールを紹介します．

**簡単に読むために**
情報収集は続けてナンボだと思うので，なるべく負担にならないように気をつけています
これから紹介する方法はスマホでできるような方法です

# 情報収集ツール
**メイン**
よくみる順番にソート
1. Twitter
2. arxivSanity
3. Feedly
4. paperwithcode (TBD)
5. kaggle(TBD)
6. Reddit


## 1. Twitter
いろいろ試してきましたが一番よく利用しています．

Computer Vision関連の情報を集めたいのでフォローした人をリストにしてCV関連の情報のみが入るリストを作っています．

### おすすめリスト
Twitterのリスト機能の中でよくみさせていただいているリストを紹介します．



## 2. [Arxiv Sanity](http://www.arxiv-sanity.com/)
最近投稿されたarxiv論文の中でよく読まれている論文やTwitterでメンションされている論文を自動収集して表示しているサイトです．
どんな論文が今読まれているのかを知りたい時にみています．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547226/642efe0c-df16-4e96-95d9-c6c8004b8f5b.png)


## 3. [Feedly]
ニュースフィードを収集するアプリです． 
スマホアプリをインストールして，arXiv(カテゴリはCV, AIなど)やGoogle, Amazonなどの技術ブログを登録しています． 毎⽇100以上の情報が⼊ってきているのでこの中から興味を引くものを読んでいきます． ただ，情報量があまりにも多すぎるかもしれないので⽬利きが難しいのであればTwitterなどの情報を追っておくと良いと思います．

## 4. [paperwithcode]
State of the Art(SOTA)の論⽂とその実装についてまとめてあるサイトで，CVにかかわらずNLPなどのタスクについてのベンチマークがわかります

## 5. [kaggle]
オンラインデータ分析コンペのサイト． 画像系のコンペのNotebookを⾒ておくと，最新モデルの実装など役⽴つことがたまにある．
## 6. [Reddit]
海外版のはてなブックマークみたいなやつです． でもこちらはコミュニティ機能があって，そこに属しておくと関連する情報が集まってきます． また，海外の技術者・研究者が集まって議論したりすることもあります

# さいごに
ありがとうございました
vue createしたときによく見ると configure error で not ok となっとる時

```
sudo vue create my-project
.
.
.
gyp ERR! configure error 
gyp ERR! stack Error: EACCES: permission denied, mkdir '/Users/...
.
.
.
gyp ERR! not ok 
```
sudoで叩いてるにも関わらずpermission deniedとのことで何かもっと強い権限がいるっぽい。
ググったところ、[こういう情報](https://qiita.com/zaburo/items/eb6891dd11af211052e4)が出てきたので、それを踏まえて下記のようにやると、

```
cd my-project
sudo npm install --unsafe-perm -g
.
.
.
added 1 package in 1.319s
```
という具合に、install出来てなかったのもちゃんと降りてきたみたいです。ただ、unsafeっぽいので一応注意してやってください。
おしまい。
ローカルリポジトリからリモートリポジトリにpushする方法

#Gitについて
Gitとは、無料で使用できる分散型バージョン管理システムです。簡単に言うと、ファイルのバージョン管理が簡単にできるツールです。その特徴は、ソースコードの記録や追跡などのバージョン管理が「分散型」であることです。

「分散型」であるが故に、Gitを使用することで以下のようなメリットがあります。

- 修正履歴が残り、特定の古いバージョンに簡単に戻すことができる。
- チームで修正したファイルを一つに統合できる。

ちなみに、GitはLinuxの創造主であるリーナス・トーバルズによって開発されたものです。

# GitHubについて
Gitを利用したリモートリポジトリを提供してくれるWebサービスです。下記リンク先からSign upできます。

https://github.com/

似たサービスにGitLabやBitbucket等があります。

# ローカルリポジトリからリモートリポジトリにpushする
流れは以下の通りです。

- ローカルリポジトリを作成する。
- GitHub上でリモートリポジトリを作成する。
- ローカルのインデックスに対象のファイルを追加する。
- ローカルリポジトリにコミットする。
- リモートリポジトリにプッシュする。

それでは実際にコマンドを見ていきます(ローカルリポジトリ、リモートリポジトリを既に作成している前提)。

まず「git add」コマンドでコミットしたいファイルを「インデックス（ステージングエリアとも呼びます）」という領域に追加します。

```
git add 任意のファイル名
```

任意のファイル名の代わりに「.」を使用することができます。最後の「.」は全てのファイル、ディレクトリを指します。ファイル名を指定しなくても、全てのファイルをインデックスに追加することが可能です。

```
git add .
```

次に、「git commit」コマンドでインデックスの内容をローカルリポジトリにコミットします。チームメンバー等の第三者が見てもコミット内容がわかりやすいように「-m」をつけて後ろにコミットメッセージをつけておきます。

```
git commit -m "任意のコミットメッセージ"
```

ローカルリポジトリにコミットできたら「git remote add」コマンドで新しくリモートを追加します。このコマンドは以下の通り「リモート名」と「リモートURL」の2つの引数を取ります。以下の場合、originがリモート名で、https〜がリモートURLにあたります。

```
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
```

最後に、「git push」コマンドでリモートリポジトリに反映します。今回はoriginのmasterブランチにコミット内容を反映します。「git push」コマンドは、「-u」オプションをつけることが推奨されています。このオプションにより、ローカルブランチが更新を追いかけるリモートブランチ(上流ブランチと呼びます)を設定することができます。

```
git push -u origin master
```

GitHub上の対象のリモートリポジトリを確認してコミット内容が反映されていればOKです。

# 最後に
以上、ローカルリポジトリからリモートリポジトリにpushする方法でした。見ていただきありがとうございました。
Pardot のプロセスオートメーション (Pardot Lightning アプリケーション) ⇒ 適切なオートメーションツールの選択 (Pardot Lightning アプリケーション)

１．次のオートメーションツールのうち、プロスペクトを国や商品への関心に基づいてユーザーグループに割り当てるために選択するものはどれですか?次のオートメーションツールのうち、プロスペクトを国や商品への関心に基づいてユーザーグループに割り当てるために選択するものはどれですか?
２．次のオートメーションツールのうち、プロスペクトが会社の価格ページを訪問したときに Salesforce の ToDo を作成するために選択するものはどれですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/1ae1e37d-2ae2-42c0-6e3f-1262b0b8a761.png)
WSL2 Ubuntu 環境に Rust をインストールして WASM のビルド環境を構築する

MDNの記事「[Rust から WebAssembly にコンパイルする](https://developer.mozilla.org/ja/docs/WebAssembly/Rust_to_wasm)」 を参考に作業したところ、いくつかうまくいかないことがあったため、備忘も兼ねて執筆します。

| 作業環境 |
|---|
|Windows 10 Pro 20H2|
|Ubuntu 20.04 LTS (WSL2)|
|Rust 1.48.0|

## 1. sh.rustup.rs が permission denied でエラー終了する。

Windows側のVScodeでRemote-WSLを使用してUbuntu上の作業フォルダを開いていたのが原因でした。 これやる人はそうそういないとは思いますが一応書いておきます。メッセージが微妙なため、思いのほか時間を取られました。

## 2. cargo install wasm-pack で linker `cc` not found エラーが発生する。

```bash:
cargo install wasm-pack 
```

コマンドを実行するとwasm-packで必要な大量の依存パッケージをダウンロード&ビルドしますが、linker がインストールされていないとこけるようです。

```bash:
error: linker `cc` not found
```

gcc をインストールしましょう。

```bash:
sudo apt install gcc
```

## 3. cargo install wasm-pack で failed to run custom build command for `openssl-sys v0.9.60` エラーが発生する。

gcc をインストールして再チャレンジすると、今度は以下のようなエラーが発生しました。

```bash:
error: failed to run custom build command for `openssl-sys v0.9.60`
```

大量に出力されるデバッグメッセージの中に pkg-config をインストールせよ との啓示があったため、

```
 It looks like you're compiling on Linux and also targeting Linux. Currently this
 requires the `pkg-config` utility to find OpenSSL but unfortunately `pkg-config`
 could not be found. If you have OpenSSL installed you can likely fix this by
 installing `pkg-config`.
```

インストールを実行。

```bash:
sudo apt install pkg-config
```

これでようやく、wasm-pack のインストールが完了しました。

```
Installed package `wasm-pack v0.9.1` (executable `wasm-pack`)
```
[Python]logging.loggerラッパから呼び出し元のログを正しく出力する

# 背景
 - logging.loggerを拡張していく中でLoggerオブジェクトをフィールドに持つようなLoggerWrapperオブジェクトを作りたくなることがあると思われる。
 - ただしその場合、LogRecordオブジェクトに含まれる呼び出し元の情報＝スタック情報( `pathname`, `lineno`, `func` )が、LoggerWrapperのlogメソッドを参照してしまい、元々の呼び出し元の情報が出力されなくなってしまう。
 - そのため、以下の方法でスタック情報を正しく出力する必要がある。
 - 以下の方法は、参照するスタックの深さを変更するものである。

# スタック情報の出力方法

## Python 3.8以降: loggingのstacklevelを利用

Python3.8からloggingモジュールで今回のユースケースに対するサポートが入った。
利用方法としては以下の二種類が考えられる。

### ログ出力のキーワード引数として渡す
https://docs.python.org/ja/3/library/logging.html#logging.Logger.debug

```
logger.info(msg, stacklevel=2)
```

`stacklevel` というのが追加されたパラメータである。参照したい呼び出し元までの深さを設定する。

### loggerオブジェクトのメソッドを使って参照する
https://docs.python.org/ja/3/library/logging.html#logging.Logger.findCaller

```
stack_filename, stack_lineno, stack_function = logger.findCaller(True, 3)[0:3]
```

 - findCallerの第2引数に深さを渡す。
 - LoggerAdapterやLoggerFormatterの中でスタック情報をまとめたい場合はこちらを使うのが良さそう。


## Python 3.7以前: 独自関数を定義

loggingパッケージでのサポートはないので、 `inspect` パッケージを利用して、スタック情報を取得する関数を定義する。

```python:[2]が深さを表す
import inspect

def stack_info() -> dict:
    stack = inspect.stack()[2]
    return {
        'stack_filename': stack.filename, 
        'stack_lineno': stack.lineno,
        'stack_function': stack.function,
    }
```

利用例

```
logger.info(msg, extra=stack_info())
```

# 終わり
 - LoggerWrapperオブジェクトを利用する場合、今回のようにスタック情報を正しく出力するために仕込みが必要になる。
 - そのため、logging.LoggerAdapterなどを利用してやり切れないか検討した上でLoggerWrapperオブジェクトの導入を検討した方が良さそう。
Emacsのorg-modeでQiita記事を書いて上げよう!!

\![macOS-11.1](<https://img.shields.io/badge/macOS-11.1-brightgreen>) \![ruby-2.7.2p137](<https://img.shields.io/badge/ruby-2.7.2p137-brightgreen>) 


# Preface (はじめに)

Qiitaの記事を作成する際にいちいちブラウザとターミナルを行ったり来たりするのは正直煩わしい&#x2026;

そこで, ターミナル上でQiita記事を作成して上げれば万事解決という理念で[qiita\_org](https://github.com/yamatoken/qiita_org)というツールが作られました. 

これさえあれば記事作成からアップロードまでよりスムーズに行うことができます. 


# install (導入)

インストールから各種設定は下の記事に詳しく書いたのでそちらを参考に進めてください. 


# Qiita記事作成してから上げるまで


## Qiita記事作成

まず, 記事を作成するためにテンプレートを用意します. 

```
> qiita template
```

すると以下のように聞かれるため, お好きな方を選んでください. 僕はすべてy にしました.

```
ProductName:	macOS
ProductVersion:	11.1
BuildVersion:	20C69
cp /Users/[User name]/.rbenv/versions/2.7.2/lib/ruby/gems/2.7.0/gems/qiita_org-0.1.35/lib/qiita_org/template.org template.org
Write MacOS version?(y/n) y
Write ruby version?(y/n) y
```

lsコマンドでカレントディレクトリの中身を表示すると確かにtemplate.orgが作成されました. 

```
> ls .
-> template.org
```

では, 早速中身を見てみましょう. 

```
> cat template.org
```

```
#+OPTIONS: ^:{}
#+STARTUP: indent nolineimages
#+TITLE: title
#+AUTHOR: [Your Name]
#+EMAIL:     (concat "your@email.com")
#+LANGUAGE:  jp
# +OPTIONS:   H:4 toc:t num:2
#+OPTIONS:   toc:nil
#+TAG: tag1, tag2
#+TWITTER: off
# +SETUPFILE: ~/.emacs.d/org-mode/theme-readtheorg.setup

![macOS-11.1](https://img.shields.io/badge/macOS-11.1-brightgreen) ![ruby-2.7.2p137](https://img.shields.io/badge/ruby-2.7.2p137-brightgreen) 
```


## Qiitaに記事をアップロード

せっかくなので, このtemplate.orgをQiitaに上げてみましょう.

Qiitaにアップロードするためのコマンドは

```
> qiita post template.org
```

すぐに以下のような出力が出て

```
#<CommandLine::Result:0x00007f8443922420 @stdout="", @stderr="", @status=#<Process::Status: pid 4887 exit 0>>
["qiita", "https://qiita.com/"]
["path", "api/v2/items"]
"https://qiita.com/api/v2/items"
"Created"
       rendered_body brabrabra...
		body brabrabra...
	   coediting false
      comments_count 0
	  created_at 2020-12-28T20:44:04+09:00
	       group 
		  id 48bd0edb7d39039fd8d1
	 likes_count 0
	     private true
     reactions_count 0
		tags [{"name"=>"tag2", "versions"=>[]}, {"name"=>"tag1", "versions"=>[]}]
	       title title
	  updated_at 2020-12-28T20:44:04+09:00
		 url https://qiita.com/[Your Qiita ID]/private/48bd0edb7d39039fd8d1
		user {"description"=>"", "facebook_id"=>"", "followees_count"=>1, "followers_count"=>1, "github_login_name"=>"[Your Account]", "id"=>"[Your Qiita ID]", "items_count"=>1, "linkedin_id"=>"", "location"=>"", "name"=>"[Your Name]", "organization"=>"", "permanent_id"=>266153, "profile_image_url"=>"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266153/profile-images/1566019128", "team_only"=>false, "twitter_screen_name"=>nil, "website_url"=>""}
    page_views_count 
```

デフォルトのブラウザに切り替わります.参考に自分のMacでの[結果](https://qiita.com/k6e4n0h0n8f9ooO/private/48bd0edb7d39039fd8d1)を置いときます. 

このとき注意として, Qiita記事の方では限定共有での公開となっていますので, 上述の方法をした後, 記事の設定から「全体に公開する」をクリックするか

アップロードする際に, 以下のようにコマンドを打つかしてください. 

```
> qiita post template.org public
```


# 参考資料

[qiita\_orgのコマンドについて](https://qiita.com/yamatoken/items/9314161758e778fd82c0)
【Ruby】eachの入れ子についておさらい

## 概要


「配列」 なら取り出しは簡単にできるけど、 「配列の中に配列」 の場合に

- 少し考えてしまう
- 思うように値がとれない

という方向けの記事です。少しでも参考になれば幸いです。

## 目次
- 実践
    - 問題
    - 解答（解説）
    - プロセス

- まとめ
- 参考文献

## 実践

#### 問題

>次の配列からフルーツの名称と合計金額を出力してください。

```ruby:問題
fruits_price = [["apple", [200, 300, 400]], ["banana", [100, 200, 300]], ["grape", [2000, 3000]]]
```

#### 解答 （解説）

```ruby:解答例
fruits_price.each do |fruit|
# fruits_price から配列を一つずつ取り出し fruit で取り出していく (each を使うことで配列の中の配列に対して処理を行うことができる。)

  sum = fruit[1].sum
# fruit[1]（金額の部分）のsum(金額の合計値)

  puts "#{fruit[0]}の合計金額は#{sum}円です"
# 出力
end
```

```ruby:別解
fruits_price.each do |fruits, prices|
  puts "#{fruits}の合計金額は#{prices.sum}円です"
end
```

#### プロセス

**1.取得したいものを考える**

- フルーツの名称
- 各フルーツの合計金額

**2.配列のときはどのように要素を取り出すのか**

- `each` で取り出す
- その中の何番目を取得するのか

**3.合計値を出すにはどうするのか**

- `sum` で要素の合計を出力

## まとめ

- 取りたい値は何かを考える
- 問題の切り分けをして、どのように出力すればよいのか方法を探る
- `sum` で要素の合計を簡単に取得することができる

## 参考文献

- [Ruby 3.0.0 リファレンスマニュアル (sum)](https://docs.ruby-lang.org/ja/latest/method/Array/i/sum.html)
[gitHub]コーディングセットアップメモ


個人メモ。

gitHubにreset,base系のSassファイルとpackage.jsonをアップ済み。


# <font color="Blue">新プロジェクトを開始する場合</font>
## ①[component](https://github.com/NakamuraShun/component)をpull
1. プロジェクトディレクトリ作成
1. vsCodeの新ウィンドウ、左上のfile>openで開く (Live Serverあり)
1. 以下コマンド操作

gitコマンド(※2回程)


```
git init | git remote add origin https://github.com/NakamuraShun/component.git | git pull origin master
```

npmコマンド

```
npm install
```

## ②リモートリポジトリの確認と変更
1. 個人の[github](https://github.com/NakamuraShun)アカウントでリポジトリ新規作成
1. 以下コマンド操作

gitコマンド

現在のリモートリポジトリを確認
(pullしてきたリモートリポジトリになっているので必ず確認)

```
git remote -v
```

リモートリポジトリを変更

```
git remote set-url origin https://github.com/NakamuraShun/xxxxxx.git
```

変更されているかを確認

```
git remote -v
```

作業開始

```
npm run dev-compile:css
```
## ③push
作業後

```
git add .
```
```
git commit -m “msg”
```
```
git push origin master
```
Pardot のプロセスオートメーション (Pardot Lightning アプリケーション) ⇒ ダイナミックリストの使用 (Pardot Lightning アプリケーション)

１．次のうち、ダイナミックリストの特性はどれですか?
２．ダイナミックリストを要するシナリオはどれですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/339eb589-5345-05cf-c466-4b0fd3e2f892.png)
[React] 「チュートリアル：React の導入」をやってみる (npx create-react-app my-appについて)

#チュートリアル：React の導入

何やらReactのチュートリアルが話題になっていたので、私もやってみようと思いました。（下のリンクのものです。）

[チュートリアル：React の導入](https://ja.reactjs.org/tutorial/tutorial.html "チュートリアル：React の導入")

###ローカル開発環境

ローカル環境でチュートリアルをやってみたいと思い立ち、まずは環境構築をするところから始めます。

上記のチュートリアルから、構築手順を引用させて頂きます。

>1.最新の Node.js がインストールされていることを確かめる。
>2.Create React App のインストールガイドに従って新しいプロジェクトを作成する。
>>npx create-react-app my-app
>
>3.新しく作ったプロジェクトの src/ 内にあるファイルをすべて削除する

npx create-react-app my-app　が実行できなかったので、なんでかな？と思ったのですが、Nodistを入れているとnpxが使えない（？）みたいですね。

そもそも、npxとは何ぞや？ということもありますが、それはひとまずおいておくことにします。

npxを単独でインストールするという方法もあるようですが、今回はnpxなるものを使用しませんでした。

こちらのWeb制作会社さんの記事を参考にさせて頂きました → [Create React Appで環境構築 – React入門](https://www.to-r.net/media/react-tutorial12/ "Create React Appで環境構築 – React入門") ありがとうございます。

ええと、ようは、create-react-app をインストールすれば良いわけですね。

（これもcreate-react-appとは何ぞや？ではありますね。初心者ですみません。）

とりあえず、無事インスールできチュートリアルを行う準備が整うところまでを今日はやりました。