OmniAICreator/Qiita-1.07M huggingface dataset:
rustのebooksのメモ



The Rust Programming Language by Steve Klabnik and Carol Nichols: この本は、Rustの公式ドキュメンテーションの一部であり、Rustの基本的な概念と機能を包括的にカバーしています。初心者から経験豊富な開発者まで、あらゆるレベルの読者に適しています。

Programming Rust by Jim Blandy and Jason Orendorff: この本は、Rustのシステムプログラミングの側面に焦点を当てています。メモリ管理、並行性、安全性についての詳細な説明が含まれています。

Rust in Action by Tim McNamara: 実際のプロジェクトを通じてRustを学ぶことを目指した本です。読者は、リアルワールドの問題を解決するためのRustの使用方法を学びます。

Hands-On Rust by Herbert Wolverson: ゲーム開発に焦点を当てた本で、Rustを使用してゲームを作成する方法を学びます。プロジェクトベースのアプローチが採用されています。

Rust for Rustaceans by Carol Nichols: この本は、すでにRustの基本を理解している読者を対象としています。より深いレベルでRustを理解し、より効果的にRustを使用するためのテクニックを提供します。

Rust Essentials by Ivo Balbaert: Rustの基本的な概念と機能を短時間で学ぶことを目指した本です。初心者向けに書かれています。

Rust Programming By Example by Guillaume Gomez and Antoni Boucher: 実際のプロジェクトを通じてRustを学ぶことを目指した本です。読者は、ウェブスクレイピング、GUIアプリケーション、ゲーム開発など、さまざまなタイプのプロジェクトを通じてRustを学びます。

Beginning Rust Programming by Colin J. Ihrig and Johannes Schlüter: Rustの基本的な概念と機能をカバーした初心者向けの本です。読者は、Rustの基本的な構文から、メモリ管理、エラーハンドリング、パッケージ管理までを学びます。

Rust in Practice by Ryan Levick: この本は、Rustを使用して実際の問題を解決する方法を学ぶことを目指しています。読者は、Rustの高度な機能とテクニックを学びます。

The Rust Programming Cookbook by Vesa Kaihlavirta: この本は、具体的な問題を解決するためのレシピを提供します。各レシピは、特定の問題を解決するための短い、具体的なソリューションを提供します。
[Chrome拡張]　Slack スライドバーのチャンネル名をカスタマイズする

「Slack」のスライドバーに表示されるチャンネル名を
自分好みにカスタマイズできるChrome拡張をご紹介します。

今回ご紹介するChrome拡張はこれです。
[Slack チャンネル名の表示変更](https://chrome.google.com/webstore/detail/slack-%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB%E5%90%8D%E3%81%AE%E8%A1%A8%E7%A4%BA%E5%A4%89%E6%9B%B4/mdjcmekalmpockmnmmhoffaonopimgbc)

個人的にローカル環境で使っていましたが、他にも使いたい人がいたので
少し手を加えて公開することにしました。

## 「Slack チャンネル名の表示変更」とは？
Slackのサイドバーに表示されるチャンネル名を
好きな名前に変更することができます。

<font color="red">名前を変更しても他に影響を与えることはありません。
（実際にチャンネル名が変更されているわけではありません。）</font>

あくまでも自分が見ている画面の表示が変わるだけなので
自分だけが理解できる分かりやすい名前をつけることが出来ます。

<font color="blue">もし気に入っていただけたのなら、拡張機能の評価をもらえれば励みになります。。</font>

## 使い方
まずは、[ここ](https://chrome.google.com/webstore/detail/slack-%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB%E5%90%8D%E3%81%AE%E8%A1%A8%E7%A4%BA%E5%A4%89%E6%9B%B4/mdjcmekalmpockmnmmhoffaonopimgbc)からChrome拡張をインストールして下さい。

インストール後、お使いのSlackの***ページを更新***して下さい。
(ページを更新しないとインストールしたばかりのChrome拡張が使えません。)
### 1.名前を変えたいチャンネルをサイドバーから選択
Slackのサイドバーから変更したいチャンネル名を選択して下さい。
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/19835f99-36a8-829f-7bfd-83998ba7882b.png">

### 2.チャットスペースのチャンネル名をクリック
チャットスペースのチャンネル名をクリックして下さい。
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/8d7590fe-cd58-24b9-20f2-a7496e83382f.png">

### 3.詳細情報ダイアログの入力ダイアログに名前を入力
そのチャンネルの詳細情報ダイアログが表示されるので、
aliasの横の入力ダイアログに好きな名前を入力して下さい。
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/0729e580-04b5-bd8b-194f-dd7ba9c4f5cb.png">
サイドバーのチャンネル名が入力した名前に変わります。
変わるのはあくまでもサイドバーのチャンネル名の表示だけです。
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/12622776-4e1e-a2b5-65b4-4ce21099329d.png">
セキュリティの基礎知識

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/066e3777-6faf-d0a6-e3ce-288968078974.png)
1:ソフトウェアに起こり得る問題点
 Webアプリケーションに欠陥や仕様上の問題点があると、開発者と利用者それぞれに、さまざまな被害が生じます。このような、セキュリティを脅かす欠陥や仕様上の問題を脆弱性と言います。

2:脆弱性ぜいじゃくせい
 脆弱性とは、アプリケーションなどにおいて、セキュリティの弱点を作り出す仕様上の問題点のことをいいます。つまり、「Webアプリケーション上で悪意のある者に攻撃を仕掛けられる際の弱点」と言い換えることができます。

3:脆弱性によってもたらされる被害とは
　脆弱性がアプリケーション内に存在することによって、以下のような被害が想定されます。

①個人情報を勝手に閲覧される
②Webページの内容が改ざんされる
③Webページ自体が利用不可能になる
　このような問題が起きてしまうと利用者へ大きな被害を与えてしまい、公開したWebページは社会的な信用を失ってしまいます。そのような事態を防ぐためにも、脆弱性対策は必須と言えます。

４：脆弱性がもたらすセキュリティ攻撃
①JavaScriptによるセキュリティ攻撃
　JavaScriptの仕組みを用いた、非常にポピュラーな攻撃方法です。

②セッションを用いたセキュリティ攻撃
　先述のJavaScriptによるセキュリティ攻撃を用いて、そのユーザーのログイン情報を盗み出す攻撃です。

③不正なリクエストを行うセキュリティ攻撃
　サーバー側に不正なリクエストを行い、データを改ざんする攻撃手法です。

④SQLによるセキュリティ攻撃
　サーバーサイドでSQLを用いてデータを取得/登録する際に、セキュリティ不備を意図的に利用する攻撃手法です。
オフラインの勉強会で自己紹介をハックする

勉強会のオフライン開催が増えてきましたね。楽しみの反面、困ったこともあります。

　_コミュ障でボッチな私は初対面の方への接し方が分からない_


アイスブレイクをする、場を和ませる小道具を用意しなければ。


## 初手の名刺交換で爪痕を残す

初めて同士が集まって、最初にすることといえば、名刺交換。名刺は縦や横やありますが、デザインは無難なものが多くインパクトに欠けます。自分だけしか作れない名刺を渡して印象付けようと考えた結果、名刺は現場で印刷して渡すことになりました。

https://www.youtube.com/watch?v=s9HNWSZ2Gbo

<iframe width="560" height="315" src="https://www.youtube.com/embed/s9HNWSZ2Gbo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

名刺を印刷する人はあまり居ないため、ウケも良く、アイスブレイクに最適でした。なお、このアプリやソースコードは公開しているので、同じく印刷したい方はご利用ください。

https://github.com/mitsuharu/mobile-printer

## アバターを伝える

コミュ障でも文字コミュニケーションなら多少できます。ただ困ったことに、実世界での顔はアイコンではありません。

アイコンを現実世界でも顕現させるしかありません。私は SUZURI に自身のアイコン画像をアップロードして缶バッチを作成しました。これを身につけておけば、現実世界でも私のアイコンを認知してもらえます。この手法は同僚に教えてもらいました。ありがとうございます。

https://suzuri.jp/mitsuharu_e/13268526/can-badge/44mm/white

さらに、最近は NFC タグで SNS に遷移させるという手法も教えてもらいました。本当に感謝です。さっそく、アマゾンで NFC タグを購入して、NFC Tools というアプリ（iOS, Android の両 OS にあります）を利用して書き込みました。

https://youtu.be/WQj_pABpVfw

<iframe width="560" height="315" src="https://www.youtube.com/embed/WQj_pABpVfw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

同じく SUZURI で購入したシールを貼って、名札ケースに入れています。先日の参加した勉強会や技術書典ではこれをぶら下げていました。

![IMG_0863-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24345/8b8cffb8-3c18-3035-00ea-bd4905579b1d.jpeg)

エンジニアにこの NFC カードの興味をもってもらい、何人かに読み取ってもらいました。やったね😀。なお、私が購入した NFC タグとカードはこちらです（アフィリエイトではないです）。

https://www.amazon.co.jp/gp/product/B08WRV4NHM

https://www.amazon.co.jp/gp/product/B07PBDHGDK

## まとめ

初めての勉強会を知らない人ばかりのなかで参加するのは、勇気が要ります。私は小道具を使って、場を和ませて参加する手法をとりました。一方で、私も勉強会を運営する場合もあり、初参加者の方を受け入れる側になることもあります。どの勉強会でも、参加者は同じ勉強したい仲間なので、歓迎しています。私のような小道具は不要で、気軽に門戸を叩くてください。いつでもウェルカムです！
sudo dpkg -iでインストールできないとき

普通にインストールしようとすると
```sh:shell
$ sudo dpkg -i Lark-linux_x64-6.5.11.deb
dpkg: regarding Lark-linux_x64-6.5.11.deb containing bytedance-lark-stable, pre-dependency problem:
 bytedance-lark-stable pre-depends on dpkg (>= 1.14.0)
  dpkg is not installed.

dpkg: error processing archive Lark-linux_x64-6.5.11.deb (--install):
 pre-dependency problem - not installing bytedance-lark-stable
Errors were encountered while processing:
 Lark-linux_x64-6.5.11.deb
```
となり、インストールできない。

## 対処法
**--force-all**オプションをつける。

```
dpkg: regarding Lark-linux_x64-6.5.11.deb containing bytedance-lark-stable, pre-dependency problem:
 bytedance-lark-stable pre-depends on dpkg (>= 1.14.0)
  dpkg is not installed.

dpkg: warning: ignoring pre-dependency problem!
(Reading database ... 26316 files and directories currently installed.)
Preparing to unpack Lark-linux_x64-6.5.11.deb ...
Unpacking bytedance-lark-stable (6.5.11-0) over (6.5.11-0) ...
```
あとはこのまま待てばインストールできます。

ちょっとだけてこずったので備忘録です。
【自分用備忘】Docker-composeにてDjango環境ミニマムに作成

```Dockerfile
# Pythonの公式イメージをベースに使用 3.8を指定
FROM python:3.8

# 環境変数を設定 この場合、Pythonが標準出力と標準エラーにすぐに書き込む
ENV PYTHONUNBUFFERED=1

# Docker内の作業ディレクトリを設定
WORKDIR /code

# ホストのrequirements.txtをDockerイメージの/codeにコピー
COPY requirements.txt /code/

# pipを使ってrequirements.txtに記載されているパッケージをインストール
RUN pip install -r requirements.txt

# ホストの存在しているすべてのファイルをDockerイメージの/codeにコピー
COPY . /code/
```

```docker-compose.yml
# Docker Composeのファイルフォーマットバージョンを指定し
version: "3.9"

# このdocker-composeで定義するサービスをリスト
services:
  # "web"はサービス名で、任意の名前を付ける
  web:
    # Dockerfileを使ってDockerイメージをビルド
    build: .
    # Dockerコンテナ起動後に実行されるコマンドを指定します。ここではDjangoの開発サーバを起動
    command: python manage.py runserver 0.0.0.0:8000
    # ホストとDockerコンテナ間でファイルを共有する設定をします。左側がホストのパス、右側がDocker内のパス
    volumes:
      - .:/code
    # ホストとDockerコンテナ間でポートをフォワードします。左側がホストのポート、右側がDocker内のポート
    ports:
      - 8000:8000
```

```requirements.txt
# Djangoと、必要な場合はその他のPythonパッケージをインストール
# バージョンは3.2.6を指定
Django==3.2.6
```

```bash
docker-compose run web django-admin startproject myproject .
```

```bash
sudo chown -R $USER:$USER .
```

```bash
docker-compose up
```


```
http://localhost:8000/
```

<h2>React</h2>

```dockerfile
FROM node:lts
WORKDIR /usr/src/app
```

```docker-compose.yml
version: '3.9'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./app:/usr/src/app # ローカルをコンテナ内にマウント
    working_dir: /usr/src/app
    command: sh -c "cd react-app && yarn start"
    ports:
      - "3000:3000"
    stdin_open: true 
```

```bash
docker-compose run --rm app sh -c 'npx create-react-app react-app --template typescript'
```

```bash
sudo chown -R $USER:$USER .
```
基礎から学ぶClean Architecture

# 基礎から学ぶClean Architecture

Clean Architectureの概念について理解しておきましょう。

<b>各レイヤーの責務</b>
![clean.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507088/77079771-696b-c0bc-2f4f-3dcc3642d1b6.png)


Clean Architectureとは、ソフトウェアシステムを柔軟で保守可能な形で設計するための原則とパターンです。

以下で、Clean Architectureの各レイヤーであるEntities、Use Cases、Interface Adapters、Frameworks & Driversの責務を簡潔に説明します

```
Entities（エンティティ）:
・ビジネスドメインの核となるもの。
・ビジネスルールやデータの状態を表現し、永続化の方法に依存しない純粋なオブジェクト。
・データモデルやデータベーススキーマの変更に対しても安定性を保つ。
```

```
Use Cases（ユースケース）：
・ユースケースは、ビジネスルールを実現するための具体的な操作や処理を表現。
・エンティティを利用し、ビジネスロジックを実装。
・入力データのバリデーション、エラーハンドリング、データの操作や変換などを担当。
```
```
Interface Adapters（インターフェースアダプタ）:
・外部のデータやリソースとのやり取りを担当。
・プレゼンテーション層（UI）、データベース、外部サービスなどのインターフェースを実装。
・ユースケースと外部要素の間のデータの変換や調整を行う。
```

```
Frameworks & Drivers（フレームワークとドライバ）:
・外部のフレームワークやツール、デバイスとの連携を担当。
・データベース接続、UIフレームワーク、Webサーバなどが含まれる。
・外部要素と内部のレイヤーをつなぐ役割を果たし、通信やデータの変換を処理。
```

これで、Clean Architectureの理解は完璧、、、、とはならないと思います。

実際に処理が流れる方向と依存関係の方向が異なるなど、ポイントが分かったようで、具体的なコードのイメージは湧いていないのではないでしょうか。　　


以上です。
ありがとうございます。
javascriptを使ってBase64テキストをBinary Data型にする

# 概要
OutSystemsではBinary Data型というものが存在します。
Binary Data型については以前書いた以下の記事を見てください。
https://qiita.com/you2143/items/bf9a11e000fe580167b5
このBinary Data型ですが、上記記事の「ファイルアップロード時の動きについて」の個所を見ていただくとわかる通り、Base64テキストをBinary Data型のコンストラクタに渡せばインスタンスを生成してくれます。
今回はBase64テキストをjavascriptを使ってBinary Data型にする方法を記載します。

# 参考にさせていただいたForgeのモジュール
https://www.outsystems.com/forge/component-overview/3242/binarydata-client-side

# やり方
1. javascript要素を配置します。
![javascript.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938020/5a847c30-3216-aee3-9cb1-e06cb29b73f8.png)

2. 配置したjavascript要素のInputParameterとOutputParameterを定義します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938020/2d796889-f853-8b4d-1a5f-d96e909b1c3a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938020/fb4e749b-5e3d-495d-2418-28149caee73d.png)

3. javascript要素のコードに以下を追記します。
```javascript
$parameters.Binary = $parameters.Base64;
```

これで、javascript要素のInputParameterにBase64テキストを渡すことでOutPutParameterからBinary Data型を取得することができます。

:::note warn
注意
InputParameterには、ファイルをBase64エンコーディングした文字列のうち、バイナリ部分だけを渡してください。
(`data:image/png;base64,iVBORw0KG...`のうち、`data:image/png;base64,`の部分は削除してください。)
:::

## どうしてBinary Data型を取得することが出来るのか
冒頭にも書いた通り、Binary Data型はBase64テキストをコンストラクタに渡すことでインスタンス化することが出来ます。勘のいい方はもしかしたら気づくかもしれませんが、OutPutParameterのBinary Data型に代入した文字列は、どこかのタイミングで文字列をそのままコンストラクタに渡すような動きをします。
(どのタイミングかまではしっかりと調べていません。おそらくjavascript要素内のコードをすべて実行した後？)
そのため、上記のようなコードでOutSystemsのBinary Data型を取得することが可能になります。
なお、Binary Data型はある程度文字列のチェックを行ってくれるのか分かりませんが、Base64エンコードで使用できない文字列を渡すと値が「Unavailable」といった内容になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938020/9a335d5c-0a85-f428-9221-04bbeaafcab7.png)

# 終わりに
触り始めてから日が浅く、不明なことが多いOutSystemsではありますが、今回のように裏側の処理を知ることでより型安全にシステムを構築しようと考えるきっかけになりました。
この記事が他の方の参考になれば幸いです。
Google Colaboratoryでワードクラウドを作ってみる【Python】

# Google Colaboratoryでワードクラウドを作ってみる【Python】

今回は日本語テキストをワードクラウドで可視化します。
開発環境として、Google Colaboratoryを利用します。

[▼Google Colaboratoryの詳細・設定方法はこちらから](#https://su-gi-rx.com/archives/4670)

またワードクラウドを生成するためのPythonライブラリであるWordCloudを使用します。

<b>ワードクラウドとは</b>
ワードクラウドはテキストに含まれるキーワードの出現頻度にあわせて文字の大きさを変えて視覚化したものです。出現頻度の高い単語を視覚的にとらえやすくなります。

## stop_wordsの設定

stop_wordsとは、除外するあまり意味のない単語を指定することです。
ワードクラウドから除外することで、精度を上げることができます。

```
# stop_wordsの設定（表示しない単語）文章に応じて追加してよし
# 不要な文字を入力→指定した文字は処理されない

stop_words = [ u'てる', u'いる', u'なる', u'れる', u'する', u'ある', u'こと', u'これ', u'さん', u'して', \
u'くれる', u'やる', u'くださる', u'そう', u'せる', u'した', u'思う',u'すぎ',u'ため', \
u'それ', u'ここ', u'である', u'だ', u'', u'て',u'に',u'を',u'は',u'の', u'が', u'と', u'た', u'し', u'で', \
u'ない', u'も', u'な', u'い', u'か', u'ので', u'']
```

## MeCabと各種インストール

```
!apt install aptitude
!aptitude install mecab libmecab-dev mecab-ipadic-utf8 git make curl xz-utils file -y
!pip install mecab-python3==0.7

import MeCab # 分かち書きに必要
import re #reは正規表現操作で用いられる

from wordcloud import WordCloud
import matplotlib.pyplot as plt
import codecs
```

## フォントの設定

```
fpath = '/usr/share/fonts/truetype/fonts-japanese-gothic.ttf' # フォント指定
```

## テキスト入力＆形態素解析処理

入力したテキストを形態素解析し、WordCloudを利用するための文字列に変換します。
また、品詞を指定してワードクラウドに表示することができます
（今回は’名詞’となっていますが、動詞や形容詞なども指定できます）

```
## 解析したい文章を入力
text=input('文章を入力してください')

tagger = MeCab.Tagger("")
tagger.parse(text)
node = tagger.parseToNode(text).next
print(node.surface)
print(node.feature[0])

wc_text=''
while node.next:
    print(node.surface, node.feature.split(',')[0])
    if node.feature.split(',')[0]=='名詞': #名詞のみ取り出す（動詞、形容詞など変更可）
        wc_text += node.surface+' '
    node = node.next
print(wc_text) # 分かち書き＆品詞の分類の表示
```

## ワードクラウド表示

形態素解析した結果をWordCloudを利用して表示します。

```
wordcloud = WordCloud(font_path = fpath,
                      background_color="white",
                      width=1000,height=400,stopwords=set(stop_words)).generate(wc_text)
plt.figure(figsize=(15,12))
plt.imshow(wordcloud)
plt.axis("off")
plt.savefig("word_cloud.png")
```


以上です。
ありがとうございます。
GitHubのコードを持ってきて自分で動かす簡単な方法（Google Colaboratory）

まだ、プログラムを書けない人が、GitHubをどう使うかといったら、人が書いたコードを持ってきて、自分で動かしてみたり、コードをいじってみたりできたら良いと思っています。

今のところ、いろいろインストールもしないで、一番簡単にコードを試せる方法がありました。

<b>【解説】インストールなしで動かす「ゼロから作るディープラーニング」</b>

<iframe width="618" height="348" src="https://www.youtube.com/embed/oWhUGYXkOJs" title="【解説】インストールなしで動かす「ゼロから作るディープラーニング」" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


GitHubから持ってきてコピペするだけでは、動かない時があるので、ずっと、このかりくりを知りたいと思っていたのですが、どうやって？？？
と疑問に思っていました。その理由がこの動画でとてもわかりやすく解説してくれています。この方法は結構、重宝しそうかなあと思います。

GitHubのコードをGoogle Driveに保存してGoogle Colaboratoryで
実行できるようにするおまじない（Google Colaboratoryにて）

 
> !git clone ▼ "drive/My Drive/Colab Notebooks/■"


ありがとうございます。
【有料版Google Colab Proとは？概要と特長を解説！】Google Colaboratoryシリーズその２

こんにちは。

今回は前回に引き続き、Google Colaboratoryの有料版である「Google Colab Pro」の概要と無料版との違い・特長について解説します。

Google Colaboratoryは無料版でもとても便利に使用できます。ですが、無料版には、長時間連続して使用できない、高性能なGPUが割り当てられにくいといった、いくつかの制約が設けられています。
今回は、無料版よりも快適に使用することができるようになる有料版のご紹介をしたいと思います。

<b>1.有料版【Google Colab Pro】とは？</b>

「Google Colaboratory」は、Googleが提供しているブラウザから直接Pythonなどを記述、実行することができるツールで、基本的に無料で使用することが可能です。
ですが、有料版を利用することにより、無料版よりもさらに便利にPython環境を整えることができるようになります。その有料版は【Google Colab Pro】といい、月額1072円で提供されています。

<b>2.【Google Colab Pro】の特長</b>

Google Colab Proの便利な点をいくつかご紹介したいと思います。

`
高性能のGPUを優先的に利用できる
`

Google Colaboratoryでは、深層学習の計算に不可欠なGPUを使用することができます。

無料版でもGPUは利用できますが、GPUの種類を自分で選択することができず、自動でほぼ低性能のGPUがあてがわれる仕組みになっています。これでは、性能の良いGPUの利用が期待できません。

これに対し、有料版のGoogle Colab Proを使用すると、最速GPUを優先的に割り当ててもらえるようになります。通常、自分で性能の良いGPUを準備しようとすると数十万単位の費用が必要となりますので、そのことを考えますととてもお得に高性能GPUを使用することができると言えるでしょう。

`
ノートブックを2時間以上使用できる
`

Google ColaboratoryでのPythonの記述はノートブック上で行います。
その際、使用時間には制約が設けられており、無料版では最長12時間となっています。12時間でノートブックを作成して、さらに学習までを行うのは時間の制約としては少々厳しいように思われます。

ですがGoogle Colab Proを使用すると、ノートブックを12時間以上（最長24時間）接続することが可能となっています。前述した高速なGPUを使用できる環境に加えて、さらにノートブックを長時間使用することができるようになれば、機械学習モデルの構築や学習も十分に行えるのではないでしょうか。

`
多くのメモリ容量を確保できる
`

機械学習モデルなどを構築する際は、データ量が膨大になることが多く、そのためにメモリ容量が足りなくなるといったことが多々起こります。ですので機械学習においては容量の大きなメモリを用意することが推奨されます。

ところが無料版のGoogle Colaboratoryを使用する場合ですと高メモリVM（仮想マシン）を選択できず、低メモリVMが自動的に割り当てられるようになっています。

これに対し有料版のGoogle Colab Proでは、、高メモリVMが優先的に割り当てられます。これでメモリ使用量が使用可能上限に達してしまうといった心配も軽減されますので、画像認識モデルや音声生成モデルといった多くのデータを必要とするモデルの場合も、快適に学習などを行うことができるようになります。

`
おわりに
`

今回は、Google Colaboratoryの有料版であるGoogle Colab Proについてご紹介しました。

無料版ではPython使用環境において高性能のGPUが優先的に割り当てられないといった多くの制約が設けられていますが、Google Colab Proでは無料版での制約が少なくなり、快適にノートブック環境を利用できます。
もちろん有料版には月々の利用料金がかかりますが、それでも自分で多額の費用をかけなくても高速なGPUなどを使用できるのはコストパフォーマンスが良いと言えるでしょう。

ありがとうございます。
DjangoでHello,world表示まで（自分用）

https://qiita.com/Ryo_Kitamoto/items/f4191f9cbf733e8c725f

前回の記事の続きになります。

## Djangoを立ち上げる〜Hello,world表示までの自分用メモ
ローカル環境に保存していた勉強ログをQiitaにあげていく自分用のメモです


## 開発環境
OS:mac
エディタ：vscode
Django：4.1.0
Python:3.10.9

## index.htmlを表示していく過程を記す
manage.pyがあるディレクトリにてテンプレートファイルをまとめる
templatesディレクトリを作成して、その中にindex.htmlを作成
\<h1>Hello,world!\</h1>とでも書いておく

#### templatesの位置を教えてあげる
```Python:setting.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
TEMPLATES = [
    {
        'DIRS': [BASE_DIR,'templates'],#追加
    },
]
```

#### views.py
```Python:views.py
from django.views.generic import TemplateView

class IndexView(TemplateView):
    template_name='index.html'
```

#### プロジェクトのurls.pyにアプリの方のurls.pyを見るように設定
```Python:urls.py(プロジェクト)
from django.contrib import admin
from django.urls import path,include#

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('アプリ名.urls')),#
]
```

#### アプリのurls.pyを設定
```Python:urls.py(アプリ)
from django.urls import path
from .views import IndexView

urlpatterns = [
    path('',IndexView.as_view(),name='index'),
]
```
【Python】Pandasを利用して、CSVファイルから特定の列の値をランダムで100行抽出する方法

# 概要
Pandasを使用してCSVファイルからデータを読み込み、ランダムに選択された100行のデータから指定の列（サンプルコードでは`"company_code"`列）の値を抽出し、結果を表示する方法を紹介します。
開くのが重いCSVファイルで「この列にはどんな値が入っているんだろう？」をすぐに調べる際に使えました。

# サンプルコード解説

```py
import pandas as pd
import random

# CSVファイルのパス
csv_file_path = '/Users/xxxx/Desktop/hogehoge/sample.csv'
csv_encoding = "cp932"  # エンコーディングを指定

# ランダムな100行のインデックスを生成
all_data = pd.read_csv(csv_file_path, encoding=csv_encoding)
row_indexes = random.sample(range(len(all_data)), 100)

# "company_code"列の値を抽出（NaNを除外）
company_code_column = all_data.loc[row_indexes, "company_code"].dropna()

# 結果を表示
print(company_code_column.values)
```

はじめに、CSVファイルのパスとエンコーディングを指定します。
`"cp932"`というエンコーディングは、Windowsで一般的に使用される日本語の文字コードです。異なるエンコーディングが必要な場合は、適切なエンコーディングを指定してください。

次に、`pd.read_csv()`関数を使用して、指定されたCSVファイルをデータフレームとして読み込んでいます。ランダムで100行としていますが、10行で良い場合は、10と指定してください。

`dropna()`関数を使用して、`NaN`（欠損値）を除外する処理をしています。ランダムで100件選んだものが全て空白のものの可能性もあるため、除外しています。空白も許容する場合はこちら消します。
※`dropna()`関数は、Pandasのデータフレームやシリーズオブジェクトに対して欠損値（`NaN`）を含む行や列を除外するために使用されます。

最後に、`values`属性を使用することで、NumPyの配列として値を取得します。

以下、出力例です。

```
  all_data = pd.read_csv(csv_file_path, encoding=csv_encoding)
[1 5 2 3 2 1 2 5 5 2 2 3 1 3 5 2 3 2 2 1 2 2 2 2 5 1 3 2 3 2 1 5 1 5 5 5 1
 2 5 2 2 2 3 5 5 2 5 2 2 3 1 1 5 5 2 2 1 1 3 1 2 5 3 1 2 1 2 2 2 2 5 3 2 5
 2 1 5 5 3 2 1 1 2 2 5 1 2 2 3 1 1 5 2 2 1 1 1 1 3 5]
 ```
vue-chartjs(chart.js)の凡例を任意の色にする

　同じグループに所属するグラフのうちある1本だけ異なる色になるようにしたところ、単一のグループに複数の色を指定したせいか凡例の色が指定できない問題が発生した。
　対処するために凡例の色(スタイル)を直接指定したので、その対応方法をメモ。
options以下に……
```
        legend: {
          display: true,
          position: 'top',
          labels: {
            generateLabels: (data) => {
              const chartData = data.tooltip._data;
              return chartData.datasets.map(dataset => {
                return {
                  text: dataset.label,
                  fillStyle: dataset.index === 0 ? '#837EE8' : '#65AAF1',
                }
              })
            }
          }
        },
```
　通常はグラフの色がそのまま凡例の色になる？　なのでグラフの色と異なる凡例の色を指定するために、直接上記のように色を指定して対応した。
MkDocsを使用してAzure Static Web Appsに自己紹介サイトをデプロイする

# はじめに
MkDocsは、シンプルで使いやすいドキュメンテーションビルドツール（静的ウェブサイトを構築するためのツール）です。
MkDocsを使用することで、Markdown形式で記述したドキュメントを簡単にHTMLに変換し、静的なウェブサイトとして公開することができます。
最近よく使うので、使い方を簡単に整理しておこうと思います。

本記事では、MkDocsを使用してAzure Static Web Appsに自己紹介サイトをデプロイする手順をステップバイステップで説明します。（デプロイ先はgithub pagesとかでも可）

# ステップ１：MkDocsのインストール
MkDocsをインストールします。Pythonパッケージとして提供されているため、pipを使用してインストールできます。
~~~
pip install mkdocs
~~~

# ステップ２：MkDocsプロジェクトの作成
MkDocsプロジェクトを作成します。新しいディレクトリを作成し、そのディレクトリに移動して以下のコマンドを実行します。
~~~
mkdocs new mydocs
~~~
これにより、"mydocs" という名前の新しいMkDocsプロジェクトが作成されます。

# ステップ３：コンテンツの編集
"mydocs" ディレクトリに移動し、MkDocsの設定ファイルである mkdocs.yml を編集します。このファイルでは、ドキュメントのナビゲーション構造やテーマの設定などを行います。

MkDocsでは、コンテンツはMarkdown形式で記述します。コンテンツファイルは docs ディレクトリ内に作成します。Markdownファイルを追加してコンテンツを記述しましょう。

mkdocs.yml やMarkdown、その他の設定の例は[こちら](https://github.com/atagiy/mydocs)

# ステップ４：ローカルでのプレビュー
以下のコマンドを使用して、ローカルでMkDocsサイトをプレビューします。

~~~
cd mydocs
mkdocs serve
~~~
プレビュー用のローカルサーバーが起動し、MkDocsサイトがブラウザで表示されます。必要に応じて、コンテンツや設定を調整します。

# ステップ５：ビルド
MkDocsサイトをビルドするには、以下のコマンドを実行します。

~~~
mkdocs build
~~~
上記のコマンドを実行すると、ビルドされたHTMLファイルが site ディレクトリに生成されます。このディレクトリ内のファイルをWebサーバーにデプロイすることで、MkDocsサイトを公開できます。

ビルドされたファイルは静的なHTMLファイルであり、必要な場合はCDNや静的ウェブホスティングサービスなどにアップロードして公開することができます。
# ステップ６：Azure Static Web Appsのセットアップ
[Azure Portal](https://azure.microsoft.com/ja-jp/get-started/azure-portal)にログインし、Azure Static Web Appsのセットアップを行います。Azure Portalのメニューから "Static Web Apps" を検索し、新しいインスタンスを作成します。必要な情報を入力し、デプロイするGitHubリポジトリを指定します。

## GitHubリポジトリの設定:
GitHubリポジトリにMkDocsプロジェクトをプッシュします。MkDocsプロジェクトのルートディレクトリに mkdocs.yml が存在することを確認してください。

## Azure Static Web Appsのビルド設定:
Azure Static Web Appsの設定で、ビルドコマンドと出力ディレクトリを設定します。

ビルドコマンド: pip install mkdocs && mkdocs build --clean
出力ディレクトリ: site
デプロイの監視:
Azure Static Web AppsがGitHubリポジトリを監視し、自動的にデプロイを開始します。Azure Portalのデプロイのセクションで進行状況を確認できます。

### デプロイの確認:
デプロイが正常に完了したら、Azure Static Web AppsのURLを使用してデプロイされたMkDocsサイトにアクセスできます。

以上がMkDocsを使用してAzure Static Web Appsにデプロイする手順です。必要に応じて各ステップの詳細をドキュメントやリファレンスから確認してください。
HDF5のfloat16データをJavaScriptで読み込む

# 問題
float16のHDF5データをJavaScriptで読みたいが、各種ライブラリが対応していない。
ネットにも解決法がない。

# 解決法
（雑ですが、ビルド済みのJSに追記します。ソースからの書き換えは適宜読み替えてください。）

以下のHDF5ライブラリに追記します。
https://github.com/usnistgov/h5wasm

```diff_javascript:https://cdn.jsdelivr.net/npm/h5wasm@0.6.0/dist/esm/hdf5_hl.js
import ModuleFactory from './hdf5_util.js';
+ import { Float16Array } from "https://cdn.jsdelivr.net/npm/@petamoriken/float16/+esm";
export var Module; //: H5WasmModule = null;
export var FS = null;

// ――――――――――――――――― 省略 ―――――――――――――――――
// :60行目
    else { // type ==== 1 (float)
        if (size === 8) {
            return Float64Array;
        }
        else if (size === 4) {
            return Float32Array;
        }
+       else if (size === 2){
+           return Float16Array;
+       }
        else {
            throw new Error(`Float${size * 8} not supported`);
        }
    }

// ――――――――――――――――― 省略 ―――――――――――――――――
// :315行目
const TypedArray_to_dtype = new Map([
    ['Uint8Array', '<B'],
    ['Uint16Array', '<H'],
    ['Uint32Array', '<I'],
    ['BigUint64Array', '<Q'],
    ['Int8Array', '<b'],
    ['Int16Array', '<h'],
    ['Int32Array', '<i'],
    ['BigInt64Array', '<q'],
+   ['Float16Array', '<f2'],
    ['Float32Array', '<f'],
    ['Float64Array', '<d'],
]);

// ――――――――――――――――― 省略 ―――――――――――――――――
```
## 解説
そもそも素のJavaScriptはfloat16を扱えないようです。
よって、追加で以下のライブラリを読み込んでいます。
https://github.com/petamoriken/float16/

# 備考
直接は関係ないですが、ローカルのHDF5ファイルを読み込むには以下のissueも参考になります。
https://github.com/usnistgov/h5wasm/issues/43
Rubocopの導入

# Rubocopとは
Rubyの静的コード解析ツールこと。
静的コードってカリキュラムに書いてあるけどよくわからんから、ChatGPT君に小学生でもわかるように以下解説してもらった。
[公式GitHub](https://github.com/rubocop/rubocop)

:::note info
ChatGPT質問
Rubocopについて小学生でもわかるように説明してください。


:::


:::note info

もちろんです！RuboCopは、Rubyプログラムの品質を向上させるためのツールです。ルールベースの静的解析ツールとして知られており、Rubyのコーディング規約に基づいてコードをチェックし、潜在的な問題や一貫性のない部分を見つけることができます。

例えば、小学生が日本語の文章を書く際にもルールがありますよね？同じように、RuboCopはプログラムのコードにもルールを適用します。これにより、コードが読みやすく、保守しやすくなります。

RuboCopを使うと、コードのスタイルや構文エラー、未使用の変数、長いメソッドなど、さまざまな側面で問題を検出することができます。これにより、プログラムの品質を向上させることができます。

小学生がRuboCopを使う場合、まずは先生や保護者のサポートを受けながら、RuboCopの設定や使い方を学ぶ必要があります。RuboCopを使えば、自分の書いたコードをチェックし、改善点を見つけることができます。

RuboCopは、エンジニアやプログラマーがより良いコードを書くための手助けとして広く使われています。ただし、小学生がプログラミングを学ぶ際には、基本的なコーディングスキルを磨くことが重要です。RuboCopは、そのスキルを向上させるためのツールの一つとして利用できます。

RuboCopには多くの設定オプションがありますが、初めは基本的なルールに従ってコードをチェックすることから始めると良いでしょう。コードの品質向上や良いプログラミング習慣を身に付けるために、RuboCopは役立つツールです。

:::
ふむ、簡単に言うと自分の書いたコードをチェックして、改善点を見つけることができるGemのことなんだな！


# Rubocopの導入方法
### 1. Gemfileのgroup :development do〜end内に以下追記する。

```言語:Ruby
group :development do
  gem 'rubocop', require: false #追記
end
```
```言語:ターミナル
% bundle install
% touch .rubocop.yml
```


### 2. .rubocop.ymlの中身を以下に変更する（コピペ推奨）
```言語:Ruby
AllCops:
# 除外するディレクトリ（自動生成されたファイル）
# デフォルト設定にある"vendor/**/*"が無効化されないように記述
 Exclude:
   - "vendor/**/*" # rubocop config/default.yml
   - "db/**/*"
   - "config/**/*"
   - "bin/*"
   - "node_modules/**/*"
   - "Gemfile"


# 1行あたりの文字数をチェックする
Layout/LineLength:
 Max: 130
# 下記ファイルはチェックの対象から外す
 Exclude:
   - "Rakefile"
   - "spec/rails_helper.rb"
   - "spec/spec_helper.rb"

# RSpecは1つのブロックあたりの行数が多くなるため、チェックの除外から外す
# ブロック内の行数をチェックする
Metrics/BlockLength:
 Exclude:
   - "spec/**/*"

# Assignment: 変数への代入
# Branch: メソッド呼び出し
# Condition: 条件文
# 上記項目をRubocopが計算して基準値を超えると警告を出す（上記頭文字をとって'Abc'）
Metrics/AbcSize:
 Max: 50

# メソッドの中身が複雑になっていないか、Rubocopが計算して基準値を超えると警告を出す
Metrics/PerceivedComplexity:
 Max: 8

# 循環的複雑度が高すぎないかをチェック（ifやforなどを1メソッド内で使いすぎている）
Metrics/CyclomaticComplexity:
 Max: 10

# メソッドの行数が多すぎないかをチェック
Metrics/MethodLength:
 Max: 30

# ネストが深すぎないかをチェック（if文のネストもチェック）
Metrics/BlockNesting:
 Max: 5

# クラスの行数をチェック（無効）
Metrics/ClassLength:
 Enabled: false

# 空メソッドの場合に、1行のスタイルにしない　NG例：def style1; end
Style/EmptyMethod:
 EnforcedStyle: expanded

# クラス内にクラスが定義されていないかチェック（無効）
Style/ClassAndModuleChildren:
 Enabled: false

# 日本語でのコメントを許可
Style/AsciiComments:
 Enabled: false

# クラスやモジュール定義前に、それらの説明書きがあるかをチェック（無効）
Style/Documentation:
 Enabled: false

# ％i（）構文を使用していないシンボルで構成される配列リテラルをチェック（無効）
Style/SymbolArray:
 Enabled: false

# 文字列に値が代入されて変わっていないかチェック（無効）
Style/FrozenStringLiteralComment:
 Enabled: false

# メソッドパラメータ名の最小文字数を設定
Naming/MethodParameterName:
 MinNameLength: 1
```


# Rubocopを実行する方法
コードレビュー等を依頼する前に、Rubocopを実行するようにするのがいいね。

```言語:ターミナル
# Rubocopを実行
% bundle exec rubocop

# Rubocopを実行し、check内容を自動修正
% bundle exec rubocop -a
```
OutSystemsのクライアント側のBinary Data型とファイルアップロードについて

# この記事を書いたきっかけ
OutSystemsではファイルアップロードをするのに便利なUploadウィジェットというものが存在します。
このUploadウィジェットはファイルをアップロードするとBinary DataというOutSystems独自の型の変数に保持することができます。
このBinary Dataは一体何者なのか(特にクライアント側)が気になったので調べてみました。
また、ファイルアップロードを行った時の動きも併せて調べてみました。

# 対象読者
ある程度OutSystemsを触ったことがある人

# Binary Data型について結論
- クライアント側 = javascriptで定義された型
- サーバーサイド = C#のバイト配列

サーバーサイドは.net frameworkを使用しているためある程度は予想がついていました。
ここから先は基本クライアント側の話になります。

## どこにどうやって定義されているか
定義ファイルはOutSystemsで管理されているため、Service Studio上では(多分)見ることはできません。
OutSystemsで作られたWebページを開発者ツールを開くことで垣間見ることができます。

## 開発者ツールでの定義場所
「DataType.js」に定義されています。
![開発者ツール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938020/b983ce5c-cbc3-b6bd-fdee-45b3032c5114.png)

## 中身について
TypeScriptをトランスパイルしたと思われるコードが出力されています。
Binary Data型以外にもOutSystemsで使える型の定義が詰まっています
より詳しい中身が見たい方は、OutSystemsのトライアル版を使用してみてください。

## ファイルアップロード時の動きについて
Uploadウィジェットを使用した際のファイルアップロード時の動きは、「開発者ツールでの定義場所」と同じ階層にある「Upload.js」に記載されています。
![Upload.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938020/39fa62ad-5799-1eb0-fcae-ed93faa73230.png)
動作は以下のような感じです。
1. アップロードされたファイルをinputタグのfilesから取得する
2. FileReaderを使用してbase64エンコードされたDataURLを取得する
3. DataURLからバイナリ部分のみを切り取る
4. Binary Data型のコンストラクタにバイナリ部分を渡してインスタンスを生成する
5. 生成したインスタンスをUploadウィジェットに設定した変数に格納する

# 終わりに
以上がBinary Data型とファイルアップロード時の動きになります。
OutSystemsを触る際に少しでも理解の助けになれば幸いです。
Swiftで文字列をファイルに保存する方法

## はじめに

そこで、Swift でファイルに文字列を書き込む方法を知りたいと考えています。 Apple が Foundation フレームワークで簡単な API を提供しているため、Swift で文字列を記述するのは簡単です。 あれば。

あまり話さずに。 このコードをコピーして貼り付けて、動作を確認できます

```swift
import Foundation

print("書き込み開始")
let content = "私の名前はMozzlogです"
do {
    try content.write(toFile: "file.txt", atomically: true, encoding:.utf8)
    print("書き込み終了")
} catch {
    print("エラー: \\(error)")
}
```
以上です。 String をファイルに書き込むには、その `write` メソッドを呼び出すだけです。

## ああ、スナップ！ エラーが発生しました!

まあ、完璧なチュートリアルはありません。 間違いを見つけますか？ クラッシュしますか？

おそらくチュートリアルも廃止されています。 その場合は以下にコメントしてください。 できるだけ早く更新させてください。 どうもありがとうございます！

## 次は何ですか？

このクイック チュートリアルの記事全文は、https://www.mozzlog.com/blog/how-to-write-the-content-of-string-to-a-file-in-swift で読むことができます。

https://www.mozzlog.com/blog で、モバイル、ウェブ、バックエンドについて説明した別の記事を読むこともできます。

## 片言の日本語？

私は日本語を勉強しています。 間違いがあれば修正してください。🙌
Django  立ち上げ時メモ（自分用）

## Djangoを立ち上げる時の自分用メモになります
毎回お気に入りのページに観にいくのがめんどうになったので自分用メモとして残します


## 開発環境
OS:mac
エディタ：vscode


### 仮想環境をつくってactivateさせる
```ターミナル:ターミナル
$ cd /Users/ユーザー名/Downloads/仮想環境用のディレクトリ名
$ python -m venv 仮想環境用のディレクトリ名
$ source 仮想環境用のディレクトリ名/bin/activate
```

### Djangoのインストール
```ターミナル:ターミナル
$ pip install Django==4.1.0
```

### プロジェクトの作成
```ターミナル:ターミナル
$ django-admin startproject プロジェクト名
```
プロジェクトのディレクトリが作成される

### カレントディレクトリを移動
```ターミナル:ターミナル
$ cd プロジェクト名
```

### アプリを追加
```ターミナル:ターミナル
$ python manage.py startapp アプリ名
```

### ページを表示するための準備
```Python:setting.py
import os
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR,'templates')
STATIC_DIR = os.path.join(BASE_DIR,'static')
STATICFILES_DIRS=[
    STATIC_DIR
]
STATIC_URL = 'static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media')

TEMPLATES=[
    (略)
    'DIRS':[TEMPLATE_DIR,],
]

ALLOWED_HOSTS = ['*']
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'アプリ名' #←追加
]
#パスワードハッシュ化の設定
PASSWORD_HASHERS=[
    'django.contrib.auth.hashers.Argon2PasswordHasher',
    'django.contrib.auth.hashers.BCryptSHA256PasswordHasher',
    'django.contrib.auth.hashers.BCryptPasswordHasher',
    'django.contrib.auth.hashers.PBKDF2PasswordHasher',
    'django.contrib.auth.hashers.PBKDF2SHA1PasswordHasher',
]
```
:::note
画像を表示するならプロジェクトのurls.pyにその設定をすることを忘れない
```python:プロジェクトのurls.py
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('store/',include('store.urls')),
]

if settings.DEBUG:
    urlpatterns +=static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
```

:::


### ページを表示
```ターミナル:ターミナル
$ python manage.py runserver
```

以上、必要に応じて追記していきます


続
https://qiita.com/Ryo_Kitamoto/items/4806cf40ee92a29e4507
【Vue.jsについて】2023/07/07作成

# Vue.jsの特徴



　Vue.jsはjavaScriptのフレームワークの一つです。

　メリット　：他のフレームワークより簡単でありながら機能が豊富。
　デメリット：大規模開発に向いていない。

# 基本的な書き方
  ```Veu.js:App.vue
    
    <template>
        //ここに、htmlを書く。
    </template>
    
    <script>
        //ここに、JavaScriptを書く。    
    </script>

    <style>
        //ここに、CSSを書く。
    </stlye>
```
Pythonの文字列で、「( )」で囲まれた内側部分のスペースを削除する


# 修正
「( )」の内部に「(」が含まれているケースに対応できていませんでした。「( )」は最小範囲となるようにコードを修正いたしました。

# 結論
正規表現を使用して、カッコの内部をマッチさせるようにします。そこからさらに内部のスペースを空文字に置換させることでタイトルのことができます。

# サンプルコード
※2重カッコには対応しておりません。あらかじめご了承願います。
```.py
import re

# 文字列のカッコの内部のスペースのみを削除
def remove_spaces_in_parentheses(input_string):
    pattern = r'\(([^())]*)\)'
    result = re.sub(pattern, lambda match: '(' + match.group(1).replace(' ', '') + ')', input_string)
    return result

def main():
    sample_string = '  h o ge  ( ho ge h o ge hoge h o  g  e  ) ho ge   h o g e  (  h o g  e )  )  (   (ho   ge)  ho g   e   '
    result = remove_spaces_in_parentheses(sample_string)
    print(result)

if __name__ == '__main__':
    main()
```

### 結果
```
  h o ge  (hogehogehogehoge) ho ge   h o g e  (hoge)  )  (   (hoge)  ho g   e   
```

以上です。
【初めてのチーム開発】GitHubで必要な初期設定

プログラミングスクール生で、初めてのチーム開発練習に取り組みました。
GitHubの必要な初期設定をあれこれ調べながら行ったため、この記事にまとめておきます。

# 目次
[1.Repositoryにメンバーを招待](#1-Repositoryにメンバーを招待)
[2.Projectsにメンバー追加](#2-Projectsにメンバー追加)
[3.Default_branchをdevelopに変更](#3-Default_branchをdevelopに変更)


#1. Repositoryにメンバーを招待
![スクリーンショット 2023-07-07 2.30.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2662494/e842f8cc-6941-81bb-254f-3fb62710fe68.png)
![スクリーンショット 2023-07-07 2.36.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2662494/1f0f7fbe-b3d3-a49c-d876-770975d29a98.png)

1) 対象リポジトリに移動・確認
2) Settings
3) Collaboratorsを選択（後、GitHubパスワードを入力）
4) 緑の「Add people」を押すと、ポップアップが出る
5) 検索フォームにメンバーのusername, full name, emailのいずれかを入力
6) 緑の決定ボタン



#2. Projectsにメンバー追加

まず、[Project boardを作っておく](https://docs.github.com/ja/github-ae@latest/issues/organizing-your-work-with-project-boards/managing-project-boards/creating-a-project-board)。

![スクリーンショット 2023-07-07 1.50.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2662494/701a9c46-b802-67da-97bc-415817b13db1.png)

1)Project boardに移動・確認
2) 「…」を開く
3) Settingsを選択

![スクリーンショット 2023-07-07 2.17.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2662494/644c62fa-3f98-1295-1810-e59bb208e0c2.png)

1) Manage accessに変更
2) Invite collaboratorsにUsernameを入力
3) Admin, Write, Readから権限を選ぶ
4) 緑のInviteで決定




#3. Default_branchをdevelopに変更
[チーム開発でGit-flowを選択](https://qiita.com/KosukeSone/items/514dd24828b485c69a05)しましたが、main branchではなくdevelop branchにmergeすることが大半です。
間違えてmain branchにプルリクを投げてしまう事故を回避するため、デフォルトをdevelop branchに変更します。
まず、develop branchを切り、GitHubにpushしておく。
![スクリーンショット 2023-07-07 1.29.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2662494/89ad7c5a-7b13-a691-0bbd-5e898fd73c18.png)

1) 対象リポジトリに移動・確認
2) Settingsを選択
3) Default branchの下の
4) 「⇄」をクリックすると、上にポップアップが出る
5) mainが初期設定なので
6) developに変更
7) Updateボタンで決定


以上の3つが、初めてチーム開発を行った時に必要な設定でした。

初めてチーム開発をする方のお役に立てれば幸いです。
もしまた必要な設定が見つかれば追記していきます。
Salesforceの使い捨てできる環境を作る

Salesforceでなにか試したいとき、実験用に作って終わったら削除するような環境が欲しいときがある。
スクラッチ組織でやればいいけど、それをやるにももとになるDevHub組織が必要になる。

そんなときTrailhead Playgroundを使えばよさそうだったので手順をまとめておく。

# 事前準備

このあたりを参考に、Trailheadの登録を済ませておく。

[Trailhead と Trailblazer Community をはじめる 単元 | Salesforce Trailhead](https://trailhead.salesforce.com/ja/content/learn/modules/trailhead_basics/get-started-with-trailhead)

# Trailheadのハンズオン組織でPlaygroundを作る

1. [Trailhead](https://trailhead.salesforce.com/)にアクセス > ページ右上のアバターアイコン > [ハンズオン組織](https://trailhead.salesforce.com/ja/users/profiles/orgs) を開く
2. 「Playground を作成」をクリック
3. Playground作成ダイアログが表示されるので「作成」をクリック
4. 作成中になるのでしばらく待つ
5. 作成できたら、Playgroundの「起動」をクリック

# Playgroundにパスワードでログインできるように設定する

1. Playgroundの「ログイン情報を取得する」タブを開く
2. 「パスワードをリセットする」をクリック
3. リセットメールが届くので記載のURLにアクセス
4. ページの指示に従ってパスワードを設定

ユーザー名とパスワードとドメインを控えておく。
ドメインは 設定 > 私のドメイン > 現在の 私のドメイン の URL で 確認できる。

# Playgroundをsfコマンドで認証

ドメインの前に`https://`をつけたものがインスタンスURLになる。

1. `sf org login web --instance-url [インスタンスURL] --alias playground --set-default-dev-hub`
2. ブラウザでログイン画面が開くのでユーザー名とパスワードを入力

あとはいつもどおり、Dev Hubを有効化したりスクラッチ組織を作ったりできる。

# Playgroundの削除

1. [ハンズオン組織](https://trailhead.salesforce.com/ja/users/profiles/orgs)を開く
2. 接続済み組織の一覧から削除したいPlaygroundの「切断」をクリック
    - 接続済み組織が残りひとつだと切断できないので注意
LT 台本　色使い（JIS安全色） Qiita Engineer Festa 2023〜私しか得しないニッチな技術でLT〜

こんばんは　kaizen_nagoya こと　おがわ　きよし　です。　

色使い　に　ついて　しょうかい　します。　




みることは信じることだといいます。seeing is believing
自分が見えているものと、ほかのひとが見えているものが同じものだと思い込んでしまいます。　
真実は無限個あるのです。

しきかくの数が　
０　
１　
２　
３　
４　
の５種類について検討します。

色覚の数によって、見え方が違うことを想像できますか。

３色覚でも、色覚のはんのうできる周波数分布にかたよりがあることをご存知でしょうか。

色覚の数と分布が、一人一人で違うことを想像できますか。

安全分析の国際規格であるHAZOPの使い方を紹介する冊子「ちょけねこ　たんじょうびのおくりもの」を、見え方に配慮した色使いにしました。　

SWESTのポスターでシルバー賞をいただきました。

２０個ほど、ポスタ発表している中で、はじめてのことです。

参加者の方から、実はという話とか、色覚の多様性を製品にどのように活かしているかというお話をお聞きできました。ありがとうございました。　


「ちょけねこ　たんじょうびのおくりもの」

では、仕事場にあった色弱模擬フィルタ「バリアントール」を利用したり、　
各社、各ソフトウェアの色調整機能を利用して検討しました。

今回の発表の参考文献で、人生で影響を受けた本100冊。の５冊を崩壊します。　

確率論及統計論　伏見 康治　は、データを取り、確率で考えるという、多様性社会に必須な理論を鍛える本です。
色彩の美学　塚田敢 は、JIS安全色の参考文献です。
プロセス改善ナビゲーションガイド　ベストプラクティス編　情報処理推進機構ソフトウェアエンジニアリングセンター　は、NASAが取り組んだ技術をJISAが再確認し、自動車業界への展開を依頼された内容を紹介しています。
ちょけねこ　たんじょうび　の　おくりもの　ちょけむさ　は、色使いの例です。
権利のための闘争　イェーリング　は、公序良俗の参考文献です。

公序良俗
民法　
商法　
法例
における公序良俗について紹介し、　
多様性はデータを取って確認し、確率論で設計するのがよいという話の、法律的な根拠でもあります。

自己紹介

５さい　の　ころ　から　かぎょう　の　いんさつやで、　校正　の　おしごと　や、ひらがなの　かつじ　かいしをしていました。　

１０さい　の　ころ　から　くらいえばかりかくので、おやが　しんぱいし　たんにんの　びじゅつのせんせいにそうだんんし、あぶらえをならいにいっていました。

１５さい　の　ころ　から　こうこうの　ほうそうぶで、　インタビューをしに、外にでまわっていました。　

２０さいの　ころに、　８ビットパソコンがでまわり、人にかりて、ゲームのうちこみをしていました。　


色使い(JIS安全色)　 Qiita Engineer Festa 2023〜私しか得しないニッチな技術でLT〜

https://qiita.com/kaizen_nagoya/items/d37f8c7a23cd5fd426e6


"Happy" BUMP OF CHICKEN が　プログラムである１０の論点

https://qiita.com/kaizen_nagoya/items/2c24905401edf6f89d86

 ＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
This article is an individual impression based on the individual's experience. It has nothing to do with the organization or business to which I currently belong. 

# 文書履歴(document history)
ver. 0.01 初稿　20230708

### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

####  Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
【Android】GoogleMapでマップの動き終わりを検知する【Kotlin】

# はじめに
今回はGoogleMapが実装されているアプリ内でマップの動き終わり時にマップの中心点の緯度経度を表示しようと思います。
やろうと思ったきっかけは　同じことをしようとした時に　onCameraMoveメソッドを使って　「カメラが動いた時」に処理をした所　カメラが動く度に処理を行い 処理が多くなりすぎたのか、マップの移動がカクついてしまいました。
そこで　もっと適切なやり方があるのではないかと調べていた中で、直接的に動き終わりを使った内容のものがなかったので、備忘録として記事に残しておこうということです。

# 実践
使用したクラスは　**onCameraIdle**でGoogleMapを使用したクラス内で**OnCameraIdleListener** を継承したクラスならovverideで呼び出すことができます。

```
override fun onCameraIdle() {
　　　　　　　// やりたい処理
}
```
これでマップが動き終わった後の中心点などを負荷を少なくして取得できるようになります。

# 参考
https://qiita.com/amay077/items/2b13c915183fa500e430

https://developers.google.com/android/reference/com/google/android/gms/maps/GoogleMap.OnCameraIdleListener
Google マテリアルデザインとは

## はじめに
Googleマテリアルデザインについて学んだので、まとめていきます。

## 概要
以下のサイトを参考にしながら、書いていきます。
https://tayori.com/blog/material-design/

## Googleマテリアルデザインとは
ChatGPTを使用して、聞いてみました。
>Googleマテリアルデザインは、Googleが開発したデザインシステムです。このデザインシステムは、ユーザーインターフェース（UI）やユーザーエクスペリエンス（UX）の設計に適用され、一貫性のあるデザインと使いやすさを提供することを目的としています。

>Googleマテリアルデザインは、フラットで洗練された外観、シャドウや光の効果、視覚的な要素の階層化などの特徴を持っています。また、カラーパレット、アイコン、フォント、レイアウトのガイドラインなども含まれており、デザイナーや開発者が一貫性のあるデザインを実現するためのリソースとして利用できます。

>Googleマテリアルデザインは、Webアプリケーション、モバイルアプリケーション、デスクトップアプリケーションなど、さまざまなプラットフォームで使用されています。また、Google自身の製品やサービスにも広く採用されており、多くのユーザーに馴染みのあるデザインスタイルとなっています。

>Googleマテリアルデザインの目標は、シンプルで直感的なインターフェースを提供し、ユーザーが情報を理解しやすく、効率的に操作できる環境を作り出すことです。

要約すると、Googleマテリアルデザインとは、Googleが開発したデザインシステムで、ユーザー体験をよくするための、法則みたいなものだと思っていればいいかなと思います。

## マテリアルデザインの5つの特徴
マテリアルデザインには、5つの特徴があります。

①現実世界の物理的法則を取り入れる
②紙とインクの要素で組み立てる
③色の数を少なく配色する
④影を活用して立体感を作る
⑤連続性のあるアニメーション

### ①現実世界の物理的法則を取り入れる
これは、現実世界で多く見られる動きの法則(物体に対しての影や重力など)を意識して、開発を進めるべきということです。そうすることで、ユーザー体験の向上が期待できるということです。

### ②紙とインクの要素で組み立てる
これは、画面のデザインを紙に書いてみても、変な見た目にならないようなデザインをすべきということです。
そうすることで、ユーザーが画面の情報を的確に得ることができるそうです。

### ③色の数を少なく配色する
Googleマテリアルデザインでは、有彩色4色(赤、青、緑など)に加え、無彩色3色(白、黒、グレー)を使って、画面を組み立てることが推奨されています。
そうすると、画面の見やすさが向上し、ユーザー体験が向上するということです。

### ④影を活用して立体感を作る
これは、要素に影を活用することで、画面に立体感を生むことが推奨されています。
その影もむやみに使用するのではなく、先ほどもあった、現実世界と同じ法則で影をつけることが推奨されています。

### ⑤連続性のあるアニメーション
アニメーションは、連続させるように使用しましょうということです。
自分の操作が画面にどんな影響を与えたのか、アニメーションで表現することで、ユーザーは自分がどんな操作をしたのかが、わかりやすくなり、ストレスが少なくなります。

## 配色を考えるのがめんどくさい方におすすめのツール
以下は、「colormind」というツールで、AIが自動的に相性の良い配色(5色)を選んでくれるツールになります。
実際のサイトの使い方を見ていきます。
http://colormind.io/bootstrap/

下のCSSのカードは、要素に影をつけるものです。これ使えば、いい感じに影がつきます。
```
box-shadow: 0 16px 13px -12px rgba(0, 0, 0, -19.44), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
```

## マテリアルデザインを使うメリット、デメリット
### メリット
メリットとしては画面を見た時のわかりやすさが1番大きいと思います。
現実世界の物理法則に則って設計されているので、複雑な操作は少なく、かつ配色も抑えられれているので、シンプルなデザインでサイトの見やすさに繋がります。

### デメリット
マテリアルデザインを取り入れることで生じるデメリットは特にないと感じます。強いて言うなら、参考にさせていただいたサイトにもある通り、パターンやコツを覚えるコストがあるという点です。

## 参考になるサイト
基本的にGoogle社のWebサイトやサービスはマテリアルデザインが採用されています。Google MapsやGoogle Chromeなどを見ていただければ、よくわかると思います。
![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/b729bcad-aa8c-7d7d-d819-6e76f5a536c5.jpeg)


## 最後に
他にも記事を書いているので、良ければ見ていってください。

[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)
MicroCMSのリッチエディタに満足できない人のための黒魔術

# MicroCMSのリッチエディタでもHTMLが使いたい！
## 背景
### 便利なリッチエディタ
MicroCMSのリッチエディタは、Markdownっぽい入力をに対応してるWYSIWYGエディタです。MicroCMSのAPIがいい感じのHTMLに変換して渡くれるので、サイトにへの反映も非常に簡単です(`setHTML`するだけ)。加えて、独自のカスタムクラス(CSSのクラスのことです)を設定できるため、ある程度柔軟にレイアウトを構築することも可能です。**これがあれば簡単にブログを作れそうですね！**

### でも…！
残念なことにリッチエディタではHTMLを用いた入力はできません。入力できるように見えて、APIから返却されたJSONを見てみるとしっかりと記号がエスケープ処理されています。Wordpressのようにリッチエディタからテキストエディタに切り替えることもできません。MicroCMSでもテキストエリアを使えば、HTMLの記述は可能ですがリッチエディタの外部連携機能や書きやすさは失われてしまいます。**私はリッチエディタとHTMLを合わせて柔軟なデザインのページを作りたい…！**

## 本題
~~**そもそもCMSで管理しているコンテンツをHTMLで記述するべきではないという指摘は一旦置いとくとして**~~ MicroCMSでリッチエディタを使いつつ、柔軟なHTML構成を実現することは可能なのでしょうか？アンサーは**可能**です。だいぶ面倒な上、UI的にも見やすいとは決して言えないため、おすすめはできませんが必要になる場面はあるかもしれません。

### 基本的な方法
https://blog.microcms.io/input-richeditor-and-html/

基本的な方法は上記に書かれているため、説明を省きます。

### でもこれだとリッチエディタで入力した箇所をタグで囲ったりできないよ？
リッチエディタで入力した内容を任意のタグで囲いたい場合も考えられますが、上記のサンプルのように並べて、それぞれを`setHTML`するだけではリッチエディタを囲えません。ということでもうちょっとハックしてみましょう。

### 裏技
テキストエディタにタグの片方だけ書いて、その後にリッチエディタ、最後にテキストエディタで閉じタグといった具合に並べることで、リッチエディタとHTMLを組み合わせることができます。

```markdown
`###`は繰り返しフィールドの各入力欄の区切りです

###HTML1
<div>
###

###リッチエディタ
# RichEditor
###

###HTML2
</div>
###
```

<details><summary>実際のレスポンスの一部</summary>

```json
"contents": {
        "fieldId": "htmlable",
        "contents": [
            {
                "fieldId": "html",
                "content": "<div>"
            },
            {
                "fieldId": "rich-editor",
                "content": "<h1 id=\"hfa93e1f6fd\">Hoge</h1>"
            },
            {
                "fieldId": "html",
                "content": "<h2>Fuga</h2>"
            },
            {
                "fieldId": "rich-editor",
                "content": "<h3 id=\"h6f46734047\">Piyo</h3>"
            },
            {
                "fieldId": "html",
                "content": "<h4>HogeFuga</h4>"
            },
            {
                "fieldId": "rich-editor",
                "content": "<h5 id=\"he9ae6ecc7e\">FugaPiyo</h5>"
            },
            {
                "fieldId": "html",
                "content": "<h6>PiyoHoge</h6>"
            },
            {
                "fieldId": "rich-editor",
                "content": "<p>HogeFugaPiyo</p>"
            },
            {
                "fieldId": "html",
                "content": "</div>"
            }
        ]
    }

```

</details>

あとはレスポンスの文字列を結合して、Astroの`set:html`やReactの`dangerouslySetInnerHTML`で埋め込めばいいだけです。2枚目の画像を見るとちゃんとエディタを跨いで`div`で覆えていることがわかります。

![____________________________2023-07-03_21.24.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591669/be046489-8ca2-ab08-be33-5adaed9c732c.png)
![____________________________2023-07-03_21.24.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591669/68af360e-fe59-c419-6bb4-1e7f9ed7c9fa.png)
※idが付加されている部分がリッチエディタで記述した部分です。

## 最後に
以上がMicroCMSのリッチエディタを拡張(?)する方法です。個人的にはCMSで管理するなら制約は強めの方がいいと思っているので、この方法を実際の案件で利用することは避けたいです… ただ意外とやろうとおもばできることは勉強になりました。
Google App Script でVoice API (TTS) を使う


# はじめに
お客様から「メール不可の受信相手にテキスト内容を電話(音声)で伝えたい。または相手の営業時間内にテキスト内容を電話(音声)で伝えたい。」要件を実現するため、GASからVonage APIの使い方についてお問合せ頂いた際の簡単なサンプルコードをご参考までに共有させて頂きます。

# 概要
Vonageの公開[ドキュメント](https://developer.vonage.com/en/documentation)ではGASサポートについて触れていませんが、REST APIにて [Vonage NCCO](https://developer.vonage.com/en/voice/voice-api/ncco-reference?source=voice)をパラメータにしてコールすれば問題なく動作します。ここではVoice APIを使ったTTS機能の事例をご説明します。

## 実現手順

- [Communications APIs Login](https://www.vonage.nz/log-in/#api)よりAPIアカウントを作成
- アカウントより[Customer Dashboard](https://dashboard.nexmo.com/)にログインし、左側ナビゲーションメニューからApplicationをクリックし、Voice Applicationを作成
- ApplicationのPublic Keyを生成し、private.keyファイルをローカルに保存する
- Vonage Voice API 認証用 JWTを生成
- GASコードを作成 

以下、詳細コマンド、またはGAS コードサンプルです：

1. 上記、作成したVoice Application IDを指定し、JWTを生成スクリプトを定義し、実行します。
```shell
#!/bin/bash
PATH_TO_PRIVATE_KEY=$(pwd)/private.key
NEXMO_APPLICATION_ID=40941d20-ac86-404d-9501-b0996cf8616b
export JWT=$(nexmo jwt:generate $PATH_TO_PRIVATE_KEY application_id=$NEXMO_APPLICATION_ID)
echo $JWT
```

2. 上記JWT、To/From番号と、GASのPayload変数を定義し、コードを実行します。

```Google App Script
function callVonageAPI() {
  var url = 'https://api.nexmo.com/v1/calls';
  var TO_NUMBER = 'to_number'; // Replace with the actual phone number
  var VONAGE_NUMBER = 'from_number'; // Replace with the actual Vonage number
  var JWT = 'your_jwt'; // Replace with your actual JWT
  
  var data = {
    "to": [{
      "type": "phone",
      "number": TO_NUMBER
    }],
    "from": {
      "type": "phone",
      "number": VONAGE_NUMBER
    },
    "ncco": [{
      "action": "talk",
      "text": "もしもし、お休みの連絡です。熱がありますのでお休みします。よろしくお願いします。",
      "language": "ja-JP",
      "style": 2
    }]
  };
  
  var options = {
    'method' : 'post',
    'headers': {
      'Authorization': 'Bearer ' + JWT,
      'Content-Type': 'application/json'
    },
    'payload' : JSON.stringify(data)
  };

  var response = UrlFetchApp.fetch(url, options);
  Logger.log(response.getContentText());
```

## 参考記事
https://developer.vonage.com/en/voice/voice-api/code-snippets/making-calls/make-an-outbound-call-with-ncco
Laravel Aws 環境でRefererを取得できない時の対処

## 環境

- PHP
- Laravel
- EC2
- CloudFront

## 対象のコード

```php
$this->request->headers->get('referer');
```

`null` になってしまう。

## 原因

CloudFrontの設定でヘッダーにRefererが含まれていなかった。

https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html

![ScreenShot 2023-07-07 17.17.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/d2085f4a-375c-eef6-13a1-6c4e11f262ea.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/b7ee6982-8179-1497-0d43-c976508897ae.png)

## 対策

Referer にチェックを入れると取得できた。
めでたしめでたし。
タスクを効率的に管理するためのGitの使い方：git revert、git reset --hard、そして.gitignoreを活用しよう！


この記事では、初めてのチーム開発でGitを使ってタスクをこなすシーンを通じて、`git revert`、`git reset --hard`コマンド、そして`.gitignore`の使用方法をまとめました。

**【シナリオ】**

タカノリくんは、仮想通貨の取引を行うWebアプリケーションを開発するプロジェクトチームに参加しています。今日から彼は、新たな機能の開発に取り組みます。開発する機能は"ユーザープロフィール表示"です。

**STEP 1: git revertを使って最新のコミットを元に戻す**

タカノリくんは新機能の開発中、誤ってバグを導入してしまうコミットをしてしまいました。彼はこの問題を修正するために、`git revert`コマンドを使います。

```bash
$ git revert HEAD
```

ここで`HEAD`は現在のブランチの最新のコミットを指しています。したがって、`git revert HEAD`とすると、最新のコミットが元に戻され、バグが修正されます。なお、特定のコミットを元に戻したい場合には、`HEAD`の代わりにそのコミットのハッシュを指定します。

`git revert`は新しいコミットを作成して変更を反転させるため、コミット履歴は維持されます。

**STEP 2: git reset --hardを使ってコミットを削除する**

次に、タカノリくんは誤ってプロジェクトに関係ないファイルを追加するコミットをしてしまいました。彼はこの問題を修正するために、`git reset --hard`コマンドを使います。

```bash
$ git reset --hard HEAD~1
```

ここで`HEAD~1`は現在のブランチの一つ前のコミットを指しています。したがって、`git reset --hard HEAD~1`とすると、最新のコミットが削除され、前のコミットの状態に戻ります。なお、特定のコミットまで戻したい場合には、`HEAD~1`の代わりにそのコミットのハッシュを指定します。

`git reset --hard`は非常に強力なコマンドなので、使用する際には注意が必要です。

**STEP 3: .gitignoreを使って特定のファイルを無視する**

タカノリくんは開発中にテストデータやログ、設定ファイルなど、Gitで追跡したくないファイルを作成します。彼はこれらのファイルをGitの管理対象から除外するために、`.gitignore`ファイルを使います。

```bash
$ echo "log/*" >> .gitignore
$ echo "config.ini" >> .gitignore
```

これにより、`log/`ディレクトリと`config.ini`ファイルはGitの管理対象から除外されます。`.gitignore`はプロジェクト内の特定のファイルやディレクトリをGitの管理から除外するための重要なツールです。

**まとめ**

`git revert`、`git reset --hard`、そして`.gitignore`は、開発作業を効率的に進めるための重要なツールです。適切に使用することで、エラーの修正、不要なファイルの管理からの除外など、様々なタスクを効率的にこなすことができます。ただし、特に`git reset --hard`は非常に強力なコマンドなので、使用する際には慎重さが求められます。
Nuxt3入門 ~周辺環境を整える~


## はじめに

Nuxt3を触ろうと思い、その内容をまとめていきます。
今回は下記ツールのインストールの手順についてまとめます。

- TypeScript
- ESLint
- TailwindCSS

前回のNuxt3のインストールの方法についてまとめた記事はこちらです。

https://qiita.com/fussy113/items/d5a64049f9113d5b3148

## ツールのインストール

### TypeScript

Nuxt3ではTypeScriptがデフォルトでサポートされています。
CLIで型チェックを行うことができます。

`npx nuxi typecheck`

しかし、デフォルトの設定では、`nuxt dev`などの開発環境を立ち上げている時には型チェックされません(buildの速度などを優先している)

開発中に型チェックを行いたい場合は、設定を変更することで実現できます。

- 必要なパッケージをインストールする

```shell
pnpm install typescript vue-tsc --save-dev
```

- `nuxt.config.ts`に開発時の型チェックを有効にする設定を記述する

```typescript:nuxt.config.ts
export default defineNuxtConfig({
  typescript: {
    typeCheck: true
  }
})
```

これにより、開発環境を立ち上げ、buildされた時も型チェックがされるようになります。
(当然ながらbuildのスピードが落ちるので、offにして適宜CLIで実行するか、どっちかは好みで決めるのが良いと思います)

### ESLint

ESLintの設定については、パッケージをインストールすることで可能です。

```shell
pnpm i eslint @nuxtjs/eslint-config-typescript --save-dev
```

```cjs:.eslintrc.cjs
module.exports = {
  root: true,
  extends: ['@nuxtjs/eslint-config-typescript']
}
```

VSCodeを利用している場合は、ESLintの拡張機能を使って、保存時に自動でフォーマットされるように設定しておくとよさそうです。

```json:.vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true
  }
}
```

なお、Nuxt3では、Prettier との並行の利用は現時点では推奨していないようです。

https://nuxt.com/docs/community/contribution#no-prettier

ESLintの`--fix`オプションを使うようにして、プロジェクトではPrettierを無効にするように記載されています。
(Prettierを有効にするかどうかについても、議論中のようです。あまり動いていない気もしますが...)

### おわりに

段々周辺環境が整ってきました。
TailwindCSS、Storybookの導入部分を次は試して、次記事にまとめられたらと思います。