OmniAICreator/Qiita-1.07M huggingface dataset:
予定管理アプリを作ってみた

Wenサイト: https://plan.towelman.server-on.net/sign_in

# 動機
　自分で予定管理をしようと思ったときに一つのプロジェクトごとに、複数人で管理できるような物が欲しくなり探してもこれといってピンとくるものがなかったため自分で作ってみようと思った。

# 大雑把な機能
　基本予定をプロジェクト単位で分ける。そしてプロジェクトは2種類ある。一つ目は複数人で管理・参画でき、「やること」の担当をそれぞれに割り振ることができて、期間を指定する「パブリックプロジェクト」である。基本的になにかの目的をなすための計画を管理するのに使うプロジェクトで使い方次第で1人でも複数人でも使えるようになっている。また、複数人で使い、自分以外にも計画に変更を加えさせたい人がいる場合はその人を管理者にすることによって実現可能である。そして二つ目は自分専用の期間を指定できない「プライベートプロジェクト」である。これはなにかの目的をなすための計画ではなく、日常で自分がやらないといけない「やること」を管理するプロジェクトだ。このプロジェクトで「入浴する」、「掃除する」などの「やること」を管理すると良いだろう。それと簡易的な通知機能（Web画面上のみ）を持ち、期間が迫ってる「やること」などを知らせてくれる。

# サーバ構成

## 図
![plan-systemネットワーク構成図.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597746/c050d5fb-4258-89b8-42ca-bb1456228125.png)

## 説明
- VPSサーバ: さくらのVPS(CentOS7)
    - ファイアウォール: 上の図でVPSサーバ外からアクセスされるポート以外は全てブロック
- SSL証明書: Let’s Encrypt
- ドメイン: MyDNS
- GitHubとVPSサーバとの関係
    - 開発者がGitHubにコードをpushするとGitHubのwebhook機能によりpush通知がVPSサーバに配信され、それを受信したアプリがいい感じにそのコードを適宜反映する（簡単な自動デプロイ）。なお、APiサーバのアプリはビルドに失敗したりテストに失敗した場合は反映しない。
- 「Docker ComposeのUpdater」について
    - 言語: Go
    - GitHubのwebhook機能によるpush通知を受信する簡単なアプリ。
- 「その他の予定管理アプリのクライアント側」について
    - もしかするとWin版などを開発する可能性あり

# APIサーバ

JavaでSpring Boot + MyBatisで作った

## コード
github: <https://github.com/TowelMan-public/plan-server>

## API一覧

### API表
![API表.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597746/38bbcd9e-3436-6565-15a7-e455803eaf3b.png)
### 補足
- 上の表のURLの部分に出てくる{}はパラメタである。そのパラメタについては次の「APIに渡す情報一覧」を参照してください。

## APIに渡す情報の説明
### APIに渡す情報一覧
![APIに渡す情報表.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597746/f8d019cb-911e-2867-8ac5-010b2ef96ec1.png)

### 補足
- 「userName」などの文字列は全角・半角問わず100文字以内
- 「contentExplanation」のみ全角・半角問わず2000文字以内
- 「startDate」、「finishDate」には「年-月-日 時:分」の形式の日付
    - 年は西暦、月と日は0埋めなし
    - 時と分は0埋めする
 
# Webサーバ

PHPのLaravelで作った。

## コード
github: <https://github.com/TowelMan-public/plan-web>

# 全体的な感想
　phpは初めてで最初はなれなかったが慣れてくると結構楽しかった。また今回は簡単な自動デプロイ的なことをやってみたが、結構楽に実現できるんだなと思った。ただ、どうせならreleaseブランチなる物を使ってそれにpush されたときのみ各サーバを更新するようにすればよかったなと思った。また、各サーバをDocker Composeで扱ったがどうせなら各サーバを更新するのも、SSL証明書を管理するのもコンテナを作って行えばもっと楽だったように思える。その方がよりDockerの強みが出たのではないだろうか。
【Flutter】何かのトリガーでWidgetの色を変更する

## はじめに

初投稿です。
Flutterで個人開発をしています。
タイトルでは何かのトリガーとしましたが、今回やりたかったことはダークモード切替タイミング時です。
その方法を記事に残します。


## やりたいことは以下
![test2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652356/4908f9d5-b960-7064-9895-312ea299c09f.gif)
例によって、チュートリアルのカウントアップアプリを題材とします。
- ダークモード切り替え用のスイッチWidegetを追加
- スイッチの切り替えでダークモードをON/OFFする
- ダークモード切り替えをトリガーとし、スイッチWidgetとFloatingActionButtonの色を切り替える

端末設定に依存せず、アプリ内で通常・ダークモードで使い分ける想定です。


```dart:main.dart
// ダークモード判定用プロバイダー
final isDarkModeProvider = StateProvider((ref) => false);
```
※今回の内容の本質と関係ないので詳しい説明は省略しますが、状態管理はRiverPodを使用しています。

```dart:main.dart
class MyApp extends ConsumerWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // ダークモード切替を監視
    final _isDarkMode = ref.watch(isDarkModeProvider);

    return MaterialApp(
      title: 'Flutter Demo',
　　　　　　　　　　　　// テーマをダークモード時かどうかで切り替える
      theme: _isDarkMode
          ? ThemeData.dark()
          : ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Flutter DarkMode Demo'),
    );
  }
}
```
ダークモード判定用のプロバイダーを監視し、三項演算子でThemeDataを切替えを行っています。



```dart:main.dart
// スイッチWidget
Switch(
  value: _isDarkMode,
  // ダークモード切替用プロバイダーの切り替えタイミングで、
  // 三項演算子でダークモード時にピンク、通常時にブルーを設定する
  activeColor: _isDarkMode ? Colors.pink : Colors.blue,
  onChanged: (value) {
    _isDarkModeNotifier.update((state) => !state);
  },
)
```
スイッチWidgetのonChangeイベント発火時に、三項演算子で色の切り替えをしています。


```dart:main.dart
// Floating Action Button
floatingActionButton: FloatingActionButton(
  onPressed: () {
    _counterNotifier.update((state) => state + 1);
  },
  tooltip: 'Increment',
  child: const Icon(Icons.add),
  // ダークモード切替用プロバイダーの切り替えタイミングで、
  // 三項演算子でダークモード時にピンク、通常時にブルーを設定する
  backgroundColor: _isDarkMode ? Colors.pink : Colors.blue,
),
```
スイッチWidgetのonChangeイベント発火でダークモードフラグONとなり、こちらも同様に三項演算子で色が切り替わるようにしています。

## 終わりに
ソースの全文はGitHubの[リポジトリ](https://github.com/SOKu-ma/flutter_darkmode_sample)にあげています。
誰かの参考になれば嬉しいです。
M1_docker-compose upのno matching manifestエラー対応した時の話

React の勉強を進めております。

`docker-compose up -d`を実行したところ、
`no matching manifest ...` といったエラーになりました。
対処法をネットで調べていった結果、開発環境が M1 Mac であることが影響していました。


## エラー内容
```
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
WARNING: Image for service api was built because it did not already exist. To rebuild this image you must use `docker-compose build` or `docker-compose up --build`.
Pulling db (mysql:5.7)...
5.7: Pulling from library/mysql
ERROR: no matching manifest for linux/arm64/v8 in the manifest list entries
```
　「一致するマニフェストがありません」

## 構築環境
M1 Mac
- React : 16.8.6
- Node : v14.17.3
- mysql:5.7

## 対応
クリティカルにこちら↓でした。

https://ryotarch.com/docker/no-matching-manifest-for-linux-arm64-v8-on-m1-mac/

docker-compose.yml に `platform: linux/x86_64` を追記します。
```
  db:
    platform: linux/x86_64
```

'no matching manifest' に対するエラーはこれで解決しました。

## 原因
後になって、原因も何となく把握しておこうと思い、またネット検索。
こちらで解説されていました。

https://qiita.com/jizya/items/38f15271903de629d1ab

>M1チップのプラットフォームはarm64であるのに対し、
>mysql5.7*のイメージのサポートプラットフォームがAMD64で不一致

---
### 蛇足

ここからは自戒用メモです。
codker-compose.yml を更新し、再度 docker-compose up。

しかし、違ったエラーが。
`WARNING: Host is already in use by another container`
`ERROR: Encountered errors while bringing up the project.`

他のプロジェクトがポートを使っていたため、エラーが発生してしまいました。こちらも勉強用に立ち上げたコンテナです。
`docker ps` で使用しているコンテナを割り出して、`docker stop [コンテナID]` でそのコンテナを停止。

改めて docker-compose up をしたところ、、`done`！
ITパスポートを取ってみたよ

29歳！
ITパスポートを取ってみました！

# どうして取ろうと思ったか！

一番大きな理由は技術書を読んでいて、わからん単語が多いのがストレスだったから。
仕事柄エンジニアの方とお話しする機会があるが、いまいち理解できないことがあり申し訳なく思うことがあるから。
あとは4月から**受験料が上がる**ので今のうちにと思った。（5700円→7500円！）
~~本当は基本情報をとるつもりが受験申し込みが終わってた。~~
ネットで調べると就活に意味ないとか、意味ないとか書いてるけど、とりあえず受けてみました。

## 予備知識はどれくらいあったか

高校は情報科未履修。
大学は非情報系。
パソコンはちょっとデキル！
プログラミングは FizzBazz が書けるくらい。
業務で　JavaScript や VBA の経験はあるがコンピュータの基礎知識とかはない。

## そもそもの学力はどれくらいか

センターはボロボロだったけど、運転免許は一発でとれたくらい😅

# どうやって勉強したか

中古で本を買って読んだ。

https://www.amazon.co.jp/%E3%80%90%E4%BB%A4%E5%92%8C4%E5%B9%B4%E5%BA%A6%E3%80%91-%E3%81%84%E3%81%A1%E3%81%B0%E3%82%93%E3%82%84%E3%81%95%E3%81%97%E3%81%84IT%E3%83%91%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88-%E7%B5%B6%E5%AF%BE%E5%90%88%E6%A0%BC%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E5%87%BA%E3%82%8B%E9%A0%86%E5%95%8F%E9%A1%8C%E9%9B%86-%E9%AB%98%E6%A9%8B/dp/4815613737/ref=sr_1_5?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=23TSXSZVHROUT&keywords=IT&qid=1648648982&sprefix=it%2Caps%2C264&sr=8-5

↑の令和2年度版。
シラバスが改訂されていたので、足りない分は公式のシラバスを見た。
説明がわかりやすいが取りこぼしはあるかも。

https://www.jitec.ipa.go.jp/1_04hanni_sukiru/_index_hanni_skill.html

過去問をひたすら解いた。

https://www.itpassportsiken.com/ipkakomon.php

↑で安定して9割取れるくらい勉強した。（お金払ったのに落ちたくなかったので、、、）
過去問を解いて、わからない分は本なりWeb上の解説を読んだ。

# 結果発表〜〜〜〜〜〜〜〜〜

**合格！！！！**

|  総合評価点 |  725/1000  |
| :----: | :----: |
|  ストラテジ系  |  685/1000  |
|  マネジメント系  |  625/1000  |
|  テクノロジ系  |  740/1000  |

ちなみに合格ラインは総合評価6割以上かつ各3割以上みたい。
極端な話、2系統が満点でも1系統3割以下だとアウトなのですな。

# 感想

ストラテジ系とマネジメント系は見覚えのない問題が多くて、少し焦った。
テクノロジ系は解けたつもりが大していい点じゃなかった、、、
自分の正誤を知ることはできない＆問題も持ち帰れないので振り返りはできません、、、

広く浅く勉強できるので、初学者にはとてもいいと思う。
（基本情報持ってる人が取る必要は別にないかも）
意味ないとか言われがちだけど意味なくはなかった！
エンジニアでもそうじゃなくても知ってて損ない知識ばかりだった。
むしろ非IT系職であっても知っておくべきことがいっぱいあった。
法律周り、経理周りは機会がないと勉強しないので、、、

知識欲持っていこうと思いました！
終わり！
(和訳) コードレビューピラミッド

## 元記事
**The Code Review Pyramid**
https://www.morling.dev/blog/the-code-review-pyramid/

上記のブログ記事で紹介されていた内容がとても素晴らしかったので、和訳してみました。
ソースコードレビューに関する観点が適切にまとまっており、レビューに参加する方にぜひ読んでいただきたい内容です。
誤訳等あればご指摘ください。


## 本文
コードレビューでよくある現象として、コードのフォーマットやスタイルなどのありふれた側面に対して特に注目され、時間をかけて議論されることが挙げられます。一方で重要な側面（変更は目的を果たしているか、パフォーマンスは高いか、既存のクライアントに対して下位互換性を保てているか、など）は、あまり注目されない傾向があります。

この問題への意識を高め、焦点を当てるべき側面についてのガイダンスを提供するために、私は先日Twitterでとある図を共有しました。私はこれを「コードレビューピラミッド(Code Review Pyramid)」と呼んでいます。 この図の目的は、コードレビュー中に最も重要な部分（と私が思っていること）に焦点を当てることを助け、また自動化できる/すべき部分を示すことにあります。

何人かの方から、「コードレビューピラミッド」の永続的で参照可能な場所を求められたり、印刷用の高解像度画像を希望されたりしたので、ここに再掲することにします。

## The Code Review Pyramid
![CodeReviewPyramid.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296554/273c4f29-9190-6f37-620a-be004ab1a71f.png)
(画像引用元：https://www.morling.dev/blog/the-code-review-pyramid/)

### 左側の説明
上部に行くほど「後から修正するのに、労力を要さない」
下部に行くほど「後から修正するのに、労力を要する」

上部2層は自動化しましょう！
下部3層にレビューの労力を費やしましょう！

### Code Style(コードスタイル)
・プロジェクトのフォーマットスタイルに準拠していますか？
・命名規則に準拠していますか？
・[DRY](https://qiita.com/hirokidaichi/items/d6c473d8011bd9330e63#dry)ですか？(同様の実装を繰り返していませんか?)
・十分に"リーダブル"なコードになっていますか？(例：メソッドの長さなど)

### Tests(テスト)
・全てのテストをパスしていますか？
・新機能は合理的にテストされていますか？
・[コーナーケース](https://en.wikipedia.org/wiki/Corner_case) (通常はあり得ないようなケース)はテストされていますか？
・可能な箇所でユニットテスト(単体テスト)が用いられていますか？必要な箇所でインテグレーションテスト(結合テスト)が用いられていますか？
・非機能要件に対するテストがありますか？(例：パフォーマンス)

### Documentation(ドキュメント)
・新機能は合理的にドキュメント化されていますか？
・関連ドキュメントは用意されていますか？(例：README、APIドキュメント、ユーザーガイド、リファレンスドキュメント、など)
・ドキュメントは理解しやすいですか？重大なtypoや文法ミスはありませんか？

### Implementation Semantics(実装セマンティクス)
・本来の要求を満たしていますか？
・論理的に正しく実装されていますか？
・不必要に複雑になっていませんか？
・堅牢な実装ですか？(例：並行性に問題がないか？適切にエラーハンドリングできているか？など)
・パフォーマンスは高いですか？
・セキュアな実装ですか？(例：SQLインジェクションされないか?など)
・計測可能ですか？(例：メトリクス、ロギング、トレーシング、など)
・新たに追加した依存関係(ここではライブラリやプラグイン等を指している)は、十分な機能を果たしていますか？ライセンスは許容できるものですか？

### API Semantics(APIセマンティクス)
・APIは可能な限り小さく、必要なだけ大きくなっていますか？
・ある機能を実現する実装は1つに限られていますか？複数存在しないですか？
・一貫性を保っていますか？[驚き最小の原則](https://qiita.com/hirokidaichi/items/d6c473d8011bd9330e63#%E9%A9%9A%E3%81%8D%E6%9C%80%E5%B0%8F%E3%81%AE%E5%8E%9F%E5%89%87)に従っていますか？
・APIと内部実装がクリーンに分割されていますか？内部実装がAPIに漏れていませんか？
・ユーザーが目にする部分に破壊的な変更が入っていませんか？(例：APIクラス、構成、メトリクス、ログフォーマット、など)
・新しいAPIは一般的に有用であり、過度に具体的ではありませんか？


## FAQ
Q: なぜピラミッドの形なのですか？
A: ピラミッドの下部は、コードレビューの基盤となり、その大部分を占めている必要があるからです。

Q: おい、三角形じゃないか！
A: そう思うかもしれませんが、ピラミッドを横から見た図形です。

Q: 図面の作成にどのツールを使用しましたか？
A: [Excalidraw](https://excalidraw.com/)です。
Markdown All in One のチートシート


- [1. 概要](#1-概要)
- [2. ショートカット](#2-ショートカット)
- [3. コマンドパレット](#3-コマンドパレット)
- [4. そのほかの操作](#4-そのほかの操作)
- [5. Tips](#5-tips)
  - [5.1. テーブルのヘッダー](#51-テーブルのヘッダー)
  - [5.2. テーブルの要素の編集](#52-テーブルの要素の編集)


# 1. 概要
Qiitaの記事を執筆するのにまずはMarkdown を効率的に書かねば…というところで、VScodeに拡張機能のMarkdown All in Oneを導入しました。

[マニュアル](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)に記載の通りなのですが、GIF動画（？）で若干わかりにくかったので、ショートカットなどを自分用にまとめました。
ショートカットキーはWindows OSの想定です。


# 2. ショートカット
| 操作                  | 動作                       |
| --------------------- | -------------------------- |
| Ctrl + B          | 太字                       |
| Ctrl + I          | 斜体              |
| Ctrl + Shift + ]  | 見出し上げ                 |
| Ctrl + Shift + [  | 見出し下げ                 |
| Alt + C               | タスクへのチェックのON/OFF |
| Ctrl + Shift + V  | プレビュー                 |
| Ctrl + K からの V | プレビュー（左右分割）     |
| Alt + Shift + F  | テーブルの成型             |

一番困惑したのはテーブルの成型で、冒頭３行目まで記載してから出ないとテーブルになりませんでした。
また、テーブルの成型は選択範囲等ではなく、テキスト全体のテーブルに効果がありました。


# 3. コマンドパレット
VSCodeの話ですが、コマンドパレットはCtrl＋Shift＋Pです。
作成される目次はこの記事の冒頭にある奴です。Qiitaでは画面横に同等の目次あります。


| コマンド                        | 内容｜           |
| ------------------------------- | ---------------- |
| section numbering               | 見出しに自動採番 |
| Create Table of Contents        | 見出し行から目次作成           |


# 4. そのほかの操作
テキストを範囲選択してURLをペーストするとリンクになります。
同様に範囲指定して記号（`や*など）押すと、選択範囲を記号でくくってくれます。

# 5. Tips

## 5.1. テーブルのヘッダー
Markdown 記法の問題なのですが、
ショートカットが効かず頭を悩ませていましたが、ヘッダーが入っていませんでした…



## 5.2. テーブルの要素の編集
テーブルを成型したあと、内容を修正する場合は[Text Tables](https://marketplace.visualstudio.com/items?itemName=RomanPeshkov.vscode-text-tables)が便利でした。
こちらの拡張機能はあまり使いこなせていないので、解説などはできません…
【初心者ロードマップ 】機械学習完全独学奮闘記 0巻 上

# はじめに
なぜこれを書こうと思ったのか、それは**今までプログラミングに挫折し続けてきたから**です。
独学も継続も苦手な自分への最後のチャンスだと思って書き続けます。
同じ初心者の方達と教え、教えられ合いながら頑張って行けたらなと思います。

# 経歴と機械学習を始めたきっかけ
地方の薬学生（6年）です。24歳です。
2021年に休学して東京のSaaS企業で1年間ビジネスのインターンとして働かせてもらっていました。
そこで**データの持つ可能性とプロダクトの持つインパクト**に感動しました。
データがなければ今の時代決断は下せませんし、磨き抜かれたビジネスアイデアよりもプロトタイプに価値があります。
機械学習に興味を持ったのは前者でデータというものの性質や面白さを肌で実感したいと思ったからです。

# 現状
スキルレベルはプログラミング（HTML,CSS,JS)かじったぐらいで、模写もまだできないぐらいです。
Progateのレベル上げに勤しんでました。（Lv181で中断）
Pythonは勉強始めて1ヶ月ぐらいです。
かなり効率の悪いやり方をした気がするので、参考にして（しないで）ください。

具体的にはまず[PyQ](https://pyq.jp)(Pythonの学習サービス)で

- Pythonプログラミングを始めよう
- Python文法基礎を学ぼう
- Python文法を実務レベルに深めよう

を大体1週間ぐらいで1周しました。
完全に理解しているとは言えないぐらい、文法や用語見たらフンフン分かるぐらい（再現は怪しいぐらい）のレベルです。

その後に巷で有名な「スクレイピング」に挑戦しましたが、あんまり面白くなかったのでこれはすぐにやめました。
比較的興味のあった「機械学習」に挑戦しましたが、これはまだ難しくて（というよりもまだPythonレベルが足りなくて）挫折しました。

さて次の勉強をどうしたものかと悩んでいたところであることに気づきます。

**今の勉強には決まった目標がない**

ということに。
目的ではなく目標です。

目的は「何のため」に、目標は「具体的にいつまでに何をするか」ということだと思っています。
目標がなければ惰性で勉強してしまいます。

勉強の目標になるものを必死で探しました。
いろいろ調べてみたところ**kaggle**という世界コンペがあることを知ります。

コミュニティもデカくて、歴史も実績もあるので良い勉強の場所になるのではと思いここに照準を定めます。
ちなみに今年の勉強の目標は「kaggleでメダルを獲ること」です。

目標が定まったので学習のロードマップを定めました。使う教材はいろいろ調べて以下を選びました。
Qiitaで「機械学習　ロードマップ」「機械学習　初心者」とかで調べ尽くしたのでかなり参考になるんじゃないかと思っています。

もちろん並行しながら勉強しますが、番号振ってある順に進めていくつもりです。
（下に全体感をまとめたものを置いています。）
## 教材一覧
**①人工知能は人間を超えるか**
**②独学プログラマー**
**③Couseraの「Machine Learning」講座**
**④Python 実践データ分析100本ノック**
**⑤Kaggleスタートブック**
**⑥Pythonで始める機械学習**
**⑦Kaggleで勝つデータ分析の技術(通称：Kaggle本)**
**⑧Python 機械学習プログラミング**
**⑨ゼロから始めるディープラーニング**
![40E528AB-59BC-48B7-9D7A-A291C6394425.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534683/efe554b5-8823-37fb-833c-77d926b4f009.jpeg)

こんな感じで進めていこうと思います。
具体的なスケジュールは次で決めますが、基礎編はおおよそ4月中には終わらせたいと思っていて、
4月の後半にはKaggleのコンペにも参加したいと思います。

2022年も実は残り2/3になりました。
余談ですが最近習慣化が趣味になってきて、「朝の散歩」と「筋トレ」が定着しました。
次に目指すは「ポモドーロ勉強法（25分作業して5分休憩するやつ）の定着」と「早起き」です。

今年中に機械学習以外に「ベンチプレス100kg達成」と「簿記2級」「薬剤師免許取得」などの目標もたくさんあるので、
この「習慣化の習慣化」のサイクルを利用して、腐らず頑張ります。



ということで少し本題からは逸れてしまいましたが「機械学習独学奮闘記0巻 上」はこのあたりで終わりにします。
初投稿で拙い部分もあったかとは思いますが最後まで読んでいただいた方、ありがとうございました！

それではまた次回。
JavaScript 三項演算子とその他いろいろ

# 三項演算子とは
> if文を1行で書くことができる演算子
```
(条件式) ? (条件がtrueの時の値) : (条件がfalseの時の値)
```
という書き方ができる

# JavaScriptでの記述例
 例1
```:JavaScript
    let flag = true
    const ab = flag ? "A" : "B" //flagがtrueだったら"A"が入る、falseなら"B"
    console.log(ab)             // Aが出力される
```
例2　奇数か偶数か判定する
```:JavaScript
    let randNum = Math.floor( Math.random() * 10 ) + 1 // 1から10までの整数
    console.log(randNum)
    const odd = (randNum % 2 === 0) ? "偶数" : "奇数"   // 2で割った余りが0なら偶数、そうでないなら奇数
    console.log(odd)
```
例3　`&&`を使う
```:JavaScript
    let randNum = Math.floor( Math.random() * 10 ) + 1 
    console.log(randNum)
    const odd2 = (randNum % 2 === 0) && "偶数" //trueの時だけ"偶数"、falseの時はfalseが入る
    console.log(odd2)
```
例4　`||`を使う
```:JavaScript
    let randNum = Math.floor( Math.random() * 10 ) + 1 
    console.log(randNum)
    const odd2 = (randNum % 2 === 0) && "偶数" //trueの時だけ"偶数"、falseの時はfalseが入る
    console.log(odd2)
    console.log(odd2 || "奇数")                //もしodd2がfalse(奇数)だった場合
```
全体
```:JavaScript
    let randNum = Math.floor( Math.random() * 10 ) + 1 
    console.log(randNum)
    const odd = (randNum % 2 === 0) ? "偶数" : "奇数" 
    const odd2 = (randNum % 2 === 0) && "偶数" //trueの時だけ"偶数"、falseの時はfalseが入る
    console.log(odd)
    console.log(odd2)
    console.log(odd2 || "奇数")                //もしodd2がfalse(奇数)だった場合
```

## `?`以外に`&&`と`||`を使う
時と場合によるが`&&`と`||`を使う
可読性は下がるが三項演算子を使えばコードの記述量が短くなる
JupyterLabはじめの一歩

# 背景・目的
以前、[こちら](https://qiita.com/zumastee/items/e1c3fa86e8cfbaa05d39)でCloud9にJupyterLab環境を構築した。今回は基本的な動作などを実際に確認してみる。

# 内容
## 初期画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/a5a7bbb5-965e-7970-91b7-696ec0667cc5.png)

## フォルダ作成
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/ec497498-236f-a163-1db1-e81fe7dc0f34.png">

- サイドバーのフォルダボタン（赤枠）をクリックし名前を入力するとできる。

## ファイル作成
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/1e5408a6-1a63-e191-894d-3bfc6a78c930.png">

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/aeb5af1c-e0b4-6c35-0f7b-9be057279469.png">

- 上記で作成した、testフォルダ内でLauncherにある、Python3ボタンをクリックすると、ノートブックが表示される。

## Markdownでドキュメントを書く
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/c7662a41-c570-71d7-c863-3da5cb672607.png">

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/cd791b9d-3168-832e-8e3a-79b4fa9bc34e.png">

- Markdown形式でドキュメントを書き、プルダウンからMarkdownを選択し、実行すると変換される。

## コードを実行する。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/24fc891c-74db-7af9-3a22-c5175e3d2c59.png">

- 足し算を書いて、実行すると下に答えが出る。

# 考察
- エディタの使い方はわかったので、次回以降は実際にPythonプログラムを書いていく。

# 参考
https://qiita.com/zumastee/items/e1c3fa86e8cfbaa05d39

https://ai-inter1.com/jupyter-lab/
親コンポーネントで取得した情報を子コンポーネントに渡す方法


# はじめに
この記事は文系エンジニアが書いた記事になりますの、わかりにくい箇所少し間違った箇所などあるかもしれません。
あくまでご参考までに☺︎
つよつよエンジニアの方は意見とかお願いします☺︎

# この記事で説明すること

この記事では親コンポーネントで、手に入れた情報をどのようにして子コンポーネントで受け取ることができるのか
なるべく分かりやーすく説明します☺︎

# 本題


oya.vue(親コンポーネント)
```
<template>
　　　　　<kodomo aiueo="あいうえお"></kodomo>  // kodomo.vueを表示
</template>

<script>
import kodomo from './kodomo'     // kodomo.vueファイルを読み込む

export default {
    components: {
        kodomo　      // <kodomo>を使えるようにする
    }
}
</script>
```






kodomo.vue(子供コンポーネント)
```
<template>
  <p>{{ aiueo }}</p>　　　　　　　　　　　　　// oya.vue(親コンポーネント)から受け取った「あいうえお」が表示される
</template>

<script>
export default {
    props: ['aiueo']　　　　　　　　　　　　// oya.vue(親コンポーネント)から受け取る
}
</script>
```


このようにして親から子へ情報が受け渡されます☺︎



# まとめ
今回は、親コンポーネントで、手に入れた情報をどのようにして子コンポーネントで受け取ることができるのかについて説明しました。
手を動かして簡単なところから進めていきましょう
アルゴリズムの基本

最近アルゴリズムを勉強し始めて学んだことをアウトプットしようとおもいます。

## 基本から
アルゴリズムの大前提を5つ紹介します。
①アルゴリズムは、問題を解くための手順
②必要な結果を得るためのアルゴリズムは1つだけではない
③アルゴリズムは、作業者によらず、またどんな環境でも同じ結果が得られるもの
④アルゴリズムは「正当性」「有限性」「停止性」を満たしていなくてはならない
⑤アルゴリズムは組み合わせ爆発によって、実行に膨大な時間がかかることがある

①からみていきます
## ①アルゴリズムは、問題を解くための手順
よく聞く言葉だとおもいます。
たとえば、計算を考えてみればわかるとおもいます。
1+1という問題があったとしたら、1という数字に1を足してあげることでその問題は解決しますね。


## ②必要な結果を得るためのアルゴリズムは1つだけではない
たとえば、ある四角形があるとします。
欲しい結果は、その四角形を一周する、だとします。
これって必要な結果を得るためのアルゴリズムは2つ存在しますよね。
時計回りと反時計回りがあります。
このように、アルゴリズムが必要な結果を得るための方法は1個ではないんです。

## ③アルゴリズムは、作業者によらず、またどんな環境でも同じ結果が得られるもの
これはアルゴリズムを考える上での、大前提です。
たとえば、カレーを作るアルゴリズムを例にして考えてみましょう。
「まず、お肉を切って、火が通るまで炒めます」
という、処理があった場合、「火が通る」というのはどのラインを言うのかが人によってマチマチだったら味も多少なりとも変わってきてしまいますね。
これでは、「作業者によらず、またどんな環境でも同じ結果が得られるもの」にあてはまりません。
「火が通る」の定義を正しくしてあげることで、それを満たすことができます。

このように、いつ何時でも同じ結果を出せることが重要なんです。
## ④アルゴリズムは「正当性」「有限性」「停止性」を満たしていなくてはならない
### 正当性
まず正当性から見ていきましょう。
正当性とはその名の通り、ある課題に対して、要求してる結果が返ってくることをいいます。
1＋1の結果が、あるときは2になり、あるときは10になったり、あるときは100になっては困りますもんね。
### 決定性
次に決定性です。決定性とは、ある結果を決定してそれを出力してくれることです。
先ほどの1+1でいえば、この答えを決定できない、と出力されるとちょっと勘弁して欲しいですよね笑
### 有限性と停止性
アルゴリズムはいつ終わるのか、という有限性がないといけません。
Google検索のアルゴリズムで考えてみると、いつまでも検索し続ける検索エンジンってイヤですよね笑
つまり有限性と停止性はセットなんです。

## ⑤アルゴリズムは組み合わせ爆発によって、実行に膨大な時間がかかることがある
アルゴリズムの組み合わせがよくないと、実行時間がめちゃくちゃかかってしまうことがあるんです。
それが組み合わせ爆発ってやつです。
有名なものには、巡回セールスマン問題というのがあるので、興味がある方は調べてみてください

以上です。何か間違いがございましたら、ご教示いただけますと幸いです。

【参考資料】

https://www.amazon.co.jp/%E3%81%8A%E3%81%86%E3%81%A1%E3%81%A7%E5%AD%A6%E3%81%B9%E3%82%8B%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E3%81%AE%E3%81%8D%E3%81%BB%E3%82%93-%E9%88%B4%E6%9C%A8-%E6%B5%A9%E4%B8%80-ebook/dp/B06Y5FS8ZL
wsl2にdockerでmysqlを立てる

ローカルでのサーバ開発環境は wsl2 の ubuntu 20 上にアプリごとにコンテナ作ってやってるのですが、mysql が突然インストールできなくなった。。。困った。

いろいろめんどくさいので、docker で mysql 鯖を立ち上げる事にしました。とっても簡単です。

wsl2 でコンテナを作ったり消したりする方法はこちらに書いてあります。

https://qiita.com/akiraak/items/12646cc0d1746c1bedd5

まずはオフィシャルの解説どおりに docker をインストールします。

https://docs.docker.com/engine/install/ubuntu/

```
$ sudo apt-get update

$ sudo apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

$ echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

$ sudo apt-get update

$ sudo apt-get install docker-ce docker-ce-cli containerd.io
```

mysql コンテナを立ち上げます。

```
$ sudo docker run \
    --name mysql \
    -e MYSQL_ROOT_PASSWORD=password \
    -p 3306:3306 \
    -itd mysql:8.0
```

そして接続してみます。

```
$ mysql -h 127.0.0.1 -u root -p
```

```-h 127.0.0.1``` は必須です。これを省略したり ```-h localhost``` などにすると繋がりません。なんで？？？
フォームの送信前にJavascriptで確認

 # どういう状況
データを削除できるボタン。
削除ボタンを押してすぐにデータが削除されると困るので、送信時によろしいですか？みたいな確認のalertを出したい。さらにはい・いいえで送信したり送信をやめたりする動きにしたい。
# ざっくりと削除ボタンがあります
```html
  <form action="削除処理.php" method="post">
        <input type="submit" value="削除">
  </form>
```
送信してしまうと削除処理が動いてしまうので、
送信時に確認する、というより送信前に確認、ＯＫなら送信、キャンセルなら送信をやめる。
という動きにする。
送信前に走るjavascriptは`onSubumit`でコントロールできる。
## formにonSubmit属性を追加
`onSubmit=処理`
フォームに上記を追加。
## onSubmit属性とは
フォームの送信時に実行するscriptを設定できる。
返り値がtrueかfalseかによってform の送信をキャンセルできる。
`onSubmit="return false"`直接このように書くとsubmitできない状態。
# onSubmit時に呼び出される処理を書く。

```html
<script>
    function CheckDelete(){
        if(confirm('削除しますか？')){ 
            return true; 
        }else{
            alert('キャンセルされました'); 
            return false; 
        }
    }
</script>
```
## onSubmitイベントについて
submitはbuttonや<input type="submit">を押すと発生form要素で発生する。
alertだとOKボタンしかでないので、confirmを使ってOK/キャンセルボタンが出るようにする。
confirmの返り値はOKでtrue、キャンセルでfalseが返るのでその値によって処理を分ける。
このようになっているかと思います。
```html
<form action="削除処理.php" method="post" onSubmit="CheckDelete()">
        <input type="submit" value="削除">
</form>
<script>
    function CheckDelete(){
        if(confirm('削除しますか？')){ 
            return true; 
        }else{
            alert('キャンセルされました'); 
            return false; 
        }
    }
</script>

```
しかしこれでは問題があります。

# キャンセルを選択しても削除されてしまう？
このソースを実行すると、「削除しますか？」＞キャンセルを選択しても削除される、つまりsubmitされてしまいます。
処理の内容的には大丈夫そうなのに。。。と悩み調べてみると、
onSubmit時に呼び出す処理を指定する際、returnが必要とのこと。
### ポイントはreturn
`onSubmit = 処理`だけでは「onSubmit時に処理を実行する」しかやってない。
つまり、実行した結果は受け取っていないのです。ので、
`onSubmit = return 処理`にする必要がある。

```html
<form action="削除処理.php" method="post" onSubmit="return CheckDelete()">
```
#### ちなみに、
**if文の条件の中にあるconfirm()はいつの間に実行されているの！？**

```html
<script>
    function CheckDelete(){
        if(confirm('削除しますか？')){ 
            return true; 
        }else{
            alert('キャンセルされました'); 
            return false; 
        }
    }
</script>
```
if文は（）の条件がtrueだったときに処理が走るのに、変だなと思った。が、
**（）の中から実行される**
ので、confirm（）の処理が走ってＯＫもしくはキャンセルを選択するとif文が実行される。
Ubuntu Serverのインストール

# VMware上にUbuntu Serverをインストール。
 

研究にてPWAを作成するためWebサーバを構築したい。ホストOSはWin、ゲストOSはUbuntuを用いる。 

## 行った手順


1. Ubuntuの公式サイトからUbuntu Servier TSL  20.04.04のisoイメージファイルを落とす。
1. VMwareの簡易インストールで仮想マシン、ゲストOS(Ubuntu)をインストール。
1. 画面の指示に従い設定を完了させる
---
manコマンドの日本語化

個人メモ。

# 0.動作環境
Windows10にインストールしたWSL2。
```
$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=20.04
DISTRIB_CODENAME=focal
DISTRIB_DESCRIPTION="Ubuntu 20.04 LTS"
```

# 1.日本語ページのインストール
```
$ sudo apt update
$ sudo apt install manpages-ja
$ sudo apt install manpages-ja-dev
```

# 2.日本語マニュアルを使う設定
```
$ sudo apt install language-pack-ja
$ sudo update-locale LANG=ja_JP.UTF-8
```

再起動し`man`を使うと、日本語になっている。
`man ls`を実行する。
```
LS(1)                                                                               ユーザーコマンド                                                                               LS(1)

名前
       ls - ディレクトリの内容をリスト表示する

書式
       ls [オプション]... [ファイル]...

説明
       FILE (デフォルトは現在のディレクトリ) に関する情報を一覧表示します。 -cftuvSUX のいずれも指定されず、 --sort も指定されていない場合、 要素はアルファベット順でソートされます。

       長いオプションで必須となっている引数は短いオプションでも必須です。

       -a, --all
              . で始まる要素を無視しない

       -A, --almost-all
              . および .. を一覧表示しない

       --author               -l と合わせて使用した時、各ファイルの作成者を表示する

       -b, --escape
              表示不可能な文字の場合に C 形式のエスケープ文字を表示する

       --block-size=SIZE
              SIZE の倍数として表示する。例: '--block-size=M' は 表示する時に 1,048,576 バイトを単位としてサイズを 表示する。SIZE の形式は以下を参照
:
:
:
```

# 3.英語に戻す
```
sudo update-locale LANG=en_US.UTF-8
```

再起動し`man ls`
```
LS(1)                                               User Commands                                               LS(1)

NAME
       ls - list directory contents

SYNOPSIS
       ls [OPTION]... [FILE]...

DESCRIPTION
       List  information  about the FILEs (the current directory by default).  Sort entries alphabetically if none of
       -cftuvSUX nor --sort is specified.

       Mandatory arguments to long options are mandatory for short options too.

       -a, --all
              do not ignore entries starting with .

       -A, --almost-all
              do not list implied . and ..

       --author
              with -l, print the author of each file

       -b, --escape
              print C-style escapes for nongraphic characters

       --block-size=SIZE
              with -l, scale sizes by SIZE when printing them; e.g., '--block-size=M'; see SIZE format below
:
:
:
```

# 4.日本語に設定した状態から一時的に英語にする
環境変数に設定すればよい。
```
$ export LANG=en_US.UTF-8
```
切断して再接続すれば日本語に戻る。

# 5.今日本語なのか英語なのか知りたい
変数`LANG`の中身を確認すればいい。
```
$ echo $LANG

#日本語の場合
ja_JP.UTF-8

#英語の場合
en_US.UTF-8
```
python 自分がつくった仮想環境に使用しているモジュールの一覧を書き出す

## はじめに
仮想環境で使用しているモジュールを書き出して他の仮想環境でも使いたいと考えた。
## 目的
仮想環境Aで使用しているモジュールを書き出して、仮想環境Bに適用し同じ状態にする。
## 内容
### 参考
https://www.python.jp/install/macos/virtualenv.html
### 前提
すでに仮想環境が作成済みであること
※「.test」の部分は自分の仮想環境名に置き換えること
モジュール「requests」が追加済みであること
### 手順
以下のコマンドをコマンドラインに入力する
```:仮想環境「.test」に切り替える
% . .venv/bin/activate
```
`%` ⇨ `(.test) %`に表示が変わる。

```:仮想環境で使用しているモジュールの一覧をパッケージにして書き出す
(.test) % python3 -m pip freeze > requirements.txt
```

```:モジュールを追加する際にはパッケージも合わせて更新するようにする
(.test) % python3 -m pip install -r requirements.txt
```

## 終わりに
同じ環境で作業したい場合にいちいち設定し直さずに、モジュールを入れられるので便利
IPフラグメンテーション とは

## 勉強前イメージ

IPアドレスにフラグ・・？

## 調査

### IPフラグメンテーション とは

IPフラグメンテーションとは、ネットワーク機器がパケットを送信する際に
サイズの大きなIPパケットを分割して送信する仕組みです。
1回のフレームで送信される最大のサイズと `MTU` といい、MTUを超えて送信する際は分割されて送られます。
送信元で分割されたパケットは、受信側で再度構築しもとに戻します。
もとに戻す必要があるので、IPヘッダの中のIdentificationにパケットを識別する値を格納し、
コレが同じであれば元が同じパケットだったことが認識されます。
また、同じくヘッダの中にFlagsというフィールドがありますがこれで分割してもよいか、だめなのかの記載もあります。

MTUはIPヘッダを含めたもので、Ethernetであれば1518ByteがMTUになります。

### IPフラグメンテーション攻撃

IPフラグメンテーション攻撃 というものがあり、これはDoS攻撃の一種になります。
MTUより大きいサイズの偽のパケットを転送する方法です。
しかし偽物のパケットのため再結合ができず、リソースを消費しサーバダウンになってしまう攻撃です。

## 勉強後イメージ

MTU聞いたことあった！
大きすぎると分割するけど、結局くっつけないといけないからヘッダに色々書くのね。

## 参考

- [IPフラグメンテーション（IP fragmentation）](https://jprs.jp/glossary/index.php?ID=0180)
- [ネットワーク用語/IPフラグメンテーション](https://tech.pjin.jp/blog/2017/08/31/%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E7%94%A8%E8%AA%9Eip%E3%83%95%E3%83%A9%E3%82%B0%E3%83%A1%E3%83%B3%E3%83%86%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3/)
HTML/CSSの基礎の基礎[初心者向け]

WEBサイトを作る上で必ず触ることになると思われるHTMLとCSS。
ざっくりいうと「タグで囲むやつ」とか「見た目を調整するやつ」なんですが、最近これらはどういったものか説明する機会があったので、今回自分なりの解釈を書いておこうと思います。
既に習熟されている方には今更な内容だと思いますのでスキップ推奨です。

# HTMLとはなんぞや
「Hyper Text Markup Language」の略。日本語にすると「文書構造や表示の仕方を指定できる言語」。
もう少し簡単に言うと、題名や見出し等の文書構造を、好きな見た目で表示できる言語ですね。で、これを使って作る __文書__ が色んなWEBサイトで使われているHTMLファイルなわけです。
文書、つまり基本的にHTMLファイルは拡張子が```.html```なだけのテキストファイルですので、windowsに最初からインストールされているメモ帳等のツールでも作ることができます。

## HTMLの基本文書構造
HTMLの基本的な構造は大きく分けて以下の3つです。
- DOCTYPE
HTMLはいくつかのバージョンがあり、XHTML、HTML4.1、HTML5等があり、現在はHTML5が主流です。
バージョンによっては多少ルールが変わる箇所もあるため、どのバージョンのHTML文書なのかを明記する必要があります。
これはhtml文書の1行目に記述します。
- HEAD
文書自体の情報を指定する部分で、メタデータとも呼ばれます。
書籍で言うところの「題名」「著者」「どんな分野の書籍なのか」「内容の概要」といった情報を記述します。
- BODY
ブラウザ(chrome)等で実際に表示される部分です。
WEBサイトを見るときに表示されている「見出し」や「本文」等のテキストや、画像等はこの部分に記述します。
また、CSSはこの部分の見た目を調整する際に利用します。

## HTMLのタグ
HTMLの基本文書構造は上述の通りですが、実際にHTML文書を作る場合には、どこからどこまでが「DOCTYPE」で、どこからどこまでが「HEAD」「BODY」なのでしょうか？
ここまでご紹介した要素で例を挙げてみます。

```
<!DOCTYPE html>
<html>
<head>
メタデータ
</head>
<body>
コンテンツ
</body>
</html>
```

上記の例で使われているタグの意味合いは以下のようになります。
- ```<html> ~ </html>```
```<html>```がhtml文書の開始を、```</html>```が終了を表します。
この2つの間に記述された内容がhtml文書です。
- ```<head> ~ </head>```
```<head>```がhead部分の開始を、```</head>```が終了を表します。
この2つの間に記述された内容がhead情報、いわゆる文書自体の情報を記述する部分です。
- ```<body> ~ </body>```
```<body>```がbody部分の開始を、```<body>```が終了を表します。
この2つの間に記述された内容がbody情報、つまり実際に表示される内容を記述する部分です。

上記のように、どこからどこまでがその要素かを指定しているのが __タグ__ です。
```<body>```のようにその要素の開始を表すものを __開始タグ__。
```</body>```のようにその要素の終了を表すものを __閉じタグ__ と言います。

また、タグは「見出しを表すもの」や「文節を表すもの」等、ここでは紹介しきれないほどの種類がありますので、そちらについては他の参考サイトや書籍等を探してみてください。中には閉じタグが不要なものもあります。

ちなみに```<!DOCTYPE html>```はDOCTYPE宣言と呼ばれるもので、どのバージョンのhtml文書を作成するかで書き方が決まっています。例に記載されているものはhtml5のものです。

## HTMLは四角形と文字だけ
次は目に見える部分であるBODYのお話です。
HTMLで目に見える部分は、基本的に四角形と文字だけで構成されています。
__ブロック要素__ 、__インライン要素__ と呼ばれるものなのですが、
最初のうちは四角形がブロック要素、文字がインライン要素。と考えるとよいと思います。

しかし「え？WEBサイトって丸いのとか三角もあるよね？」って思う初心者の方は多いはず。
あれらは実は
 __四角形の角を円になるまで丸くしたもの__ とか
 __四角形を斜めに回転させて一部を見えなくしたもの__ とか
 __四角形の中に丸や波型の画像を表示させているもの__ です。

以下に例を挙げてみます。
まず下のような赤・緑・青で、幅100px・高さ100pxの四角形をHTMLとCSSを使って作ってみました。
![images.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2105702/1b1eb9df-53bd-1d63-2dde-a519ffe689c4.gif)
これをCSSを使って、
赤を __四角形の角を円になるまで丸く__
緑を __四角形を斜めに回転させて一部を見えなく__
青を __四角形の中に丸や波型の画像を表示させる__
させてみます。
![images2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2105702/5d0b3fbc-9d8b-46e5-7909-d3521c8a308d.gif)
少しイメージしづらいかもしれませんが、これらの赤・緑・青は見た目こそ円形であったり三角形となっていますが、実際は全て幅100px・高さ100pxの四角形の範囲を持ったままとなっています。よってHTML上でレイアウトする際にも、四角形のものとしてレイアウトすることになります。
基本的にWEBサイトのHTMLは、こういった __四角形の中に四角形、もしくは文字を配置する。__ の繰り返しで構成されています。

# まとめ
HTML/CSSを始めて触る、もしくは触りたての方向けに、主にHTMLとはどんなものかについて書いてみました。
HTMLとか一般生活で使うものじゃないしよくわかんない・・・という方に、少しでもなるほどな～と思っていただけたら嬉しいです。
とはいえ今回はあくまでHTMLの触りの部分の内容ですし、自由なレイアウトを作れるようになるためにはCSSという知識も必要になってきます。なかなか結構奥が深い世界ではありますが、CSSについて書き始めると記事一つでは終わらなくなっちゃうので今回はこの辺で。

ここまで読んでいただきありがとうございました。
Git ssh cloneができなかった話

# Git SSH Cloneが出来なかった



## はじまり
コマンドラインから、自分のプロジェクトをSSHでCloneした時に`Permission denied`で`git clone`が出来ませんでした。
git@gitlab.com: Permission denied (publickey,keyboard-interactive).


```
git clone git@gitlab.com:[USER]/[PROJECT]
```

エラー出力:

```
Cloning into 'projectName'...
git@gitlab.com: Permission denied (publickey,keyboard-interactive).
fatal: Could not read from remote repository.

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


自分の開発環境:
```
MacBook Pro (13-inch, M1, 2020)
ターミナル　での実行
```


そもそもGitLabのアカウントにてSSHキーの設定をしていなかったので、まずはGitLabのマイページからSSHキーの設定から、以下の手順で行なっていく。

## GitLabでのSSHキー設定手順

1. ssh鍵の作成。公開鍵の内容をコピーする。
1. GitLabの右上アイコンからPreferenceを選択
1. 左側のリストからSSHキーを選択
1. SSHキーのページで、Add an SSH keyのクリップボードに公開鍵の内容を貼り付け。 
1. Addボタンをクリック


ssh鍵の作成はターミナル上で以下のコマンド。
このコマンド入力後、色々聞かれるがデフォルトで良ければ全部EnterでOK。
```
ssh-keygen -t rsa -C "your_email@example.com"
```
デフォルトでは、`~/.ssh/id_rsa.pub`に公開鍵が保存されるはずなので、
公開鍵の内容をコピーしておく。



ここまでで、SSHキーの設定は完了。GitLabから設定完了のメールが届くはず。


## まだできない

ここでもう一度、最初の`git clone`を実行したところ同様のエラーが出力された。

エラー出力:

```
Cloning into 'projectName'...
git@gitlab.com: Permission denied (publickey,keyboard-interactive).
fatal: Could not read from remote repository.

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

### .ssh/configの設定をする

`.ssh/config`に以下の情報を追記する。

```.ssh/config
Host git_ssh (任意の名前)
    User ユーザー名
    Port 22
    Hostname gitlab.com
    IdentityFile ~/.ssh/id_rsa (秘密鍵のパス)
    IdentitiesOnly yes

```

この時点で、先ほどのコマンドを入力すると同様のエラー出力。(省略)
```
git clone git@gitlab.com:[USER]/[PROJECT]
```

## 解決　
### .ssh/configの内容を考慮

以下を参照したところ、.ssh/configの内容を考慮してコマンドを叩く必要がある。
https://qiita.com/kawahara_hiroyuki/items/3ad35c548d1007c12109

```shell
git clone git@git_ssh:[USER]/[PROJECT]

# git clone git@[.ssh/configのHost名]:[USER]/[PROJECT]
```

これで無事に、git clone ができた。


## 別解
### ssh-agent

実際には、上記の方法に気づくまでかなり時間がかかり別の方法での解消となった。

以下の記事を参考にして、`ssh-add` で、ssh-agentを確認して追加する方法で解消した。
https://zenn.dev/takazumi/articles/951f674fc2ea19

```shell
ssh-add -l
>> The agent has no identities.

ssh-add [秘密鍵のPATH]
>> Identity added: [秘密鍵のPATH]

```

このコマンドを叩いた後に、当初のコマンドを叩いたところ無事にcloneができた。
こちらの方法では、Host名を考慮して叩かずとも無事にCloneできる。
```
git clone git@gitlab.com:[USER]/[PROJECT]
```



## 参照記事

https://qiita.com/soma_sekimoto/items/35845495bc565c38ae9d

https://qiita.com/suthio/items/2760e4cff0e185fe2db9

https://qiita.com/kawahara_hiroyuki/items/3ad35c548d1007c12109

https://zenn.dev/takazumi/articles/951f674fc2ea19
【トリビアのDelta Lake】#1 Pysparkで特定の文字列を削除する

# Pysparkで、特定のカラムの特定の文字列を削除したい

Pysparkを使って、sparkデータフレーム内の特定のカラムの特定の文字列を削除する方法です。

「Pyspark 特定の文字列 削除」と検索したが、
>Pythonで文字列を削除する

>一旦Pandasデータフレームに変換するといいですよ

という検索結果しか出ず「あたいはPysparkで文字が消してえんだよ」と嘆かれた方には参考になるかもしれません。

# とりあえず、CSVを読み込む
```
#サンプルデータを定義
sample_data = [{"age": '2', 'name': '✗Alice◎'}, 
               {"age": '5', 'name': '✗Bob◎'}]

#サンプルデータをSparkDataFrame化
df_sample = spark.createDataFrame(sample_data)

#内容確認
df_sample.show()

[結果]
+---+-------+
|age|   name|
+---+-------+
|  2|✗Alice◎|
|  5|  ✗Bob◎|
+---+-------+
```
サンプルのデータを用意し、Sparkデータフレームにしてみました。
年齢と名前という簡単なデータですが、よく見ると名前にバツ・マルという2つの不要な文字列がくっついています。

このデータのように、システムから自動で引っ張ってくると、たま〜に余計な文字列が付随してくること、ありますよね。
では、ここから邪魔なバツ・マルをPysparkのコマンドを使って削除していきたいと思います。

# regexp_replaceを使う
結論、こんな感じで書くことが出来ます！
```
from pyspark.sql.functions import regexp_replace,col
sample_df_regex = (
    sample_df
    .select(
        "age",
        regexp_replace(col("name"),"✗","").alias("name")
        )
    .select(
        "age",
        regexp_replace(col("name"),"◎","").alias("name")
        )
)

[結果]
+---+-----+
|age| name|
+---+-----+
|  2|Alice|
|  5|  Bob|
+---+-----+
```
ここではメインとして「regexp_replace」というコマンドを使っています。
```
regexp_replace(col("<操作したいカラム名>"),"<削除したい文字列>","")
```
これをSparkデータフレームのオプション「select」内で使うことにより、削除したい文字列を空白にreplaceすることが出来る、つまり削除できるというもの。
削除するというか、**空白に置換する**ってイメージですね！
もちろん置換なので、任意の文字列に変換することも出来るようです。

また、そのままだと操作を加えたカラムの名前が「regexp_replace(col("<操作したいカラム名>"),"<削除したい文字列>",,<カラム番号>」というヘンテコなものになってしまうので、そのあと「.alias("元のカラム名")」を使って元に戻しています。

このやり方の少し面倒なところが、**一度に1文字列しか削除できない**ということ。
このため、**バツ・マルを「✗」「◎」の二度に分けて削除**しています。
これが少し面倒。Pysparkがもう少し気を利かせくれれば…

今回は以上となります。
ぜひ、上のコマンドに消したい文字列を入れて試してみてくださいね。

# このシリーズの目的
クラウドストレージに蓄積された生データ（CSV,JSON等）を加工するのに必要なPysparkの知識を溜めていく、まさにPysparkに関するトリビアのDalta Lakeを目指しています。
Pysparkに関する記事はまだ海外のものが多く、このシリーズが私のような国内の駆け出しデータエンジニアの一助になることを願っています。
Herokuのコマンド一覧


# Herokuのコマンド一覧
[Heroku CLI コマンド　一覧](https://devcenter.heroku.com/ja/articles/heroku-cli-commands)

##### 触れたことのあるコード　2022.02.17

```Ruby
#アプリを一覧表示
$ heroku apps

#新しいアプリケーションを作成
$ heroku create

# Herokuのコマンド一覧を表示
$ heroku help

#ログイン
$ heroku login
  (--interactive  herokuコマンドでブラウザを開かないようにできる）

#最新のログ出力を表示
$ heroku logs

#アプリケーションの名前を変更
$ heroku rename アプリ名

#バージョン確認
$ heroku --version

#データベースの更新をHeroku側で実行
$ heroku run rails db:migrate

#メンテナンスモード
heroku maintenance:on
herolu maintenance:off

```



# 参考
https://devcenter.heroku.com/ja/articles/heroku-cli-commands
KotlinでLANサーバー疎通確認プログラムを作る

# 前提条件

- 当環境のサーバーは専用機ではなく旧式のデスクトップPC
- 業務開始と終了時に手動で電源On/シャットダウンを行う(電源ONは物理ボタン、シャットダウンはSSH経由)
- 機体が静かでランプの類もないため一見稼働状態が分からず業務開始後に電源が入っていないことに気づくことも稀ではない

# 必要要件
- WindowsPC上でサーバーの疎通確認ができること
- リアルタイム性は問われない(誤差5分程度)
- 確認のたびにコマンド実行やアプリ起動の手間はかけたくない
- 視覚的に状態を確認したい

# 設計
- 電源の有無が確認できれば良いので疎通確認はシンプルなPing送信で行う
- 状態表示はタスクトレイアイコンで行う

# コード

```kotlin
import java.awt.*
import java.net.InetAddress
import kotlin.system.exitProcess

var status:Boolean = false // 疎通状態

val popup = PopupMenu().apply { // トレイアイコン右クリックで終了するためのメニュー
    this.add(MenuItem("Exit").apply {
        this.addActionListener { exitProcess(0) }
    })
}

// ON/OFF状態を表示する画像(16*16推奨)
val off: Image = Toolkit.getDefaultToolkit().createImage(ClassLoader.getSystemResource("off.png"))
val on: Image = Toolkit.getDefaultToolkit().createImage(ClassLoader.getSystemResource("on.png"))

val icon = TrayIcon(off,"ServerCheck", popup).apply { this.isImageAutoSize=true }

// 画像とツールチップの表示切り替え
fun set(){
    icon.image=if (status){on}else{off}
    icon.toolTip=if (status){"オンライン"}else{"オフライン"}
}

// 肝心の疎通確認関数
fun check(){
    val st = InetAddress.getByName("LANサーバーのIP").isReachable(1000)
    if (status!=st){
        status=st
        set()
    }
}

fun main() {
    SystemTray.getSystemTray().add(icon)
    while (true){
        Thread.sleep(30000) // 30000ms(30秒)ごとに疎通確認実行
        check()
    }
```

# 実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398976/5fe5da8d-e0a5-9735-3e9e-30441bea0d9e.png)

# スタートアップ時に起動する
スタートアップフォルダ(スタートメニュー右クリ→ファイル名を指定して実行→「shell:startup」)に起動するバッチファイル入れとけばいい

```bat
java -jar .\\PATH\\TO\\fatjar.jar
```

# 感想

書きなぐりのウンコードになってしまったが動くのでヨシ
［Python］よく使うモジュール


# やりたいこと
- データマネジメントの仕事で、よく使うモジュールをまとめてみた

# モジュールのまとめ
- import os
オペレーションシステムに関連した操作

- import pandas as pd
データ分析を効率的に行うため

- import numpy as np
演算を行うため

- import openpyxl 
    - Excelの標準規格でファイルを読み書きするためのライブラリ
    - from openpyxl.styles.borders import Border, Side  もかな？

- import glob
フォルダやファイルのパス操作

- import datetime
現在の日時を取得する
SQLの基礎知識

# 大事なこと
・課題の見極めが9割！
　　DSとしての専門スキルは1割程度。だからビジネス力が大事。
・よく使う分析手法を極める

# DSに必要なスキル
・ビジネス力
・データサイエンス力
・データエンジニア力

# DS業務を進行する上での職種
・DS（アナリストとエンジニア）
・PM
・営業

# SQLとは・・・データベースを操作するための言語
・必要な情報を抽出しデータ分析ができる
・PythonはSQLiteを標準装備


## SQL基本用語
・テーブル・・・Excelでいうシート。
・レコード・・・行・ｒｏｗ
・カラム・・・列・フィールド

## 記述順序と実行順序
・記述された順序と実行順序は違う！
・selectは、最初に入力するけど実行は後の方

# 基本構文
・コメント
`--`　`/*    */`

・テーブルの作成　　
`CREATE TABLE xxx`

・データ入力　　　　
`INSERT INTO テーブル名 （カラム1,カラム2,・・・）　VALUES （値,値2,）,（値,値2,）,・・・`

・取り出したいデータの指定　　
`SELECT カラム1,カラム2,・・・ FROM テーブル名`

・条件付け　　　　　　　　　　
`WHERE xxx = yyy;`(ANDやORで複合的な条件も可)


# 集約関数
`SELECT 集約関数（カラム）　FROM テーブル名　[WHERE xxx = yyy];`

・count　レコード数のカウント
・avg データの平均値
・sum データの合計値
・max データの最大値
・min　　データの最小値


#　クエリー
・グループ化を行いたい場合　　　
`GROUP BY カラム名`

・GROUP BYで指定した場所を集約関数で計算した後、WHEREのように条件指定　
`GROUP BY カラム名　HAVING xxx = yyy;`

・SELECTで取り出したデータの並べ替え 
`ORDER BY カラム名 DESC(orASC)`

・複数のデータを指定して抽出　
`SELECT カラム名 FROM テーブル名 WHERE カラム名 IN(値1,値2, ・・・値N);`

・取得するレコード数を指定　
`SELECT カラム名 FROM テーブル名 LIMIT x;`


# 内部結合と外部結合（テーブル結合）
・使い分けは、欠損値の許容。
　
・欠損値が許容でき、全てのカラムを満たしたければ外部結合。　`LEFT(or RIGHT)　OUTER JOIN`
`SELECT カラム名　FROM テーブル名1　LEFT（or RIGHT）OUTER JOIN　テーブル名2 ON テーブル名1.カラム名A ＝　　テーブル名2.カラム名A'`

・両データが満たしているデータのみ活用したい場合は内部結合 `INNER JOIN`
`SELECT カラム名　FROM テーブル名1　INNER JOIN　テーブル名2 ON テーブル名1.カラム名A ＝　　テーブル名2.カラム名A'`


# サブクエリ
・SELECT文で取得したデータを別のSELECT文で利用する

・使い方次第では、あるSELECT文を記号化（AS a）し、
　関数的な使い方も可。

`SELECT カラム名　FROM テーブル名1　WHERE カラム名2 = （SELECT カラム名　FROM テーブル名　WHERE xxx = yyy）;`


# WITH構文
`WITH　a AS(サブクエリ)`

aを関数的に呼び出せる。
先輩の修論で appendix 作成を手伝った話

## 背景
先輩の研究テーマはざっっくりいうとコンクリートについて。研究で電子顕微鏡（SEM）を使って写真を撮り、修論の appendix に収録するとのことでした。
一見簡単なようですが、画像は合計で数百枚あり、高さと幅ともに大きい bmp ファイルのため、Word に貼り付けていくとフリーズしかけるらしい。まず bmp を諦めて png を勧めてみましたが、細部が崩れるからなるべく避けたいとのこと。そこで思い当たったのが `python-docx` です。`python-docx` は Python で Word を扱うライブラリです。存在は知っていたものの、直接 Word に書き込んだほうが楽だと考えて今までスルーしていました。しかし、今回のように画像を貼っていくだけなら適用できそうです。

> appendix は画像だけを載せ、各ページに載せる枚数は何枚でもいい。各画像にはキャプションをつけたい。画像ファイルは連番となっていて、番号順に載せてほしい。

とのこと。私には Python で遊んでくださいと言われているような気がしました（幻聴）

## やったこと

まず大量の bmp をもらい、`python-docx` で Word を作ります。修論データの代用として、[フリー素材.com](https://free-materials.com/) より愛すべきイッヌの写真をお借りしました。かわいい…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530290/82433592-aae8-329a-1f13-8d7114c05a47.png)

temp フォルダーに以下のスクリプトを作り、実行しました。

```python:wordに画像を貼り付ける.py
from docx import Document
from docx.shared import Cm
from docx import shared
from docx.enum.text import WD_ALIGN_PARAGRAPH
from docx.enum.table import WD_TABLE_ALIGNMENT

from tqdm import tqdm
import os
os.chdir(os.path.abspath(__file__))

doc = Document()

def to_word():
    count = 0
    n = 0
    for k in tqdm(range(2)): # 実際はもっと大きい数
        tables = doc.add_table(rows=3, cols=2)
        tables.alignment = WD_TABLE_ALIGNMENT.CENTER
        for i in range(3):
            for j in range(2):
                count += 1
                n += 1
                fname = rf"修論お手伝い\dog{count}.jpg"
                while not os.path.isfile(fname):
                    count += 1
                    fname = rf"修論お手伝い\dog{count}.jpg"

                s = '図' + str(n)
                p = doc.tables[k].rows[i].cells[j].paragraphs[0]
                p.alignment=WD_ALIGN_PARAGRAPH.CENTER
                r = p.add_run()
                # ここのサイズは何度か微調整しました
                r.add_picture(fname,width=Cm(6.0), height=Cm(6.0))
                r.add_break()
                r.add_text(s)
                r.font.name = "Times New Roman"
                r.font.size = shared.Pt(10.5)

        p = doc.add_paragraph()
        p.alignment = WD_ALIGN_PARAGRAPH.CENTER
        r = p.add_run()

    doc.save(f'{m}.docx')

for m in range(1): # 実際はもっと大きい数
    to_word()
    print(f"{m} is finished")
print("Finish")
```

Word を出力できました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530290/f4db21ba-2a98-cba4-50b1-de4fd825d729.png)

## 感想
実際のデータでやると、bmp 画像を貼り付けるのに数分かかりました。重すぎぃ。一方、イッヌファイルは 0 秒で作れました。軽すぎぃ。あと、柴犬可愛すぎぃ。~~私の知識不足もありますが、`python-docx` が使える珍しい場面だったと思います。~~ よければ、`python-docx` の実務への適用例をコメントにて教えていただけると嬉しいです。

## 参考
[python-docxでWORD文章に表を作成して画像とテキストを貼り付ける](https://bpyo.biz/2020/06/13/python-docx%E3%81%A7word%E6%96%87%E7%AB%A0%E3%81%AB%E8%A1%A8%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%A6%E7%94%BB%E5%83%8F%E3%81%A8%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E8%B2%BC%E3%82%8A/)
今日読んだgoの記事 2022/03/29

# 今日読んだgoの記事 2022/03/29
## goでどうスクレイピングするのか。
https://medium.com/@arnesh07/how-golang-can-save-you-days-of-web-scraping-72f019a6de87

要約
スクレイピングのメインはPython。
じゃあなんでGo? => Goのほうがはるかに早い。(単位時間あたりの処理量が倍くらい違う)
goのスクレイピングにはgoqueryを使う。
goqueryはjqueryライクである。

## goqueryのダウンロード方法
https://rooter.jp/web-crawling/go_goquery_scraping/

要約
go get github.com/PuerkitoBio/goquery

** collyとはなんぞ
https://qiita.com/ta9to/items/6a4c2ce646bc642c42b4

要約
go のスクレイピングライブラリ

## マーシャル
https://www.asobou.co.jp/blog/web/marshal-unmarshal
'SimpleRNN' ’ is not defined  'input_shape' ’ is not definedの解決策

エラー表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1863223/d4a5aaf9-b3c2-291e-daef-71634a37ad95.png)

解決策
from keras.layers import SimpleRNN
を追加

エラー表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1863223/e231ec79-acb1-675e-c2b7-0ed48e91bdb5.png)

×input_shape(1,width)
〇input_shape=(1,width)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1863223/6d76abf1-9440-46bc-41b7-f7b5b570e288.png)
令和にSendmailを設定することになり、設定ファイルの記載方法を探した。


現行踏襲を続けているシステムを担当し、令和にSendmailを構築することになりました。

10年ぐらいぶりなので何も覚えておらず、しかもドキュメントやナレッジの発見が大変で困惑したため、メモします。

OSはRHEL8です。


# そもそも推奨されていない。

[REHLのサポートに記載の通り](https://access.redhat.com/ja/solutions/5942531)、Postfixが推奨されています。

# Sendmail.orgから別URLへリダイレクトされる。

[Postfixのように](https://www.postfix.org/)情報が整理されていると思い、Sendmail.orgへアクセスしたところ、[Proofpoint社](https://www.sendmail.org)にリダイレクトされました。

[2013年にSendmail社がProofpoint社に買収された](https://cloud.watch.impress.co.jp/docs/news/618004.html)とのことです。
※そもそも、Sendmail社が存在したことを今知りました。




# 各種設定ファイルの設定方法はどこにあるか？

実機の設定ファイルを参照すると、sendmail.mc以外の設定ファイル（submit.mcなど）には詳細な設定方法が記載されていません。

RHEL8のドキュメントとしては[インストール手順](https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/8/html/deploying_different_types_of_servers/proc_installing-sendmail_assembly_mail-transport-agent)以上の情報は発見できませんでした。

REHL7の管理者ガイドに[ここ](https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/7/html/system_administrators_guide/ch-mail_servers#s2-email-mta-sendmail)から[ここ](https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/7/html/system_administrators_guide/s1-email-additional-resources)
とたどっていくと、以下に存在するという情報を発見しました。

`/usr/share/sendmail-cf/README`

`sendmail および aliases の man`

`/usr/share/sendmail-cf/README`はファイルを実機から直接入手しました。
コマンド二つは `man -P cat Sendmail`、`man -P cat aliases`で取得しました。


# 自分は確認できなかったが存在するかも？

[こちら](https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/7/html/system_administrators_guide/s2-email-online-documentation)にオンラインマニュアルの案内がありましたが、Proofpoint社のサイトを漁るのをあきらめました。
もしかしたらよりいい感じのマニュアルが存在するかもしれません。




# 設定ファイル編集後の作業

sendmailiの設定ファイル(.cfファイル）は記述が難解なので、.mcファイルを.cfファイルに変換する必要があります。
変換に必要な`sendmail-cf`、`m4`はインストールされていないので、Sendmail本体とは別にインストールします。

`yum install m4`
`yum install sendmail-cf`

インストール後、以下の要領で変換を行います。

`m4 /etc/mail/sendmail.mc > /etc/mail/sendmail.cf`
【Rails】click操作（テストコード）

## 初めに
こんばんは、プログラミング初心者のだいごです。
プログラミングスクールに通い始め１ヶ月くらい経ちました。
最近テストコードを書いたんですが、クリックに関するコードがいっぱいあり混乱しています。
そんなこんなで自身が学んだクリック操作のコードの使い方などをまとめていきたいと思います。

## クリックに関するコード
ますは今回まとめるコード達はこんな感じです。
- find().click
- click_button
- click_link
- click_on
#### find().click
```ruby
find('クリックしたい要素').click
```
と記述します。
クリックしたい要素にはinput要素のname属性を指定する必要があります。

こんなコードがあったとすると、
```html
<input type="submit" name="commit" value="Sign up" data-disable-with="Sign up">
```
書き方としてはこんな感じになります。
```ruby
find('input[name="commit"]').click
```
#### click_button
```ruby
click_button 'ボタン名'
```
と記述します。
これはボタンをクリックするときに使用できます。

こんなコードがあったとすると、
```erb
<button>送信</button>
<input type="submit" value="送信">
form_with内の
<%= f.submit "送信" %=>
```
書き方はこんな感じになります。
```ruby
click_button '送信'
```
#### click_link
```ruby
click_link 'リンク表示名'
```
と記述します。
これはリンクをクリックするときに使用できます。

こんなコードがあったとすると、
```erb
<a href="#">Progate</a>
<%= link_to "Progate", # %> 
```
書き方はこんな感じになります。
```ruby
click_link 'Progate'
```
#### click_on
```ruby
click_on '文字列'
```
と記述します。
これはボタンもリンクもどちらもクリックできます。

こんなコードがあったとすると、
```html
<a href="/contents/1">詳しくはこちら</a>
<input type="submit" name="commit" value="ログイン">
```
書き方はこんな感じになります。
```ruby
click_on ('詳しくはこちら')
click_on ('ログイン')
```

## 終わりに
長くなりましたが、まとめるとこんな感じになりました。
これからも備忘を兼ねて時々記事を更新しようと思います。
間違っているとこや付け加え等あればコメントいただけると嬉しいです。
長々とありがとうございました。
[備忘録]いつも通り書いていたのに発生したVue.jsのエラー

新しいコンポーネント作成時に発生しました。
```Vue.js:エラー内容
vue.esm.js?efeb:628 [Vue warn]: 
Property or method "message" is not defined on the instance but referenced during render.
Make sure that this property is reactive, either in the data option, or for class-based components, by 
initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <ManyInput> at src/components/ManyInput.vue
       <App> at src/App.vue
         <Root>
```
エディターにエラーが発生したわけではなく、ブラウザに表示時にコンソールにてエラー表示。
下記がコンポーネントでの記述内容。
```Vue.js:ManyInput.Vue
<template>
    <div id="ManyInput">
        {{message}}
    </div>
</template>

<script>
export default {
    name:"ManyInput",
    deta(){
        return {
            message:"複数同時入力のテストです。"
        }
    },
    mounted(){
        console.log("manyInput")
    },
}
</script>
```
# 問題はタイポ
data()をdeta()にしていたのが原因。
エラーの内容は、dataで定義していないものが、templateで利用されているというよう。
【shell.how】コマンドとオプションの意味を教えてくれるWEBサービスをご紹介します。

## はじめに
今回は、コマンドとオプションの意味を教えてくれる「<a href="https://www.shell.how">shell.how</a>」というWEBサービスについてお伝えします。

結構面白くて、つい色々と入力してしまいます（笑）

https://www.shell.how

## どんなサービス？
こんな感じです。
![27e19fcc076944a9152f40d3d5266149.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/073a8e5c-e236-68bc-7d5c-6d9a485f856e.gif)

上記GIF画像の例でいうと、

```sh
ls -ltra
```

というコマンドおよびオプションについて、リアルタイムで説明してくれています。

　

headコマンドも試してみます。
![d11c77f0bbfff701e5db1da6d505d9cc.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/573f062b-e9b2-a1c2-927b-690a1fcb1d09.gif)

瞬時にレスポンスが返ってくる感じが、とても楽しいですよ！

## どういう時に使う？
私は、下記の用途に向いていると思います。

- **コマンドやオプションの意味を調べるのが面倒な時** 
（特にオプションが多い時など）

ひとつひとつ意味を調べるのが面倒なときに使えそうですね。

実際に試してみると、**リアルタイムで表示してくれるのが心地いい**です！

`git`や`npm`など、普段使うコマンドは一通り対応しているのもありがたいポイントです。

とはいえ、すべてのコマンド＆オプションを網羅している訳ではなさそうなので、学習用途には向かないかもしれません。

気軽に意味を調べたい時に使う、といったイメージでしょうか。

### おわりに

今回はコマンドとオプションの意味を教えてくれる「shell.how」についてお伝えしました。

ぜひ皆さまもお試しください！

https://www.shell.how
CSS-in-JSでStylelintを使えるようにした

## 概要
[Emotion](https://emotion.sh/docs/introduction)などのCSS-in-JSにも[Stylelint](https://stylelint.io/)を適用したい。
少し苦戦したのですが、うまくいった方法をメモしておきます。
どなたかの参考になれば幸いです！

※ここでは stylelint14系での対処法を紹介します。

## 環境
* stylelint: v14.3.0
* emotion: v11.6.0（@emotion/styledを使用）

## そのままだとどうなる
そのままstylelintをかけると、うまくいきません。

エラー内容

>When linting something other than CSS, you should install an appropriate syntax, e.g. "@stylelint/postcss-css-in-js", and use the "customSyntax" option

## 解決策
### 必要なモジュールをインストール
>you should install an appropriate syntax, e.g. "@stylelint/postcss-css-in-js",

エラー文に言われている `@stylelint/postcss-css-in-js` と、それとは別で`postcss-syntax` をプロジェクトにインストールします。

```
$ yarn add -D @stylelint/postcss-css-in-js postcss-syntax
```

参照：[@stylelint/postcss-css-in-js](https://github.com/stylelint/postcss-css-in-js)

### customSyntaxオプションの設定
>and use the "customSyntax" option

そして、これも上記のエラー文が教えてくれていますが、stylelintの設定ファイルに下記のように`customSyntax`オプションを設定します。

``` .stylelintrc.js
module.exports = {
  // ...略
  overrides: [
    {
      files: ["**/*.{jsx,tsx}"],
      customSyntax: "@stylelint/postcss-css-in-js",
    },
  ],
};
```

### 参考にさせていただいた記事
検証にあたり、下記の記事から解決につながりました。ありがとうございます！
（環境によって対応策が若干変わる様子です）
* [@stylelint/postcss-css-in-js](https://github.com/stylelint/postcss-css-in-js)
* [stylelint v13 → v14へマイグレーションしました](https://www.sassy-blog.com/entry/20211109/1636430386)
* [[Stylelint] tsxファイルの解析でCssSyntaxErrorが発生する場合の対処方法](https://b.0218.jp/202111152315.html)