OmniAICreator/Qiita-1.07M huggingface dataset:
LWCの基礎

## 概要
LWCの基本的な書き方をまとめる。
データベースとの連携は取り扱わない。

## 内容
### JavaScriptの値をHtmlに渡す
htmlに渡したい変数をメンバー変数として定義。

```JavaScript:javascript
export default class HelloBinding extends LightningElement {
    greeting = 'World';
}
````

メンバー変数を{}で囲う。

````html:html
<template>
    <p>Hello, {greeting}</p>
</template>
````

### JavaScriptの値をHtmlに渡す（getterを使う場合）
下のように定義したgetterもhtmlからアクセスできる。
計算式とか入れたいときは、getterの中に書いたらよい。

````JavaScript:javascript
export default class App extends LightningElement {
   get name(){
     return 'Electra X4';
   }
}
````

html側からはgetを省略してアクセスできる。

````Html:html
<template>
   <div>Name: {name}</div>
</template>
````

### 画面のだし分け
if:true=<condition>を使うと、画面のだし分けができる。

````html:html
<template>
  <template if:true={areDetailsVisible}>
     <p>These are the details!</p>
  </template>
</template>
````

### 画面のループ
for:each=<list>を使うとループができる。
key要素に一位になる値（主にID）を設定する点に注意。

````html:html
<template>
    <lightning-card title="HelloForEach" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template for:each={contacts} for:item="contact">
                <li key={contact.Id}>
                    {contact.Name}, {contact.Title}
                </li>
            </template>
        </ul>
    </lightning-card>
</template>
````

````javascript:javascript
import { LightningElement } from 'lwc';

export default class HelloForEach extends LightningElement {
    contacts = [
        {
            Id: 1,
            Name: 'Amy Taylor',
            Title: 'VP of Engineering',
        },
        {
            Id: 2,
            Name: 'Michael Jones',
            Title: 'VP of Sales',
        },
        {
            Id: 3,
            Name: 'Jennifer Wu',
            Title: 'CEO',
        },
    ];
}
````

### @trackの使いどころ
画面から参照しているメンバー変数が変わった場合、自動的に画面も再描画される。
ただし、{}で囲う変数（オブジェクト）がメンバー変数の場合、オブジェクト全体が更新された場合は画面が再描画されるが、オブジェクトの一部の項目の値が変わっただけでは再描画されない。
オブジェクトの項目は再描画の監視対象にならないからである。

こういう時は、@trackを付けると、オブジェクトの項目も監視対象になる。

### @apiの使いどころ
@apiを付けた変数は、外部から参照可能になる。
LWCをコンポーネント化したときに外部から値を受け取りたい変数に@apiを付けておくと良い。

↓イメージ

````javascript:javascript
import { LightningElement, api } from 'lwc';
export default class TodoItem extends LightningElement {
    @api itemName = 'New Item';
}
````

````html:html
<template>
    <div class="view">
        <label>{itemName}</label>
    </div>
</template>
````

呼び出し元

````html:html
<template>
    <c-todo-item item-name="Milk"></c-todo-item>
    <c-todo-item item-name="Bread"></c-todo-item>
</template>
````
ruby 演習メモ VI (hello class)



# 目的

ruby のコードを実際に書いてみよう.
今回は第 VI 弾.


# お題

オブジェクト指向を学び, hello\_method.rb を改良する. (hello\_method.rb は[ここ](https://qiita.com/gagagagazelle/items/a09eeb60c9e7913ea860)で書いた code)
キーとなる考え方は以下の通り.

-   隠蔽 (capsulation)
-   継承 (inheritance)
-   多形 (polymorphism)

(<https://qiita.com/daddygongon/items/969ad5112878f6dab844> にある課題)


## 今回書いた code (hello\_class.rb)

```ruby

class Greeter
  attr_accessor :name
  def initialize(name='world')
    @name = name
  end    

  def hello
    puts "Hello #{@name}."
  end
end

if $PROGRAM_NAME == __FILE__
  greeter = Greeter.new()
  greeter.hello
  greeter.name = ARGV[0]
  greeter.hello
end

```


## 解説

class の書き方自体は特に変わったものではない.
ただ, `attr_accessor :name` という書き方は知らなかった.


### attr\_accessor

`attr_accessor` は以下と等価な動作をするらしい. ([ここ](https://qiita.com/daddygongon/items/969ad5112878f6dab844)参照)

```ruby
def name  # reader(getter)
  return @name
end
def name=(new_name) # writer(setter)
  @name = new_name
end
```

なるほど. これから使っていこうと思う.


# 参考資料

-   [ruby 演習メモ II (variable and method)](https://qiita.com/gagagagazelle/items/a09eeb60c9e7913ea860)
-   [チャート式ruby-VI(hello class)](https://qiita.com/daddygongon/items/969ad5112878f6dab844)



------
 - **source** ~/Lecture/multiscale_simulation/grad_members_20f/members/gagagagazelle/docs/c6_class_hello.org
iperfを使ってPC間の通信速度を確認する

iperfを使ってPC間の通信速度を確認した際のメモです

## 環境
今回は以下を使用
Ubuntu18.04
Jetson Nano

## iperfとは

ネットワークの帯域幅を測定するツール

> [https://github.com/esnet/iperf](https://github.com/esnet/iperf)
> iperf is a tool for active measurements of the maximum achievable bandwidth on IP networks. 

## install 
```
sudo apt install iperf -y
```

## 測定

Ubuntu18.04側で以下を実行する

```
$ iperf -s
------------------------------------------------------------
Server listening on TCP port 5001
TCP window size:  128 KByte (default)
------------------------------------------------------------
[  4] local 192.168.179.6 port 5001 connected with 192.168.179.8 port 47160
[ ID] Interval       Transfer     Bandwidth
[  4]  0.0- 8.2 sec   768 KBytes   763 Kbits/sec
```

Jetson Nano側で以下を実行すると測定できる（例：IPアドレスが192.168.179.6の場合）

```
$ iperf -c 192.168.179.6
------------------------------------------------------------
Client connecting to 192.168.179.6, TCP port 5001
TCP window size: 85.0 KByte (default)
------------------------------------------------------------
[  3] local 192.168.179.8 port 47160 connected with 192.168.179.6 port 5001
[ ID] Interval       Transfer     Bandwidth
[  3]  0.0- 7.7 sec   768 KBytes   819 Kbits/sec
```

無線だとBandWidthがやっぱり低い

```
$ iperf -c 192.168.179.6
------------------------------------------------------------
Client connecting to 192.168.179.6, TCP port 5001
TCP window size: 85.0 KByte (default)
------------------------------------------------------------
[  3] local 192.168.179.8 port 47872 connected with 192.168.179.6 port 5001
[ ID] Interval       Transfer     Bandwidth
[  3]  0.0-10.0 sec  12.4 MBytes  10.4 Mbits/sec
```

クロスケーブルで繋ぐとこれくらいのBandWidth
以下の設定をした場合の例
PC側:`sudo ifconfig eth 192.168.1.1 up`
JetsonNano側: `sudo ifconfig eth0 192.168.1.2 up`

```
jetson@jetson-desktop:~/catkin_ws/src/ai_race/ai_race/learning/scripts$ iperf -c 192.168.1.1
------------------------------------------------------------
Client connecting to 192.168.1.1, TCP port 5001
TCP window size:  926 KByte (default)
------------------------------------------------------------
[  3] local 192.168.1.2 port 60778 connected with 192.168.1.1 port 5001
[ ID] Interval       Transfer     Bandwidth
[  3]  0.0-10.0 sec  1.09 GBytes   939 Mbits/sec
```

# 参考
[[Network]iperfでLAN内のパソコン間のネットワーク速度を測定する](http://stackoftips.blog79.fc2.com/blog-entry-64.html)
[ネットワーク測定ツールiperfの使い方](https://qiita.com/takish/items/bff7a1df712d475432df)
[https://github.com/esnet/iperf](https://github.com/esnet/iperf)
パスカルの三角形を描く



[数学ガール/乱択アルゴリズム](https://www.amazon.co.jp/%E6%95%B0%E5%AD%A6%E3%82%AC%E3%83%BC%E3%83%AB-%E4%B9%B1%E6%8A%9E%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0-%E6%95%B0%E5%AD%A6%E3%82%AC%E3%83%BC%E3%83%AB%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-4-%E7%B5%90%E5%9F%8E/dp/479736100X)を読んで、パスカルの三角形がとても面白そうだと思い、Rubyで描いてみました。


出力例
---
5段

```terminal

1 
1 1 
1 2 1 
1 3 3 1 
1 4 6 4 1 
```

 　
21段

```terminal

1 
1  1 
1  2   1 
1  3   3    1 
1  4   6    4    1 
1  5  10   10    5     1 
1  6  15   20   15     6     1 
1  7  21   35   35    21     7     1 
1  8  28   56   70    56    28     8      1 
1  9  36   84  126   126    84    36      9      1 
1 10  45  120  210   252   210   120     45     10      1 
1 11  55  165  330   462   462   330    165     55     11      1 
1 12  66  220  495   792   924   792    495    220     66     12      1 
1 13  78  286  715  1287  1716  1716   1287    715    286     78     13     1 
1 14  91  364 1001  2002  3003  3432   3003   2002   1001    364     91    14     1 
1 15 105  455 1365  3003  5005  6435   6435   5005   3003   1365    455   105    15     1 
1 16 120  560 1820  4368  8008 11440  12870  11440   8008   4368   1820   560   120    16    1 
1 17 136  680 2380  6188 12376 19448  24310  24310  19448  12376   6188  2380   680   136   17    1 
1 18 153  816 3060  8568 18564 31824  43758  48620  43758  31824  18564  8568  3060   816  153   18   1 
1 19 171  969 3876 11628 27132 50388  75582  92378  92378  75582  50388 27132 11628  3876  969  171  19  1 
1 20 190 1140 4845 15504 38760 77520 125970 167960 184756 167960 125970 77520 38760 15504 4845 1140 190 20 1 
```

ソースコード
---

```rb
def cal_pascals_triangle(n)
  ary_i = []
  (1..n).each do |i|
    ary_i = cal_one_line(i, ary_i)
    @arrays.push(ary_i)
  end
end

def cal_one_line(i, ary_i)
  ary_i_minus_1 = []
  (i - 1).times do |j|
    ary_i_minus_1 << ary_i[j]
  end
  ary_preparing = [1]
  ((i - 1) / 2).times do |j|
    ary_preparing << (ary_i_minus_1[j] + ary_i_minus_1[j + 1])
  end
  ary_i = ary_preparing + ary_preparing.reverse
  ary_i.delete_at(i/ 2) if i.odd?
  ary_i
end

def drow_all_lines(arrays)
  arrays.each do |line|
    line.each_with_index do |element, index|
      difference = arrays.last[index].to_s.size - element.to_s.size
      print ' ' * difference if difference > 0
      print element.to_s + ' '
    end
    print "\n"
  end
end

puts "パスカルの三角形を描きます\n何段まで描きますか?"
n = gets.chomp.to_i
@arrays = []
cal_pascals_triangle(n)
drow_all_lines(@arrays)
```


計算方法
---
1段ずつ計算しています。
前段の値を足し合わせて、値を算出しています。
(組み合わせの数を求めているわけではありません。)



描写方法
---
全段まとめて描写しています。
一の位の垂直方向の位置を基点として、各値を出力するようにしました。


おまけ
---
ディスプレイを縮小して、45段出力してみました。

![68e289310121ad3e4c53807e3b5487c5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516687/e1963232-99f5-211d-651b-b7b58fd3dbfb.png)
Rails 「renderメソッド」と「redirectメソッド」

深堀り、メモ

##2つの違い
・renderを呼び出し、**ブラウザに返す**完全な**レスポンス**を作成する
・redirect_toを呼び出し、**HTTPリダイレクトコードステータス**を**ブラウザ**に送信する

簡潔にまとめる
renderメソッド…表示させる「**viewファイル**」を指定
redirectメソッド…「**URL(HTTPリクエストメソッド)**」を指定

##「redner」メソッド
上記の説明でもあったとおり、**Action内で表示させたいView**を
指定するメソッドのこと

そのAction内で、@〜(インスタンス変数)として格納されたものは、
ViewからRubyの構文で呼び出すことが可能となる

呼び出すことができるViewの形式は、「.html」や、「.html.erb」などを始め
`テキスト形式や、JSON、XML`を出力することもできる

###動き
**controller → view**というシンプルな動き
表示させたいviewファイルを指定して、
ただ表示させてあげているだけ

##「redirect_to」メソッド
別のURLに対して改めてリクエストを「再送信」するよう、
ブラウザに指令を出すためのメソッド

HTTPリクエストをサーバーに送り、
ユーザーはそこから返ってくるHTMLが表示される

補足説明として、Railsのredirect_toメソッドでは
**HTTPメソッドは「GET」に固定**されている

なので、
**POSTリクエスト等**では**リダイレクトできない**

###動き
**controller → URL → route → controller → view**

と、renderメソッドと全く異なる構造で動いていることがわかる

##使い分けるポイント、注意点
・ログインや、入力に失敗した場合など ＝ **ただエラーを表示**させたいだけ 
→`render`メソッド
・データの更新or削除が必要な場合 ＝ **controllerの処理**が必要 
→`redirect_to`メソッド

・1つのActionからは、1つのviewしか返せない

```rb/app/controller/○○controller.rb
class ○○Controller < ApplicationController
  def create
    ~~
    if ~~
      ~~
      render "index"
    end
    render "new" ☓
    redirect_to "new" ○
  end
end
```

##参考記事
https://railsguides.jp/layouts_and_rendering.html
https://qiita.com/1ulce/items/282cccba1e44158489c8
https://qiita.com/kanpe777/items/c5154b58c852855deefc
https://easyramble.com/cannot-post-redirect-on-rails.html
https://stackoverflow.com/questions/985596/redirect-to-using-post-in-rails
怪しい問題集でDrupal8サイトビルダー試験に挑んでみた

Drupal8の認定試験が日本語対応になったのが2019年11月28日。
今年の8月にはDrupal9サイトビルダーも日本語リリースされた。

日本語リリース後も定期的に無料キャンペーンを行っていたので、オンラインのDrupal8のサイトビルダー試験を受けてみることにした。

[Drupal認定試験 アクイア認定プログラム](https://www.acquia.com/jp/solutions/customer-success/acquia-certification)

##試験１回目&事前準備
9月29日15時。試験は75分で52問。正解率68%で合格。
事前にこちらのページで予習した。
[Acquia認定サイトビルダー試験その①](https://qiita.com/yukisyo/items/d3e527807acdc316a091)

一応下記の動画はスキップ再生で確認した。
https://www.youtube.com/playlist?list=PLpVC00PAQQxGwyvUD_tYcBbLJqRC1CZ6U
https://www.youtube.com/watch?v=6e8QyfvQMmU&list=PLpVC00PAQQxHzlDeQvCNDKkyKRV1G3_vT

##試験１回目結果
```
You have completed the exam, アクイア認定サイトビルダー – Drupal 8 on Tue Sep 29 00:20:17 MST 2020.

Overall Score: 64.00%
Result: FAIL
Topic Level Scoring:
1.0 Drupalの理解: 100.00%
2.0 Drupalサイトの対応: 70.00%
3.0 コンテンツのモデリング: 58.33%
4.0 サイト表示設定: 66.66%
5.0 サイト構成: 71.42%
6.0 コミュニティおよびOSSプロジェクト: 75.00%
7.0 モジュールおよびテーマ管理: 75.00%
8.0 セキュリティおよびパフォーマンス: 0%

残念ながら不合格です。再試験は14日後に行うことができます。またの受験をお待ちしています！
```

##試験１回目感想
圧倒的に時間が足りなかった。
問題数は52問と把握していたが、残り15分位で残り問題が後20問もあることが分かり、急いだが時間切れで詰んだ・・・。

よくよく考えると１問につき2分も時間を使えない。問題の内容が把握出来なかったら画面左下にあるチェックボックスにチェックを入れて次に行くのが良いと感じた。

* * *

次回の再試験のために試験問題を、思い出しながら試験対策メモを作成。
後日、ネットでDrupal試験のことを調べていたら、日本語のサイドビルダーのテスト問題集のサイトが多々出てきた。

調べたところ
・どのサイトでも問題集のバージョンは同じ。
・サンプル問題の数問がPDFなどで確認可能。
・サイト内検索しても出てこない。（外部検索からのみ）
・１年間無料アップデート
・試験に受からなかったら全額返金など・・・

噂では聞いていたが金額的にも高くはないので人柱を兼ねて購入してみた・・・。

試験問題集の内容は、問題傾向からみれば８〜９割は合っていた。
しかし、日本語が変ところが多数あったり、選択問題が英文のところもあった。
答えが間違っていると思われる問題があると感じた。

##試験2回目&事前準備
11月5日12時。試験は75分で50問。
今回から問題数が2つ減って50問になった。

##試験2回目結果
```
You have completed the exam, アクイア認定サイトビルダー – Drupal 8 on Wed Nov 04 21:26:04 MST 2020.

Overall Score: 38.00%
Result: FAIL
Topic Level Scoring:
1.0 Drupalの理解: 66.66%
2.0 Drupalサイトの対応: 80.00%
3.0 コンテンツのモデリング: 41.66%
4.0 サイト表示設定: 0%
5.0 サイト構成: 28.57%
6.0 コミュニティおよびOSSプロジェクト: 25.00%
7.0 モジュールおよびテーマ管理: 0%
8.0 セキュリティおよびパフォーマンス: 25.00%

残念ながら不合格です。再試験は14日後に行うことができます。またの受験をお待ちしています！
```

##試験2回目感想
試験問題集である程度の問題が把握出来ていたとこもあり30分掛からず50問一巡し、時間が余りまくった。
そして、試験に落ちた・・・。
前回の自分の力で受けた方が正解率が良かった・・・。

想像以上に問題集の間違いがあることが判明。
ローカル環境で動作検証して、問題集の間違いを分かる範囲で修正した。

##試験3回目&事前準備
無料クーポンは年明けでも試験設定出来たが、年内に試験合否を確認したかった＆年末は試験が受けられなかったので、ド早朝に受けることに・・・。
12月27日早朝。試験は75分で50問。
試験90分前に起床して、問題集をザッピング＆ローカル環境で動作検証。

##試験3回目結果
```
You have completed the exam, アクイア認定サイトビルダー – Drupal 8 on Sat Dec 26 17:09:01 MST 2020.

Overall Score: 74.00%
Result: PASS
Topic Level Scoring:
1.0 Drupalの理解: 66.66%
2.0 Drupalサイトの対応: 70.00%
3.0 コンテンツのモデリング: 66.66%
4.0 サイト表示設定: 66.66%
5.0 サイト構成: 57.14%
6.0 コミュニティおよびOSSプロジェクト: 100.00%
7.0 モジュールおよびテーマ管理: 100.00%
8.0 セキュリティおよびパフォーマンス: 100.00%

Congratulations on achieving the credential!
```

##試験3回目感想＆まとめ
3回目は15分残しで50問一巡。解答確認をしていたら試験終了。
ようやく試験合格。
１回目のDrupalの理解・サイト構成が低くなってしまったのが気にはなった。

試験問題集の正解率は30%前後だった。（自分の解答を数問入れたので）
問題集を自分で修正したのが正解なのかが不明。
オフィシャルの問題集も「現在準備を進めている」ということなのでそれに期待。

試験問題集を購入したのは、Advent Calendarに書くネタが欲しかったから。
対数って？なる人向けの記事（たぶん中三～くらいの数学知識）

中三くらい知識の人が酒飲みながら「対数って？」のを復習するための記事です。

エンジニアやってる傍らで数学によく出会う。
そんで「対数？logって何だっけ？」ってなった私みたいな人向け。
概念としては2つ覚えておく。そして例として2つ覚えておく。

## まとめ
* 記憶の鍵は**8**って数。（大切）
* 指数はlogで表す。　$ 3 = \log_2{8} $
* 対数関数はグラフありき。　$ f(x)= \log_2{x} $ のグラフを脳内でイメージする。

## 概念（２つ）
Wikipedia見ながら書いてるから。もしかしたら今後書き足すかも。
### 指数
$ x = a^p $
これは↓の関係がある。
$ p = \log_a{x} $
2つの式の関係はパッと見て分からないけどこれが対数って概念らしい。

### 対数関数
$ f_a(xy) = f_a(x)+f_a(y) $
$ f_a(a) = 1 $
を両方満たすものを、
$ f_a(x) = \log_a{x} $
っていう。

「$y$どこ行ったん・・？」って思う人いるよね？　
Wikipediaには書いてないけど、
$ f_a(y) = \log_a{y} $
も成り立つんじゃないかなぁと思います。
（行列と違って、交換法則は成り立つはず）

## 使い方（↑の２つの例）
マジで数式だと覚えらんないから、具体例とか数式で覚えよう
### 指数
**8**って数字の素因数を考えると良い
$ 8 = 2^3 $
これをlogを使って書くと
$ 3 = \log_2{8} $

（書いてて思ったけど、**8**って数字だけ覚えておけば何とか思い出せそうな気がした。）

ここでもうひとつlogの性質
$ 1 = \log_a{a} $
$ \log_a{x}^y = y\log_a{x} $
ってのが、サラッと前の式の中にも隠れているんだよね。

$ \log_2{8} = \log_2{2}^3 = 3\log_2{2} = 3$

### 対数関数
グラフをイメージしてもらうのが正しいらしい
$ f(x)= y = \log_2{x} $
![ylog2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225386/a3ff5309-d16c-13e8-2ac3-ef34664c1153.png)
↑みたいな関数（$ x = 2^y $）があるとしましょう。

ここで、終わっても良いんだけど「で？」で終わるよね？　（私がそうだった）
$ f_a(xy) = f_a(x)+f_a(y) $
って定義に戻ってみて「これ何？」って伏線がまだ残っていると思うんだ。
上のグラフの式に代入してみようぜ
$ f(2×4) = f(2)+f(4) $
ココでな、対数の偉いところグラフから数字が読めるってこと。
$ f(2) = 1 $
$ f(4) = 2 $
$ f(8) = 3 $
うむ。矛盾してない。
$ f(2×4)= 3 = f(2)+f(4) = 1 +2 = 3 $
これはキリのいい数字を入れて例にしているけど、対数グラフが描けていれば（対数関数ならば）出てくる数字が小数でも矛盾はしないよ。


数式描画ツール
https://www.geogebra.org/graphing?lang=ja
↑便利だったなぁ。サラッと使えて。
ruby 演習メモ III (if, case, array, each by leap year)



# 目的

ruby のコードを実際に書いてみよう.
今回は第 III 弾.


# お題

以下のような method leap? をつくれ.

-   **関数名** : leap?
-   **入力** : year (年)
-   **出力** : true or false (year がうるう年なら true)

(<https://qiita.com/daddygongon/items/a550bde1ed6bff5217d8> にある課題)


## 今回書いた code

```ruby

def leap?(year)
  return  (year%400 == 0) ? true :
	    (year%100 == 0) ? false :
	      (year%4 == 0) ? true : false
end

[2004, 1999, 1900, 2000].each do |year|
  p year
  p leap?(year)
end

```


## 解説

実際には TDD を意識して code を書いたが, 作業手順については割愛する.
(先程のリンク先にある手順通りに作成したので, 気になるならそこを見に行ったら良い)

ここから code 自体の解説.

-   **leap? の中身**
    三項演算子で書いてる. 以下の code と同じことしてる.
    
    ```ruby
    return case
       when year % 400 ==0 ; true
       when year % 100 ==0 ; false
       when year % 4 ==0   ; true
       else                ; false
       end
    ```
-   **main loop の中身**
    `[1900,2004,1999].each do |year| - end` は loop.
    配列 `[1900,2004,1999]` の各要素を順に取り出してる.
    取り出した要素は `year` に入ってる.


# 参考資料

[チャート式ruby-III(if, case, Array.each by leap year)](https://qiita.com/daddygongon/items/a550bde1ed6bff5217d8)



------
 - **source** ~/Lecture/multiscale_simulation/grad_members_20f/members/gagagagazelle/docs/c3_if_case_leap_year.org
F# で String ⇔ Char[] の変換

## String ⇒ Char[]

```fsharp
> let str = "Hello"
- str |> Seq.toArray |> printfn "%A";;
[|'H'; 'e'; 'l'; 'l'; 'o'|]
```

## Char[] ⇒ String

```fsharp
> let arr = [|'H'; 'e'; 'l'; 'l'; 'o'|]
- arr |> System.String |> printfn "%s";;
Hello
```

ちなみに頭文字も小文字の `string` を使うとこうなります

```fsharp
> let arr = [|'H'; 'e'; 'l'; 'l'; 'o'|]
- arr |> string |> printfn "%s";;
System.Char[]
```

C# で言うと
`string` は `arr.ToString()` で
`String` は `new String(arr)` ですね
ローカル環境で作成した"Hello World"をウェブで表示

#Dockerコンテナを起動する

```
$ docker-compose up -d
```

#web表示用のファイルを作成

以下のサイトを参考にしました。
https://www.sejuku.net/blog/28751

#Dockerコンテナに入る

```
$ winpty docker-compose exec python bash
```

#web表示する

```
python manage.py runserver
```

Hello Worldがwebで表示されることが確認出来ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764778/503ba8f8-8554-9e3a-4182-9cb4211e80c6.png)
デッドマン装置の作り方

自分では一年に一個、webサービスを作ることを目標としていますが、2021年作ろうとしていた新ネタは、エンディングノート系のwebサービスでした。これ系のサービスにかなり以前から興味があり、ネットの記事等で目にする度にアカウント作ったりアプリをダウンロードしては使ってみたりしてましたが、なぜかサービスが継続されなかったり、自分が思うようなロジックではなかったりというのが常でした。

自分が、こういうのがあったらいいなあと思うのは、遺書をネットに公開するタイプのサービスです。告発のような感じです。なんだそれと思うかも知れませんが、結果から言うとこの新作のアイディアはボツになってしまいましたが、アイディア自体はいいものだと思ったのでこれを作ろうとした動機を事細かに最初からお話しします。

2010年ごろ、ウィキリークスの騒動で一時時の人となっていたエドワードスノーデンという人を覚えていますでしょうか。彼のドキュメント映画を見た時に、世の中の富裕層や要人は、自分が暗殺などされないため、不自然に亡くなってしまった場合、超重要データが自動的に世間にばらまかれるという施策を施しているといったような趣旨のことを語っていました。その時はふーんとしか思いませんでしたが、この時から自分のエンディングノートアプリ作成の構想がスタートしました。

そうこうしているうちに、尖閣諸島中国漁船衝突事件だの森友学園問題だの桜を見る会だのコロナだのとまあ色々起こるわけですが、<a href="https://figreen.org/it/%e9%ab%98%e9%bd%a2%e8%80%85%e4%bb%8b%e8%ad%b7%e6%99%82%e3%81%ae%e8%a6%8b%e3%81%be%e3%82%82%e3%82%8a%e3%82%b5%e3%83%bc%e3%83%93%e3%82%b9%e4%b8%80%e8%a6%a7%e3%81%be%e3%81%a8%e3%82%81%e3%80%81%e4%b8%8d/">続きはwebで！</a>
LINUXのショートカットコマンド作成方法

初めまして、MJです！Qiita初投稿です！
LINUXで開発しているとフォルダ間の移動が面倒なことってありませんか？
恐らく殆どの人が手間に感じていると思います。
具体的にはどのような状況かと言いますと。

```LINUX
home
   ├ task ─ app
   ├ task2    ├ Controller
              ├ Model
              ├ View
```
例えばこのようなフォルダ階層だとします。

```LINUX
cd /home/task/app/Controller
cd /home/task/app/Model
```

毎回毎回このようにコマンドを入力する手間がありますよね。
今回は一手間加えるだけでこの面倒な作業を大幅に短縮する方法を書いていきますね！

```LINUX
home
   ├ task ─ ─ ─ ─ ─ ─app
   ├ task2             ├ Controller
   ├ .bash_profile     ├ Model
                       ├ View
```

使用するプロジェクトファイルより浅い階層に.bash_profileのファイルを作ってください。

```:/home
vi .bash_profile
```

```:.bash_profile
alias cont='cd ~/home/task/app/Controller'
alias model='cd ~/home/task/app/Model'
alias web='vi ~/home/task/app/Controller/abcController.php'
```
このように書くことでcontと打てば＝の右側のコマンドを実行しコントローラーファイルまでいけます。
要するに＝より左に短縮名、右に実行したいコマンドを書くということです！
コマンドを書き終えたら.bash_profileがあるフォルダで以下のコマンドを実行してください。

```
source .bash_profile
```

これで完了です！
ちなみに最後のsourceコマンドはログインするたびに実行しないといけないので忘れないようにしてくださいね！

今回はこの辺にしておきます！
初投稿で分かりづらいと思いますが読んでいただきありがとうございました！
これからもボチボチ投稿していきたいと思います！
TemplateSelectorの使い方

## 概要
TemplateSelectorを使うと指定したDOM要素を取得できます。
Lightning web componentでは、DOM要素を取得する際にTemplateSelectorを使用することが推奨されており、windowsやdocumentを使うことは非推奨となっています。

ここでは、TemplateSelectorの使い方を記載します。

## 内容

````html:html 
<template> 
  <div>AAAAA</div> 
  <div>BBBBB</div> 
</template> 
````
 
````javascript:javascript 
import { LightningElement } from 'lwc'; 

export default class Example extends LightningElement { 
  renderedCallback() { 
    this.template.querySelector('div'); // return <div>AAAA</div>
    this.template.querySelector('span'); // return null 
    this.template.querySelectorAll('div'); // return [<div>AAAA</div>, <div>BBBB</div>] 
  } 
}
````

要素がないときはnullを応答する。
querySelectorAllを使うと、ヒットしたタグをすべて応答する。

## 参考
https://developer.salesforce.com/docs/component-library/documentation/ja-jp/lwc/create_components_dom_work
WindowsにzipでJavaをインストールする

- 環境 : Windows10 Pro バージョン1903
    - [MacでHomebrewを使ってインストールする場合はこちら](https://qiita.com/ponsuke0531/items/9be8dee67a91c6c78d4f)

# 1. zipファイルをダウンロードする
1. Oracleのサイト : `https://jdk.java.net/{バージョン}/`
    - 今回はJDK11なのでhttps://jdk.java.net/11/
1. 「Older releases, which do not include the most....」と表示されている場合は[OpenJDK Archive]リンクからダウンロードサイト(https://jdk.java.net/archive/)を表示する
2. ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/3ba19cd2-de99-1662-74fa-084ddb2f319e.png)
2. 「Windows 64-bit」の横にある[zip]リンクでzipをダウンロードする

# 2. zipファイルを解凍する
```bash
# ダウンロードzipファイルを任意の場所へ解凍する
$ unzip ~/Downloads/openjdk-11.0.2_windows-x64_bin.zip -d /c/app/
Archive:  /c/Users/m-uki/Downloads/openjdk-11.0.2_windows-x64_bin.zip
   creating: /c/app/jdk-11.0.2/
   creating: /c/app/jdk-11.0.2/bin/
  inflating: /c/app/jdk-11.0.2/bin/api-ms-win-core-console-l1-1-0.dll
...省略...

# バージョン確認する
$ /c/app/jdk-11.0.2/bin/java -version
openjdk version "11.0.2" 2019-01-15
OpenJDK Runtime Environment 18.9 (build 11.0.2+9)
OpenJDK 64-Bit Server VM 18.9 (build 11.0.2+9, mixed mode)
```

# PATHを通す
1. ファイル名を指定して実行`Win + R`でダイアログを表示する
2. [詳細設定]タブ > [環境変数...]ボタン
3. [システム環境変数] > [新規] > [変数名]に「JAVA_HOME」を設定 > [変数値]に解凍したフォルダ(今回の場合は`C:\app\jdk-11.0.2`)を指定
4. [システム環境変数]の「Path」を選択 > [編集]ボタン
5. 最下行に「%JAVA_HOME%\bin」を入力 > Enter > [上へ]ボタンで最上行へ配置する
6. [OK]ボタンでダイアログを全部閉じる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/d54da19e-5dcc-f9ed-a745-49825179f164.png)

```bash:PATHが通るとjavaだけでバージョン確認できる
$ java -version
openjdk version "11.0.2" 2019-01-15
OpenJDK Runtime Environment 18.9 (build 11.0.2+9)
OpenJDK 64-Bit Server VM 18.9 (build 11.0.2+9, mixed mode)
```
Firebase Cloud Functionsで関数を分割させてくれや〜ってなったのでメモ

## 前提
- node: v10.23.0
- yarn: 1.22.10

## やりたいこと
- index.tsにまとまっていて、分割したい

```
src配下
.
└── index.ts
```

- こんな感じで関数ごとに分けたい

```
src配下
.
├── hoge2.ts
└── index.ts
```

## やったこと

- `index.ts` からhogeをimportしてexportする

```index.ts
import * as hoge from './hoge';

export {
  hoge,
};

```

```hoge.ts
import * as functions from 'firebase-functions';

export const aaa = functions.region('asia-northeast1')
.https.onRequest(async (req: any, res: any) => {
  console.log('hoge');
  res.status(200).send('ok');
})
```

## 問題
- hogeが読めないと怒られる
  -  `Unable to resolve path to module './hoge'` 

## 対応
- 以下を参考にした
    -  https://github.com/benmosher/eslint-plugin-import/issues/1485#issuecomment-751292358

- function配下に、path解決のライブラリをinstall

```bash
cd function
yarn add eslint-import-resolver-typescript
```

- `eslintrc.js` に以下を追加

```
  settings: {
    'import/resolver': {
      typescript: {} // this loads <rootdir>/tsconfig.json to eslint
    }
  }
```

## おわりに
上記で関数ごとに分割できました〜。
ファイル分けられると見通しよくていいね！！
関数化している人もいるので、そのうち試してみたいです。
https://uyamazak.hatenablog.com/entry/2018/10/22/113000
GitHub で SSH 接続自体は確認できたのに git clone は Permission denied になる場合の対処法

おそらく、同じ状況に陥る条件としては、まず、鍵を作成する際、次のように `-f` オプションでファイル名を指定し、

```
% ssh-keygen -b 4096 -f github
```

その上で、`~/.ssh/config` に、例えば、以下のように書いている場合などです。

```~/.ssh/config
Host github
HostName github.com
User git
IdentityFile ~/.ssh/github
```

これで SSH 接続できるかどうかを確認してみると、次のようになります。

```
% ssh github
PTY allocation request failed on channel 0
Hi username! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.
```

結果のメッセージに、自分のユーザー名（ `username` ）が含まれていれば良いはずなのですが、[^1]

しかし、git clone を実行すると、以下のように Permission denied となってしまいました。

```
% git clone git@github.com:username/repositoryname.git
Cloning into 'repositoryname'...
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```

問題は、`~/.ssh/config` の `Host` を指定するところで、任意の名前で大丈夫なのですが、

GitHub の Web ページから `git@github.com:~` の部分をコピペして、`git clone git@github.com:~` と実行したいのであれば、`Host` は `github.com` にしておく必要があります。

ちなみに、一応 `github` も残しておくなら、次のように書けば OK です。

```~/.ssh/config
Host github github.com
HostName github.com
User git
IdentityFile ~/.ssh/github
```

もちろん、初めから、`git clone git@github:~` というコマンドで git clone していれば、何も問題はなかったのですが、

コピペに慣れていると、またハマりそうなので、自戒も込めて記事を書いておくことにしました。

この辺りの理屈については、分かっているつもりでも、ふとした時に思い出せなかったり、間違った思い込みをしていたりしそうなので、改めて、注意が必要ですね。

[^1]: https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/testing-your-ssh-connection
ruby 演習メモ II (variable and method)



# 目的

ruby のコードを実際に書いてみよう.
今回は第 II 弾.


# お題 その1

受け取った引数 ARGV[0] を name という変数 (variable) に代入してそれを打ち出す code を書け.
(<https://qiita.com/daddygongon/items/c51f3e0695174bb3c508> にある課題)


## 今回書いた code (hello\_variable.rb)

```ruby

name = ARGV[0]
puts "Hello #{name}."

```


## 解説

code 自体について特に言うことなし.
ちなみに, 型宣言はいらないらしい.


# お題 その2

    > ruby hello_method.rb Rudy
    Hell Rudy.

と返す hello method を作りなさい． (先程のリンク先にある課題)


## 今回書いた code (hello\_method.rb)

```ruby

#!/usr/bin/env ruby

def hello name
  puts "Hello #{name}."
end

name = ARGV[0]
hello name

```


## 解説

method は `def-end` で書ける.
引数の `()` は省略できる.


# おまけ (TDD)

先程のリンク先 ([ここ](https://qiita.com/daddygongon/items/c51f3e0695174bb3c508)) に TDD (Test Driven Development) の話がある.
ぜひ読もう.


# 参考資料

[チャート式ruby-II(variable and method)](https://qiita.com/daddygongon/items/c51f3e0695174bb3c508)



------
 - **source** ~/Lecture/multiscale_simulation/grad_members_20f/members/gagagagazelle/docs/c2_name_method_hello.org
授業メモ6



# 再帰

　そもそも再帰とは関数や計算式の中で自身と同じ関数を用いること.　これにより,関数を複数定義したものよりも簡単にコードを書くことができる.


# 再帰の利用

　今回,再帰の利用としてフィボナッチ数列を用いる.

　フィボナッチ数列は初項0,第1項が1であり,n項+n+1項がn+2項になるような数列である.　この数列は前の項を次々に参照してつながっていくため,再帰が利用できそうである.

　初項と第1項は定義しておかないと求めることができないので,

> def fib(n)

>  if n == 0

>   return 0

>  end

>  if n == 1

>   return 1

>  end

> end

　これで初項と第1項を定義することができた.

　次は第1項以降の定義を追加する.

> return fib(n - 1) + fib(n - 2)

　上記の式を追加する.

　最後にテストをするための配列を作る.

> [[6,8],[7,13],[8,21]].each do |index, expected|

> printf assert equal(expected,fib(index))

> end

　これでフィボナッチ数列を再帰を用いて表すことができた.


# class化

　隠ぺい,継承,多形をさらに言語のシステムとして徹底したものがclassというものらしい.

　[授業メモ3](https://qiita.com/adchello/items/ff4fe04930c5d174369f)でやった出力方法,Hello worldを少し変えたものを使ってみる.

> def puts<sub>hello</sub> name

>   puts "Hello #{name}."

> end

> def gets<sub>name</sub>

>   name = ARGV[0] || 'world'

>   return name

> end

> name = gets<sub>name</sub>

> puts<sub>hello</sub> name

　この中のループを消してしまおうというのがclassとしての考えなようです.　これに対してrefactoringを行う.

>  class Greeter

>   def initialize

>    @name = gets<sub>name</sub>

>    puts<sub>hello</sub>

>   end

>   def puts<sub>hello</sub> #salute

>    puts "Hello #{@name}."

>   end

>   def gets<sub>name</sub>

>    name = ARGV[0] || 'world'

>    return name.capitalize

>   end

>  end

> Greeter.new

　これでも結果が同じになりました.



------
 - **source** ~/grad_members_20f/members/adchello/test5.org
【Python】インストールしたパッケージの保存と新しい環境へ一括インストールする方法　Mac環境

<!-- wp:paragraph -->
<p>こんにちは、かをるです。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>今回は、<span class="marker-under">Pythonのインストールしたパッケージを保存し、その保存した環境を別の環境へ一括でインストールする方法</span>をご紹介していきます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>様々なパッケージをインストールした環境を作成したら、その中のパッケージのリストを<span class="marker-under-red">『<a href="https://qiita.com/sakusaku12/items/21083c73c8afa4f6c78d" target="_blank" rel="noreferrer noopener" title="https://qiita.com/sakusaku12/items/21083c73c8afa4f6c78d">r</a></span><span class="marker-under-red"><a href="https://qiita.com/sakusaku12/items/21083c73c8afa4f6c78d" target="_blank" rel="noreferrer noopener" title="https://qiita.com/sakusaku12/items/21083c73c8afa4f6c78d">e</a></span><span class="marker-under-red"><a href="https://qiita.com/sakusaku12/items/21083c73c8afa4f6c78d" target="_blank" rel="noreferrer noopener" title="https://qiita.com/sakusaku12/items/21083c73c8afa4f6c78d">quirements.txt</a>』</span>というパッケージリストになったファイルに出力します。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>そして、『requirements.txt』のリストから新しい仮想環境へ一括でパッケージをインストールすることができます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>パッケージのインストールに関しては、以前の記事をご覧ください。<br><a href="https://kaworublog.com/python-package-install/" target="_blank" rel="noreferrer noopener" title="https://kaworublog.com/python-package-install/">【Python パッケージ（ライブラリ）のpipコマンドを使ったインストール方法】</a></p>
<!-- /wp:paragraph -->

ブログに投稿しました。
https://kaworublog.com/python-requirements-txt/
大掃除

Windows Update 後、システムドライブの空き容量が逼迫する傾向にあったので、一時しのぎに以下の記事を参考にして書きました。

　[C:\Windows\Temp フォルダーに cab_XXX_X（X は数字）が生成されディスクの容量を圧迫している場合の対処方法](https://docs.microsoft.com/ja-jp/archive/blogs/askcorejp/cwindowstemp-cab_xxx_x-x-37327)

```bat:cleanup.bat
@echo off

openfiles > NUL 2>&1
if %ERRORLEVEL% equ 1 (
  powershell.exe -Command Start-Process \"%~f0\" -Verb runas
  exit /b
)

:: ref.
::   https://blogs.technet.microsoft.com/askcorejp/2015/04/15/cwindowstemp-cab_xxx_x-x-37327/

set SELF=%~n0
set FILE=%TEMP%\%SELF%.log

setlocal
  :: %SYSTEMROOT%\Temp\cab_*_*
  call :delete "%SYSTEMROOT%\Temp" "cab_*_*"
  
  :: %SYSTEMROOT%\logs\CBS\CbsPersist_*.log
  call :delete "%SYSTEMROOT%\logs\CBS" "CbsPersist_*.log"
  
  :: %SYSTEMROOT%\logs\CBS\CbsPersist_*.cab
  call :delete "%SYSTEMROOT%\logs\CBS" "CbsPersist_*.cab"
  
  echo.
  set /p _=Press any key to close this window. 
endlocal
goto :EOF

:delete
setlocal enabledelayedexpansion
  echo.
  echo %~1\%~2
  
  if not exist "%~1\" exit /b 1
  
  forfiles /p %~1 /m "%~2" /c "cmd /c echo @file,@fsize,@fdate,@ftime" > %FILE% 2> NUL && (
    echo.
    for /f "tokens=1-4 delims=," %%a in (%FILE%) do (
      set b=                    %%b
      set d=0%%d
      echo ^ ^ %%~a: !b:~-15! bytes^ ^(%%c !d:~-8!^)
    )
    call :Q "Are you sure you want to delete the above file(s)?" && (
      echo.
      del /q "%~1\%~2" && (
        echo ^ ^ Delete successful.
      ) || (
        echo ^ ^ Delete failed.
      )
    ) || (
      echo.
      echo ^ ^ Canceled.
    )
  ) || (
    echo.
    echo ^ ^ File not found.
  )
  
  del %FILE% > NUL 2>&1
endlocal
goto :EOF

:Q
setlocal
  :BOL_Q
    echo.
    set /p A=%~1 ^(Y/n^) 
    if /i "%A%" == "Y" exit /b 0
    if /i "%A%" == "N" exit /b 1
  goto :BOL_Q
endlocal
goto :EOF
```
実行結果は以下のとおりです。
![2021-01-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29814/e9f8c3b5-cf70-5c6b-885d-46be86899240.png)
SIerからSIerに転職して約9ヶ月の自己学習〜Web系への挑戦〜

# はじめに
今年も残りわずかということで、2020年の活動を振り返っていこうと思います。
今年は初めての転職やWeb技術学習の開始など激動の1年となりました。

# 略歴

- IT業界に憧れて、文系の身で某私大の情報学部に入学[^1]
- SIerとWeb系の違いも知らないまま`中小独立系SIerに入社`
- **Excel作業の多さや客先常駐のつらさ**にギャップを感じながらも約5年勤務
- 在学中に基本情報、就職後に応用情報に合格するも、その後どう頑張ればいいかわからずゲームやYouTuber活動に傾倒
- 1人常駐のつらさに耐えきれずぶっつけ本番で転職活動を行い、**ようやくSIerとWeb系の違いを理解**
- ポートフォリオすら作っていない身ではWeb系に入ることはできず、2020年4月から`中堅くらいの独立系SIerに入社` [^2]
- 自己研鑽を怠っていた自分を恥じ、同じことを繰り返すまいと3月下旬頃から **独学やエンジニア勉強会参加、Qiita投稿**などの活動を開始

# 3月下旬〜12月末まで約9ヶ月で学習したこと
## Web技術
Qiitaなどで見かけることはあったものの、どうせ他人事だと思いこんでいました。
転職活動を機にSIerで使う技術とWeb系で使う技術は異なることを理解し、いざというときのために初歩から学んでいくことにしました。
学習にあたって、書籍などに沿ってサンプルアプリを作成した上で、オリジナルのWebアプリを作成することで、**開発環境構築・設計・実装・デプロイまでの一連の流れを経験**することができました。
何から学べばよいのか自分ではわからなかったので手当たり次第になってしまった感はありますが、**Qiita記事やWebエンジニアの話が少しずつ理解できるようになった**と思います。

学んだ技術の例：

- Django
- Spring
- Laravel
- Rails
- Flutter
- AWS(EC2インスタンス立ち上げなどの初歩)

成果物を紹介したQiita記事[^3]：
[MTGカード評価投稿サイトの開発〜5週間でDjangoアプリリリース〜](https://qiita.com/tekpro/items/37358283f76867f03904)
[Flutterでクイズアプリを作成〜Flutter勉強会アウトプット〜](https://qiita.com/tekpro/items/a79f69bdc56d0af2b877)
[努力を可視化！ 積み上げ管理アプリの開発〜5週間でSpringアプリリリース〜](https://qiita.com/tekpro/items/5f594c747e5da2c97602)

参考にした書籍・資料・サービス：
[動かして学ぶ！Python Django開発入門](https://www.amazon.co.jp/gp/product/B07YY5RDPC/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&psc=1)
[Spring解体新書](https://www.amazon.co.jp/dp/B07H6XLXD7/ref=cm_sw_em_r_mt_dp_hit7FbR8V6N8M)
[Laravel6とAWSで作るブックレビューサイト](https://www.techpit.jp/courses/9)
[Ruby on Rails チュートリアル](https://railstutorial.jp)
[Progate](https://prog-8.com/dashboard)

## Java資格

SIerらしくJavaなら慣れているつもりだったものの、面接では初歩しか分かっていないと切って捨てられてしまったため、鍛え直しを決意しました。
**Oracle Java Bronze,Silver資格を勉強して合格**しましたが、学習時間や費用がかかりすぎるのと、高い受験料も全て自腹のため、Gold資格は受けないと思います。

## ネットワーク

一応は応用情報まで合格しているものの、ネットワークに関してはかなり苦手分野のため基礎から学びなおしました。ついでに応用情報の範囲の学び直しを行いました。

参考にした書籍：
[マスタリングTCP/IP―入門編―(第6版)](https://www.amazon.co.jp/gp/product/4274224473/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&psc=1)
[マスタリングTCP/IP ルーティング編](https://www.amazon.co.jp/dp/4274066762/ref=cm_sw_em_r_mt_dp_AAt7FbF00E66N)
[徹底攻略 応用情報技術者教科書](https://www.amazon.co.jp/dp/B08N5QPDHX/ref=cm_sw_em_r_mt_dp_fBt7FbZFW9TAZ)

## その他

その他の学習や体験についてざっくり以下に記載します。

- **エンジニア勉強会・もくもく会**に繰り返し参加し、Webエンジニアから知見を得たり人脈を広げたり
- 面接下手すぎてコミュニケーション能力不足を指摘されたため、**「話し方教室」** [^4]に参加して人前でのスピーチなどを練習する
- 自作WebアプリについてのLTや、出身大学の1年生に向けて実体験を話す講演を行う
- SIer勤めでネタが少ないなりにQiIta記事投稿
- WordPressブログを開設し、各プラグインの使い方やSEO対策などの初歩を学ぶ
- 応用情報より難しい高度試験の勉強 [^5]
- 技術書に限らずビジネス書や自己啓発書などを読書

# これから

一度はWeb系への転職を諦めたものの、今の会社の業務とWeb技術の学習を並行して行った結果、やはりWeb業界に挑戦したいという気持ちが大きくなっています。
来年からは**しっかりしたポートフォリオを作ることを目標にプログラミングスクールを受講**することで、**Web系への転職を狙いたい**と考えています。


[^1]: 偏差値は大したことなく、いわゆる有名大学とは言えない
[^2]: 大手とは言えないものの前の会社よりは格上
[^3]: サーバ代節約のため、現在はWebアプリ非公開
[^4]: 英会話教室の日本語版のようなもの。ググると分かるが、あがり症改善やボイストレーニングなどの需要で結構盛況
[^5]: ネットワークスペシャリストや情報処理安全確保支援士試験に興味があるものの、Web技術の学習を優先したいと思ったため中断
ruby 演習メモ I (puts)



# 目的

ruby のコードを実際に書いてみよう.
今回は第 I 弾.


# お題 その1

ruby で hello\_world.
(<https://qiita.com/daddygongon/items/1b0f0ff3fb9d60418289> にある課題)


# 今回書いた code

```ruby

# require
require 'pp'

# start here output
puts	'hello world'

p	'hello world'

pp	'hello world'

print	'hello world'

printf	'hello world'

```


# 解説

code に対する解説は特にない. あんな感じに書けば出力される.
各種 method の解説については先程載せたリンク先にあるからそこを見よう.


# お題 その2

受け取った文字列に対して hello.
(先程のリンク先にある課題)


# 今回書いた code

```ruby

puts	"Hello #{ARGV[0]}."

#puts	"Hello " + ARGV[0] + "."

#print	"Hello #{ARGV[0]}.\n"

#print	"Hello " + ARGV[0] + ".\n"

#printf("Hello %s.\n", ARGV[0])

```


# 解説

さっきの code をちょっと書き換えるだけで良い. (`ARGV[0]` を使えばいい)
そうすると,

```
> ruby hello_name.rb sonic
Hello sonic.
```

こうなる


# 参考資料

[チャート式ruby-I(puts)](https://qiita.com/daddygongon/items/1b0f0ff3fb9d60418289)



------
 - **source** ~/Lecture/multiscale_simulation/grad_members_20f/members/gagagagazelle/docs/c1_puts.org
SpringBootの環境構築(Springスターター・プロジェクトの作成まで)

#背景
_【後悔しないための入門書】Spring解体新書: Spring Boot2で実際に作って学べる！Spring Security、Spring JDBC、Spring MVC、Spring Test、Spring MyBatisなど多数解説！
作者: 田村達也_

上記の書籍を読んでSpringBootでアプリを作成する際の環境を構築(Spring スターター・プロジェクトの作成まで)したので簡単にまとめる(2020年12月30日時点での情報)
OS：Windows10Home、
IDE：Spring Tools 4 for EclipseのWindows版(2020/12/30時点での最新のバージョンである4.9.0)
ライブラリ：
・Spring Boot DevTools(自動でWebアプリケーションを再起動してくれる開発補助ツール)
・Lombok(Lombokが使用できる。Lombokは別にインストールが必要)
・H2 Database(H2データベースを使用できる。セットアップが不要で学習やテスト環境のDBと
　して使いやすい)
・Spring Data JDBC(Springが用意したJDBCを使用できる。通常のJDBCよりも簡単に
　SQLを実行できる)
・Thymeleaf(SpringBoot標準で使用されるHTMLのテンプレートエンジン)
・Spring Web(SpringMVC、SpringBootが使用できる)
・Validation(「javax.validation.*」「org.hibernate.*」をインポートできるようにする)

#手順
1. Spring用のeclipe(SpringToolSuite(STS))をインストール
・STSにはJDKが含まれていないため、あらかじめJDKのインストールが必要
・https://spring.io/toolsからSpring Tools 4 for Eclipseをダウンロードする
・ダウンロードしたjarを解凍して展開されたフォルダ配下のcontents.zipを解凍する
・解凍してできたフォルダの配下のSpringToolSuite4.exeを起動する

2. STSの日本語化
・PlieadesのサイトからPleiadesプラグインのWindows版をダウンロードする
・ダウンロードしたZIPをWindows標準機能で解凍する(解凍ソフトを使用するとエラーになる可能性がある)
・解凍してできたフォルダ配下のpluginsとfeaturesの配下のjp.sourceforge.mergedoc.pleiadesを
　1.で解凍してできたフォルダの配下のpluginsとfeaturesの配下に配置する
・SpringToolSuite4.iniの最終行に以下の2行を追加する
　「-Xverify:none」(バイトコード検証機能を無効にする)
　「-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar」(Pleiadesを有効にする)

3. STSの初回起動時には-cleanオプションを指定して起動
・2.で解凍してできたフォルダ配下のeclipse.exe -clean.cmdを1.で解凍してできたフォルダの　配下(SpringToolSuite4.exeと同じ階層)に配置する。
・eclipse.exe -clean.cmdをテキストエディターで開き、eclipse.exeをSpringToolSuite4.exeに　修正する。
・eclipse.exe -clean.cmdを実行し、STSを起動して、メニュー等が日本語化されていることを　確認する。(以降は、SpringToolSuite4.exeを直接実行する)

4. Lombokのインストール
※Lombokとはsetterやgetterなどのコードを自動で実装してくれるライブラリ
・lombok.jarをダウンロードして、STSを閉じた状態でダブルクリックする
・「Specify Location」で以下のパスを指定してチェックを入れて、「Install/Update」を押す。
　SpringToolSuite4.exeのパス

5. Spring スターター・プロジェクトの作成
・「ファイル」→「新規」→「Spring スターター・プロジェクト」をクリック
　※「ウィンドウ」→「ビューの表示」→「プロジェクト・エクスプローラー」でプロジェ
　　クト・エクスプローラーが表示される
・プロジェクト名を入力して、ライブラリの依存関係では以下を選択する
　・Spring Boot DevTools
　・Lombok
　・H2 Database
　・Spring Data JDBC
　・Thymeleaf
　・Spring Web
　・Validation

#参考文献・参考サイト
・【後悔しないための入門書】Spring解体新書: Spring Boot2で実際に作って学べる！Spring Security、Spring JDBC、Spring MVC、Spring Test、Spring MyBatisなど多数解説！
作者: 田村達也
・https://minamino-heya.com/2020/08/springboot-add-validation/
UE4 Unprotected Private Key エラーの対応方法

##UE4の公式文書では↓
Unprotected Private Key エラーの対応方法
以下のようなエラーが出る場合があります。

ERROR:Unable to determine home directory for remote user.SSH output:...WARNING:UNPROTECTED PRIVATE KEY FILE!...0660
このエラーが出ない場合は、次の手順へ進むことができます。このエラーが出た場合は、以下の手順で解決します。

Microsoft から SubInACL command line tool をダウンロードします。

[Command Prompt (コマンド プロンプト)] タスク バー アイテムを右クリックして [Run as Administrator (管理者として実行)] を選んで Administrator Command プロンプトを開きます。

以下のコマンドを実行します。

SubInACL /File "C:\Users\MyUserName\AppData\Roaming/Unreal Engine/UnrealBuildTool/SSHKeys/10.1.1.1/remoteusername/RemoteToolChainPrivate.key" /setprimarygroup=Users

パスを自分の鍵に変更してこのコマンドを実行します。こうすることで、グループ権限の確認時に SSH が問題としていた、ファイルのプライマリ グループが自分のユーザー名とは異なるものに変更されます。この後プロセスは正常になります。

##SubInACLがマイクロソフトから消えてる！


[ここ](https://geekline.biz/wp-content/uploads/2020/12/subinacl.zip "ここ")
にアップロードしたので解凍して利用してください。
Refactoring Ruby



# お題

Refactoring Ruby をやる. (授業内課題)


# 今回書いた code

ここには載せない.
授業で使ってるリポジトリにあるから, そこで見よう.


# 学んだこと

-   どんな小さな修正でも, テストはすべき. (テストは大事)
-   リファクタリングにはいくつかテクニックがある. それに則ってリファクタリングすればいい.



------
 - **source** ~/Lecture/multiscale_simulation/grad_members_20f/members/gagagagazelle/docs/refactoring_ruby.org
複合形状の物体を物理演算の世界に持ち込む (CANNON.js + THREE.js)

<p class="codepen" data-height="412" data-theme-id="light" data-default-tab="result" data-user="kob58im" data-slug-hash="abmqygJ" style="height: 412px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="freefall by using cannon.js">
  <span>See the Pen <a href="https://codepen.io/kob58im/pen/abmqygJ">
  freefall by using cannon.js</a> by kob58im (<a href="https://codepen.io/kob58im">@kob58im</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 要点

複合形状（ここではコの字型）の物体の作成は、ただ単に `body` に `addShape` するだけで良いっぽい。（cannon.jsの[demo](https://github.com/schteppe/cannon.js/blob/master/demos/compound.html)の`demo.addScene`関数から推測した結論。）

CANNON.jsの世界の物体をTHREE.jsの世界の物体に変換する部分は、[cannon.demo](https://schteppe.github.io/cannon.js/build/cannon.demo.js) の `shape2mesh` 関数から持ってきました。


# 参考サイト

1. [三次元物理演算エンジン、Cannon.jsを使ってみた。 | KnockKnock](http://www.knockknock.jp/archives/540)
- https://schteppe.github.io/cannon.js/build/cannon.demo.js
- https://github.com/schteppe/cannon.js/blob/master/demos/compound.html
- [CANNON.jsのConvexPolyhedronにBlenderから書きだしたデータを読み込ませる - Qiita](https://qiita.com/edo_m18/items/35d69ba17df484ac37a8)
- [Three.js + Cannon.js でゴゴゴとドドドを物理演算してみるテスト - CX's Hatena Blog](http://cx20.hatenablog.com/entry/2014/06/28/235423)
Hyper-VでWindows 7を入れたときに、音が出ない (解決済み)

#対象
右下の 🔈マークが×になっている。
トラブルシューティングを実行しても、音が鳴らない という方
![00.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993172/5daacee3-586c-3fc1-4291-f5221460c160.jpeg)

#結論
リモートデスクトップ (Windowsの機能)を使用する。
すこし手間ですが、一度設定してしまえば簡単にできます。
![20201231_023959975_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993172/3cf827fd-3c3a-5cbc-4d8b-675ea2b454bf.png)

#リモートデスクトップを設定する
###接続される側 (クライアント)
まず画像の画面を出します。
コントロールパネル　→　システムとセキュリティ　→　システム　→　リモートの設定

おそらく、リモートデスクトップの項目が　「このコンピュータへの接続を許可しない」になっていると思います。
ここを2番目のところに変えます (画像のように)

これで接続される側の設定が完了しました。
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993172/4225fbbc-faca-edd5-53f8-67bc533c9d7d.jpeg)

###接続する側 (ホスト)
この画面を出します。
場所は　スタートメニュー →　Windows アクセサリ →　リモート デスクトップ接続

※ユーザーを指定したいときは、画像のように左下の▲マークを押してオプションを出します。
ここに接続される側 (クライアント)のコンピュータ名を打ちます。
(オプションを付けた場合はユーザー名も)



![20201231_025423700_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993172/d780abb7-95d1-fa50-0dea-256fc212d77f.png)

##コンピュータ名
Windows 7の場合は
コントロールパネル　→　システムとセキュリティ　→　システム に書いてあります。

![20201231_030044804_iOS - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993172/ab7dd7d2-0b98-f941-1178-25672216df7f.png)

##接続する側 (ホスト)  ※起動までもう少しです
![20201231_025423700_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993172/70edc437-0382-c8f3-6828-7f0a0cde58b6.png)

ここに、コンピュータ名とユーザー名 (任意)を入力して　接続 を押します。
パスワードを聞かれるので、自分のPC　または　仮想マシーンのユーザーパスワードを打ちます。
こんな画面が出てきますが、「はい」で大丈夫です。

![20201231_030643574_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993172/429b4b82-471f-df23-7c79-e8e2eff0c98d.png)

Windows 7の画面が出れば成功です！
![20201231_023959975_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993172/d00b825d-ea49-a1e4-7dd8-dabbe3cdbf8b.png)

##まとめ
Hyper-Vで起動したWindows で音が出ないときは、リモートデスクトップを使う。
Sassでz-indexを効率よく管理する方法

## はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Sassの自作関数でz-indexプロパティを効率よく管理する方法

`z-index`プロパティは、指定箇所が増えてくると管理が大変で、エディタ内で都度検索をしても良いのですが、効率が悪くなってしまい大変だと思います。そこで、Sassの自作関数を使った管理方法をご紹介します。

## 方法

#### ① 配列を定義する


変数`z-map`の中に文字列（header,mask,modal）を入れた配列を定義します。
それぞれの文字列には添字（番号）が、配列を定義すると自動で割り振られます。

例えばRubyの場合、配列の添字は0から始まりますが、Sassの場合は、配列の添字は1から始まります。
※ 今回ではheaderは1,maskは2,modalは3

```scss
$z-map: header,mask,modal;

header {
  // 中略
  z-index: 1;
}

.mask {
  // 中略
  z-index: 2;
}

.modal {
  // 中略
  z-index: 3;
}
```

#### ② Sassの組み込み関数`index`を使う

#### index
Sassで組み込まれている関数で、`index(配列名,配列の値)`と記述することで、配列の添字を取得することができます。以下の場合、header内の`z-index`プロパティの値は1となります。

```scss
$z-map: header, mask, modal;

header {
  z-index: index($z-map, header);
}
```

#### ③ 関数を定義する

関数`getZIndex`を定義し、引数に`$name`を入れ、引数の部分に配列名を入れたら値を取得できるようにします。

```scss
$z-map: header, mask, modal;

@function getZIndex($name) {
  @return index($z-map, $name)
}
```

以下の場合、.mask内の`z-index`プロパティの値は2となります。

```scss
$z-map: header, mask, modal;

@function getZIndex($name) {
  @return index($z-map, $name)
}

.mask {
  z-index: getZIndex(mask);
}
```

関数を定義すれば、殆ど変更を行う必要はなく、配列の値を追加したり、並び順で値を変更したりすれば良いので管理が楽になります。

## 番外編

メインコンテンツ内で複雑な図形を作ったりして、`z-index`の値を一気に1〜10くらい使ってしまい
1つ配列を定義しただけでは、管理しきれなくなった場合についてご紹介します。

`index`の最後に+100の配列の値を足してやることで、.modalの`z-index`の値は103となります。

```scss
$z-map: header, mask, modal;

@function getZIndex($name) {
  @return index($z-map, $name) + 100
}

.modal {
  z-index: getZIndex(modal);
}
```

普段使っている限りでは、あまり`z-index`の値が100を超えることはないので、管理しやすくなると思います。
Ruby 勉強メモ(再帰関数)

# 概要
今回は繰り返し処理の勉強をしたメモを残します。for文でもよいのですがforと再帰、両方を勉強したほうが良いため、今回のテーマは再帰です。
再帰関数の練習としてフィボナッチ数列を実装します

### フィボナッチ数列
フィボナッチ数列といえば、
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, ...
というようにn項目が(n-1)と(n-2)項目の足し算で表される数列であった。漸化式で書くとこうなる。


```math
\begin{align}
a_n &=  0 \quad|\quad n=0\\
&= 1 \quad|\quad n=1\\
&= a_{n-2}+a_{n-1} \quad|\quad otherwise
\end{align}
```

### 実装
```ruby
def fibonacci(n)
    return 0  if n==0   # 漸化式1項目
    return 1  if n==1   # 漸化式2項目
    return fib(n-2)+fib(n-1)   # 漸化式3項目
  end

p fibonacci(8)
```
Docker-composeによるRStudio環境の構築と管理

#はじめに
本記事ではRStuido環境の構築方法についてまとめています。せっかくなので簡単に管理したいと考えて、Docker-composeで簡易に管理する方法を調べてました。

##参考
下記ページを参考にさせていただきました。

ブログ
- [DOCKER-COMPOSE を使って RSTUDIO を管理する](https://plaza.umin.ac.jp/shoei05/wp/index.php/2020/10/30/196/)
- [RStudio Serverのインストール - データ分析勉強会](https://k-metrics.github.io/cabinet/env_install_svr.html)
- [Rocker Project](https://www.rocker-project.org/)

Docker-hub
- [rocker/tidyverse
](https://hub.docker.com/r/rocker/tidyverse)

#環境構築
##Dockerについて
本記事ではDockerについての詳細な解説やインストール方法についての説明は省きます。（他にわかりやすい記事が多数存在するため。）今回はDockerfileとDocker-composeを使用して環境構築を実施します。

**Dockefile**
Dockerイメージを自作するための設定ファイル(レシピのようなもの)

**Docker-compose**
Dockerイメージのビルドやコンテナの起動を簡易に実施するためのツール

##Dockerfile
DockerhubではRockerというR環境構築のためのイメージファイルが配布されています。その中でも今回はtidyverse系ライブラリが既にインストースされているイメージファイルをベースとして環境を構築します。(tidyverse系ライブラリは非常に便利であるため)

また、グラフ等の凡例に日本語を入れても文字化けが発生しないように日本語フォントもインストールを行います。

```dockerfile

# ベースとするイメージ
FROM rocker/tidyverse:3.6.3

# OS環境を日本語ロケールに切り替える

ENV LANG ja_JP.UTF-8
ENV LC_ALL ja_JP.UTF-8
RUN sed -i '$d' /etc/locale.gen \
  && echo "ja_JP.UTF-8 UTF-8" >> /etc/locale.gen \
    && locale-gen ja_JP.UTF-8 \
    && /usr/sbin/update-locale LANG=ja_JP.UTF-8 LANGUAGE="ja_JP:ja"
RUN /bin/bash -c "source /etc/default/locale"
RUN ln -sf  /usr/share/zoneinfo/Asia/Tokyo /etc/localtime

# 日本語フォントをインストールする
RUN apt-get update && apt-get install -y \
  fonts-ipaexfont \
  fonts-noto-cjk
```

##Docker-compose
続いてはDocker-composeです。
「environment」において任意のパスワードを設定します。また「volumes」においてホストOSのカレントディレクトリに存在している「R」というディレクトリをマウントしています。マウントすることでRStudio内で作成したファイルがそこに残り、コンテナを削除してもファイルが消えません。

```yml

version: '3'
services:
  rstudio:
    build: .
    image: tidyverse:3.6.3_jp
    container_name: tidyverse_jp
    environment: 
      #任意のパスワードを設定する
      - PASSWORD=＊＊＊＊＊
    ports:
      - 8787:8787
    volumes:
      - ./R:/home/rstudio
    tty: true
    stdin_open: true
```

##環境の立ち上げ

先ほど作成したDockerfileとDocker-composeのファイルが存在するディレクトリにおいて下記コマンドを実行するだけで環境を立ち上げることができます。

```bash
docker-compose up -d
```

コンテナを立ち上げた上下記URLでブラウザに入るとRSstudioの環境に接続することができます。
http://localhost:8787
Usernameはデフォルトは「rstudio」になっており、Passwordに先ほど設定したものを入力することでサインインできます。

![スクリーンショット 2020-12-31 11.43.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395230/cc6bf02a-2b73-9be0-7a81-440de250cae3.png)

##サンプルコードの実行
日本語フォントのインストールを実施したので、文字化けが発生していないかを確認します。

```R
library(ggplot2)
scatter <- ggplot(data=iris, aes(x = Sepal.Length, y = Sepal.Width)) 
scatter + geom_point(aes(color=Species, shape=Species)) +
  xlab("アイリスのがくの長さ") +  ylab("がくの幅") +
  ggtitle("がくの長さと幅") 
```

問題なく日本語がプロットされていることが確認できました。

![スクリーンショット 2020-12-31 11.49.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395230/ee7398e7-3d8b-0def-be42-e00f9e16ad30.png)

#Next
今後はR関連の記事もアップしていきたいです。
M1 Macbook ProでDocker上のXdebugが動かない


# 環境

Docker Desktop (Preview): 0.0.0(1)
OS: macOS Big Sur 11.1
IDE: PHPStorm

PHP: 7.2
Xdebug: 2.9.8

# 前提

通常のXdebug設定とかは割愛。
既存（Intel Macbook）で動いている環境が動かない、という状態。

# 現象

`php.ini` にて設定した `xdebug.log` に以下のようなエラーが。

```
[71] Log opened at 2020-12-29 07:57:31
[71] I: Connecting to configured address/port: host.docker.internal:9005.
[71] W: Creating socket for 'host.docker.internal:9000', getaddrinfo: Invalid argument.
[71] E: Could not connect to client. :-(
[71] Log closed at 2020-12-29 07:57:36
```

# 原因と解決

[Docker公式ドキュメント](https://docs.docker.com/docker-for-mac/apple-m1/)に `既知の問題` として上がってた :sweat: 

> The DNS name host.docker.internal only works if you add --add-host=host.docker.internal:host-gateway to the docker run command

DNS名の host.docker.internal は `docker run` に `--add-host=host.docker.internal:host-gateway` を追加しないと使えないとのこと。

これを docker-compose でやるなら、

```
    extra_hosts:
      - "host.docker.internal:host-gateway"
```

を書いてあげる必要がある。

そうすると、コンテナ内の `/etc/hosts` にて以下の記述を発見。

```
192.168.65.1    host.docker.internal
```

これで動く。。。とはならない。

```
E: Time-out connecting to client (Waited: 200 ms). :-(
```

接続がタイムアウトしてしまう模様。。。

どうやらコンテナ -> ホスト（Mac）の通信が届いていない感じ。

色々試した結果、 `host-gateway` を自分のIPにすると動いた！

```
    extra_hosts:
      - "host.docker.internal:192.168.xxx.xxx"
```

自分のIPはターミナル上にて以下で取れます。

```
ipconfig getifaddr en0
```

# 今後の課題

これで一応解決。。。ではあるけれど、普通はDHCPでIPとか自動設定されるし、IPを動的に変わるようにしたい。。。

IPを環境変数に詰めて、ビルドのときにそれを読み込むようにするか、コンテナ内のホストを書き換えるスクリプトを書くか。。。