OmniAICreator/Qiita-1.07M huggingface dataset:
[Kotlin] listOfNotNull() の使い方を考えてみる

TwitterでKotlin公式がTipsをツイートしていたので、どんな風に使うのか確認してみた。

# listOfNotNull()

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">If you want to store some nullable values in a non-nullable list (or set), you don’t have to null-check manually. Instead, use the listOfNotNull() function (and, starting with Kotlin 1.4, setOfNotNull()). <a href="https://twitter.com/hashtag/KotlinTips?src=hash&amp;ref_src=twsrc%5Etfw">#KotlinTips</a> <a href="https://t.co/LTcIumU4wb">pic.twitter.com/LTcIumU4wb</a></p>&mdash; Kotlin (@kotlin) <a href="https://twitter.com/kotlin/status/1283341972032368640?ref_src=twsrc%5Etfw">July 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

`listOfNotNull()`という関数。
nullを含めたくないリストを作るときに、手動で`null`チェックする必要はないよ、とのこと。

## 試す

こういうことらしい。

```kotlin
val a: Int = 1
val b: Int? = 2
val c: Int? = null

val list = listOfNotNull(a, b, c)
println(list) // [1, 2]
```

確かに`null`は除外されている。

## 覚えていられるか

「`listOfNotNull()`という関数を覚えておくこと」がそこまでのメリットになる感じがしない。
わざわざ専用の関数を覚えなくても、`listOf()`と`filterNotNulll()`を組み合わせたらいいんじゃないか？

```kotlin:こう書ける
val list = listOf(a, b, c).filterNotNull()
println(list)
```

と、思ったら、候補を表示してくれた。

![2020-07-17_22h35_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7933/3b9dd1be-e7cb-9733-0d9b-edb289ba9b07.png)

なるほど、これなら覚えておく必要はない。使ってもいいかもしれない。

## どこで使えるか

動的に情報を表示する画面を作るときに使えるかもしれないと思った。
例えば、次のようなメソッドがあったとする。

```kotlin
    fun getHeader(): Item?
    fun getBody(): Array<Item?>
    fun getFooter(): Item?
```

その時のデータに応じて、画面の構成要素を返すメソッドだと思ってほしい。
`null`以外なら画面に表示するが、`null`なら取り除きたい。

これまでなら次のように1つずつ**手動で`null`チェックする**コードを書いていたかもしれない。

```kotlin:nullを除外するコード例
    val items = buildList {
        getHeader()?.let { add(it) }
        getBody().filterNotNull().forEach { add(it) }
        getFooter()?.let { add(it) }
    }
```

それが`listOfNotNull()`を使うと次のように書ける。

```kotlin:listOfNotNull()を使った例
    val items = listOfNotNull(
        getHeader(),
        *getBody(),
        getFooter()
    )
```

シンプルである。
(スプレッド演算子(`*`)を使って、`*getBody()`としたかったので、こっそり`Array<Item?>`と定義していた)

# 感想

使いどころは限られるかもしれないけれど、こういったデータを扱うときには確かにスッキリ書ける。
これが使えるところに遭遇したらぜひとも使っていこう。

ただ、どんなときに使えるかは、正直なところ上記の例以外には具体的に浮かばなかった。
他に使いどころがあれば教えてほしい…。
【Swift5】Timerでスライドショー機能を実装(初心者向け)

# 背景
Timerを使ったアプリの質問をよく受けるので、スライドショーを例に実装を書いてみた。

# プロジェクトのソース
念のためプロジェクトをGithubに上げてあるので
よかったらどうぞ！
https://github.com/tomoki-inoue1221/slideShowApp


# 画面・機能

## 実装画面
画像と再生ボタンだけを用意
<img width="375" alt="Simulator Screen Shot - iPhone SE (2nd generation) - 2020-07-17 at 23.05.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514870/8c4d385a-b062-148e-da86-3a9a0a835806.png">

## 機能
- 再生ボタンを押すと、1秒ごとに画像が切り替わる(スライドショー機能)
- スライドショー中はボタンの名前を「停止」に切り替える(ボタンひとつで再生・停止の機能)

# 実装

## 実装手順
1. assetsにスライドショーさせたい画像を配置
2. storyboardでautoLayoutの設定
3. storyboardからIBOutletとボタンのアクションを接続
4. コードを実装

## コード
```ViewController.swift
import UIKit

class ViewController: UIViewController {
    
    // outletの接続
    @IBOutlet weak var startButton: UIButton!
    @IBOutlet weak var imageView: UIImageView!
    
    // 配列に指定するindex番号を宣言
    var nowIndex:Int = 0
    
    // スライドショーに使用するタイマーを宣言
    var timer: Timer!
    
    // スライドショーさせる画像の配列を宣言
    var imageArray:[UIImage] = [
        UIImage(named: "neko1")!,
        UIImage(named: "neko2")!,
        UIImage(named: "neko3")!,
        UIImage(named: "neko4")!,
        UIImage(named: "neko5")!
    ]
    

    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
    
    // 再生ボタンを押した時の処理
    @IBAction func slideShowButton(_ sender: Any) {
        // 再生中か停止しているかを判定
        if (timer == nil) {
            // 再生時の処理を実装
            
            // タイマーをセットする
            timer = Timer.scheduledTimer(timeInterval: 1.0, target: self, selector: #selector(changeImage), userInfo: nil, repeats: true)
            
            // ボタンの名前を停止に変える
            startButton.setTitle("停止", for: .normal)
            
        } else {
            // 停止時の処理を実装
            // タイマーを停止する
            timer.invalidate()
            
            // タイマーを削除しておく(timer.invalidateだけだとtimerがnilにならないため)
            timer = nil
            
            // ボタンの名前を再生に直しておく
            startButton.setTitle("停止", for: .normal)
        }
    }
    
    @objc func changeImage() {
        // indexを増やして表示する画像を切り替える
        nowIndex += 1
        
        // indexが表示予定の画像の数と同じ場合
        if (nowIndex == imageArray.count) {
            // indexを一番最初の数字に戻す
            nowIndex = 0
        }
        // indexの画像をstoryboardの画像にセットする
        imageView.image = imageArray[nowIndex]
    }
}
```

## 補足

1. タイマー停止時に`timer = nil`にしている理由

`timer.invalidate()`でtimerは停止するが、timerに停止中という状態がないので
timerをnilにして、nilかどうかで判定を行っている

2. タイマーで呼び出す関数が`@objc`がついてる理由

https://qiita.com/masakihori/items/4a715f28fc7f18d1a625
こちらの記事を参照ください
練習のためにSwiftをUdemyで勉強してみた(6日目)

#今日やったこと

 - ARアプリの続き
    - 平面を探す
    - 平面にグリッドを表示させる


#DitectPlaneAR
平面を探し、見つけたらテキストを表示するアプリ
`let configuration = ARWorldTrackingConfiguration()`が平面を見つけてくれるそう。
以下での言及されている。
https://qiita.com/chino_tweet/items/2591648bea43dfccd898

```Swift:ViewController.swift

        override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        // Create a session configuration
        let configuration = ARWorldTrackingConfiguration()

        // Run the view's session
        sceneView.session.run(configuration)
    }
```

https://github.com/blumemond10/DitectPlaneAR

#GridOverlay
上記Appの派生。
平面を見つけたら、そこにグリッド（十字線）を表示させる


```Swift:GridPlane.swift
import Foundation
import SceneKit
import ARKit

class GridPlane: SCNNode{
    var anchor : ARPlaneAnchor
    var planeGeometry : SCNPlane!
    
    init(anchor: ARPlaneAnchor) {
        self.anchor = anchor
        super.init()
        setup()
    }
    
    func update(anchor: ARPlaneAnchor){
        self.planeGeometry.width = CGFloat(anchor.extent.x)
        self.planeGeometry.height = CGFloat(anchor.extent.z)
        self.position = SCNVector3Make(anchor.center.x, 0, anchor.center.z)
    }
    
    private func setup(){
        self.planeGeometry = SCNPlane(width: CGFloat(self.anchor.extent.x), height: CGFloat(self.anchor.extent.z))
        let material = SCNMaterial()
        material.diffuse.contents = UIImage(named: "overlay_grid.png")
         
        self.planeGeometry.materials = [material]
        
        let planenode = SCNNode(geometry: self.planeGeometry)
        planenode.position = SCNVector3Make(anchor.center.x,0,anchor.center.z)
        planenode.transform = SCNMatrix4MakeRotation(Float(-Double.pi / 2.0), 1.0, 0.0 , 0.0)
        
        self.addChildNode(planenode)
        
    }
    
    required init?(coder aDecoder: NSCoder){
        fatalError("Fatal Error!")
    }
}
```

https://github.com/blumemond10/GridOverlay
画像の指定(表と裏でそれぞれ3種類ずつ)ができる単語帳PGM

<h3>
画像の指定(表と裏でそれぞれ3種類ずつ)ができる単語帳PGM
</h3>

<hr>
GASから単語帳のJSONファイルを出力し、そのデータのjsonファイルをJavaScriptから
読みだして動かすスクリプトを作成しました。
単語の表と裏にはそれぞれ3種類ずつの画像も出力することができるようになっています。
単語帳のデータは次でのGASのスクリプトからoutputメソッドを呼び出して作成します。

<hr>
単語帳作成用のGASスクリプト:https://docs.google.com/spreadsheets/d/1Dykc2nuDq_14YrmmwwWSPnHs12YpmK3htkV17_cUzrs/edit?usp=sharing

単語帳のJavaScriptPGMのgithubURL:https://github.com/NanjoMiyako/MyTangoTyo

サンプルページURL: https://nanjomiyako.github.io/MyTangoTyo/

<hr>
サンプル画像
![outputImage1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412430/409e7a4f-1774-84a4-dbd3-70b52b0ade7b.png)

<hr>
参考にしたページ
<a href="https://javascript.programmer-reference.com/js-image-resize/">[JavaScript] 画像サイズを変更する | コピペで使える JavaScript逆引きリファレンス</a>
<a href="https://itsakura.com/js-selectbox">JavaScript セレクトボックスの値を取得/設定するサンプル | ITSakura</a>
所有者変更(メモ)

ディレクトリごと所有者を変更する

```ruby:chown
$ chown -h -R user[:グループ名] フォルダ名
```

オプションは以下の通り。
| -c | 所有権が変更された場合、その詳細を表示します。 
| -f | エラーメッセージを表示しません。 
| -h | 指定したファイルがシンボリックリンクの場合、シンボリックリンクのみ所有権を変更します。システムファイルやディレクトリの所有権を一括で変更する場合はこのオプションを使いましょう。 
| -R | 指定したディレクトリとそのディレクトリ以下のファイルやディレクトリの所有権を再帰的に変更します。 
| -v | 所有者変更の詳細を表示します。-cは、変更された場合のみ。 

以下参照
https://webkaru.net/linux/chown-command/
MacにAnsibleをインストールする

[公式ドキュメント](https://docs.ansible.com/ansible/2.9_ja/installation_guide/intro_installation.html#macos-ansible)で推奨されている通りpipを使ってインストールする方法です．

### 最新の Python・pip をインストール
最新のPython・pipをインストールしておいてください．古いとうまくいかないことがあります（筆者もそれで詰まりました）．

https://www.python.org/downloads/ から最新のpythonをダウンロード・インストールします．

好みかもしれませんが `python` コマンドをPython3系にエイリアスしておくとよいです．`~/.bashrc` などに下記を追記して`source ~/.bashrc` で反映させましょう．

```
alias python="python3"
alias pip="pip3"
```

### pip で Ansible をインストール
下記コマンドでインストールできます．

```
pip install ansible
```

### 任意: pip のインストールフォルダに PATH を通す
基本以上で大丈夫ですが，もしかしたら最後にPATHを通す必要があるかもしれません．場所は `pip show` コマンドで確認できます．

```
$ pip show ansible
Name: ansible
Version: 2.9.10
Summary: Radically simple IT automation
Home-page: https://ansible.com/
Author: Ansible, Inc.
Author-email: info@ansible.com
License: GPLv3+
Location: /Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages
Requires: jinja2, PyYAML, cryptography
Required-by:
```

この `Location` と書かれているところです．これを参考に `~/.bashrc` などに対し以下のように追記してあげましょう．

```
PATH=$PATH:/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages
```
【SwiftUI】プレビュー不要なクラスで Canvas の自動表示を抑止する

## モチベーション

SwiftUI の Canvas を使ったプレビューは大変便利ですが、この機能が不要なファイルもあります。

たとえば、iOS アプリ開発における、`WindowSceneDelegate` や `AppDelegate` です。
これらは UI 以外の実装も担っているので、Canvas の表示は鬱陶しいと思います。
<img width="1792" alt="Screen_Shot_2020-07-17_at_22_43_03.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63842/214ddb56-04c3-717a-0d05-629273507459.jpeg">
実は、Canvas の自動表示は、`import SwiftUI` が記載されているかどうかで判定しているみたいなので、記法を工夫することで Canvas の自動表示の抑止ができます。

### 環境

- Xcode Version 11.5 (11E608c)
- Xcode Version 12.0 beta 2 (12A6163b)

## Life Cycle

### UIKit App Delegate

UIWindowSceneDelegate で SwiftUI に依存しているクラスは、`UIHostingController` のみなので、`UIHostingController` のみにインポートを制限します。

```swift
import UIKit
import class SwiftUI.UIHostingController

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    // ...
}
```

このような記法で、Canvas の自動表示抑止できます。
<img width="1792" alt="Screen_Shot_2020-07-17_at_23_04_10.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63842/63d7ce93-957c-09d6-e74b-590df3f9d038.jpeg">

### AppKit App Delegate

`NSHostingView` のみにインポートを制限します。

```swift
import Cocoa
import class SwiftUI.NSHostingView

@NSApplicationMain
class AppDelegate: NSObject, NSApplicationDelegate {
    // ...
}
```

### SwiftUI App

Xcode 12 からは SwiftUI でアプリのエントリポイントを実装できますが、
ここで登場する `App`, `Scene` などは `View` ではないので、プレビューは不要だと思います。

`App`, `Scene`, `WindowGroup` のみインポートすることで、Canvas を抑止できます。

```swift
import protocol SwiftUI.App
import protocol SwiftUI.Scene
import struct SwiftUI.WindowGroup

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
```
timedatectlとJavaのTimeZone

チョーひさびさに投稿。あまりに驚いてムカついたため。

Javaで構築されたシステムをAmazon LinuxからAmazon Linux 2に移行する作業をしていたときに発覚。

Amazon Linux 2ではシステムのタイムゾーンを設定するため、以下のコマンドを実行する。

```shell
#timedatectl set-timezone "Asia/Tokyo"
```

通常はこれで全てOKのはずで、ネットを検索してもAmazon Linux 2やCentOS7系の記事ではココマデしか書かれていません。

しかし、Javaのプログラム内ではTimeZoneは正しく取得出来ずに、UTCになります。

サンプル：

```TimeZoneInfo.java
import java.util.Calendar;
class TimeZoneInfo {
  public static void main(String[] args) {
    Calendar cal = Calendar.getInstance();
    System.out.println(cal.getTimeZone());
    System.out.println(System.getProperty("user.timezone"));
  }
}
```

実行結果：

```
sun.util.calendar.ZoneInfo[id="UTC",offset=0,dstSavings=0,useDaylight=false,transitions=0,lastRule=null]
UTC
```

対応方法はいくつかあります。（見つけるのにすげぇ時間かかった）

1. 環境変数TZ=Asia/Tokyoを設定する
2. javaのコマンドラインに```-Duser.timezone=Asia/Tokyo```を付ける
3. Amazon Linuxの頃の定石の設定方法だった```/etc/sysconfig/clock```の修正を実施する

などなど。
問題点はいくつかあるのだと思う。

- timedatectlでは```/etc/localtime```は書き換えてくれるが、```/etc/sysconfig/clock```は書き換えてくれない。（そもそもCentOS7だとファイル自体がないらしい・・・・）
- Javaは```/etc/localtime```を見てくれない。バージョンによって違うらしい。glibcの挙動の変化かもしれないが、詳細な原因は分からない。
- systemd系になって/etc/sysconfigはあまり参照されなくなったが、過去の遺産は残っているので、互換性にもう少し考慮してくれ。。。。
- 旧システムはJava1.6で実行、新システムはJava7で実行。Java8以降の最新だとどうなってるのかは知らん。

どれが一番正しい（やるべき）対応方法なのだらう。。。。
というかTimeZoneの設定くらいなんとか標準化してくれ。
Adobe製デザインシステム「React Spectrum」がすごいので紹介したい

# React Spectrum

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">🚀 Super excited to announce:<br><br>♿️ React Aria — Accessible UI primitives for your design system.<br>👑 React Stately — State and core logic for your design system.<br>🌈 React Spectrum — Adobe’s design system.<br><br>Learn more: <a href="https://t.co/ucVguh3rqp">https://t.co/ucVguh3rqp</a><br>Github: <a href="https://t.co/e8aOfLgCVK">https://t.co/e8aOfLgCVK</a></p>&mdash; Devon Govett (@devongovett) <a href="https://twitter.com/devongovett/status/1283423750096998400?ref_src=twsrc%5Etfw">July 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

7月15日にAdobeのデザインシステム `react-spectrum` がリリースされました。
デザイン製も優れていますが、他の部分でのクォリティーが個人的にショックだったので、紹介したいと思いました。

## どこがすごいの？

- ロジックとUIを完全に分解して、ロジックのところを **再利用可能** にしたところ
    - 自分・自社のデザインシステムを作りたい場合、ロジックだけ借りて実装することができる
- ロジック部分のクォリティーが高すぎる（cross-platformやaccessibility、多言語対応を一年半以上掛けて開発・テスト）
- 普通にUIが綺麗

タイトルのは `react-spectrum` がすごいと書きましたが、実際にすごいのはこのロジックの部分です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375274/2809f871-c825-3dab-11af-5c5ee8a8c648.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375274/b189c882-0be8-a22a-2824-8e5c695e90be.png)

- `react-aria` は、カスタムHooksを利用して、プラットフォームやデバイスによって異なる動作を共通化してくれる
    - 例えば、`onClick` の挙動はマウスを使わない他のデバイスでは聞かないことがあるが、そこを `onPress` というイベントで統一してくれる
- `react-stately` は、platformに依存しない複雑な `React` のコンポーネントのロジックを、UI依存なしで提供してくれる
    - DatePicker, Table, Search, Navigation, Toast, Virtualizerなど
- ロジックの部分を組み合わせることで、アクセシビリティの高い好きなコンポーネントが作りやすくなる
- まだまだ開発中のコンポーネントもあるっぽいです。

## TailwindCSSを使った例

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Started playing around with making some examples of using React Aria with <a href="https://twitter.com/tailwindcss?ref_src=twsrc%5Etfw">@tailwindcss</a>. So far, I&#39;ve made completely custom styled buttons, checkboxes, textfields, and selects. And they&#39;re fully accessible. In 1 hour! 🤯<br><br>Try them out yourself: <a href="https://t.co/w4SgyIcPmK">https://t.co/w4SgyIcPmK</a> <a href="https://t.co/2Ks2fttxMC">pic.twitter.com/2Ks2fttxMC</a></p>&mdash; Devon Govett (@devongovett) <a href="https://twitter.com/devongovett/status/1284552127948324864?ref_src=twsrc%5Etfw">July 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ロジック側は `react-aria` と `react-stately` に任せて、スタイリングのみtailwindCSSで実装した例です。１時間で多くのコンポーネントが実装できたらしいので、生産性は凄く高そうですね。



## 紹介動画

[動画のリンク](https://www.youtube.com/watch?v=dxDcBB7Xoxs)。

↑開発に至った経緯と、何ができるかをわかりやすく説明してくれてますので、
時間がある方は**ぜひ見ることをおすすめ**します。

## ドキュメント

**React Spectrum**
https://react-spectrum.adobe.com/index.html

**Repository**
https://github.com/adobe/react-spectrum

## 最後に

昨日Twitterから流れてきて、凄くモチベーションが上がってしまったので、シェアさせていただきました。

> 書いてみたら、デザインシステムを作りたい人とか、コンポーネントライブラリーを探している人以外にはあまり需要がなさそう…（泣）

現在の業務でも使ってるデザインシステムがあるのですが、
**多様なプラットフォームに対応したロジック部分などを作って行くのが辛く**、結構微妙な感じになっちゃってました。
そこらへんの改修にもすごく役立ちそうで楽しみです。

個人的にも自分がデザインしたコンポーネントライブラリーを作りたいという欲求があったので、色々試していきたいです。
stylish-haskellをHexFloatLiteralsやNumericUnderscoresに対応させる

Qiitaを漁っていたらちょうど似たようなトピックで記事を書いている方がいました：

* [stylish-haskellをBlockArgumentsに対応させる - Qiita](https://qiita.com/sparklingbaby/items/a46f299dd303d0738f58)

# stylish-haskellとhaskell-src-extsとGHC拡張について

stylish-haskellはhaskell-src-extsというライブラリを使ってHaskellのソースコードをパースしていますが、haskell-src-extsは最新のGHC拡張に対応していません。その結果、最新のGHC拡張を使ったコードにstylish-haskellを適用しようとすると失敗します。筆者が気になったのはHexFloatLiteralsとNumericUnderscoresです。

brittanyなどの、GHCを使ってHaskellコードをパースするフォーマッターに乗り換えるのも一つの手です。しかし、フォーマッターの好みなどの問題から、ここではあくまでstylish-haskellを使いたいものとします。

長期的には、stylish-haskellがGHCを使ってHaskellコードをパースするように望ましいと思います。実際、GitHubにはそういうIssueがあって、作者も前向きです：

* [Switch to ghc-lib? · Issue #263 · jaspervdj/stylish-haskell](https://github.com/jaspervdj/stylish-haskell/issues/263)

ですが、これは今すぐに実現する話ではないので、短期的にはhaskell-src-extsをいじって新しいGHC拡張に対応させるのが早いでしょう。

「haskell-src-extsをいじって」と書きましたが、HexFloatLiteralsとNumericUnderscoresについてはすでに有志が実装してPRを送っています。ここでは、そのPRを取り込んだhaskell-src-extsを利用してstylish-haskellをビルドします。

haskell-src-extsをHexFloatLiteralsとNumericUnderscoresに対応させるPR：

* [NumericUnderscores lexing #455 by merc1031 · Pull Request #457 · haskell-suite/haskell-src-exts](https://github.com/haskell-suite/haskell-src-exts/pull/457)

# 手順

まず、stylish-haskellを適当なディレクトリにチェックアウトします。

```shell-session
$ git clone https://github.com/jaspervdj/stylish-haskell.git
$ cd stylish-haskell
```

stack.yamlを開き、extra-depsの `haskell-src-exts` への言及をコメントアウトし、代わりにgitリポジトリのURLとコミットのハッシュを書き加えます。このハッシュは、上記のPRのものです。

```yaml
resolver: lts-15.6
packages:
- '.'

extra-deps:
# - 'haskell-src-exts-1.23.0'
- git: https://github.com/merc1031/haskell-src-exts.git
  commit: 2376655f889d170e16b9836b2ae1147f6a074caa
```

出来合いのPRではなく、自前で改変したhaskell-src-extsを使いたい場合は、extra-depsを消してpackagesの部分にローカルのディレクトリを指定すれば良いはずです（未検証）：

```yaml
packages:
- '.'
- '../haskell-src-exts'
```

あとは `stack install` すればHexFloatLiteralsとNumericUnderscoresに対応した `stylish-haskell` が `~/.local/bin` にコピーされます。
jQuery　セレクターの取得方法まとめ（兄弟/親子）

jqueryセレクターの取得方法(兄弟/親子)まとめです。

#準備
##HTMLデータ
```html
    <ul style="position: relative;">
      <li>大リスト1</li>
      <li>大リスト2
        <ul id="target2">
          <li>大リスト2-中リスト1</li>
          <li>大リスト2-中リスト2
            <ul>
              <li>大リスト2-中リスト2-小リスト1</li>
              <li>大リスト2-中リスト2-小リスト2</li>
              <li>大リスト2-中リスト2-小リスト3</li>
              <li id="target1">大リスト2-中リスト2-小リスト4</li>
              <li>大リスト2-中リスト2-小リスト5</li>
              <li>大リスト2-中リスト2-小リスト6</li>
              <li>大リスト2-中リスト2-小リスト7</li>
            </ul>
          </li>
          <li>大リスト2-中リスト3</li>
        </ul>
      </li>
      <li>大リスト3</li>
    </ul>

```

##実行結果
[![Image from Gyazo](https://i.gyazo.com/6bd5692ad59bf8a88900eb3eefc076cc.png)](https://gyazo.com/6bd5692ad59bf8a88900eb3eefc076cc)

#兄弟要素
##$("〜").next()　兄弟要素内で次の要素

$("#target1").next();で
大リスト2-中リスト2-小リスト5を取得　

##$("〜").nextAll()　兄弟要素内で次以降の全要素
$("#target1").nextAll();で
大リスト2-中リスト2-小リスト5
大リスト2-中リスト2-小リスト6
大リスト2-中リスト2-小リスト7を取得

##$("〜").nextUntill(条件)　兄弟要素で次以降の全要素を条件要素の前まで

$("#target1").nextUntil(":contains(7)");で
大リスト2-中リスト2-小リスト5
大リスト2-中リスト2-小リスト6を取得

※７という文字列を含む要素の前まで

##$("〜").prev()　兄弟要素内で前の要素

$("#target1").prev();で
大リスト2-中リスト2-小リスト3を取得

##$("〜").prevAll()　兄弟要素で前以降全ての要素

$("#target1").prevAll();で
大リスト2-中リスト2-小リスト1
大リスト2-中リスト2-小リスト2
大リスト2-中リスト2-小リスト3を取得

##$("〜").prevUntil(条件)　兄弟要素で前以降の全要素を条件要素の前まで

$("#target1").prevUntil(":contains(1)");で
大リスト2-中リスト2-小リスト2
大リスト2-中リスト2-小リスト3を取得

※遡る順番は条件要素に近い側（手前）からです。

##$("〜").siblings()　兄弟要素全て

$("#target1").siblings()　で
大リスト2-中リスト2-小リスト1
大リスト2-中リスト2-小リスト2
大リスト2-中リスト2-小リスト3
大リスト2-中リスト2-小リスト5
大リスト2-中リスト2-小リスト6
大リスト2-中リスト2-小リスト7を取得

#子要素
##$("〜").children()　子要素全て

$("#target2").children();で
大リスト2-中リスト1
大リスト2-中リスト2
大リスト2-中リスト3を取得

##$("〜").children()　子要素全て(テキストノードを含む)

$("#target2").contents();で

text
大リスト2-中リスト1
text
大リスト2-中リスト2
text
大リスト2-中リスト3を取得を取得

※text部分はhtmlのタグ間で改行された際のインデント（スペース部分）を拾います

##$("〜").find(条件)　子要素内の条件と等しい要素全て

$("#target2").find("li");で
大リスト2-中リスト1
大リスト2-中リスト2
大リスト2-中リスト2-小リスト1
大リスト2-中リスト2-小リスト2
大リスト2-中リスト2-小リスト3
大リスト2-中リスト2-小リスト4
大リスト2-中リスト2-小リスト5
大リスト2-中リスト2-小リスト6
大リスト2-中リスト2-小リスト7
大リスト2-中リスト3を取得

#親要素

##$("〜").parent()　１階層上の親要素を取得

$("#target1").parent()で
ul要素を取得

##$("〜").parents()　先祖要素（全ての親要素）を取得

$("#target1").parents()で

\<ul>\</ul>
\<li>大リスト2-中リスト2\</li>
\<ul id="target2">\</ul>
\<li>大リスト2\</li>
\<ul style="position:relative;">\</ul>
\<body>\<body>
\<html>\<html>

##$("〜").parentsUntil(条件)　先祖要素で条件一致した要素の手前までを取得

$("#target1").parentsUntil("#target2");で

\<ul>\</ul>
\<li>大リスト2-中リスト2\</li>を取得

※\<ul id="target2">\</ul>は条件一致なので含まれない

##("〜").closest(条件)　自身から先祖要素に遡り最初に条件一致した要素を取得

$("#target1").closest("ul");で
\<ul>\</ul>を取得

※$("#target1").closest("li");の場合は自身を取得してしまうので気をつけてください

##("〜").offsetParent()　先祖要素でpositionがrelative/absolute/fixedいずれかの要素

$("#target1").offsetParent();で
\<ul style="position:relative;">\</ul>を取得
Vuexの中心となるstore（簡単に要約）

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。

Vue.jsで開発する際に、データの受け渡しが増えていくことで、データがどこで変更されたか等のデータの流れが追いづらくなり、メンテナンスが困難なコードとなってしまいました。

このメンテナンスコストを大幅に削減したのが`Vuex`になります。

`Vuex` アプリケーションの中心にあるものは`store`です。`store` は、基本的にアプリケーションの 状態（state） を保持するコンテナです。


# Vuex のコアコンセプト
storeには「state」、「mutations」、「actions」、「getters」の４つの機能が存在します。

## state
[state](https://vuex.vuejs.org/ja/guide/state.html)はアプリケーション全ての状態管理を行ってくれます。
## getters
[getters](https://vuex.vuejs.org/ja/guide/getters.html)は`state`を算出してくれます。項目のリストをフィルタリングしたりカウントするときのように、ストアの状態を算出したいときに使います。
## mutations
[mutations](https://vuex.vuejs.org/ja/guide/mutations.html#%E3%83%9F%E3%83%A5%E3%83%BC%E3%83%86%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3)は`store`の状態を唯一変更できる事ができます。
## actions
[action](https://vuex.vuejs.org/ja/guide/actions.html#%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3)はmutatinosのコミットを行います。
【Symantec】LiveUpdateの参照先

バージョンは14。クライアント・サーバ共にWindows。

クライアント側から"LiveUpdate"ボタンを押すと、SEPMの方へ参照してウイルス定義ファイルを持ってきてくれると思っていたのですが、どうやら違うようで、、

外部にあるLiveUpdateサーバを見に行くようです。どうりでオフラインサーバでアップデート失敗するわけだ、、、

<font color="Blue">定期的に参照するのはSEPMですが、手動実行した場合は外部</font>ということになります。

<br>
ちなみに、オフラインで適用したい場合は
https://www.symantec.com/security_response/definitions/download/detail.jsp?gid=sep14
からjdbファイルをダウンロードしてきて、SEPMサーバの
`\Program Files(x86)\Symantec\Symantec Endpoint Protection Manager\data\inbox\content\incoming`
にコピペすれば更新してくれます。

 

以上。
MacでTortoiseSVNのような環境の構築

<!--
参考サイト
https://qiita.com/kazokmr/items/754169cfa996b24fcbf5
https://pig-log.com/ssh-no-password/
-->

#はじめに
WindowsにはTortoiseSVNのような素晴らしいツールがあるので、
SVNの操作が直感的に簡単にできますが、MacでSVNを使って開発しようとなった際はTortoiseSVNが使えないため、コマンドラインでやらなければ。。と思っていましたが、TortoiseSVNの代わりになるツールで **SnailSVN** という素晴らしいソフトがあることを知ったので、その使い方について解説していきます。

# 下準備
ローカルの環境にSVNをインストールして使用する場合は読み飛ばしてください。
レンタルサーバーなどにSVNの環境がある場合はSSHで接続する方法を紹介します。
ちなみに筆者はロリポップにSVN環境を構築して使用しています。

##① SSHで使用する公開鍵と秘密鍵を作成する
###ローカルで行う

```sh:コマンドライン
$ cd ~/.ssh
$ ssh-keygen -t rsa
秘密鍵のファイル名や、鍵のパスワードを設定するか聞かれるが、
未入力のままEnterで進んでいく
```

/Users/{ユーザー名}/.ssh/ に
秘密鍵 : `id_rsa` と 公開鍵 : `id_rsa.pub`
が作成されます。


##② サーバーに公開鍵を登録する

###ローカルで行う
SCPコマンド等で公開鍵をアップロード

```sh:コマンドライン
$ scp -P 2222 id_rsa.pub {アカウント}@{ホスト名}:~/.ssh

例） scp -P 2222 id_rsa.pub User@example.jp:~/.ssh
```

公開鍵をauthorized_keysに登録する

```
$ ssh-copy-id {アカウント}@{ホスト名} -p2222

例） ssh-copy-id User@example.jp -p2222
```


# SnailSVNの設定
###① SnailSVNをインストールする
https://apps.apple.com/jp/app/snailsvn-lite-svn-for-finder/id1063090543?mt=12
SVNをインストールしたら、SnailSVNを起動して下記の設定を行っていく

###② .sshディレクトリのパスを設定する
左下の「+」ボタンを押して /User/{ユーザー名}/.ssh を設定
<img width="592" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/d5d33828-6169-64cb-7f26-cdd0e570d0ef.png">

###③ ローカルリポジトリのパスをWorking Copiesに設定
リモートリポジトリからチェックアウトして、ローカルリポジトリを作成する。
ローカルリポジトリのpasuwoWorking Copiesに追加
<img width="654" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/9b51275d-22d0-c741-6960-b642dae01685.png">

###④ SSH接続を可能にしてリモートリポジトリと同期する
リポジトリを選択して、右下の歯車アイコンを押下
<img width="654" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/c21ae6b4-d794-c8b8-e369-caf31257cd17.png">

・下記のように設定する
※SSHで接続しない場合は、Authenticationは「Username and Password」を選択して、
 UserNameとPasswordのみ設定すればOK

>Authentication: SSH Key
Username : ユーザー名
SSH Key : /Users/ユーザー名/.ssh/id_rsa
Passphrase : 空
SSH port : ポート番号

<img width="654" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/c5815895-ff82-7a8a-54af-d4d8f643bf94.png">

###⑤ 拡張機能からSnailSVNを有効にする
Macの設定 > 機能拡張 > Finder機能拡張 > SnailSVNにチェックを入れる 

#最後に
これでSnailSVNが使えるようになります。
コマンドライン操作にまだ抵抗がある方にしてみると
Finderでステータスが見れるのはやはり良いですね。
（コマンドライン操作もできるように頑張ります。。）
<img width="655" alt="スクリーンショット 2020-07-17 22.20.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/72c47cd7-1ef5-bf99-83aa-196b6fe18fb1.png">
<Python>特定の文字列で区切られたファイル名をそのファイル名の一部で一括変換するクイズ

# 背景

https://qiita.com/ozaki25/items/33a57ad7eea55822c764 でPythonでもだれか。。。というお話だったので
ちらっとSlackで書いたのですが「解説して〜」（たぶん）というお話を頂きましてザクっと書きます。

なお書き方は自分の趣味的な感じになっていますのでもっといい書き方があるよ！って方はぜひ教えてくださいませ。

# やること
ざくっと書いたPythonコードの説明

# 環境
ubuntu 18.04 + python 3.7.6 です。

```bash
$ cat /proc/version
Linux version 4.15.0-111-generic (buildd@lcy01-amd64-011) (gcc version 7.5.0 (Ubuntu 7.5.0-3ubuntu1~18.04)) #112-Ubuntu SMP Thu Jul 9 20:32:34 UTC 2020

$ python3 -V
Python 3.7.6
```

# 投稿したコード

```python
import os
import re
from glob import glob
p_file = glob("./*.csv")
_ = [ os.rename(file, re.sub(r'^.*_([0-9]{1,3}).*(\.csv)$', r'\1\2', file)) for file in p_file ] 
```
Slackに貼り付けたコードが何ゆえか勝手に変換されてて変なコードになってました。:nerd:
正しくはこちらのコードをみてください。

結果こうなったのはエントリー主が「ワンライナー」を主張してたので。。
もちろんPythonもCLIあるのでやれます、だけどわけわからん状態になるのでここで止めました。

---

データ作成もワンライナーで？ということなので少々反則っぽいけど。

```bash
!touch aaa_1.csv;touch aaa_2.csv;touch aaa_4.csv;touch aaa_9.csv;touch aaa_10.csv;touch aaa_99.csv;touch aaa_100.csv;touch aaa_999.csv;touch aaa_1000.csv
```


さて説明です。

```python
import os
import re
from glob import glob
```
ファイルリネームには os.rename
ファイル名置換に正規表現　re
を使いました。

ファイル一覧オブジェクト取得にはglobを使いました。同類っぽいpathlibを最近は使うようにしてます、もうjoinは使ってないです。

```python
p_file = glob("./*.csv")
```
globを使ってファイル一覧オブジェクトを取得します。余計なファイルを対象にしたくなかったのですがglobが回数マッチをサポートしていないのでとりあえず拡張子csv全部取ってこい、というイマイチな書き方になっています。
・・・ちょっとハマりました。

```python
_ = [ os.rename(file, re.sub(r'^.*_([0-9]{1,3}).*(\.csv)$', r'\1\2', file)) for file in p_file ] 
```

はい、ぱっと見慣れてないとわかりません。
内包表記を使って行数を減らしました（違うメリットもあるのですが）。

内包を使わずに書けばこんな感じです。

```python
for file in p_file:
  re_file = re.sub(r'^.*_([0-9]{1,3}),*(\.csv)$', r'\1\2',p_file)
  os.rename(file, re_file)
```
_ に結果代入をしているのはさほど意味はなく指定しないとコンソールログが美しくなかったので出さないようにした苦肉の策です。

```python
[None, None, None, None, None, None, None, None, None, None]
```
なんだよ。。。これ。

最後は正規表現で
数値１〜３桁を含む部分と拡張子の部分を抜き出して組み立ててます（定番のマッチ＋置換）。ちょっと正規表現での絞り込みが甘いかもですが。

```python
r'^.*_([0-9]{1,3}).*(\.csv)$' ⇛ r'\1\2'
```
r(row文字列表現)を使うと余計なエスケープを使わずに表現できるのでおすすめです。


# 寄り道
ファイルの読み込み権限とか何かと気になるところですが今回は省略してます。ただ無人実行するような運用をする場合は基本的な存在チェック／読み書き権限などは入れたほうが良いです。

os.renameで失敗するかもなのでtry〜exceptもやったほうがいいですね。今回は手っ取り早くを主眼にしてますのでサボりました（言い訳:umbrella2:）

会社で使っているコードではCSVファイルを読んでDataFrameに取り込む処理をやっていますが存在チェック、読み／書きチェックをラップしたClassを作って運用してます。

# 終わりに
最近異動があって、担当案件の全容が見えてくるにつれてプレッシャーで胃が。。。
Pythonコードを書くとホッとしますね（冗談です:sweat_smile:）。
JetsonNanoとMacを有線Lanケーブルで繋ぐ

##JetsonNanoとMacを有線Lanケーブルで繋ぐ

JetsonとMacを有線Lanで接続します。netatalkを使うことでファイルの共有ができます
###Mac側 セットアップ
<img width="200" alt="スクリーンショット 2020-07-16 22.56.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674266/c24cf6a2-88d5-b297-6a70-77bfd978def1.jpeg">

UsbLanカードを買う。MacにLanポートがないので USBLanタイプのものを用意する
Jetson側にLanポートにケーブルを挿す 

<img width="367" alt="スクリーンショット 2020-07-17 21.50.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674266/11c92d2d-7fe5-6128-8d72-aef6645544f1.png">

ドライバをインストールする。DHCPは自動でも構いません。
Bonjurというサービスを利用します。IPアドレスとホスト名.localを紐つけてくれます
MacとLinuxには標準であります
[参考](https://news.mynavi.jp/article/applelifehack-60/)

<img width="340" alt="スクリーンショット 2020-07-17 22.06.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674266/1d93ab27-6377-208a-c1a6-a7637dbf40a4.png">
Lanカードのチェックを入れます
インターネット共有ボタンをOnにします。
### Jetson側

ホスト名を取得する

```
$ hostname
```

netatalkをインストールする

```
$ sudo apt-get install netatalk

# netatalkを起動させる
$ sudo service netatalk start

# 止める場合
$ sudo service netatalk stop
```
####設定ファイルを変更するには]

homeディレクトリ周りを設定できます

```
$ sudo vim /etc/netatalk/afpd.conf
```
[参考](https://gist.github.com/gb-swatanabe/2983a3e8d21ae44534b1)

### Mac側

Finder -> 移動 -> サーバへ接続...

Jetsonで取得したホスト名を記入します

```
afp://ホスト名.local/ 

afp://(サーバのIPアドレス)/
```

<img width="399" alt="スクリーンショット 2020-07-17 22.14.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674266/1bcd42e2-bf19-d822-e29d-85fcf2ca36b4.png">

MacのFinderにJetsonのHomeディレクトリがマウントできました。
VeeValidate3でカスタムルールに引数を不特定多数受け入れる場合

自分用のメモです。

下記の公式URLを読めば解決できます。
[validation-provider - VeeValidate](https://logaretm.github.io/vee-validate/guide/basics.html#messages)

## 引数を不特定多数受け入れる場合
```vue
<ValidationProvider rules="ends_with:.png,.jpg" v-slot="{ errors }">
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

```

`params: ['words']`で第2引数に入るオブジェクトのキー名を指定できます。
`params`を指定しない場合、`message()`側の第2引数は配列ではなくobjectが返って来ます。

```js
// 特定の文字列で終わる
extend('ends_with', {
  params: ['words'],
  message (field, { words }) {
    const lastIndex = words.length
    let wordMessage = ''

    words.forEach((endWord, index) => {
      wordMessage += endWord
      if (lastIndex === index) { return }
      wordMessage += 'または'
    })
    return field + 'は' + wordMessage + 'で終わる文字列でなければなりません'
  },
  validate (value, { words }) {
    let isValid = false

    words.forEach((endWord) => {
      if (isValid) { return }
      isValid = value.endsWith(endWord)
    })
    return isValid
  }
})

```
LCD(NT35510 800x480)をESP32で表示させるぞ

#目的
　少し前に、ベーシックマスター レベル３をFPGA上で動かした。
　表示には長残像モニタが必要だが信号を弄り、ＶＧＡディスプレィに表示させた。
　でもどうせなら、表示一体型にしたらかっこいいのじゃない。
　◆◆◆　そうだ、小型LCDモニターを作ろう　◆◆◆
　まずはLCDを選定して、表示テストからだ。

#経緯
　LCDは「3.97inch_8&16BIT_Module_NT35510_800x480_MRB3973」が安かったので購入。
　このLCDは、MRB3973というボードに、NT35510という表示基板を使っており、ドライバーはOTM8009A。
　購入手配をした後で調べたら、アマチュアでの表示成功例は見当たらず。とほほ大丈夫だろうか。
　幸いなことに「[ボードの解説ページ](http://www.lcdwiki.com/3.97inch_16BIT_Module_NT35510_SKU:MRB3973)」が見つかったので参考にする。
　LCD試験用のマイコンは、ESP32をarduino開発環境で使用する。理由は準備が簡単でそこそこ高速と言う理由。
　但し、ESP32を使うので8bitパラレルとする。そうしないとESP32の端子が足りないから。
　SPIは使えない。だってボード上でピンに出力してないからね。
　この条件に合うソフトを探したが、見つからなかった。「Adafruit_NT35510-master」なんてのが有ったが、下記理由により却下。
　　・SPIと16bitパラレルを併用している　　どちらも物理的にESP32では繋ぐことが出来ない。
　　・Adafruit-GFXライブラリの仕様が前提　このライブラリは画面バッファとして800x480x2=768Kbyteのバッファが必要だがESP32では無理。
　しかたが無いので各ライブラリ類を眺めて、ゴニョゴニョやったら何とかなった。ゴミ箱行にならなくて良かった。

#前提条件
　以下のハード・ソフトを必要に応じ、予め準備してね。(購入先、金額は参考)
　1.LCD 　　　　　　　　　　aliで1.8K\で購入。此処で無くとも3.97inchで検索すれば出てくる。
　　　　　　　　　　　　　　※8bitモードに変更が必要。基板のR3の抵抗を取り外しR2の位置にはんだ付け変更が必要。
　　　　　　　　　　　　　　※この試作では、タッチパネルは制御していません。あしからず。
![Image1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159764/71089d54-1b79-aa64-53c2-a0ddde2b7f7d.jpeg)
　2.arduino-ESP開発環境 　　ネットで調べてね。
　3.ESP32 　　　　　　　　　何でもいいが、13ピン以上の入出力が有れば良し。
　4.ブレッドボードと配線　　適当に。

#接続
　プログラム(LCD.ino)を見れば判るが、下記端子の接続を行う。
　LCD_BLは、電源(3.3V)に接続する。
　　PARALLEL_0は、GPIO12～GPIO19にDB0-DB7を連番で接続する。
　　#define LCD_CS   5
　　#define LCD_RS   4
　　#define LCD_RD  21
　　#define LCD_WR  22
　　#define LCD_RST 23     // Set.Hi (low level reset) 
　　#define LCD_BL  VCC    // Set.Hi (High level light)
　　#define PARALLEL_0  12 // Byte Inpu Start 12(-19)Pin For R/W 8bit.parallel 
　上記接続を行い電源をいれると、LCDがうっすらと光るはず。
　　※基盤を8bitモードに設定するのを忘れないでね。
　　※BLをVCCに繋ぐのを忘れないでね。

#動作原理
　データの入出力は単純。
　　Readは、csをloにして、rdをloにすると、parallelにデータが出てくる。
　　Writeは、csをloにして、wrをloにすると、parallelからデータが読み込まれる。
　　R/W操作は8bitモードなので、連続二回実行する必要が有る。
　　rsでレジスタ/メモリのアクセスを切り替え。
　　※ただし、これだけでは済むはずは無かったが。一寸した鼻薬が必要。

#ソフト
　ソフトはarduinoのlibraries擬きで作っている。inoと同一もしくはlibrariesディレクトリに入れれば動くはず。
　関数の機能として、文字、直線、四角、円、塗りつぶしなどが可能。
　ボードの初期化後に、簡単なdemoを行ているので参照されたい。
　※関数の一部はネットから拾ってきている。出自を明らかにすべきだが何処からだったか...。
　
　　「[デモソフトの掲示場所(github)](https://github.com/hi631/LCD_NT35510-MRB3971)」
![Image6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159764/d62f2d96-689d-7c6f-fab3-650397a429f2.jpeg)
<BR>
　このLCDの発色は綺麗だと思う。小型カラーLCDのいかにもカラーですよというギラギラ感が無い。
　二千円前後でこのクオリティ、チャイナパワーに脱帽かな。タッチパネル無かったらもう少し安くなるのでは。
　なお、もし追試する奇特な方がおられた場合、上記記載内容は無保証であり、各自の責任においてご利用願います。
Manjaro Linuxの由来は「キリマンジャロ山」

Manjaro Linuxの「Manjaro」の由来はキリマンジャロ山に由来しています。

ちなみに、「Manjaro」は「マンジャロ」または「マンハロ」と発音されるとのこと。

ソース: [Manjaro FAQ - Manjaro Linux](https://wiki.manjaro.org/index.php?title=Manjaro_FAQ#How_is_.27Manjaro.27_Pronounced.3F)
フィボナッチ数列を求めるプログラムのサンプル

[FizzBuzz問題](https://qiita.com/ytaki0801/items/1309b33d55d106d84bd5)をあれこれ考えていたら，『フィボナッチ数列を（とりあえず）45個生成して表示するプログラムを作成しなさい』という問題も，プログラミングに関するある種の指標になるのではなかろうかと思い始めていたり．何が言いたいかは，この記事のタグとサンプルコードのコメント文を参照．

なお，下記サンプルプログラム（コメント記載分は除外）の実行は[こちらのサイト](https://www.jdoodle.com/)で確認済．

#Cの場合

```c:fib.c
#include <stdio.h>

// #define NOT_TAILRECUR

#ifdef NOT_TAILRECUR
unsigned long long fib(int x)
{
  if (x == 0)
    return (0);
  else
  if (x == 1)
    return (1);
  else
    return (fib(x-1) + fib(x-2));
}
#else
unsigned long long fib_r(
  int x,
  unsigned long long a,
  unsigned long long b)
{
  if (x == 0)
    return (a);
  else
    return (fib_r(x-1, b, a+b));
}
unsigned long long fib(int x)
{
  return (fib_r(x, 0, 1));
}
#endif

int main(void)
{
  for (int n = 0; n < 45; n++)
    printf("%llu ", fib(n));
  printf("\n");
  return (0);
}
```

#Pythonの場合

```python:fib.py
#### not tail-recur
#def fib(x):
#    if x == 0:
#      return (0)
#    elif x == 1:
#      return (1)
#    else:
#      return (fib(x-1) + fib(x-2))

def fib(x):
  def fib_r(x,a,b):
      if x == 0:
        return (a)
      else:
        return (fib_r(x-1, b, a+b))
  return (fib_r(x,0,1))

for i in range(45):
  print(fib(i), "", end="")
```

#Schemeの場合

```scheme:fib.scm
;;;; not tail-recur
;(define fib
;  (lambda (x)
;    (cond ((equal? x 0) 0)
;          ((equal? x 1) 1)
;          (else
;            (+ (fib (- x 1)) (fib (- x 2)))))))

(define fib
  (lambda (x)
    (let loop ((x x) (a 0) (b 1))
      (if (equal? x 0) a (loop (- x 1) b (+ a b))))))

(print (map fib (iota 45)))
```
【ORACLE】プラガブルデータベース(PDB)へ接続する

バージョン12cからはマルチテナント構成の概念が追加されており、前までの感じで接続しようとするとエラーが出まくります。
## ・プロンプトからデータベースに接続
```
sqlplus / as sysdba
```
## ・ユーザを作成
```
SQL>create user test identified by test;
create user test identified by test
*
ERROR at line 1:
ORA-65096: invalid common user or role name
```
出たな！
これは現在CDB(コンテナデータベース)に接続しているからで、ローカルの新規ユーザはPDB(プラガブルデータベース)にしか作成できないからです。
どちらに接続しているのかは`show con_name`で確認できます。

```
SQL>show con_name;
CON_NAME
------------------------------
CDB$ROOT
SQL>
```
CDB$ROOTなので、CDBに接続していることになります。
<br>
## ・切り替えるPDB名とアクセス権限を確認
```
SQL>select name, open_mode from v$pdbs;

NAME
--------------------------------------------------------------------------------
OPEN_MODE
----------
PDB$SEED
READ ONLY

PDBTEST
READ WRITE
```
PDB名はPDBTEST,
READ WRITE権限がついています。
<br>
## ・PDBスタート
```
SQL>ALTER PLUGGABLE DATABASE PDBTEST OPEN;
```
## ・自動起動設定
```
SQL>ALTER PLUGGABLE DATABASE PDBTEST SAVE STATE;
```
## ・切り替え
```
SQL>alter session set container = PDBTEST;
```
show con_nameを実行するとPDBに切り替わっています。
これでユーザを作成できます。
<font color="Red">※上記の切替方法は、CDB,PDB共通のユーザ(sys等)でログインしている場合しかできません。</font>
そのため、PDBで作成した固有ユーザで接続したい場合は、プロンプトから直接以下コマンドを実行します。が、、、

```
>sqlplus ユーザ名/パスワード@PDB名

ERROR:
ORA-01017: ユーザー名/パスワードが無効です。ログオンは拒否されました。
```
また出たな！！！
どうやらPDBへの接続はリスナー経由のようで、<font color="Blue">tnsnames.ora</font>ファイルの編集が必要です。
<br>
## ・lsntctlをみてCDB名、PDB名を確認
プロンプトから

```console
>lsnrctl status

LSNRCTL for 64-bit Windows: Version 12.2.0.1.0 - Production on 18-10月-2018 15:52:32

Copyright (c) 1991, 2016, Oracle. All rights reserved.

(DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=mhvpdb)(PORT=1521)))に接続中
リスナーのステータス
------------------------
別名 LISTENER
バージョン TNSLSNR for 64-bit Windows: Version 12.2.0.1.0 - Production
開始日 18-10月-2018 15:12:31
稼働時間 0 日 0 時間 40 分 0 秒
トレース・レベル off
セキュリティ ON: Local OS Authentication
SNMP OFF
パラメータ・ファイル C:\oracle\product\12.2.0\dbhome_1\network\admin\listener.ora
ログ・ファイル C:\oracle\diag\tnslsnr\mhvpdb\listener\alert\log.xml
リスニング・エンドポイントのサマリー...
(DESCRIPTION=(ADDRESS=(PROTOCOL=tcp)(HOST=localhost)(PORT=1521)))
(DESCRIPTION=(ADDRESS=(PROTOCOL=ipc)(PIPENAME=\\.\pipe\EXTPROC1521ipc)))
サービスのサマリー...
サービス"67acb959d6824c0195ad990810b8771a.dangodb"には、1件のインスタンスがありま す。
インスタンス"db01"、状態READYには、このサービスに対する1件のハンドラがあります...
サービス"CLRExtProc"には、1件のインスタンスがあります。
インスタンス"CLRExtProc"、状態UNKNOWNには、このサービスに対する1件のハンドラがあります...
サービス"pdbtest.dangodb"には、1件のインスタンスがあります。
インスタンス"db01"、状態READYには、このサービスに対する1件のハンドラがあります...
サービス"db01.dangodb"には、1件のインスタンスがあります。
インスタンス"db01"、状態READYには、このサービスに対する1件のハンドラがあります...
サービス"db01XDB.dangodb"には、1件のインスタンスがあります。
インスタンス"db01"、状態READYには、このサービスに対する1件のハンドラがあります...
コマンドは正常に終了しました。
```
CDB名はdb01.dangodb
PDB名はpdbtest.dangodbです。
<br>
## ・tnsnames.oraを編集
CDB(DB01)のエントリは既に記述があると思うので、丸々コピーして`SERVICE_NAME`のエントリをlsnrctlで調べたものに変更して追記しましょう。

```
PDBTEST =
(DESCRIPTION =
  (ADDRESS = (PROTOCOL = TCP)(HOST = localhost)(PORT = 1521))
  (CONNECT_DATA =
    (SERVER = DEDICATED)
    (SERVICE_NAME = pdbtest.dangodb)
   )
 )
```
これで

```
>sqlplus ユーザ名/パスワード@PDB名
```
が通ります。

スキーマ使うのもPDBに切り替えないといけないので、実質PDBばっかり使うことになるかも。
ただ表領域やら起動停止が別々なので注意ですね。
<br>
以上ア
簡単レシート印刷 receiptline でテーブルを整えてみた

日本発のオープンソース receiptline でレシート印刷に少しずつトライしています。
まだレシートプリンターがないので、[前回](https://qiita.com/dopperi46/items/bb69fa817055252ee960)利用した開発ツールを引き続き使います。
今回はテーブルの位置と列の幅です。

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/1aacdfb4-d670-e8bb-72b8-880791e7fc13.png)

# 列の幅を設定

前回の長い商品名は、行の半分くらいのところで折り返されていました。

```text:ReceiptLine
冷奴竜田揚げもつ煮込みトリプルセット | 1,280
```

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/582a727a-1c9d-1cdd-88a4-af584dfb51fb.png)

商品名の列の幅を広くして、バランスを良くしたいですね。
金額を 8 桁に固定して、残りを商品名に割り当ててみましょう。

```text:ReceiptLine
{width:*,8}
冷奴竜田揚げもつ煮込みトリプルセット | 1,280
```

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/5ec09b45-3789-b3eb-5c65-a7175d700352.png)

これは width プロパティというもので、この行以降の列の幅を設定しています。
名前は `width` または `w`、値は `,` or 1つ以上のスペースで区切った桁数列です。
桁数は `0` または省略でその列を無視し、`*` で未設定の桁数を均等に割り当てます。

# 列の数は固定される

列の幅を設定すると、列の数が固定されます。
列の数が足りないときは空の列が補完され、余るときは無視されます。

3 列目が補完されて、列の数は 3 つに。

```text:ReceiptLine
{width:*,8,2}
|冷奴       | 380|先 |
|竜田揚げ   | 480|
|もつ煮込み | 580|
```

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/0211516b-9042-721f-3ef4-6d15705b7173.png)

1 列目と 3 列目が無視されて、列の数は 1 つに。

```text:ReceiptLine
{width:0,*}
|冷奴       | 380|先 |
|竜田揚げ   | 480|
|もつ煮込み | 580|
```

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/6560e27b-ba62-f37c-fb28-4b28b539b518.png)

列の数を可変に戻したいときは、width プロパティで `auto` にします。
`auto` はデフォルト値で、実在する列すべてに `*` が適用されます。

```text:ReceiptLine
{width:auto}
冷奴竜田揚げもつ煮込みトリプルセット | 1,280
```

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/89adb27c-e931-cdcf-797d-a6c1c902e835.png)

# テーブルの位置

列の幅に `*` があるテーブルは、用紙幅にフィットします。
用紙幅より大きなテーブルも無理やり削られてフィットします。

では用紙幅よりも小さなテーブルはどうなるでしょう。
    
```text:ReceiptLine
{width:16,8}
冷奴竜田揚げもつ煮込みトリプルセット | 1,280
```

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/81a17359-fa03-7d49-cffd-16e4675909e7.png)

テーブルが用紙中央に寄せられました。
用紙の左または右に寄せることもできます。

```text:ReceiptLine
{width:16,8}

{align:left}
冷奴竜田揚げもつ煮込みトリプルセット | 1,280

{align:right}
冷奴竜田揚げもつ煮込みトリプルセット | 1,280
```

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/f965454b-969e-8d53-c7b5-7b7729076a68.png)

これは align プロパティというもので、この行以降のテーブルの位置を設定しています。
名前は `align` または `a`、値は `left`, `center`, `right` です。

次回は、テーブルに罫線を引いてみようと思います。
【自分用】結合テスト仕様書を作成する際に単体テストとの違いが分からなかった話

# 内容
結合テスト仕様書を書く際に、単体テストとの違いが分からなく上司と1時間程話した備忘録


#はじめに
・初めてQiita書きました
・備忘録


#システム構造
![単体テスト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526141/427011d2-de76-63a1-64c8-e68d52235dac.png)

私が担当しているシステムの構造は上記のような感じ。

メニュー画面からそれぞれの機能に画面遷移が行うことができ、
それぞれの画面にボタンが用意されている。
そのボタンを押下すると登録されているプログラムが動作するようになっている。

ボタンの中のプログラムはいくつかのクラスファイルから成り立っており、
順番に動作していく。

例)
1.確認ダイアログ出力クラス
2.業務ロジッククラス
3.作業ログ出力クラス
※上から順に実行されていく


それぞれの機能を使う順序としては
機能A　→　機能B　→　機能C　と順番にデータを渡すとします。

・機能Aにて作業用データを登録
・機能Bにて作業用データを更新
・機能Cにて機能Bによって加工された最終的なデータを別テーブルに登録
  現在時刻を表示する

(機能Cだけ特別に2つ機能を持たせました)


###単体テストってどこまで?
この場合、私の認識だと**「ボタンを押下した時の結果」**が単体テストの範囲
だと考えています。


ここでは機能Cを例にテストパターンを書いてみます。


|No|テストケース|結果|
|:---|:----------:|:--|
|1|ボタンAを押下する|レコードが作成される|
|2|ボタンBを押下する|現在時刻を表示する|



####こんな仕様があった時はどのようにテストケースを記載する?
仕様: ステータスが「bad_state」の時、レコードは作成せずエラーとする

そんな時はこんなケースを追加します。

|No|テストケース|結果|
|:---|:---------------------:|:--|
|1|ボタンAを押下する|レコードが作成される|
|2|ステータスが「bad_state」の時、ボタンAを押下する|エラーメッセージを表示する|  
|3|ボタンBを押下する|現在時刻を表示する|


これでばっちりです。健全なステータスのレコードしか登録できなくなりました。


###じゃあ結合テストの範囲って?
この場合、私の認識だと**「機能間でのデータのやり取り」**がテストの範囲かと
考えています。


例として機能Bと機能Cを題材に挙げてみます。

【前提条件】
・機能Bではステータスを「bad_state」に変更します。
・機能Cではステータスが「bad_state」以外のものを登録できるものとします


運用としては、機能Bでデータを更新して機能Cでデータを登録するので


この場合、


|No|テストケース|結果|
|:---|:----------:|:--|
|1|機能Bにて更新されたレコードを選択し、ボタンAを押下する|エラーメッセージを表示する|  

こんな感じのテストケースが出来上がりました。

そうですね、機能Bでデータを更新したらステータスが「bad_state」になるので
機能Cはエラーを出す羽目になります。

(ちなみにここでは「現在時刻を表示する」というテストケースは記載しません。
　何故なら機能C単体で完結している内容であり、機能Bと関係性が無い為です)

###あれ、これ単体テストと確認している内容が被っているのでは？
確かに。
「ステータスが「bad_state」の時、ボタンAを押下する」という動作には変わりがありません。

そうなんです、ほぼ同じなんです。ですが1割だけ違います。
その1割は**「機能Bによって更新されたデータを対象にしているか」**という点です。

機能Cの単体テスト、結合テストどちらともステータスが「bad_state」ならエラーが出る事は
変わりません。ですが、そのデータが一つ前の機能に関わっているかがミソみたいです。

####何が違うの？
下記の点で違いが現れます。

<不整合を防ぐ>
・単体テストを行う際に、テストデータはDBを直接いじったりして自作のテストデータを作るケースがあります。そのデータだとプログラム的にあり得ない値を取るケースがあります。
そういったデータでテストしないメリットがあります。


##単体と結合の違いが分からなかった
この**「他の機能に関わっているか」**という概念が中々理解できず、結合テスト仕様書に
単体テストレベルの内容を記載しまくっていました。
ただ、この概念が理解できたので、前よりかはテストケースが書きやすくなりました。

内容は一部被る所があるかもしれないが、それが結合テストなのかと思う今日この頃でした。
シェルスクリプトでシンプルな対話形式する

# ファイル作成

```sh:test.sh
#!/bin/bash

function ConfirmExecution() {
  echo "スクリプトを実行しますか？ y/n"
  read input

  if [ -z $input ] ; then
    ConfirmExecution
  elif [ $input = 'y' ] ; then
    echo "スクリプトを実行します。"
  else
    echo "スクリプトを終了します。"
    exit 1
  fi
}

ConfirmExecution

echo "Hello world!"
```

# 実行

```sh
./test.sh
```

# まとめ

yを入力すると、Hello worldが出力され、
nを入力すると、その時点で処理が終了する。
CDK for TerraformをTypeScriptで書いて使ってみた

CDK for TerraformをつかってTypeScriptでインフラ定義ができるようになったのでやってみた。

[CDK for Terraform: Enabling Python & TypeScript Support](https://www.hashicorp.com/blog/cdk-for-terraform-enabling-python-and-typescript-support/)

## cdktf-cliのインストール

```bash
sudo npm install -g cdktf-cli
```

(macOSのひとはsudoいらないです)

## initする

```
cdktf init --template=typescript
```

## main.tfを書く

```typescript
import { Construct } from 'constructs';
import { App, TerraformStack, Token } from 'cdktf';

import {AwsProvider} from "./.gen/providers/aws";

import {Vpc} from "./.gen/providers/aws/vpc";
import {Subnet} from "./.gen/providers/aws/subnet";

class MyStack extends TerraformStack {
  constructor(scope: Construct, name: string) {
    super(scope, name);

    new AwsProvider(this, 'aws', {
      region: 'us-east-1'
    });

    const vpc = new Vpc(this, 'my-vpc', {
      cidrBlock: '10.0.0.0/16'
    });

    new Subnet(this, 'my-subnet', {
      vpcId: Token.asString(vpc.id),
      cidrBlock: '10.0.0.0/24'
    });
  }
}

const app = new App();
new MyStack(app, 'vpc-example');
app.synth();

```

## cdktf synthでTerraformのコードを生成する

```
cdktf synth
```

これを実行すると、`cdktf.out`にTerraformのJSONコードが出力される。

## 素のterraformで実行する

__移動__

```
cd cdktf.out
```

__terraform実行__

```
terraform apply
```

## CDKTFで実行する

```
cdktf deploy
```

### リソースを削除する

```
cdktf destroy
```
時代はインフォグラフィック

インターンでインフォグラフィックについて触れる機会があった。
なぜ、これを使うかというと人に理解してもらえる質が全然違ってくるから。
文章よりも視覚的にビジュアライズされたものの方が頭にすっと入ってくるよね。
今まであまり意識してこなかったけど、この機会に視覚的に人に伝えられるようにしていきたい。
ぜひ以下のツールを試していきたい。

##インフォグラフィックを簡単に利用できる無料ツール
####canva
[https://www.canva.com/](https://www.canva.com/)
これはポスター作成の際によく使っていたけど、インフォグラフィックも作れる見たい。
その他にもデザイン系でできることがいっぱい。

###PICTCHART
[https://piktochart.com/](https://piktochart.com/)
どちらかというとインフォグラフィックに特化しているツール。
Agile開発・DevOpsへの『大部屋』の導入

**『大部屋』**とは、プロジェクトに関係する全てのプロセスや状態を一目瞭然に把握できる『見える化』された情報を一か所で全て把握でき、その上でその場で**決断（即断即決）**を下せるようになっていることです。
この仕組みにより効率よく **JIT（Just in Time)** でプロジェクトに関するあらゆる**意思決定**が正しく行えます。

要は、プロジェクトを遂行する上で必要な全ての情報が『見える化』されて収集、蓄積されそれらの
情報は適宜更新されていることです。

単なるタスクボードやKPTボードだけでなく、プロジェクトの全ての状態を可視化できる様々な見える化が必要となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621379/3d9787e8-19de-bc0b-4c32-f1403a16d286.png)

この図はDevOpsでの大部屋例ですが、Agile開発でも同様な大部屋を実現することを推奨します。

『大部屋』の効果は、迅速、機敏な情報収集で、現状に合った現地現物での意思決
定ができ、チーム内外ステークホルダーとの円滑なコミュニケーションが図れます。

チーム内外ステークホルダー間での問題/課題の早期共有ができます、チームとして
の**一体感が醸成**されます。
【Python】Linter pylint is not installedと表示される【VSCode】

##事象

VScodeでPythonを書いているときに、右下に「Linter pylint is not installed」と表示される。
調べてみるとpylintというコードチェックプラグインをインストールする必要があるとのこと。

##実施したこと

「install」ボタンを押してみると...

```
pip install -U pylint　& was unexpected at this time.
```

と表示され、インストールできない。
ターミナルからのインストールを試してみる。

```
pip install pylint
```

```
'pip' is not recognized as an internal or external command,
operable program or batch file.
```

pipコマンドが使えないよう。環境変数を設定してみる。

```
where python
```
でpythonのインストールされているパスをコピーする。

「環境変数を編集」で検索し、表示する。
ユーザの環境変数のPathをダブルクリック。
「新規」⇒さっきコピーしたパスを貼り付け。
末尾の「python.exe」を削除し、「Scripts」に変更しOKにする。

再度以下コマンドを実施。

```
pip install pylint
```

無事インストール出来ました！！
ロジスティック回帰分析とは？　

#ロジスティック回帰分析とは？
- いくつかの説明変数から**確率を計算**して、予測を行うモデル。

- **一般化線形モデル**の一種。

- 「回帰」という名前が付いているが、**「分類」**のために使われることが多い。


#一般化線形モデルとは？

- **応答変数**が、正規分布以外の確率分布に従う場合にも使えるようにした線形モデル。

例えば、
**〇　体重 = β0 + β1 × 身長**
(体重は正規分布に従う変数)

**✖　服のサイズ = β + β1 × 身長**
(服のサイズは明らかに正規分布に従う変数ではない)

#応答変数と線形予測子を対応させなければならない

##応答変数がアイスの販売個数の場合は？
アイスの販売個数 = β0 + β1 × 気温
　**(応答変数)　　　　　(線形予測子)**

「アイスの販売個数」は正の数しか取りえないが、右辺は気温次第でマイナスになる可能性がある。

**そこで！！**
救世主となる**リンク関数(log関数)**を導入する。

**log(アイスの販売個数)** = β0 + β1 × 気温



#応答変数が確率(合格率)の場合は？

**✖ テストの合否(1,0) = β0 + β1 × 勉強時間**
右辺は明らかに1又は0のみの値を取る式ではない。

**✖ テストの合格率 = β0 + β1 × 勉強時間**
しかし、これでもまだ不十分。合格率は0から1の範囲を取るはずだが、右辺はそうではない。

そこで!!
救世主となる**リンク関数(logit関数)**を導入する。

**log(p/1-p) = β0 + β1 × 勉強時間**
これをp=〇の形にすると、

**p=1/{1+exp(-(β0 + β1 × 勉強時間))}**
この式にすることで、右辺が0から1の範囲を取るようになる。

この式の**パラメータβ0,β1を最適化**することが目標。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449715/8ffa6e12-fe88-6b8d-a936-73a127855e2c.png" class="img" alt="データ"><img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449715/435abaa4-951f-0baf-aa6c-93ecd8cc0f95.png" class="img" alt="データ">

#「最適」をどう定義するのか？

**尤度関数**を考える。
n番目の人の予測値は

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449715/31e573b5-9a83-5d25-9afe-f538337374e9.png" class="img" alt="データ">

※tn…正解ラベル(0or1)
※yn…**p=1/{1+exp(β0 + β1 × 勉強時間)}**のn番目の人の出力値
目的は、この式の**最大化**。
しかし、掛け算は計算が複雑なうえに、**確率の相乗**を計算しようとすると、値が限りなく0に近づいてしまう。**(アンダーフロー)**。

**【解決案】**
①**対数**をとることで掛け算を解消。(足し算にできる)
②**マイナス**をつけることで、**勾配降下法**を実行できる。(勾配降下法は最小値を求めるのに適しているから)
<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449715/ba8b8b5c-b972-e510-6912-a2132a789789.png" class="img" alt="データ">


上記の式を**交差エントロピー誤差関数**と呼ぶ。

この関数を**勾配降下法**を用いて**β0,β1をそれぞれ微分**することでパラメータの最適値を求める！

#実験
**今回はsklearnライブラリのデータセットを使って分析をしてみたいと思います。**

```py
import numpy as np
import pandas as pd
from sklearn.datasets import load_iris

iris=load_iris()
df=pd.DataFrame(iris.data,columns=iris.feature_names)
df["target"]=iris.target

X=iris.data[50:,2].reshape(-1,1) #targetの0~2の中で1,2のみを取得する。
y=iris.target[50:]
```

```py

from sklearn.linear_model import LogisticRegression
from sklearn.preprocessing import StandardScaler
from sklearn.model_selection import train_test_split


scaler=StandardScaler()#標準化
X_scaled=scaler.fit_transform(X)

X_train,X_test,y_train,y_test=train_test_split(X_scaled,y,random_state=0)

log_reg=LogisticRegression().fit(X_train,y_train)

print(model.coef_) #回帰変数の表示
print(model.intercept_) #回帰直線の切片

print(log_reg.score(X_train,y_train)) #決定係数を出力。
print(log_reg.score(X_test,y_test)) #決定係数を出力。
```
<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449715/2a82f001-a23b-2ca2-9678-b89d8591390e.png" class="img" alt="データ">
onsenUI NavigatorのresetPage()で画面遷移する画面が真っ白になる。

# onsenUI Navigatorとは
onsenUIの提供する画面遷移を提供してくれるコンポーネントである。
今回はReact用のonsenUIについて記載する。
詳しくはこちら
https://ja.onsen.io/v2/api/react/Navigator.html#method-pushPage

# 問題
以下の画面遷移のように3回ほど`pushPage()`した後に、`resetPage()`でページAに遷移すると、
[ページA]に遷移するが、画面が真っ白になる。

画面遷移： 【ページA】 -(push)- > 【ページB】 -(push)- > 【ページB】 -(reset)- > 【ページA】


```
  pushPage() {
    this.props.navigator.pushPage({ component: PageB });
  }

  resetPage() {
    this.props.navigator.resetPage({ component: PageA });
  }
```

# 状況
真っ白の画面、ページAのstyleに`display: none;`があった。

# 解決
ページAからページBへの画面遷移に`resetPage()`を利用した。
画面遷移： 【ページA】 -(reset)- > 【ページB】 -(push)- > 【ページB】 -(reset)- > 【ページA】

# 仮説
*ここからは正確な情報ではないかもしれません。

`resetPage()`の遷移先と最初のページが同じだとうまくいかないようだ。
おそらく、pushするタイミングで、非表示の画面に`display: none;`をかけている。

`resetPage()`の遷移先と最初のページが同じだと、reactが差分なしで、
最初の画面の再レンダリングをしていないかもしれない?


間違っていたらご指摘いただけると幸いです。