OmniAICreator/Qiita-1.07M huggingface dataset:
【早見表】よく使うGitHubコマンド　


## 初回：ローカルにリポジトリを作成し、リモートにプッシュする際の手順

|  コマンド  |  意味  |
| ---- | ---- |
|  git init  |  現在いるディレクトリをgitで管理するための設定ファイルを生成する。  |
|  git add ファイル名 |  「ファイル名」の部分にファイル名を指定することで、指定したファイルをインデックスに追加することができます。  |
|  git commit -m "コメント"  |  メッセージをつけて変更履歴を保存する  |
|  git branch -M main  |  デフォルトブランチをmasterからmainに変更する。デフォルトブランチがmainの場合は不要  |
|  git remote add origin リポジトリURL	  |  originという名前でリモートリポジトリのURLを登録する。 |
|  git push origin ブランチ名  |  ローカルの変更をリモートリポジトリにアップロードする。「ブランチ名」にアップロードしたいブランチの名前を指定します。  |

## 2回目以降：ローカルにリポジトリの変更をリモートにプッシュする際の手順

|  コマンド  |  意味  |
| ---- | ---- |
|  git add ファイル名  |  「ファイル名」の部分にファイル名を指定することで、指定したファイルをインデックスに追加することができます。  |
|  git commit -m "コメント"  |  メッセージをつけて変更履歴を保存する  |
|  git push origin ブランチ名  |  ローカルの変更をリモートリポジトリにアップロードする。<br>「ブランチ名」にアップロードしたいブランチの名前を指定します  |

## リモートリポジトリをローカルリポジトリに複製する

|  コマンド  |  意味  |
| ---- | ---- |
|  git clone リポジトリURL  |  リモートリポジトリをローカルリポジトリに複製する。<br>「リポジトリURL」は複製したいリモート先のURLを指定します。  |

## リモートリポジトリの変更をローカルに反映させる

|  コマンド  |  意味  |
| ---- | ---- |
|  git fetch origin  |  リモートリポジトリからローカルにあるリモートリポジトリのコピーに最新情報をダウンロードする  |
|  git merge  |  ブランチ名	ローカルブランチに反映する  |
|  git pull |  fetchとmergeをまとめて実行できるコマンド  |
|  git fetch origin pull/ID/head:ブランチ名 | プルリクエストをローカルでチェックアウトする<br>ID番号はプルリクエストのタイトルの後に付いている数字です。|

## ブランチの作成・確認

|  コマンド  |  意味  |
| ---- | ---- |
|  git branch  |  ブランチの一覧を表示する  |
|  git branch ブランチ名  |  ブランチを作成する。<br>「ブランチ名」の部分に、作成するブランチの名前を指定します  |
|  git checkout ブランチ名  |  ブランチ名を指定して切り替える |
|  git checkout -b ブランチ名  |  ブランチの作成と切り替えをまとめて実行できるコマンド  |

## ログの確認・操作

|  コマンド  |  意味  |
| ---- | ---- |
|  git log  |  コミットの履歴を確認する  |
|  git status  |  ファイルの追加/変更/削除の確認  |

## git reset 

|  コマンド  |  意味  |
| ---- | ---- |
|  git reset [commit ハッシュ]  |  履歴を元に前の状態に戻す。「コミット」には識別番号を指定します。git reset HEAD^で一つ前に戻すことも可能  |

### git reset の補足
||  HEAD  |  意味  | ワークツリー |
| ---- | ---- | ---- | ---- |
|git reset --soft [commit ハッシュ] | 書き換える |||
|git reset --mixed [commit ハッシュ] | 書き換える | 書き換える ||
|git reset --hard [commit ハッシュ] | 書き換える | 書き換える | 書き換える |

## git stash

ブランチを checkout するときに一時保存しておきたい。
commit はしたくないけど、変更は破棄したくない。

|  コマンド  |  意味  |
| ---- | ---- |
|  git stash  |  一時保存  |
|  git stash list | stash している一覧 |
|  git stash pop stash@{n}  |  一時保存を戻す  |

## たまに使うかも

|  コマンド  |  意味  |
| ---- | ---- |
|  git revert (commit id)  |  不要なcommitを打ち消したい<br>commit idは画像参照<br>vim が開くので ZZ して保存すれば打ち消し commit が入るので、pushするだけです。  |

![スクリーンショット 2021-06-01 20.30.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687433/07056235-7fc7-4598-c323-c4db29c447f1.png)

こちらも見てみてね

https://qiita.com/s84a135m/items/3911dee85da5a82773ea
段々速くなるメトロノーム

M5Stackで段々スピードアップするメトロノームを作ってみました。練習用によかろうと思います。
スピードアップするメトロノームアプリってスマートフォン用にいろいろ出ているので今更ではあるのですが。

![IMG_5811.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158760/4167800a-b355-b687-6943-d88bc22dc95f.jpeg)



```cpp:metro.ino

/*
 *    Speedup Metronome
 *    
 *    2021/2/11
 * 
 */

#include <M5Stack.h>

int vol=9;
int pwdth = 10;

double  tempo=100.0;

double upspeed = 1.0005;

unsigned long tic;
unsigned long intval;
unsigned long lastms;
int ton1;
int runn=0;
int hz = 440;

void setup() {
  M5.begin(true, false, true);
  M5.Power.begin();
  
  ledcSetup(TONE_PIN_CHANNEL, 0, 10);
  ledcAttachPin(SPEAKER_PIN, TONE_PIN_CHANNEL);
  
  Serial.begin(115200);
  M5.Lcd.clear(BLACK);
  M5.Lcd.setTextSize(2);
  M5.Lcd.setCursor(0, 0);
  M5.Lcd.println("*** Speedup Metronome ***");
  
  intval  = (60.0/ (float)tempo) * 1000.0;

  ton1 = 100;  // tone on time msec
  tic = 0;
  lastms = millis(); 

  Serial.printf("intvl %d",intval);
  
}

int xpos=0;
int ypos=90;
int xpos2=210;  //
int ypos2=130;

bool dodisp = true;
bool toneout = false;

void loop()
{
   M5.update();

   if(M5.BtnC.wasReleased()){
        runn = runn ^ 1;
        if(!runn){
        ToneOff();
        }
       }

   if(M5.BtnA.wasReleased()){
      tempo = tempo-1.0;
      intval  = (60.0/ (float)tempo) * 1000.0;
      if(tempo < 20){
        tempo = 20;
      }

      dodisp=true;
      }

   if(M5.BtnB.wasReleased()){
      tempo = tempo+1.0;
      intval  = (60.0/ (float)tempo) * 1000.0;
      if(tempo > 320){
        tempo = 320;
      }
      dodisp=true;
      }

    if(dodisp){
      int ofset=0;
      M5.Lcd.setTextSize(2);
      if((int)tempo<100){
        ofset = 64;
        M5.Lcd.fillRect(xpos, ypos,64,86,BLACK);
        }
      M5.Lcd.drawNumber((int)tempo, xpos+ofset, ypos, 7);

      M5.Lcd.drawChar('.', xpos2-20, ypos, 7);

      M5.Lcd.setTextSize(1);
      M5.Lcd.drawNumber((tempo*10-(int)tempo*10), xpos2, ypos2, 7);

      dodisp = false;
     }


   if(millis() ==  lastms){
        return;
    }
    lastms = millis();
    
    if(!runn){
        return;
    }

    tic++ ;
    if(tic >=  intval){
      ToneOn(hz,vol);
      tic = 0;
      Serial.println("ON");
      toneout=true;
      } 

     if((tic > ton1) && toneout){
         ToneOff();
         toneout = false;
         Serial.println("OFF");
         tempo = tempo * upspeed;
         intval  = (60.0/ (float)tempo) * 1000.0;
         dodisp = true;
       }

}


/*
   Tone On/Off
*/

void ToneOn(uint16_t freq, uint16_t vol) {
  ledcSetup(TONE_PIN_CHANNEL, freq, pwdth);
  ledcWrite(TONE_PIN_CHANNEL,0x1FF>>(9-vol));
}

void ToneOff() {
  ledcWriteTone(TONE_PIN_CHANNEL, 0);
  digitalWrite(SPEAKER_PIN, 0);
}

```

このスケッチでは１クリック毎にテンポが速くなりますが、これですと速いほど速くなるスピードが速くなるので真面目に練習に使うと結構大変です。一定時間、例えば5秒とかづつに一回0.1%テンポアップとかがよいかもしれません。
【Windows】WSL上のLinuxにMariaDB(mysql)をインストール

環境 windows10 WSL2
Ubuntu 20.04 LTS
↓の記事の環境
https://qiita.com/exe2zip/items/c665bc983e3b06ad88fc

MariaDBのインストールを行う

```bash
exe2zip@LAPTOP-xxx:~$ sudo apt upadate
exe2zip@LAPTOP-xxx:~$ sudo apt install mariadb-server
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763301/b123a708-c6da-f10d-95d0-0895ee50eaea.png)

インストールを終えると，
サービスにmysqlがある
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763301/a78ecf72-34f1-bde2-9e24-69d113ba85d1.png)


```bash
exe2zip@LAPTOP-xxx:~$ service mysql start
```
を実行し，mysqlのサービスを起動
サービスが起動した状態で

```bash
exe2zip@LAPTOP-xxx:~$ sudo mysql
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763301/f6844f72-67c6-6dd9-45e0-b190586f06df.png)

起動できた．

メモ

```txt
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763301/380bf076-16b2-4299-71ec-9fe82d75518c.png)
このエラーが出る時は，サービスをスタートしていないと思われる．

また，サービスの起動に失敗したときその理由として，
WSLとは別でWindows上でデータベースを起動していると，競合するときがあった（と思われる）
ので，タスクマネージャの詳細やサービスから止めておくとよいかもしれない．
プラグインなし！Wordpress管理画面の投稿一覧からワード検索でカスタムフィールドを含める方法

# どうも7noteです。プラグインなし。コピペのみでカスタムフィールドも含めた文字検索できます！

実践でとても助かったので忘れないように記事にまとめます。
ちょっとニッチな内容ですが、大量の記事を管理しているブログなどのWordpressでは重宝するかもしれません。

## カスタムフィールドも検索範囲に含める方法

以下をfunctions.phpに追記するだけ。

```functions.php
function cf_search_join($join) {
    global $wpdb;
    if (is_search()) {
        $join .=' LEFT JOIN '.$wpdb->postmeta. ' ON '. $wpdb->posts . '.ID = ' . $wpdb->postmeta . '.post_id ';
    }
    return $join;
}
add_filter('posts_join', 'cf_search_join');

function cf_search_where($where) {
    global $wpdb;
    if (is_search()) {
        $where = preg_replace(
            "/\(\s*".$wpdb->posts.".post_title\s+LIKE\s*(\'[^\']+\')\s*\)/",
            "(".$wpdb->posts.".post_title LIKE $1) OR (".$wpdb->postmeta.".meta_value LIKE $1)", $where);
    }
    return $where;
}
add_filter('posts_where', 'cf_search_where');

function cf_search_distinct($where) {
    global $wpdb;
    if (is_search()) {
        return "DISTINCT";
    }
    return $where;
}
add_filter('posts_distinct', 'cf_search_distinct');
```

## 解説

正直私もコピペで使っただけなので詳しい説明はできないのですが、元の参考にした記事をみたところ、

①データベースにあるpostsのテーブルとpostmetaのテーブルを外部結合
②検索クエリを変更し、カスタムフィールドを含める
③重複を防ぐ

という処理を行なっているようです。

**デメリット・注意点**

※get_template_part など、投稿内容以外のテキストも全て検索対象になる
※管理画面での記事一覧検索にも反映される

## まとめ

大量の記事を見直したり、書き直したり、専用に作っていたカスタム投稿タイプの情報見直しを行なうのに
便利でした。
管理画面の検索だけではなく、サイト上の検索窓も同様の効果がつくので、全ての情報から検索が可能になります。

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

参考：
https://keitahirai.net/archives/896
https://adambalee.com/search-wordpress-by-custom-fields-without-a-plugin/
コマンドライン・デベロッパツールについてメモ

環境: macOS Catalina / Big Sur （2021年2月現在）

コマンドライン・デベロッパツール（Command Line Developer Tools）は、Appleが提供しているC/C++の処理系です。C/C++のほかに、Swift、Python3、およびGitなどが含まれます。

Xcodeをインストールしなくても、コマンドライン・デベロッパツールだけインストールすればCコンパイラをターミナルから使うことができます。

## Macに最初からインストールされているもの

次の言語はデベロッパツールをインストールしなくても最初からMacに入っています。場所は `/usr/bin` です。

Perl 5.18.4、PHP 7.3.11、Python 2.7.16、Ruby 2.6.3

なお、railsコマンドが入っていますが、次のメッセージを出すだけのものです。

```
% rails --version
Rails is not currently installed on this system. To get the latest version, simply type:

    $ sudo gem install rails

You can then rerun your "rails" command.
```


## スタブとデベロッパツールのインストール

`/usr/bin` には、clang、swift、python3、gitなどのコマンドがあります。これらを仮に「スタブ」と呼んでおきます。スタブを実行すると次のようにデベロッパツールのインストーラが起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308595/079955e1-65d1-41cc-dc84-7f9381639430.png)

インストールすると、 `/Library/Developer/CommandLineTools/usr/bin` にコマンドが配置されます。インストール後に `/usr/bin` のスタブを実行すると、インストーラではなく `/Library/Developer/CommandLineTools/usr/bin` の下の対応するコマンドが実行される、という仕組みになっています。

## アンインストール

`/Library/Developer/CommandLineTools` をまるごと削除すれば、デベロッパツールをアンインストールできます。スタブを実行すると、再びインストーラが起動するようになります。

```
% sudo rm -rf /Library/Developer/CommandLineTools
```

## ダウンロードしてインストール

Apple Developerのアカウントがあれば、次のサイトからダウンロードしてインストールもできます（自分で試したことはありません）。

https://developer.apple.com/download/more/


## Cコンパイラ

### コマンド

デベロッパツールでは、ccコマンドもgccコマンドも中身は[clang](https://ja.wikipedia.org/wiki/Clang)です。

### インクルードパスとライブラリパス

Cのインクルードパスのリストは、「clang -v ソースファイル」で調べられます。

```
% clang -v hello.c
# 略
 /usr/local/include
 /Library/Developer/CommandLineTools/usr/lib/clang/12.0.0/include
 /Library/Developer/CommandLineTools/SDKs/MacOSX10.15.sdk/usr/include
 /Library/Developer/CommandLineTools/usr/include
 /Library/Developer/CommandLineTools/SDKs/MacOSX10.15.sdk/System/Library/Frameworks (framework directory)
```

リンカのライブラリパスを調べる方法は、よくわからない。これでいいのだろうか。

```
% clang -Xlinker -v hello.c
# 略
Library search paths:
	/usr/local/lib
	/Library/Developer/CommandLineTools/SDKs/MacOSX10.15.sdk/usr/lib
```


## わからないこと

- 現在のデベロッパツールのバージョンを知る方法。
- 自動的にアップデートされるのかどうか。システム環境設定の「ソフトウェアアップデート」でデベロッパツールをアップデートしたことがあるような気がするが、気のせいかもしれない。
brew doctor で ready to brew にするまでの道のり

#はじめに
brewにpythonをインストールしようと思ってbrew doctorを行ったところ、大量のエラーと格闘することになりました。
基本的にはエラー文に対処法が書いてあったり、エラー文の最初の1文を検索すれば解決方法が出てきますが、1つだけ手こずりました。
この記事はそのときの備忘録となります。

#エラー内容
```
Warning: You have unlinked kegs in your Cellar.
Leaving kegs unlinked can lead to build-trouble and cause formulae that depend on
those kegs to fail to run properly once built. Run `brew link` on these:
  node
```
軽く翻訳すると、
「Cellar（樽置き場、樽群のインストール先のパス）にリンクされてないkeg（樽、Formula（調理法、パッケージの説明書や手順書）のインストール先パス）があります。樽をリンクしないままだとビルド時に問題が起こる可能性があります。それらの樽は一度ビルドすると正しく実行されません。brew link node を実行してください。」

とのことなので、brew link nodeを実行します。

```
$ brew link node
```
するとエラーが帰ってきます。

```
Error: Could not symlink share/doc/node/gdbinit
Target /usr/local/share/doc/node/gdbinit
already exists. You may want to remove it:
  rm '/usr/local/share/doc/node/gdbinit'

To force the link and overwrite all conflicting files:
  brew link --overwrite node

To list all files that would be deleted:
  brew link --overwrite --dry-run node
```

`share/doc/node/gdbinit`ファイルにsymlink（シンボリックリンク（ファイルの別名のようなもの））が作れないから、対象のファイルを消すか上書きをするように書いてあります。
ここでは上書きします。

```
$ brew link --overwrite node
```

もちろん（？）エラーが帰ってきます。

```
Error: Could not symlink share/doc/node/gdbinit
/usr/local/share/doc/node is not writable.
```

`/usr/local/share/doc/node`の書き込み権限が無いそうです。
ではこのディレクトリに移動して、権限を現在のユーザーに移動します。
その後に上書きします。

```
$ cd /usr/local/share/doc
$ sudo chown -R $USER node
$ brew link --overwrite node
```

期待通りエラーが帰ってきます。

```
Error: Could not symlink lib/dtrace/node.d
/usr/local/lib/dtrace is not writable.
```

`/usr/local/lib/dtrace`の書き込み権限がありませんと出ました。
直前のエラーと同じ内容です。
同じように解決します。

```
$ cd /usr/local/lib
$ sudo chown -R $USER dtrace
$ brew link --overwrite node
```

上書きが成功すると以下のメッセージが出ます。

```
Linking /usr/local/Cellar/node/15.8.0... 7 symlinks created.
```

もうエラーは無さそうなので、改めて`brew doctor`を行います。

```
$ brew doctor
Your system is ready to brew.
```

あなたのシステムは醸造の準備が出来ています、と出ました。
お疲れさまでした、これでbrewが使えます。

#終わりに
勉強がてらに初めてQiitaに投稿しましたが、とても勉強になりました。
人に教えるなどのアクティブラーニングは勉強内容の定着率が高いと言います。
今回は他人に見せる体で調べながら書きましたが、確かに実感できるほどにbrewやLinuxコマンドについて理解が深まったように感じます。
JAVAの繰り返し処理についてまとめてみた

#JAVAの繰り返し処理について調べてみた
今回はjavaの繰り返し処理について思いつく方法をまとめてみようと思います。

```
1～10の数字の合計値
```

##1.for文

```:for
int sum = 0;
for (int i=0; i <=10;i++){
     sum += i;
}
```
一番、単純な繰り返し処理かと思われます。
int i=0でintの変数を定義して、10を超えるまでiを１ずつ増やしていく処理になってます。
##2.while文

```:while
int sum =0;
int num = 1;
while(num<=10){
	sum +=num;
	num++;
}
```
条件付きでここまできたら止める繰り返し処理の時に使う書き方です。
今回みたいな範囲が決まって１ずつ足すのではfor文の方が使われるかと思います。
##3.do...while文

```:do...while
int sum =0;
int num=1;
do{
	sum+=num;
	num++;
}while(num<11)
```
whileとの違いは、条件式が後ろにあるので中の処理が一度は必ず実行される点にあります。
あまり使った記憶がございません！
##4.拡張for文

```:拡張for
int sum=0;
int numList[]= {1,2,3,4,5,6,7,8,9,10};
for(int num:numList){
	sum+=num;
}
```
配列の中身を一つずつ取り出してくれる処理になります。
結構便利です。
##5.streamAPI

```:streamAPI
// 方法1
// 配列の性質を利用して計算
var i = new int[]{0};
IntStream.rangeClosed(1, 10).forEach(e -> i[0] += e); // i[0] == 55

// 方法2
// 可変な整数値を表すAtomicIntegerを使用
var i = new AtomicInteger();
IntStream.rangeClosed(1, 10).forEach(e -> i.set(i.get() + e)); // i.get() == 55
```
APIです。
※コメントの中で指摘いただいたので修正しました（2021/02/14）
はじめは下記を記載していたのですが、繰り返し処理といったわけではなかったのでforEachに変更しました。
>int[] numList = {1,2,3,4,5,6,7,8,9,10};
>int sum = Arrays.stream(a).sum();

1～10の数字の合計値をforEachで書くのはあまり適さないようです。
ただ、コードとしてスッキリしたりできるので使ってみてください。
@jababoyさんありがとうございました！

##まとめ
いかかがだったでしょうか！
他にもこんな書き方あるよと知ってる方は教えてください！
使い分けていきましょう。
UbuntuDesktop20.10へssh接続

#概要
普段Desktop利用しているUbuntuへ、GUI動作が遅い時やモニタのうつりが悪い時sshでも接続できないかと思い、実施したときのめも。

Terminalにて以下コマンドを実行。

```
sudo apt-get install openssh-server
```

これでssh接続できるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1021790/1ec51fd6-f671-f158-9455-ab332edd95f3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1021790/0058d7f8-c279-5015-1d14-87f3f72ce8b4.png)
【効率化】RGB→カラーコード変換器を作ってみた

オリジナルアプリを作成し始めたら、色を扱うためにRGBから16進数のカラーコードへ変換したい場面が増えてきました。 他にもいいツールはあるでしょうが、せっかくなので、自分で作ってみました。

## [Ruby](http://d.hatena.ne.jp/keyword/Ruby)の記述



![f:id:lynx-levin:20201103130757p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/l/lynx-levin/20201103/20201103130757.png)



- まずは、R、G、Bをそれぞれ入力します。
- その後、7行目でそれぞれ16進数に変換し、つなげます。

### 詳しく解説

`format("%X", R)`
　　・・・Rを16進数に直す
（例） 200 → "C8" / 15 → "F" 
　　→これを、2桁表示にしたい

`format("%2X", R)`
　　・・・「2」を付ける
（例） 200 → "C8" / 15 → " F"
　　→1桁目の半角スペースを0にしたい

`format("%02X", R)`
　　・・・「0」を付ける
（例） 200 → "C8" / 15 → "0F" 
　　→GとBも加えたい

`format("%02X%02X%02X", R, G, B)`
　　・・・それぞれ併せる
（例） R=200 G=15 B=1 → "C80F01"

`format("#%02X%02X%02X", R, G, B)`
　　・・・さらに、頭に「#」を付けると完成
（例） R=200 G=15 B=1 → "#C80F01"

## 起動方法

これで変換器自体はできましたが、いちいちターミナルを開いて、
`ruby ~/ruby/RGBconverter.rb`のように入力するのは手間だし、それなら手で計算したほうが早いです。

なので、ショートカットダブルクリック（またはSpotlight検索）ですぐ起動できるようにします。 （これよりもっとスマートな方法がありそうですが・・・）

RGBconverter.commandという名前で、以下の内容のファイルを作成します。

![f:id:lynx-levin:20201103132414p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/l/lynx-levin/20201103/20201103132414.png)

※内容はターミナルでルビーを開くときのコマンドで、[ruby](http://d.hatena.ne.jp/keyword/ruby) (RGBの[絶対パス](http://d.hatena.ne.jp/keyword/%C0%E4%C2%D0%A5%D1%A5%B9))



その後、このまま開こうとすると下記のようなメッセージが出て、実行することができません。

![f:id:lynx-levin:20201103132642p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/l/lynx-levin/20201103/20201103132642.png)



そこで、
`chmod a+x ~/Desktop/RGBconverter.command`
のようにアクセス権限を付与してやります。

これで、完成です。

SpotlightでRGBconverter.commandを検索してやって実行すると、ターミナル が開いて入力待ちになるので、RGBを順に入力してやるとカラーコードを表示してくれます。

【実行画面】
![f:id:lynx-levin:20201103133159p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/l/lynx-levin/20201103/20201103133159.png)



### 追記

上記の[Ruby](http://d.hatena.ne.jp/keyword/Ruby)で空白を0に置き換えたところについて

> `format("%02X", R)`
> 　（例） 200 → "C8" 15 → "0F" 

「0」の代わりに他の文字「a」などを入れても、その文字に置き換えてくれるわけではないようです。
何か方法があるのかもしれませんが・・・
NoMethodErrorの解決例

NoMethodError in Post#index
undefind method 'each'for nil:NilClass

このエラー文はPosts#indexにメソッドエラーがあります。
空（for nil:NilClass）に対してeachが実行できません。（undefined method 'each'）
eachの前の@postsが空なのでeach文が実行できないと読み取れます。

@postsはなぜ空なのか？@postsはどのファイルのどのアクションで定義されているのか
まず、posts_controller.rbのindexアクションで確認します。

```posts_controller.rb
def index
 @posts = Post.includes(:user)
end
```
このファイルでは@postsが定義されているので問題ありません。
では、受け渡し先のviews/posts/index.html.erbを確認します。

views/posts/index.html.erbでは、
<% @post.each do |post| %>と記述されています。

each文の前が@postと記述されているので、@postsに修正します。
UbuntuDesktop20.10へWindows10からVNC接続

#概要
ラズパイ4にUbuntuDesktop20.10をインストールしたので、Windows10からGUI接続できるようにしたときの記録です。

1. Ubuntu側で画面共有をONにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1021790/e18ba2c4-a1c6-af1f-6c4d-51443d7093a3.png)

2.　Terminalにて下記コマンドを実行し、暗号化設定をfalseにします。

```
$ DISPLAY=:0 gsettings set org.gnome.Vino require-encryption false
```


3.　Windows側からVNCViewerで接続できるようになりました。
　(暗号化されていないというエラーが出ます)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1021790/47a09595-03a2-97c8-4b8b-7777a75f4517.png)
githubとのつなぎこみ　環境構築(SSHとかなんとか) localからリモートにする為に。

## はじめに
githubのつなぎこみを一切合切忘れていたので備忘録として。
内容としてはSSHの設定方法。

## 環境
- MacBookAir(10.14.6)
- homebrew install済
- iterm2
- VScode

## 前提として
- githubのアカウント登録がすんでいる（この辺はググるとすぐ出てくる）
- ローカルリポジトリがある状態

## 手順
1,ssh鍵生成(ssh-keygen)
2,パスフレーズ入力
3,githubに公開鍵設定
4,ssh接続確認

## 実行してみる
### 1,ssh鍵生成(ssh-keygen)
```:ターミナル
$ ssh-keygen -t ed25519 -C "your_email@example.com"
//メールアドレスは自分の GitHub メールアドレスに置き換え
```
デフォルトのファイル場所。エンターで次へ。

```
> Generating public/private ed25519 key pair.
> Enter a file in which to save the key (/Users/you/.ssh/id_ed25519): [Press enter]
```
### 2,パスフレーズ入力
何も入れずにエンターするとパスフレーズなしで作成される。

```:ターミナル
> Enter passphrase (empty for no passphrase): [Type a passphrase]
> Enter same passphrase again: [Type passphrase again]
```

```:成功
Your identification has been saved in [URL書いてある]
Your public key has been saved in [URL書いてある]
The key fingerprint is:
[SHA番が書いてあります]　[登録したアドレス]
he key's randomart image is:[なんか書いてある]
```
### 3,githubに公開鍵設定
鍵の中身のクリップボードへのコピー
*鍵の名前は自分の作成したもの（id_rsa部分が人によって違うと思う）
`$ pbcopy < ~/.ssh/id_rsa.pub`（Mac）

githubのsettingから`SSH and GPG keys`を選択し、newSSHkeyを登録
![スクリーンショット 2021-02-11 19.02.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540209/8c382a04-da55-ba94-a105-a0e0bee92ffe.png)
titleは自分がわかりやすい名前で
keyは上でクリップボードにコピーしたものを貼り付ける。
`Add SSH key`を押下

### 4,ssh接続確認

```:ターミナル
ssh -T git@github.com.main
```
[Githubのsshkey](https://docs.github.com/en/github/authenticating-to-github/githubs-ssh-key-fingerprints)
⬆︎記述されているfingerprintsと一致するのを確認してから`yes`を入力

`successfully`となったら成功！

## 参照サイト
- [今日から始めるGitHub](https://eh-career.com/engineerhub/entry/2017/01/31/110000#%E7%92%B0%E5%A2%83%E3%81%AE%E6%A7%8B%E7%AF%892-SSH%E3%81%AE%E9%8D%B5%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B)
- [github公式](https://docs.github.com/ja/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent)
- [GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~](https://qiita.com/shizuma/items/2b2f873a0034839e47ce)
- [お前らのSSH Keysの作り方は間違っている](https://qiita.com/suthio/items/2760e4cff0e185fe2db9)
- [ssh-keygenコマンドの使い方](https://qiita.com/hana_shin/items/2003698873a5782b7efd)
- [コマンドオプション](https://www.atmarkit.co.jp/ait/articles/1908/02/news015.html)
- [複数ある人用](https://tech.playground.style/workstyle/switch-github-accounts/)

## 終わりに
内容にご指摘ありましたら、連絡いただけますと幸いです。
近々、ローカルリポジトリをリモートリポジトリにする方法も備忘録として書こう。。。
“JAVA_HOME is not defined correctly” 解決方法 (MacOSX + adoptopenjdk)

## 環境

2021年2月11日

Mac OS Big Sur ver11.1
adoptopenjdk ver11.0.9.1
https://adoptopenjdk.net/index.html
mavenは未インストール
そのためmaven wrapperコマンドでビルド(./mvnw)

##状況

mavenでビルドするときにエラー

エラー内容はこちら

```
JAVA_HOME is not defined correctly.
  We cannot execute /Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/bin/java
```
内容は
「**JAVAの環境変数が正しく定義されていません。**」

その時の$JAVA_HOMEの中身は

```
echo $JAVA_HOME
/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk
```

要はこのパスが間違っているということ。
このパスの定義の仕方が、JREやJDKの種類によって多少異なる。

ちなみにJAVA_HOMEの後ろの```/bin/java```は、mvnw.cmdファイルで呼び出すよう定義されている。


##解決方法

adoptopenjdkの場合は後ろに/Contents/homeを付け加える。
だから

```
export JAVA_HOME=/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/home
```
というコマンドを打つ。
その後

```
source ~/.bash_profile
```
で環境変数を更新

その後mavenコマンドを打つ。
今回はmvnwコマンドを用いて依存関係ツリーを表示

```
./mvnw dependency:tree
```
結果は「 **BUILD SUCCESS** 」

ご指摘あればよろしくお願いします。


参考サイト
https://stackoverflow.com/questions/29456149/build-openjdk-on-mac-java-home-is-not-defined-correctly
Salesforceに少しでも関わる方々にお伝えしたいたった1つのこと

皆様こんにちは。

先日、株式会社セールスフォース•ドットコム社より感謝状をいただきました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/634cb6f8-fc7f-563d-5d27-650efb5f290a.jpeg" width=50%>

すごく立派な感謝状です。
どうやら今回感謝状をいただけた方々はごくわずかだったようで、本当に本当にありがたいことこのうえないです。

さて、そんな私ですがSalesforceに少しでも関わる方々にどうしてもお伝えしたいことがありここに記事を執筆いたします。

今回私が皆様に言いたいことはたった1つです。
それは
「Salesforceは本当に難しい」

です。
大事なことなのでもう一度言います。

「Salesforceは本当に難しい」


私はSalesforceのお仕事に携わり数年経ちますが、未だに分からないことだらけで毎日ヒーヒー言いながらSalesforceをカチカチいじっております。

Salesforceは本当に複雑で難しく、日々気づきや学びを得ながらも、新しい謎が次々に生まれとても大変です。

ここ最近は、私はやっとSalesforceのことを（ほんの少し）分かるようになってはきましたが、
お仕事をはじめた最初の数ヶ月間は
「なんでみんなはSalesforceのことをこんなにたくさん知っているのだろう。僕は覚えが悪いのかなぁ」
「Salesforceでこんなに苦しい想いをしてるのは僕くらいなのかなぁ」
とずっとクヨクヨ悩んでいました。

しかしながら、最近はそんなことはない。やっばりSalesforceは難しいぞ！ということを自信を持って（？）言えるようになりました。

理由は大きく２つあります。

１つ目として、私は2年くらい前から毎月Salesforceコミュニティ活動として勉強会を開催していますが、過去開催した30回ほどの勉強会の参加者の中には
「急にSalesforceの管理をやることになったけど何をどうすればいいか分からない」
「独学で調べても調べてもSalesforceのことがよくわからない」
という悩みを持った方々がたくさんおりました。

２つ目として、私はTrailblazerCommunity（※Salesforceの質問を投稿すれば誰かしら有識者が答えてくれるありがたいサイト。詳しくは後述します)に投稿されるSalesforceの質問を約2年間すべて見てきましたが、周りにSalesforceの悩みを相談できる人がいない。孤立した中で投稿してくる方々をたくさん見かけてきました。

そんな中で、
「やっぱりSaleforceは難しいんだな」
「悩んでるのは僕だけじゃなかったんだな」
と思うようになりました。

私のつたない文章をここまで読んでくれてた方々は、とても優しくて、かつ何かしらの形でSalesforceに関わっている方々なのでしょう。
もしもSalesforceで困ってることや悩んでいることがあり、相談できる人がいなければ、ぜひSalesforceのコミュニティ活動に参加してみてください。
https://www.trailblazers.jp/


きっとSalesforceがめっちゃ出来る人があなたのSalesforceのお悩みを聞いてくれることでしょう。
幸い、最近の活動はオンラインイベントなので途中参加や途中退席がしやすいので以前より参加する敷居は低いはずです。

「いやいや、私はそんなイベントなんて参加することは無理だから！」
というそんな貴方もご心配なく！

STrailblazerCommunityという「Salesforceの質問を投稿したら誰かしらが回答をしてくれる」というサイトがございます！
ぜひ勇気を持って貴方のお悩みを投稿してみてください！
（Salesforceにログインすればだれでも投稿できますよ！）
https://trailblazers.salesforce.com/featuredGroupDetail?id=a1z3A000007mmJ7

最後になりましたが、改めて大事なことを言います。
「Salesforceは本当に難しい」
「でも、Salesforceの悩みや困りごとを聞いてくれる人は思った以上にたくさんいます」
JAVAのデメリット3選

#JAVAのデメリット3選
この記事ではプログラミング言語「JAVA」のデメリットについて３つお伝えしたいと思います。

##1つ目のデメリット　オブジェクト指向を使いこなすのが大変
オブジェクト指向は「独立性」「再利用性」「拡張性」などを実現するために様々なコードの書き方があるのですが、
理解するまでに中々時間がかかってしまいます。。
私も初めはpythonを勉強して、その後javaを勉強し始めたのですが、「なんだこのめんどくさい言語」と思ってしまいました。
慣れたら便利なことに気づいていけるのですが、初心者の方にはハードだと思います。
私もまだ使いこなしてる自身はありません！！

##2つ目のデメリット　小規模な開発には向いていない
オブジェクト指向を実現するためにコードが長くなりがちで、小規模な開発でも時間がかかってしまいます。
慣れの問題かと思われるかもしれませんが、インタプリタ言語の方が小規模であれば慣れると早く作成できるかと思います。
使い分けが大事ってことですね。

##3つ目のデメリット　流行りの企業には入れない
これは個人的なイメージでなんですが、最近はスタートアップ言語でRubyやらpythonやらが多いイメージです。
javaを使ってるとこもあるとは思いますが、古い中小企業が多いイメージなので、最近の自社サービスを運営してるとこで
働きたいって方にはあまり向いてないかもしれません。

###終わりに
今回はJAVAのデメリット3選を紹介させていただきました。
javaは万能な分、やはり学習コストは高いイメージがあります。
ですが、ある程度使いこなせるようになれば他の言語でも応用できるので根気がある方は是非とも勉強
してみてください。

ご覧いただきありがとうございました。
【node】MacOSにインストール

## 概要
新端末にnodeをインストールする際に若干ハマったので解決方法を記します。

## 手順

### HomebrewでNodebrewをインストール

```.sh
brew install nodebrew
```

早速、エラーが出ます。

```
Error: Your CLT does not support macOS 11.
It is either outdated or was modified.
Please update your CLT or delete it if no updates are available.
Update them from Software Update in System Preferences or run:
  softwareupdate --all --install --force

If that doesn't show you any updates, run:
  sudo rm -rf /Library/Developer/CommandLineTools
  sudo xcode-select --install
```

指示通りに下記を実行したのち、再度`brew install nodebrew`を実行。

```.sh
softwareupdate --all --install --force
sudo rm -rf /Library/Developer/CommandLineTools
sudo xcode-select --install
```


### nodeをインストール

```.sh
nodebrew install-binary stable
```

nodeの安定板をインストールしようとすると、またエラーが出ます。

```
Fetching: https://nodejs.org/dist/v14.15.5/node-v14.15.5-darwin-x64.tar.gz
Warning: Failed to create the file  
```

ディｒクトリを作ってあげれば解決です！

```.sh
mkdir -p ~/.nodebrew/src
```

### nodeの設定

インストールされているバージョンを調べて、

```.sh
nodebrew ls
v14.15.5
```

使いたいものをuseで指定します。

```.sh
nodebrew use v14.15.5
use v14.15.5
```

PATHを通してあげれば、

```.sh
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
```

使えるようになりました！

```.sh
node --version       
v14.15.5
```
React環境構築【Node.jsのインストールからCreate React Appまで】~macOS編~


本記事はmacOSでの、Reactの環境構築を解説した記事です。

Windowsを利用している方はこちらを御覧ください。
[React環境構築【Node.jsのインストールからCreate React Appまで】~Windows編~](https://qiita.com/techpit-jp/items/984b80a795b7a6f6dd60)

他にもプログラミング学習に役立つような情報を発信しています！[アカウントをフォロー](https://qiita.com/techpit-jp)してお待ちください！

# Node.jsの環境構築（macOS）
Webアプリケーションの開発を始めるにあたって、Node.jsをインストールしていきます。

すでにNode.jsがインストールされているかどうかは下記コマンドで確認できます。ターミナルを開いて下記コマンドを入力してみましょう。

```
$ node -v
```

下記のようにインストールされているNode.jsのバージョンが表示されれば、すでにインストール済みですので、本パートは読み飛ばしてください。

```
v12.16.0
```

## Node.js のインストール

下記リンクからNode.jsをインストールします。

[Node.js](https://nodejs.org/ja/)

上記のリンクにアクセスすると下記のような画面が表示されるので「推奨」と記載されている左側のボタンをクリックしてください。.pkgファイルのダウンロードが開始します。

※下記の画像にあるバージョンは、2020年7月時点のバージョンになり、下記の画像にあるバージョンとは違うバージョンが表示されている可能性はあります。

![image](https://i.gyazo.com/8ec8ce3e74b32be28ea08430592d1edb.png)

.pkgファイルがダウンロードされたら ファイルを実行しましょう。

以下のような画面が表示されたら、「続ける」ボタンをクリックしてください。

<img width="555" alt="" src="https://i.gyazo.com/816ae349f47a5545c55925995a08f111.png">

以下のように使用許諾契約の画面が表示されたら、もう一度「続ける」ボタンをクリックしてください。

<img width="555" alt="" src="https://i.gyazo.com/653beedc4f88b1cf02ee0b041f7be9fa.png">

次に、「同意する」ボタンをクリックしてください。

<img width="555" alt="" src="https://i.gyazo.com/18f83a5c26d4d6bada2d3ecce5eb3d5b.png">

次にインストール先を設定しますが、特にこだわりがなければ、そのまま「インストール」ボタンをクリックしてください。

<img width="555" alt="" src="https://i.gyazo.com/af3e963d016ccd7fb07318a6dd507de9.png">

次に、Macのログインパスワードを入力し、「ソフトウェアをインストール」ボタンをクリックしてください。インストールが開始されます。

<img width="555" alt="" src="https://i.gyazo.com/46fddf3f6a403ef3efb3f18415bb7d61.png">

インストールが完了すると、以下のような画面が表示されますので、「閉じる」ボタンをクリックしてください。

<img width="555" alt="" src="https://i.gyazo.com/5a9f6a4e51b642d513c6623cc1908c18.png">

Node.jsがインストールされたか確認しましょう。
ターミナルを開いて、下記のコマンドを入力してください。

```
$ node -v
```

下記のようにインストールしたNode.jsのバージョンが表示されれば成功です。

```
v12.18.2
```

以上でNode.jsをインストールできました。

## Reactプロジェクトを作成する
Reactのプロジェクトを作成するには以下のようなコマンドを実行します。

```
$ npx create-react-app <プロジェクト名>
```

ここでは、`techpit-react-app`という名前で作成してみましょう。

```
$ npx create-react-app techpit-react-app
```

以下のように表示されれば成功です。

```bash
$ npx create-react-app techpit-react-app

//省略

We suggest that you begin by typing:

  cd techpit-react-app
  yarn start

Happy hacking!
```

表示されている通り、`cd`コマンドで移動します。

```
$ cd techpit-react-app
```

## 開発サーバーを起動する

それでは`npm`コマンドを使用して開発サーバーを起動してみましょう。

```
npm start
```

`http://localhost:3000/`にアクセスして、以下の画面が表示されることを確認してください。

![image](https://i.gyazo.com/d3bea613cb35fba26370859887ee1c63.png)

以上でReactの環境構築は終了です。

### 参考
https://ja.reactjs.org/docs/create-a-new-react-app.html#create-react-app
React環境構築【Node.jsのインストールからCreate React Appまで】~Windows編~


本記事はmacOSでの、Reactの環境構築を解説した記事です。

Windowsを利用している方はこちらを御覧ください。
[React環境構築【Node.jsのインストールからCreate React Appまで】~macOS編~](https://qiita.com/techpit-jp/items/b4792f22ddc1155a1cb3)

他にもプログラミング学習に役立つような情報を発信しています！[アカウントをフォロー](https://qiita.com/techpit-jp)してお待ちください！

# Node.jsの環境構築（Windows）

Webアプリケーションの開発を始めるにあたって、Node.jsをインストールしていきます。

もし既にお手元のPCにNode.jsの環境があれば、このパートは読み飛ばしても大丈夫です。

注意）このパートで環境構築する対応のPCはWindowsになります。

すでにNode.jsがインストールされているかどうかは下記コマンドで確認できます。ターミナルを開いて下記コマンドを入力してみましょう。

```
$ node -v
```

下記のようにインストールされているNode.jsのバージョンが表示されれば、すでにインストール済みですので、本パートは読み飛ばしてください。

```
$ node -v
v12.16.0
```

## Node.js のインストール

下記リンクからNode.jsをインストールします。

[Node.js](https://nodejs.org/ja/)

上記のリンクにアクセスすると下記のような画面が表示されるので「推奨」と記載されている左側のボタンをクリックしてください。.pkgファイルのダウンロードが開始します。

※下記の画像にあるバージョンは、2020年11月時点のバージョンになり、下記の画像にあるバージョンとは違うバージョンが表示されている可能性はあります。

![image](https://i.gyazo.com/3dfd53c31ff3e29c6e1a908a9154ed38.png)

ファイルがダウンロードが完了したら、ダブルクリックでファイルを実行しましょう。

以下のような画面が表示されたら、「Next」ボタンをクリックしてください。

<img width="555" alt="" src="https://i.gyazo.com/0afc1000332488525918ce83de6b34f3.png">

以下のような画面が表示されたら、「I accept the terms in the License Agreement」にチェックをいれて、「Next」ボタンをクリックしてください。

<img width="555" alt="" src="https://i.gyazo.com/4bb664b1cf7f8257c9dcf4edd434d2ec.png">

次にインストール先を設定しますが、特にこだわりがなければ、そのまま「Next」ボタンをクリックしてください。

<img width="555" alt="" src="https://i.gyazo.com/8d9a1cfe19cc4aa16097c5b304f33a40.png">

次に、カスタムの設定画面が表示されますが、特にこだわりがなければ、そのまま「Next」ボタンをクリックしてください。

<img width="555" alt="" src="https://i.gyazo.com/5b33dafccee816e38f190a71cff60237.png">

以下の画面が表示されたら、真ん中にあるチェックボックスにチェックをいれ、「Next」ボタンをクリックしてください。

<img width="555" alt="" src="https://i.gyazo.com/84a047aa898facff7afe0a09ac4b0264.png">

インストールを開始します。「install」をクリックしてください。

<img width="555" alt="" src="https://i.gyazo.com/8c150d4383192784b5ab6259b01d854a.png">

インストールが完了すると、以下のような画面が表示されますので、「Finish」ボタンをクリックしてください。

<img width="555" alt="" src="https://i.gyazo.com/c546a988596a7bc039897b837c61957a.png">

Node.jsがインストールされたか確認しましょう。
コマンドプロンプトを開いて、下記のコマンドを入力してください。

```
$ node -v
```

下記のようにインストールしたNode.jsのバージョンが表示されれば成功です。

```
$ node -v
v14.15.1
```

以上でNode.jsをインストールできました。

お疲れ様でした。


## Reactプロジェクトを作成する
Reactのプロジェクトを作成するには以下のようなコマンドを実行します。

```
$ npx create-react-app <プロジェクト名>
```

ここでは、`techpit-react-app`という名前で作成してみましょう。

```
$ npx create-react-app techpit-react-app
```

以下のように表示されれば成功です。

```bash
$ npx create-react-app techpit-react-app

//省略

We suggest that you begin by typing:

  cd techpit-react-app
  yarn start

Happy hacking!
```

表示されている通り、`cd`コマンドで移動します。

```
$ cd techpit-react-app
```

## 開発サーバーを起動する

それでは`npm`コマンドを使用して開発サーバーを起動してみましょう。

```
npm start
```

`http://localhost:3000/`にアクセスして、以下の画面が表示されることを確認してください。

![image](https://i.gyazo.com/d3bea613cb35fba26370859887ee1c63.png)

以上でReactの環境構築は終了です。

### 参考
https://ja.reactjs.org/docs/create-a-new-react-app.html#create-react-app
【PHP】再帰的なarray_filter

# はじめに
PHPを触ってると、多次元配列に対して再帰的に処理をしたい時ってありますよね。
今日は、**array_filter再帰関数バージョン**を考えたので紹介します。

# array filterとは

```php
array_filter(array $array, callable|null $callback = null, int $mode = 0): array
```
>array_filter — コールバック関数を使用して、配列の要素をフィルタリングする
>[公式より](https://www.php.net/manual/ja/function.array-filter.php)

以前に、[array_filterの色々な書き方](https://qiita.com/westhouse_k/items/56cc472edfe3d53ded49)を書いたので、そちらも読んでみてください。


## 第2引数を省略

```php
$arr = [
    'a' => 'aaa',
    'b' => '',
    'c' => null,
    'd' => 0,
    'e' => '0',
    'f' => []
];

$res = array_filter($arr);

// array(1) {
//   ["a"]=>
//   string(3) "aaa"
// }

```
array_filterは第2引数を省略すると、すべての要素に対して、``!empty()``を行い、空を取り除くことができます。空の定義は[こちら](https://www.php.net/manual/ja/function.empty.php)です。ちなみに、配列のキー``a``は保存されます。


```php
$arr = [
    'a' => 'aaa',
    'b' => '',
    // ↓①
    'c' => [
        'd' => [],
    ]
];

$res = array_filter($arr);

// array(2) {
//   ["a"]=>
//   string(3) "aaa"
//   ["c"]=>
//   array(1) {
//     ["d"]=>
//     array(0) {
//     }
//   }
// }
```
``array_filter``は多次元配列の中の要素まで覗きにいきません。なので、``①``が空ではないと判定されて返却されます。

# 本題
### 再帰関数とは
再帰関数とは、**関数内で、自分自身を呼び出す関数**です。

---
 
```php
/**
 * 再帰的に配列をフィルターする
 *
 * @param array $arr 対象の配列
 * @return array 空が取り除かれた配列
 */
function array_filter_recursive($arr): array {

    foreach($arr as $key => $val) {

        if (is_array($val)) {
            // ↓①
            $val = array_filter_recursive($val);
        }
        if (!empty($val)) {
            $res[$key] = $val;
        }
    }

    return $res ?? [];
}
```
①：``$val``が配列の場合、もう一度自分自身を呼んで、再帰的に処理をしています。


```php
$arr = [
    'a' => 'aaa',
    'b' => [
        'c' => 'ccc',
        'e' => [
            'f' => '',
            'g' => 'ggg'
        ],
        'h' => null
    ],
    'i' => [
        'j' => []
    ],
    'k' => 0
];

$res = array_filter_recursive($arr);

// array(2) {
//   ["a"]=>
//   string(3) "aaa"
//   ["b"]=>
//   array(2) {
//     ["c"]=>
//     string(3) "ccc"
//     ["ee"]=>
//     array(1) {
//       ["g"]=>
//       string(3) "ggg"
//     }
//   }
// }
```
これで多次元配列の奥の方まで、フィルターすることができました🥳

# 終わりに
``!empty($val)``で、違う判定処理を行えば色々応用できそうなので、是非試してみてください。
また、``array_filter_recursive``に変わる良い関数名があれば、コメントいただけると嬉しいです。
非負整数のみ入力を受け付ける

このプログラムでは、数値以外を含む入力を受け取った場合に数値のみをきれいに抜き出して入力することが出来ます。

```React
import React from 'react';

class inputVal extends React.Component {
  
  constructor(props){
    super(props);
    this.state = {
        value = '';
    };
    this.handleChange = this.handleChange.bind(this);
    }

  handleChange(e){
    var value = e.target.value.replace(/\D/gi,'');
    if (/^([1-9]\d*|0|)$/.test(value)){
        this.setState({speed: value});
    } else if (/^0\d*$/.test(value)){
        this.setState({speed: value.match(/([1-9]\d*|0|)$/)[0]});
    } else if (value===null){
        this.setState({speed: ''})
    }
  }

  render(){
    return(
    <div>
        <input name='speed' type='tel' value={this.state.value} onChange={this.handleChange}/>
    </div>
    )
  }
}

```
# 解説
input要素は、`type='tel'`を指定します。`type='num'`で動かそうとすると、`-`などの記号が入ってしまうため、うまくいきません。かと言って何も指定しないと、スマホで入力する際に表示されるソフトウェアキーボードがいい感じにならないので、このようになっています。

## handleChange(e)

1. 入力を受け取った直後に、`replace(/\D/gi, '')`によって数字以外の文字列を空文字列に置換します。
2. `/^([1-9]\d*|0|)$/.test(value)`により、0から始まらない数列をそのまま入力として受け取ります。
3. `/^0\d*$/.test(value)`により、0から始まる数列を受け取ったと判定された場合は`value.match(/([1-9]\d*|0|)$/)[0]`によって0を除いた数値として受け取ります。
4. 正規表現にマッチしない文字列を受け取った場合は、空文字列を返却します。

こうすることにより、`05`のような文字列を許容せず、例えば`0`を入力した直後に`5`を入力すると`5`のみが入力されるフォームを生成することが出来ます。

#コメントより
実は正規表現を使わなくてもイケるらしい。

```React
import React from 'react';

class inputVal extends React.Component {
  
  handleChange(e){
    e.target.value = isNaN(parseInt(e.target.value)) || e.target.value < 0 ? '' : parseInt(e.target.value)
  }

  render(){
    return(
    <div>
        <input type='tel' onInput={this.handleChangeSpeed1}/>
    </div>
    )
  }
}

```


こちらのほうが記述量が少なくてシンプル。数値の範囲指定もついでに出来ますね。

以上です。
【Rails】部分テンプレートの一部を特定のページでのみ表示するには？

共通の記述を部分テンプレート化したけど、ページによって一部分だけ記述を変えたいときってありますよね。
そんなときは、`current_page?`メソッドが便利です！

#current_page?メソッドとは？
表示中のページのパスを判定できるメソッドです。
引数にしたパスが表示中のページと同じかどうかを判定してくれています。同じであればtrueを返します。

```
current_page?(判定したいパス)
```
実際にHTMLファイルで使用する際は、以下のようにif文を用いて記述します。

```
<% if current_page?(root_path) %>
  <div>現在のページはトップページです</div>
<% end %>
```
また、複数のページを指定することもできます。

```
<% if current_page?(root_path, 〇〇_path, XX_path) %>
```

#参考記事
https://railsdoc.com/page/current_page_q
https://qiita.com/zenizh/items/8b684eefc989d9a56427
https://yabecchi.com/?p=437
[Unity3D] カメラの追従(背後に固定)

1, FollowCamera.csを作成し、下記を記述する

```C#:FollowCamera
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class FollowCamera : MonoBehaviour
{
    [SerializeField] Transform target;

    void Update()
    {
        transform.position = target.position;
    }
}
```

2, FollowCameraにMainCameraを子オブジェクトにし、FollowCameraにPlayerを設定する
![6434BB8E-BBA5-454C-9F92-59A08387C160.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/6638119c-8c00-0005-811a-74692fd84ec5.jpeg)

3, FllowCameraのoverridesでApplyAllを押す。
![B5757573-29B1-4807-B4EE-79E081EF3F16_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/329ac08f-428d-2588-54b6-39772313d44d.jpeg)

4, PlayerのTransformをコピーし、FllowCameraにコピーする
![35F45119-B585-4F0F-B764-8A27D875B812_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/8ae76ab1-1975-eaf8-6cd0-5fab9de3a6ae.jpeg)

5, MainCamera位置にAlignWithViewを行う
![D1342BEE-477D-4127-AA0A-EB21CA13EDE6.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/22e72051-fefb-b03f-4399-fb459a9583ac.jpeg)
Laravel ログイン条件カスタマイズでor条件

App\Http\Controllers\Auth\LoginController

で
下記を加えると(オーバーライド)、例えばroleが1の場合とログイン条件を変更できますが

```php:App\Http\Controllers\Auth\LoginController
    protected function credentials(Request $request)
    {
        return array_merge( 
            $request->only($this->username(), 'password'), // 標準の条件
            [ 'role' => 1 ] // 追加条件
        );
    }
```

これをroleを3または4みたいにしたい場合は配列にするだけです

```php:App\Http\Controllers\Auth\LoginController
    protected function credentials(Request $request)
    {
        return array_merge( 
            $request->only($this->username(), 'password'), // 標準の条件
            [ 'role' => [3,4] ] // 追加条件
        );
    }
```
Raspberry PiにUbuntu20.04とROS Noeticをインストール

# SDカードにUbuntu20.04のイメージを焼く
公式のImagerで。
20.04はServerしかなかった。
![Screen Shot 2021-01-11 at 17.52.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80263/ade1542a-2d09-66ea-21be-f67bcd90700a.png)

# Wifi設定
SDカードの段階で設定しておく。

```
wifis:
  wlan0:
    dhcp4: true
    optional: true
    access-points:
        "ssid":
            password: 12345678
```

# ラズパイにログイン
arp-scanでラズパイのIPを見つけて、ubuntuユーザでログインする。

```
% arp-scan -l
192.168.0.16	 Raspberry Pi Trading Ltd

% ssh ubuntu@192.168.0.16
```

# ROSインストール
公式ページに従ってインストールする。
http://wiki.ros.org/action/info/noetic/Installation/Ubuntu

```
$ sudo apt install ros-noetic-desktop-full
```

# 必要なパッケージのインストール
rosdepパッケージが見つからない。

```
E: Package 'python-rosdep' has no installation candidate
```
rosdepはnoeticだと下記になるとのこと。
http://wiki.ros.org/rosdep

```
$ sudo apt-get install python3-rosdep
$ sudo rosdep init
$ rosdep update
```

```
$ sudo apt install python3-rosinstall
$ sudo apt install python3-osrf-pycommon python3-catkin-tools
```

# ROS環境設定
毎回実行する必要がある。もしくは.bashrcに入れる。

```
$ source /opt/ros/noetic/setup.bash
```

# catkinワークスペースを作る
```
$ mkdir -p ~/catkin_ws/src
$ cd ~/catkin_ws
$ catkin init
$ catkin build
$ source devel/setup.bash
$ echo "source ~/catkin_ws/devel/setup.bash" >> ~/.bashrc
```
https://qiita.com/robot-yamaguti/items/85ab5bf2a2c192f07909

# ROS起動

```
ubuntu@ubuntu:~/catkin_ws$ roscore
... logging to /home/ubuntu/.ros/log/504fac3a-5870-11eb-becd-1bb2a86cd69c/roslaunch-ubuntu-6427.log
Checking log directory for disk usage. This may take a while.
Press Ctrl-C to interrupt
Done checking log file disk usage. Usage is <1GB.

started roslaunch server http://ubuntu:40475/
ros_comm version 1.15.9


SUMMARY
========

PARAMETERS
 * /rosdistro: noetic
 * /rosversion: 1.15.9

NODES

auto-starting new master
process[master]: started with pid [6437]
ROS_MASTER_URI=http://ubuntu:11311/

setting /run_id to 504fac3a-5870-11eb-becd-1bb2a86cd69c
process[rosout-1]: started with pid [6447]
started core service [/rosout]
```
初めてRailsでログイン機能実装してみた

先日からRailsでポートフォリオ作成してまして今回はアウトプットのためログイン機能について記事を書きます。

###実装した機能
gem 'devise'
というgem使用してログイン機能を作成します。
deviseというgemはユーザー認証に必要な機能を簡単に作ってくれるとゆうなんとも便利なgem
です。

###deviseをインストールする
エディタでGemfileを開いて先ほどの

```
gem 'devise'
```
をgemfileに追加して

```
bundle install
```
でインストールします。
次にdeviseの設定ファイルを作成したいのでrailsコマンドを使って

```
rails g devise:install
```
これでconfigディレクトリに以下のファイルが出来上がりました。
config/initializers/devise.rb
config/locales/devise.en.yml

###dbの設定をする
ユーザーモデルを作成したいのでrailsコマンドを使います

```
rails g devise user
```
今のコマンド使用した時にルーティングにdeviseのルーティングが出来上がっています

次にデータベースを作成します

```
rails db:create
```
そして最後に

```
rails db:migrate
```
でマイグレーションファイルをマイグレーションしてdb関連は終了です


<h3>ログイン、新規登録画面を作成</h3>

```
rails g devise:views
```
上記のコマンドを使用するとログイン、新規登録画面が自動で作成されます
viewsフォルダにいくとdeviseフォルダが作成されているのでその中の
新規登録画面
　app/views/devise/registrations/new.html.erb

ログイン画面
　app/views/devise/sessions/new.html.erb
が作成されているか確認する。
できていれば表示させたいページに埋め込みしっかり動作するか確認をしてとりあえず終了になります。
railsとvue.jsの初期環境構築をしたいなと思いました

環境
ruby2.6.3
rails6.1.2.1
yarn 1.22.10
v14.15.3
vue@2.6.12 (npm list vueで確認できます)
##ステップ1　アプリを作成
webpackありでアプリを作成する。データベースにポストグレスを使う。
```$ rails new アプリ名　--webpack=vue　-d postgresql ```
データベースの作成
```$ bundle exec rails db:setup```
バックエンド側サーバーの起動
```$ bundle exec rails server```
フロントエンド側サーバーの起動
```$ bin/webpack-dev-server```
##ステップ２　Procfileを作成する

```ruby:Procfile
rails: bundle exec rails s -p 3000
webpack: ./bin/webpack-dev-server
```
変更があるたびに毎回コンパイルするのは面倒なので、gem 'foreman'を使って``rails s``するだけで変更が反映された状態で開発していきたい。ルートディレクトリにProcfileを作成する。

```ruby:Gemfile
gem 'foreman'
```
bundle install実行した後、
```$ bundle exec foreman start```を実行

##ステップ３　ルーティングを設定
```ruby:routes.rb
Rails.application.routes.draw do
  root to: 'home#index'
end
```
##ステップ４　homecontrollerにindexアクションを追加して作成する
```ruby:home_controller.rb
def index; end
```

##ステップ５　bootstrapを追加する
``` yarn add bootstrap@4
```
bootstrap４系を追加し、app/javascript/packs/hello_vue.jsに下記を追加する

```ruby:app/javascript/packs/hello_vue.js
import 'bootstrap/dist/css/bootstrap.css'
```
##ステップ６ トップページを作成する
```ruby:app/views/home/index.html.erb
<%= javascript_pack_tag 'hello_vue' %>
```

```ruby:app/javascript/app.vue
<template>
<div id="app" class="d-flex flex-column min-vh-100">
  <header class="mb-auto">
    <nav class="navbar navbar-dark bg-dark">
      <span class="navbar-brand mb-0 h1">{{ title }}</span>
    </nav>
  </header>
  <div class="text-center">
    <h3>テキスト</h3>
    <div class="mt-4">Vueアプリ</div>
  </div>
  <footer class="mt-auto text-center">
　　　フッター
  </footer>
</div>
</template>

<script>
export default {
  name: "Top",
  data() {
    return {
      title: "タイトル"
    }
  }
}
</script>

<style scoped>
</style>
```
rails sしてからlocalhost:3000にアクセスし、表示されていれば成功です。
間違いなどありましたらご連絡ください
numpy.datetime64をPythonのdatetime.datetime型にキャストする

## TL;DR

```python

import datetime

# numpy_datetime = numpy.datetime64型の変数
python_datetime = datetime.datetime.fromtimestamp(numpy_datetime.astype(datetime.datetime) * 1e-9)
```

参考：https://stackoverflow.com/questions/13703720/converting-between-datetime-timestamp-and-datetime64

## 補足

- たとえばpandasでエクセルデータをDataFrameにしたとする。その際、セルのデータ型が日時だと、numpy.datetime64にキャストされる。
- これをPythonのdatetime.datetime型にするのはすこしめんどくさかった。結論として、``numpy.datetime64 -> unixtime -> datetime.datetime``と変換すればよい
- numpy.datetime64を.astype(datetime.datetime)とするとUNIX timeに変換されるが、この値はint型であり、一方Pythonのdatetime.datetimeのunixtimeはFloat型である（この差は、精度とか計算効率の話かな？）。
- なのでnumpy-unixtimeに1e-9をかけて、Python-unixtimeと桁を合わせてから、datetime.datetime.fromtimestanp(unixtime)でPythonのdatetime.datetime型が得られる
(AWS の) Airflow DAG の小さいサンプル（S3 にファイルをアップロードや Redshift 操作）

# S3 へアップロード

Airflow から Python をつかって S3 にファイルをアップロードする小さいサンプルです。BashOperator も混ざっていいますが、S3 にあげる処理とは関係ありません、サンプルとしていおいてあるだけです。


```py
import datetime as dt
import boto3
from airflow import DAG
from airflow.operators.bash_operator import BashOperator
from airflow.operators.python_operator import PythonOperator

default_args = {
  'owner': 'me',
  'start_date': dt.datetime(2021, 2, 11),
  'retries': 1,
  'retrby_delay': dt.timedelta(minutes=5)
}

s3 = boto3.resource('s3')
def upload_file_to_s3():
  f = open("newFile.txt", "w")
  f.write("Wow")
  f.close()
  s3.Bucket("bucket_name").upload_file("newFile.txt", "dst.txt")

with DAG('Sample',
  default_args=default_args,
  schedule_interval='*/1 * * * *',
  ) as dag:

  touch_hoge = BashOperator(task_id='print_hello',
                              bash_command='echo hello')
  upload_to_s3 = PythonOperator(task_id='upload_to_s3',
                              python_callable=upload_file_to_s3)

touch_hoge >> upload_to_s3
```

AWS の Airflow を使っているので、Airflow のロールに S3 にアクセスできるポリシーを追加しておくことで、上記により S3 へのアップロードが成功します。ポリシーなどが足りないとしっかりと以下のエラーがでます。

boto3.exceptions.S3UploadFailedError: Failed to upload newFile.txt to bucket-name/dst.txt:
An error occurred (AccessDenied) when calling the PutObject operation: Access Denied


cf. https://www.sicara.ai/blog/2019-01-28-automate-aws-tasks-thanks-to-airflow-hooks

# Redshift 操作

クエリは何でもいいのですが、Redshift のクエリを叩くサンプルです。

```py
import datetime as dt
import boto3
from airflow import DAG
from airflow.operators.python_operator import PythonOperator

default_args = {
  'owner': 'me',
  'start_date': dt.datetime(2021, 2, 11),
  'retries': 1,
  'retrby_delay': dt.timedelta(minutes=5)
}

def insert_to_redshift():
  rsd = boto3.client('redshift-data')
  resp = rsd.execute_statement(
    ClusterIdentifier='your_cluster_identifier',
    Database='your_dev',
    DbUser='your_suser',
    Sql='insert into visitors (name) select name from users;'
  )
  print(resp)
  return "OK"

with DAG('copyRedshiftTable',
  default_args=default_args,
  schedule_interval='*/10 * * * *'
  ) as dag:

  insert_redshift = PythonOperator(task_id='insert_data',
                                    python_callable=insert_to_redshift)

insert_redshift
```

これもロールを適当に付与しておくと、無事動きました。
helperのRSpecの書き方

helperのテストの書き方を忘れるので、備忘録として投稿します。

以下のようにhelperに簡単なメソッドを用意して、テストを書いてみます。
helloというメソッドを実行すると、'hello'という文字列が返ってくる簡単なメソッドです。

```rb:app/helpers/posts_helper.rb
module PostsHelper
  def hello
    'hello'
  end
end
```

helperのspecファイルはspec/helpersに用意します。
手動でファイルを追加しても良いのですが、generateコマンドを実行すると自動で作成してくれるのでオススメです。

```
bin/rails g rspec:helper posts
```

helperのspecファイルを用意して、以下のように書いていきます。

```rb:spec/helpers/posts_helper_spec.rb
require 'rails_helper'

RSpec.describe PostsHelper, type: :helper do
  it 'hello' do
    expect(helper.hello).to eq('hello')
  end
end
```

typeがhelperになっています。
helper_specファイルでは、helperという変数を利用することができ、
helperに繋げてメソッドを実行することができます。

ちなみに、引数も取ることができます。

```rb:app/helpers/posts_helper.rb
module PostsHelper
  def plus100(num)
    num + 100
  end
end
```

```rb:spec/helpers/posts_helper_spec.rb
require 'rails_helper'

RSpec.describe PostsHelper, type: :helper do
  it 'plus100' do
    expect(helper.plus100(1)).to eq(101)
  end
end
```
【JavaScript】モジュール...バンドル...webpackとかって結局何なんだい？

## はじめに

JavaScript界隈でよく登場するモジュールとかバンドルとかって結局何だっけ？何で必要なの？となり、都度ググるのが面倒なので、自分なりに各用語を簡単にまとめてみました。

難しい細部までは追わずに、各用語を順追って、大枠だけつらつらと書いていきます。

## 対象読者

* モジュールとかバンドルとかwebpackとかって言われてもピンと来ない人

※ 初学者向けです

## モジュールとは？

**機能ごとに分割されたファイル**のこと。
変数や関数が書かれたプログラムのことで、基本的には1ファイルのことをモジュールと呼ぶという認識で基本はOKです。

ちなみに、元々JavaScriptは、**Webページでちょっとした機能を提供する用途**で開発された言語だったので、このモジュールを定義したり、読み込んだりという機能が言語仕様として用意されていなかったという背景があります。

なので、JavaScriptでもモジュール化したいよね〜ということで後述の話に繋がっていきます。

なお、他のプログラミング言語では、このモジュールを使うための機能が、標準で用意されていることが多いらしいです（特段意識せず、import/exportできるのがそれです）

## モジュール化するメリットって何？

各モジュール単位でプログラムを管理出来るので保守性や可読性、再利用性が高くなります。

モジュール化されていないクソデカファイルは、保守性や可読性が悪いですし、モジュール化することによって、保守性や可読性の向上＋とあるモジュールを使い回すといったようなことができるので、再利用性も向上します。

変数名や関数名の意図しない衝突なども避ける意味で、名前空間的にもメリットがあります。

## モジュール化ってどうやるの？

言語としてモジュール化の機能が用意されていないJavaScriptでモジュール化ってどうやるの？やりたいよね？ということでまず誕生したのが、**CommonJS**です。

### 1. CommonJS（require構文）

Webブラウザ外のJavaScriptのモジュールシステムの仕様を定めるプロジェクトである「CommonJS」で策定されたモジュール機能というか仕様になります。

構文としては以下のような感じです。今でもたまに見かけると思います。

```js
// モジュールをエクスポート
module.exports = { hoge }

// モジュールをインポート
const hoge = require('hoge')

```

ただ、このCommonJSのモジュール動作仕様は、あくまでブラウザ外（≒ サーバーサイド）向けに設計された機能であり、ブラウザではサポートされていないため、ブラウザで動かす場合は、後述するwebpackなどで依存関係を解決してあげる（モジュールをバンドルする）必要があります。

### 2. ESmodules（import/export構文）

ES2015（ES6）で導入された待望のJavaScript言語標準のモジュール機能がESmodulesです。JSのモジュールシステムとしては後発になります。

構文としては以下のような感じで、今では1番見かける書き方かなと思います。

```js
// モジュールをエクスポート
export const hoge = "hoge"

// モジュールをインポート
import { hoge } from 'path/to/file'

```

現行の多くのブラウザでは、ESModulesを標準でサポートしているようです。

## バンドルとは？

上記で説明したモジュール化されたファイル群を1つのJSファイルにまとめることを指します。

読み込むJSファイルが多いということは、そのファイルの分だけブラウザからJSファイルへのHTTPリクエストの数も増えてしまいます（そういう仕様）

一方、1つのファイルにまとまっていると、そのファイルを読み込むだけで良くなります。
この辺りを理解していると、バンドル（というかバンドラー）の存在意義がより理解しやすくなると思います。

## webpackとは？

モジュールバンドラーの1つです。最近ではViteやesbuildなどの高速なモジュールバンドラーが利用されることが増えてきております。

## webpack(Vite, esbuild)等のバンドラーの必要性とは？

ツール（ライブラリ）によって機能差はあると思いますが、バンドラーというものはモジュールバンドル以外にも、色々なことをやってくれることが多いです。

例えば、ミニファイ（コードペース削除や変数名短縮等を行う）やツリーシェイク（未使用コード削除）等のコードの最適化も行ったりしています。

## トランスパイルとは？

（JSにおける）トランスパイルとは、**JSで書かれたソースコードを、別のバージョンのコードに変換すること**を言います。

例えば、ES2015に対応していないような古いブラウザで、ES2015以降の構文で記述されたJavaScriptを動かすためにトランスパイルをする必要があります。

かつては**Babel**というライブラリがよく使われていましたが、現在はesbuildなどのバンドラーがトランスパイルも行うことが多いようです。

## 終わりに

簡単にですが、まとめてみました。

近年では、ブラウザ（JSエンジン）の高速化やWeb APIの進化を背景に、ブラウザでできることが増えて、Webページ・アプリケーションで求められる要件（パフォーマンスやアクセシビリティ等）が高度化し、ReactなどのJSフレームワーク（ライブラリ）が数多く登場といった中で、ブラウザだけでなくサーバーサイドにおいてもJavaScriptやTypeScriptの存在感が増している印象です。

結局フレームワークやツールはこの辺りのコア部分の面倒なことを抽象化してくれているだけなので、フレームワークに依存しすぎるフレームワーカーにはならず、きちんと地に足つけてコア部分の知識を日々深めていくことが良いのかなと思います。