OmniAICreator/Qiita-1.07M huggingface dataset:
【AtCoder】緑色になるまでにやったこと【必要なスキル・目安】

## 記事の内容
- 筆者が競技プログラミングサイト [AtCoder](https://atcoder.jp/?lang=ja) で緑色になる（入緑）までにやったことを紹介します
- 緑色の目安（レベル感）を述べます
- 緑色になるために必要なスキルを挙げます

プログラミング言語は C++ を想定していますが、異なる言語でも通用する内容です。

## 緑色の目安
まず、AtCoder で緑色になるための目安を示します。
以下の 2 点を継続的に達成しており、AtCoder Beginner Contest (ABC) にほぼ毎回参加していれば、初参加から半年ほどで緑色になるはずです。

- ABC において、A 問題から C 問題までを 20 分以内に AC できる
- ABC において、ときどき D 問題もしくは E 問題をコンテスト時間内に AC できる
    - 5、6 回に 1 回くらいのペース

## 緑色になるために必要なスキル
AtCoder で緑色になるために必要なスキルのうち、優先度が高いもの挙げます。
これらをおおよそ理解しておけば、ほとんどの ABC において、A 問題から C 問題までを 20 分以内に AC できます。

プログラミング言語は C++ を想定していますが、異なる言語でも同様のライブラリやデータ構造があります。

**プログラミング言語・データ構造など**
- プログラミング言語の基本的な文法
- データ型 (`int`、`long long int`、`char`、`string`、`bool`)
- 文字列の扱い方
- `vector` の使い方
    - `stack` としての使い方
- イテレータの扱い方
- `sort()`、`min()`、`max()` の使い方
- `pair` 型の扱い方
- `set` (`unordered_set`) の使い方
- `map` (`unordered_map`) の使い方
- `queue` (`priority_queue`) の使い方

**アルゴリズム**
- 計算量の見積もり
- 単純な全探索
- bit 全探索
    - ビット演算
- 順列全探索
    - `next_permutation` の使い方
- 二分探索
    - `lower_bound`、`upper_bound` の使い方
- 幅優先探索
    - `queue` の使い方
- 深さ優先探索（再帰関数）
- 再帰関数
    - メモ化再帰
- 累積和
- しゃくとり法
- ダイクストラ法
    - `priority_queue` の使い方

ABC において、C 問題までは `vector`、`set` (`unordered_set`)、`map` (`unordered_map`) などを上手く使うだけで解ける問題も多いので、データ構造やライブラリを知っておくことは重要です。知らなければ、そもそも解法を思いつけないこともあります。

bit 全探索、幅優先探索、ダイクストラ法など、最初は混乱するかもしれませんが、一度覚えてしまえば難しくないです。ある程度の量の問題を解けば、考えなくてもスラスラ書けるようになります。仕組み自体は難しくないので、慣れることが大事です。

## 緑色になるために知っておくとよいスキル
AtCoder で緑色になるために知っておくとよいスキルを挙げます。
知らないと緑色になれないとまでは言えませんが、以下に挙げたことの基本的な部分を知っていると楽です。
これらをおおよそ理解しておけば、ABC において、D 問題や E 問題を解けることが増えます。

- 中学・高校レベルの数学
    - 場合の数など
- `tuple` 型の扱い方
- Union-Find
- いもす法
- ワーシャルフロイド法
- クラスカル法
- $\text{mod}$ 関連
    - べき乗、逆元

Union-Find は簡単で便利です。コードを見れば、何が起きているのか理解できますし、すぐに習得できます。

いもす法は発展的なパターンは難しいですが、基本的なパターンは習得できます。

ワーシャルフロイド法とクラスカル法はダイクストラ法などと同様に、最初は混乱するかもしれませんが、一度覚えてしまえば難しくないです。仕組み自体は難しくないので、慣れることが大事です。

$\text{mod}$ 関連は完全に理解はしていなくても、べき乗や逆元を求めるコードを準備しておくとよいです。

## 緑色になるために必ずしも知らなくてよいスキル
AtCoder で緑色になるために必ずしも知らなくてよいスキルを挙げます。
無論、緑色になったあとには必要になるので、知っているに越したことはですが、難しければ現時点では習得していなくても緑色になれるという意味です。

- 動的計画法
- コンテスト中にコピー&ペーストするための自作ライブラリ
- コードを省略するための記法
- AtCoder Library (ACL)

動的計画法は今後のために知っておくべきですが、仮に動的計画法を使う問題を 1 問も解けなかったとしても、緑色になれます。実際、筆者は緑色になるまでに、コンテスト中に一度も動的計画法を使う問題を解いていません。
動的計画法はさまざまなパターンがあり、難しいです。少しずつ習得するのがよいと思います。

コンテスト中にコピー&ペーストするための自作ライブラリやコードを省略するための記法は使わなくても緑色になれます。

AtCoder Library (ACL) は使わなくても緑色になれます。

## 緑色になるまでにやったこと
AtCoder で緑色になるまでに、筆者が実際にやったことを紹介します。

以下の記事に掲載されている記事をすべて読み、例示されている過去問をすべて解きました。
例示されている過去問は計 180 問ほどあります。

https://qiita.com/e869120/items/eb50fdaece12be418faa

このほかには、特に何もしていません。
【Vue.js】単一ファイルコンポーネント（SFC）

## はじめに
Vue.jsのチュートリアルで学んだことをアウトプットしていきます。

## 概要
### 単一ファイルコンポーネント（SFC）とは
Vueコンポーネントのテンプレート、ロジック、スタイルを1つのファイルに[カプセル化](https://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%97%E3%82%BB%E3%83%AB%E5%8C%96)できるコンポーネントの形式（拡張子は```.vue```）

## SFCの書き方
OptionAPIとCompositionAPIの違いについては[こちら](https://qiita.com/k12da/items/0aa53609f53eab3f55e9)
### SFC(Options API)
```vuejs
<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>
```

### SFC(Composition API)
```vuejs
<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>
```

```<script setup>```と記述することで、CompositionAPIで書ける。

## SFCのメリットとデメリット
### メリット
HTML、CSS、JSが同じファイルにまとまるので、機能ごとにコンポーネントを分割して保守・管理しやすい。

### デメリット
**関心の分離**がうまくできず、コードの重複・複雑化が起こりやすい
→デザインとロジックをひとまとめにしているので、「デザインのみ（ロジックのみ）再利用したい時はどうするか？」といった問題が発生する。

## まとめ
単一ファイルコンポーネント（SFC）は、テンプレート(template)、ロジック(script)、スタイル(style)を一つのファイルで管理できる。

## 参考記事
[単一ファイルコンポーネント](https://ja.vuejs.org/guide/scaling-up/sfc.html)
[Tutorial(Vue.js)](https://ja.vuejs.org/tutorial/#step-1)
[SFC(単一ファイルコンポーネント)とは？【Vue.js公式パートナーが解説】](https://jp.skilled.yashio-corp.com/media/vue/5828/)
なぜ私はIT業界に？

記事を書いた日：2024/6/16

**「あなたはなぜIT業界を志望されたのですか？」**

就職・転職活動での定番フレーズの一つであるこの問い。
なぜあなたは生きているのですか？って聞かれるのと同じくらい回答が難しいですよね。

IT技術（DX）が広がった世界に憧れを持っており、それを自分で作りたいからです！
辺りが一般的な回答になるかと思います。（具体的な技術を言えるとなお良し）

この哲学とも思える質問に関しての私の回答を共有します。

# 私がIT業界を志望した理由
## 結論
**「安定したキャリアを積みたいと思ったから」** です。

## 背景
高校は普通科で、大学で情報系の学科に進学しました。
大学生活の中で映像制作に興味を持ち、映像に関する学習をしていたのもあり、
新卒就活の先としてテレビ業界に就職しました。

そして、色々あって退職しました。

ほぼ何のキャリアも無く、早期退職をした人材になったのです。
当時私はこの現実に絶望していました。
生きるか死ぬかの選択も頭によぎっていました。

しかし、私は生きることを選択しました。
ITという世界が残っていることに気付いたからです。

**「長く生き残ることができるキャリアを積みたい」**
これが、あなたはなぜIT業界を志望されたのですか？
への私の回答となりました。

## もう少し具体的に
面接でのやり取り風にもう少しだけ深堀りした回答を書きます。

**Q. IT以外の業界は考えなかったのですか？
A. 映像は趣味として続けるで良いと考え、
　 大学で学んだ知見を活かすためにIT業界を志望しました。**

**Q. ITにも色々ありますが、なぜインフラエンジニアに？
A. まずはエンジニアとして現場の現実を知りたいと考えました。
　 最終的にはフルスタックの知見を身に付けたいとも思っています。
　 なので、まずは基盤となるインフラ部分から入りたいです。**

**Q. 残業などもありますが、大丈夫ですか？
A. 週2日ペースで24時間働いていた経験があるので大丈夫です！**

記憶にあるよく聞かれた追加質問はこんな感じだったと思います。
これらの回答は私のオリジナル背景が前提となっていますが、
似たような背景をお持ちの方は参考にしていただけると幸いです。

最後に、私の今後のキャリアビジョンについても共有します。

## 今後のキャリアビジョン
前述の流れで私は今インフラエンジニアとして生きています。
１年半前頃にAWSというクラウド技術を知り、これマジやばくない！？
というノリで興味を持ち、現場もAWSに関するところに移動しました。

2024年4月時点でのAWS資格を全て取得したので、
これからはAzureやGoogle Cloudを学習してマルチクラウドの知見を得たり、
クラウドに関する実用的な技術の習得やそれらの発信活動を頑張りたいです。

また、開発系の技術も得たいし、ITコンサルタントになってキラキラしたいなとか、
やりたいことが多すぎて困り始めています。

**時間（若さ）は有限である。世界の技術は進み続けている。**
といった現実と向き合いながら、**「生き残る」** をキーワードに
これからもキャリアを積んでいきます。

いきるってたいへんだぁ～
SIerシステムエンジニアからソフトウェアエンジニアを目指す理由

## 自己紹介

はじめまして、Naotoです！

現在はSIerでシステムエンジニア(SE)として働いています。

将来的にはソフトウェアエンジニア（フロントエンド）として働きたいと考えており、日々学習中です。

## ソフトウェアエンジニアを目指す理由
私がソフトウェアエンジニアを目指す理由について、お伝えします。（ちょっと長くなります。。）

### きっかけ
幼少期からPCやiPhone等のソフトウェアを触ることに楽しさを感じるタイプだった私は、大学3年の頃、プログラミングに興味を持ち、HTMLやCSSを学び始めました。

そして、就活時期だったこともあり、学習を進めると同時に「エンジニアになりたい！」という思いも強くなっていきました。
（Youtubeで「ソフトウェアエンジニアの1日」みたいな動画を見て、憧れを抱いていました。笑）
↓こんな感じの動画

https://www.youtube.com/watch?v=bUCdCxaF1EU&list=PLdWTmEF6jFdb89D3i8HDMopyonCOrWLs4

### 就活開始
そして就活開始。

私は「ソフトウェアエンジニアになるぞ！」と意気込み、メガベンチャーをはじめとするインターネット・Web系企業の採用情報を見てまわりました。

が、、、ここで大きな壁にぶつかります。

それは、「自身の技術力の無さ」です。

ソフトウェアエンジニア職として仕事ができるような企業では、採用プロセスで、一定の技術力が求められます。（開発経験やコーディングテストなど）

当時、若干のHTMLとCSSの知識しかなかった私は、膝から崩れ落ちるような思いで、選考を諦めました。
（今思えば受けるだけ受ければよかった。。。）

### SIer入社
エンジニアになることを諦めきれなかった私は、SIerなら文系未経験でもエンジニアになれるという情報を知り、SIerに絞って就活を進め、結果として内定をいただくことができました。

そしてエンジニアとしてのキャリアがスタートするわけです！

### SIer入社後
入社後は、日本でもトップに位置するような大企業のシステムに関わらせていただくことができ、大規模システムの開発フローなどを学ぶことができています。

また、チームメンバーも良い方ばかりで、現在もとても充実した環境で働かせてもらえています！

しかしその一方、私が大学時代に抱いていた、「ソフトウェアエンジニアになりたい！」という気持ちはずっと残り続けていました。

仕事での業務は、ニッチな技術を使用している上、SIerという業態である以上、手を動かして技術を磨く時間よりも、資料作成やマネジメント系の業務をしている時間が全体の８０％くらいを占めます。

マネジメントも立派な仕事ですが、やはり私は、バリバリ手を動かして技術力を上げたいという気持ちの方が大きいと感じました。


### 再びソフトウェアエンジニアを目指す
そんなこんなで、ソフトウェアエンジニアへの夢を諦めきれなかった私は、業務内で技術を身につけることは難しいと考え、平日終業後や休日をフルに使って勉強し、

「ソフトウェアエンジニアに転職する！」

という目標を立てました！

正直、就業後やプライベートの時間を使っての勉強は、体力的にも精神的にも辛い部分がありますが、

「ソフトウェアエンジニアは、なるのは大変だけど、なってしまえば最高の仕事。」

というYoutubeの中の人が言っていた言葉を胸に、
現在は、日々学習に励んでいます！！！
（コードを書くことは、時間を忘れるくらい好きなので、学習は苦なく続けられています！）


そして、私自身フロントエンドに興味があった（書いたコードが画面反映されるのが楽しい。また、昔からiPhoneのアップデートなどで画面デザインが最新化することに興奮するようなタイプだった。）ため、
現在はフロントエンドに注力して学習を進めています！
（簡単なAPIサーバーを建てるくらいならバックエンドもできます。）


<br>

長くなってしまいましたが、上記が、私が「ソフトウェアエンジニアを目指す理由」です。


## Qiitaを始めた理由
ここからは簡潔に。。

Qiitaを始めた目的は、学んだ技術を発信（アウトプット）することで自身の理解を深めるためです。
アウトプットすることで、ただ学ぶだけでは得られない深い理解や新たな発見があると思っています！

## 現在の学習内容

私は主にWeb開発（フロントエンド）を学んでいます。
具体的には以下の技術に取り組んでいます。

- **Next.js**
- **React**
- **JavaScript**
- **TypeScript**
- **HTML**
- **CSS**
- **Tailwind CSS**

これらの技術を使って個人開発をしながら学んでいます。

## 今後の投稿予定

今後の投稿では、上記の技術に関する学びや気づきをシェアしていく予定です。

具体的なコーディングのTipsや、個人開発で直面した課題とその解決方法などを中心に書いていきたいと思います。

## 最後に

最後まで読んでいただき、ありがとうございます。

Qiitaでの活動を通じて、同じようにソフトウェアエンジニアを目指している方や、フロントエンド開発を学んでいる方々と、情報交換し、成長していければ嬉しいです。

これからよろしくお願いします！
Windows7バックアップができなかったこと

###### 備忘録です

## バックアップの失敗
### 原因
ここ数ヶ月、Win10の「バックアップと復元(Windows7)」がずっと失敗していたので詳細を見てみると、エラーコード`0x81000001`が出ていました。

64bit版windowsでは162GB以上の大きなファイルが存在するとwin7バックアップができなくなるようで、その時にエラーコード`0x81000001`が出る、ということらしいです。

### 調査と対処

バックアップ対象を探すと……

>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817276/c0c03515-e062-26d1-7159-23ffe5f11894.png) 
なんかいますね

google playgamesの配下にあるuserdata.imgが500GB以上のファイルデータになっていたので、playgames自体をアンインストールしました。

~~~:アドレス
C:\Users\(ユーザー名)\AppData\Local\Google\Play Games\userdata_xxxxx.xxx\avd\userdata.img
~~~

ちゃんと動いてますね。

>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817276/e952194e-0691-835f-84c4-69d1bd807d8f.png)
うれしい

# 感想

playgamesはもう一切使ってなかったのでアンインストールしましたが、当該ファイルを別の場所に移してもちゃんと動作するのかはわからないです。
これが一発で見つかれば解決してました。悔しいです。

https://anond.hatelabo.jp/20230430232227

playgamesは某タワーディフェンス目的でインストールしてたのですが、他のAndroidエミュと機能面で比較すると勝てる要素なさそうですけど何かいい点があれば教えてください。
基礎知識③HTTPについて

## はじめに
転職活動をする中で、MVCそれぞれの役割やhttp通信についてなど、基礎的な技術知識について問われるシーンがあったので、改めて基本に立ち返って自己学習しようと思った。

## HTTPリクエストとHTTPレスポンスについて
- HTTPリクエスト
ユーザーがブラウザ(PC上で見ている画面)からサーバー（サイトページの情報が存在するコンピュータ）へ送るもの
- HTTPレスポンス
ブラウザから送られてきたリクエストに応じた情報を返す（レスポンス）こと

ユーザーがブラウザを通じてサーバーに「このページが見たいよ〜」とリクエストし、
そのページの情報をレスポンスするというのが一連の流れですね。

## HTTPメソッドとは
クライアントからサーバーへ「なんの要求なのか」を伝えるメソッド

- GET
サーバーにリクエストを送る時に使うメソッド。
リクエストの内容に沿って、サーバー側で情報を検索して取得することができる。
リクエストの内容はURLにクエリとして含まれる。
そのため、キャッシュカードの情報や個人情報など機密データを取り扱う場合はおすすめしない🙅‍♀️
リクエストデータはURLに含まれるので、履歴に残ります。

ex)データの取得や検索などに適している！
<br>

- POST
新規作成データの送信時に使うメソッド。
サーバーにデータの書き込みをする際に使われるメソッド。
GETと異なり、リクエストデータはURLではなく、本文に暗号化された状態で含まれる。
URLに表示されないので、POSTより安全。
また、データがURLに載らないため、履歴としては残らない。

ex)記事投稿、ユーザー登録、機密性の高いデータの登録など
<br>

- PUT
データの一部更新を行う際に使うメソッド。
POST同様、クライアントからサーバーにデータを送信する際に使われる。
しかし、POSTがデータの新規作成時に使うメソッドに対し、
こちらはデータの一部書き換えを行う際に使用されるメソッドという立ち位置。
ex)記事編集、ユーザー情報の編集など
<br>

- DELETE
既存データを削除する時に使うメソッド。
ex)記事削除、ユーザー情報削除など
iterm2でssh remoteしてpbcopyとpbpaste備忘録

最近、[fabric](https://github.com/danielmiessler/fabric)をよくつかうので、自宅のAIサーバーをコンソールで触っているので、ssh remote with itemr2で、pbcopyを使えるようにしたかったので、その備忘録。

## fabric by JFK
日本語対応をさせたバージョン。

https://github.com/JFK/fabric


## pbcopy repo

https://github.com/skaji/remote-pbcopy-iterm2

pythonを使ってやってみた。pipxパッケージにするのもありかも。

## pbpaste

```bash
$ cat > out.txt
```

でOK。 `Ctrl+D` で確定
Dockerのポートマッピングについて

### ポートマッピングの目的
コンテナ内のアプリケーションにリクエストを送りたいときに使う設定です。
ポートマッピングを設定することでホストマシンの特定ポートへのリクエストをコンテナ内のアプリケーションに通すことができます。

#### 複数のアプリケーションを利用する場合
コンテナを利用する場合、1つのアプリケーションに対して1つのコンテナが起動しています。複数のコンテナにポートマッピングを行う場合は、ホスト側のポート番号はそれぞれ別のものを使用する必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3669508/430d5b2c-b56a-0aa3-3f55-16fe4d65a9b0.png)

### ポートマッピングの手順
#### コマンドから指定する場合
docker起動時に`-p`オプションを利用することでマッピングできる
書き方は　-p <ホストのポート>:<コンテナのポート> 

例) [image]起動時にホストマシンの10080番のポートをコンテナの80番のポートにマッピングする場合
```
 docker run -p 10080:80 [image]
```
#### 設定ファイルから指定する場合
docker-composeを使用すると起動時にコマンドを使用しなくてもポートマッピングが可能になる
その際は**docker-compose.yml**ファイルにポートマッピングの設定を記載し、**docker-compose up**コマンドを起動する
```docker-compose.yml
version: '3'
services:
    image: [image]
    ports:
      - 10080:80
```

## 最後に
実際にコンテナを実行した場合の結果やその手順も載せられたほうがわかりやすいとは思うのですが、Webサーバの知識があやふやな点、長くなってしまいそうな点(主に書くのにかかる時間が)から断念していまいました、、、
nginxの設定についても、自分の中でまとまり次第書いてみようかなとは思っています！
ここまで読んでいただいた方、ありがとうございました。
Excel VBA かわいいユーザーフォームを作る

## ユーザーフォームに任意の画像を使用してコマンドボタンにする方法
Excelで開発した業務システムをかわいいアプリみたいにしたかったので、やりました。チームの皆さんには好評をいただいています。

正確にはコマンドボタンではなく、イメージオブジェクトを使用します。
画像で説明資料を作ったので、よかったら参考にしてください。

![Qi1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812230/3788ed28-379a-4a89-1548-65c3d75cf4b1.png)
ユーザーフォームにイメージオブジェクトを配置


![Qi2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812230/e0002b55-0915-a4ba-50c5-03fc69b1bb87.png)
プロパティのPicture 項目の「...」をクリックして使用する画像（jpg ファイル）
を選択し、「開く」をクリック

![Qi4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812230/7e9b5248-2127-f0f4-b000-5b56126cbbe1.png)
ユーザーフォーム上のイメージオブジェクトをダブルクリックしてコードウインドウを表示、アンダースコア以降を消して、"Click" に書き換える

![Qi5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812230/2323b436-da23-3317-6f21-8a260dbcc551.png)
Storybook8になって変化したことをまとめ

Storybookのバージョンが8になりました！
すでにバージョンアップに対応された方も多いかと思いますが…先日8.1がリリースされました！

:::note
バージョンアップ後のStorybookの変化についてまとめました！
知識のアップデートにお役立ていただけると幸いです！
:::

【注意】
この記事は下記の2つのURLをまとめたものです。
すでに一読された方には新しい発見のない記事なのですぐにリーディングをやめて別の記事を読んでください！

https://storybook.js.org/blog/storybook-8/

https://storybook.js.org/blog/storybook-8-1/

## Storybook8になって変わったこと
StorybookのUIが改善されたり、ビルドが高速化されたりしましたが、なんといっても
- ビジュアルテストアドオン
- React Server Component　（RSC)への対応

の2点だと思います。

### ビジュアルテスト
これまではChromaticと連携するなどで実現していたビジュアルテストですが、StorybookのUIからテストを実行できるようになりました。

:::note
現時点でChromaticを利用しているプロジェクトにとって大きく作業効率を上げることにつながるか定かではありませんが、UIから実行できるのは開発体験として良いと思います。
UIをレビューし、コメントを残したい場合にはChromaticを引き続き利用する必要があります。
:::

https://storybook.js.org/docs/writing-tests/visual-testing?ref=storybookblog.ghost.io#install-the-addon

### React Server Component（RSC)への対応
実験的なサポートであると発表されているので今後の動向には注意が必要です。
とはいえ8.1ではサーバーコンポーネントのユニットテストができるようになったとのことでよりRSCに対してのサポートは進んでいきそうな空気感は感じております。

https://storybook.js.org/blog/build-a-nextjs-app-with-rsc-msw-storybook/?ref=storybookblog.ghost.io

### 個人的に嬉しかった「コントロールの自動生成の改善」
docgen（コンポーネントの分析に利用されるライブラリ）がアップグレートされました！
storiesファイルがほとんど何を書かなくてもコンポーネントに正しく型定義されていれば認識してくれるので非常に嬉しいです。

:::note
CSF3に変わったあたりからdocgenの認識能力が上がったことにより、storiesファイルの記述がスッキリした印象です！
:::

## Storybook8.1ではどうなった？
8.1での目玉は、モジュールモックの追加とPlaywrightとの連携だと思います。
React19の実験的なサポートとNext.js14.2をサポートもアップデートの内容に盛り込まれてました。

### モジュールモック
これまで困難だったモックの実装ができるようになったそうです。
例えば、
- ユーザーのテーマ設定に応じた変化
- localStorageやCookieを読み取る場合
- 現在の日付や時刻に基づいて異なる動作をする場合
- Next.jsなどのフレームワークを利用している場合

などが該当します。

:::note
これまでは「Mock Service Worker」を利用していたところを`Mocking modules`を利用すれば無理な実装をせずに済む場合も出てくる可能性もありそうですね！
:::

https://storybook.js.org/docs/writing-stories/mocking-modules?ref=storybookblog.ghost.io

https://storybook.js.org/blog/type-safe-module-mocking/?ref=storybookblog.ghost.io

### Playwright
導入されたモジュールモックで依存するサーバーモジュールをモックすることでRSCのユニットテストができるようになるそうです。

>Playwright CT のポータブル ストーリー API は実験段階です。Playwright CT 自体も実験段階です。今後のリリースでは、どちらのライブラリにも重大な変更が発生する可能性があります。

とドキュメントには書かれているのでまだどうなるかわからないので今後に期待ですね！

https://storybook.js.org/docs/api/portable-stories-playwright?ref=storybookblog.ghost.io

## 【まとめ】 Storybook8なって変化したこと
Storybook8になってconfig周りの設定が楽になったり、テスト周りの自動化や選択肢が拡充された印象です。

:::note
実験的な実装もあるので今後どうなるかわからない部分もありますが今後の動向が楽しみです！
:::

Storybookをまだまだ理解できていない部分が多いので今後もアップデートをキャッチアップしながらデザイナーとの連携部分やUIテスト周りの強化できるように努めていきたいと思います！
基礎知識②ルーティングについて

## はじめに
転職活動をする中で、MVCそれぞれの役割やhttp通信についてなど、基礎的な技術知識について問われるシーンがあったので、改めて基本に立ち返って自己学習しようと思った。

### ルーティングとは
どのURLにどのようなHTTPメソッドでアクセスがあった場合にどのコントローラのどのアクションを呼び出すかを定義したもの
アクセスを受けてどのアクションへ案内する仕組み

### ページを作る流れについて
基本的にはルーティング→コントローラ→(モデル)→ビュー
モデルは必要な時とそうでない時があるので適宜

- ルーティング
アクセスがあった際に、どのコントローラのどのアクションを実行するかを定義した案内板、対応表

- コントローラ
モデルとビューを仲介する役
ビューからの入力、データ更新、削除などの操作に応じてモデルに依頼。
モデルで処理されたデータをビューに渡す。

- モデル
データベースの操作を担当。
データの登録、更新、削除を行い、処理された結果をコントローラに返す。

- ビュー
ビューに書いてあることをHTMLファイルとして表示。
システムにおけるユーザーインターフェースを担う。
【MUI】TableコンポーネントのCell内で文字を省略して表示する方法

## はじめに
私は元薬剤師で、実務経験9ヶ月のフロントエンドエンジニアです。
React/TypeScriptを使って開発しています👩‍💻

プロダクトでMUIを導入しているのですが、Tableコンポーネントのスタイリングで苦戦しました。
備忘録として実装方法を記録しておきます。

## 背景
表形式でデータを表示するようなページの実装を任されました。
表のUIは、MUIのTableコンポーネントを使用します。

https://mui.com/material-ui/react-table/

要件として、cellに表示するテキストが長い場合は、省略記号（...）で省略して表示する必要がありました。

### 結論
:::note warn
MUIのTableCellコンポーネントで長いテキストを省略して表示するには、TableCell内に`<div>`要素を作成し、その要素にCSSを指定する必要がある。
```typescript
{/* cell内にdiv要素を作成してCSSを指定する */}
  <TableCell>
    <div className="textContainer">{row.text}</div>
  </TableCell>
```
```css:styles.css
.textContainer {
  display: block;
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```
:::

## 実装
以下に実装例を示します。
例として、本文のテキストが300pxを超える場合は、「...」で省略してみました。


https://codesandbox.io/embed/97fsc9?view=editor+%2B+preview&module=%2Fsrc%2FApp.tsx


MUIのTableCellコンポーネントにはいくつかのpropsを渡すことができますが、propsとしてCSSを指定しただけでは、テキストを省略して表示することはできませんでした。

https://mui.com/material-ui/api/table-cell/

TableCellコンポーネント内にdiv要素を作成し、その要素にテキストを省略して表示するためのCSSを指定する必要があります。
```typescript
  <TableBody>
      {rows.map((row, key) => (
        <TableRow key={key}>
          <TableCell>{row.author}</TableCell>
          <TableCell>{row.title}</TableCell>
          {/* cell内にdiv要素を追加してCSSを指定する */}
          <TableCell>
            <div className="textContainer">{row.text}</div>
          </TableCell>
        </TableRow>
      ))}
  </TableBody>
```
```css
/* cell内のdiv要素に指定するCSS */
  .textContainer {
  display: block;
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```

## 終わりに
そもそもHTMLの`<table>`を実装したことがなかったので、スタイリングに苦戦しました😭
しっかり覚えておこうと思います！

こちらの記事を参考にしました。

https://stackoverflow.com/questions/60752083/how-to-hide-the-overflow-content-in-material-ui-table-cell-instead-of-wrapping
40代エンジニアからのQiitaデビュー

# Qiitaを始めようとしたきっかけ

今まで記事投稿はZennを利用していました。
というのもWEBのみで記事を書くことに抵抗があり、
GitHub連携することでオフラインでも記事を書けるZennに
魅力を感じていたためです。

しかし、改めてQiitaを確認すると知らず知らずのうちに
GitHub連携できるようになっていました。

https://qiita.com/Qiita/items/32c79014509987541130

ZennとのQiitaの使い分けは現状定まっていませんが、
使い勝手を比較するべく投稿してみようと思います。

---

## 設定編

Zennの記事もGitHubで管理しており、
同一リポジトリで両立可能なのか確認してみます。

記事の管理ディレクトリはzennが`articies`に対し
Qiitaは`public`になるので両立可能そうです。

両方ともmain/masterブランチへのトリガーで
記事が投稿される仕様は変わりませんが、zennがGitHubActionsの
動作を抽象化しているのに対しQiitaはymlの中身を確認および編集できるようなので
記事投稿トリガーで何かしらアクションするといったことができそうです。
（今の所具体的なユースケースは思いつきませんが。。）

## 下書き投稿編

GitHub経由で下書き投稿をしようとしたところ
以下エラーが発生しました。

```log
Run qiita publish --all --root .
  qiita publish --all --root .
  shell: /usr/bin/bash --noprofile --norc -e -o pipefail {0}
  env:
    QIITA_TOKEN: ***
40代からのQiitaデビュー: タグを入力してください
```

タグが必須のようです。
Qiitaでの記事投稿は **初投稿** になるので初投稿のタグを付与し再度プッシュしてみます。

→ GitHubActionsもエラーにならず、無事に投稿ができました！

## 今後の運用

冒頭にも書いた通り、ZennとQiitaの使い分けは定まっていないため
今後Qiitaの記事にどのような内容を投稿していくか検討中です。
Qiitaはイベントが豊富なのでイベント時のみ投稿するといった運用もいいかなと考えています。

zennは[2つのリポジトリしか連携](https://zenn.dev/zenn/articles/connect-to-github)できませんが、Qiitaの仕様から
複数リポジトリ連携可能である想定なので、コミュニティ単位で
プライベートリポジトリを作成し、そのテーマに共感したコラボレーターを招待するといった
運用もいいかなと妄想してたりします。


## 投稿後の気付き

- スライドモードの有効性確認
一度trueにしてプレビューしてみましたが、フォントサイズが大きすぎて
スライドとしては見にくいためfalseに戻しました。


- push後の記事ページコンフリクト

記事の編集を行い、pushしたところ記事ページがコンフリクトしてしまいました。

```diff
 title: 40代エンジニアからのQiitaデビュー
 tags:
-  - '初投稿'
+  - 初投稿
 private: true
-updated_at: ''
-id: null
+updated_at: '2024-06-16T14:08:18+09:00'
+id: *************50e1
 organization_url_name: null
 slide: false
 ignorePublish: false
 ```

 公開後自動的に `updated_at`と `id` が自動的に追加されるようですね。

 なので投稿後は適宜pullしてあげる必要がありそうです。
 

 - zennと同一リポジトリで管理することでの影響

Qiitaの記事を全く更新していないにも関わらず、
GitHubActionsが走るので無駄な処理になってしまうことに気づきました。

カスタマイズ可能なのでトリガーするブランチをどちらか変更するか
public配下のみ変更が入ったときのみトリガーするようにするか検討します。

まずはARMのランナーを利用するようにしたい。
Lexで作ったbotをLambdaを使用してフリーインプット形式に対応させる

# やりたい事
インテントのサンプル発話に登録されたワード以外の文言が入力されても、LambdaからのレスポンスをLexのチャットに表示させたい。


# 課題
Lexのサンプル発話に登録した内容が入力されると指定したLambdaを呼ぶようにできるが、これだけでは特定のワードが入力された際にしかLambdaを呼ぶことができない。


# 結論
FallbackIntent に落ちてもLambdaを呼ぶように設定すると、LambdaからのレスポンスをLexのチャットボットのレスポンスとして表示させる事ができる。


# 環境
- Python：3.12
- Lex：v2


# FallbackIntent の設定

FallbackIntent のコードフックにチェックを入れておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/f3c30926-c74f-cfc6-9b3c-af57dba43338.png)


# Lexの準備

次の記事と同様の構成でLexのbotを作成します。

https://qiita.com/enumura1/items/93fc3c9dfa5c1ff49340

# Lambdaの準備

オウム返しに近い内容ですが、「ユーザの入力値+について問い合わせありがとうございます。」という形でLexにレスポンスを返します。

```python:lambda_function.py
def lambda_handler(event, context):

    # インテント名を取得
    intent_name = event['sessionState']['intent']['name']
    # スロットを取得
    slots = event['sessionState']['intent']['slots']
    # ユーザーの入力テキストを取得
    user_input = event['inputTranscript']
    # レスポンスとして返す文言を作成
    response_text = f"{user_input}について問い合わせありがとうございます。"
    
    # レスポンスを作成
    response = {
        'messages': [{'contentType': 'PlainText', 'content': response_text}],
        'sessionState': {
            'dialogAction': {
                'type': 'Close',
            },
            'intent': {
                'name': intent_name,
                'slots': slots,
                'state': 'Fulfilled'
            }
        }
    }
    
    # Lambda 関数のレスポンスを返す
    return response
```


# 実行結果

インテントのサンプル発話に登録していない文言を入力してみます。
今回は「うどんの具」と入力してみましたがLambdaから返ってきたレスポンスを表示できることが確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/98de81fe-f446-b922-151f-6701f206f98b.png)



# 参考

https://dev.classmethod.jp/articles/amazon-connect-lex-sample-utterunces/
「かぬぴぅとー てれびば みゅーんびゃーい」はUniversal Dependenciesで書けるのか

杉村孝夫『[来間島方言の記述的研究](https://ci.nii.ac.jp/ncid/BD07099012)』(文部科学省研究費補助金[基盤研究(C)13610660](https://kaken.nii.ac.jp/ja/grant/KAKENHI-PROJECT-13610660), 2003年3月)を読んでいたところ、終助詞「びゃー」に関する例文が6つほど例示されていた(p.43)。

> (3) bjaː (か、疑問)
> 1　kuzjoː macjaːkidu icitaI<INS>bjaː</INS>　去年一緒に行った<INS>かな</INS>。
> 2　narasimjuːdi<INS>bjaː</INS>iː　鳴らしてみよう<INS>か</INS>ね。
> 3　kaninudu naI<INS>bja ː</INS>iː　鐘が鳴るだろう<INS>か</INS>ね。
> 4　banummeː kakaridusI<INS>bjaː</INS>i　私にも書ける<INS>か</INS>ね。
> 5　kanupItoː terebiba mjuːm<INS>bjaː</INS>i　あの人はテレビを見ない<INS>か</INS>ね。
> 6　vvagadu jum<INS>bjaː</INS>iː　あなたが読む<INS>か</INS>ね。

例文5をひらがなで書くと「かぬぴぅとー てれびば みゅーんびゃーい」らしい。何とかUniversal Dependenciesで書いてみよう。

```
# text = かぬぴぅとー てれびば みゅーんびゃーい
1	かぬ	_	DET	連体詞	_	2	det	_	SpaceAfter=No
2-3	ぴぅとー	_	_	_	_	_	_	_	_
2	ぴぅとぅ	_	NOUN	名詞-普通名詞-一般	_	6	nsubj	_	_
3	や	_	ADP	助詞-係助詞	_	2	case	_	_
4	てれび	_	NOUN	名詞-普通名詞-一般	_	6	obj	_	SpaceAfter=No
5	ば	_	ADP	助詞-格助詞	_	4	case	_	_
6	みゅーん	_	VERB	動詞-非自立可能	_	0	root	_	SpaceAfter=No
7	びゃー	_	PART	助詞-終助詞	_	6	mark	_	SpaceAfter=No
8	い	_	PART	助詞-終助詞	_	6	mark	_	_
```

![ffima.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428317/87bfa35a-ed0e-9c3d-16c6-1013b2559da9.png)

XPOSをUniDic品詞に合わせた上で、単語長を国語研短単位に近づける、という無茶をやってみたのだが、「みゅーん」が悩ましすぎる。『来間島方言の記述的研究』は、このあたりの記述が一貫しておらず、p.23では「みゅーん」を動詞[mjuu]の否定形としていながら、pp.50-51では「n」を助動詞(活用は〇njaːttam、〇nfunaI、〇dana、〇n、〇n-、〇dakaː)とみなしていて困ってしまう。さて、どのあたりが落としどこなんだろ。
Sendmail から Postfix へ

## 経緯
結論。
今後は、「後継のPostfixを使え」ということらしい。

自宅開発環境でメールが飛ばないことは知っていたが、面倒臭そうなので放置していた。
が、一念発起し、sendmailまわりの設定を調査。

しかしながら、調べていくうちにsendmailは非推奨になっているということを知った。
今後は、「後継のPostfixを使え」ということらしい。

## 制限事項
- 開発環境での使用を前提としています。
- 本番はこの限りではないと思われます。

## 構築手順
1. sendmailを削除
    ```bash
    sudo apt remove sendmail -y
    sudo apt autoremove -y
    ```
1. Postfixの設定ファイルを配置
    ```bash
    sudo cp /usr/share/postfix/main.cf.dist /etc/postfix/main.cf
    ```
1. Postfixの設定ファイルを編集
    ```diff
    diff /usr/share/postfix/main.cf.dist /etc/postfix/main.cf
    82c82
    < #mail_owner = postfix
    ---
    > mail_owner = postfix
    98c98
    < #myhostname = host.domain.tld
    ---
    > myhostname = messiah
    127c127
    < #myorigin = $mydomain
    ---
    > myorigin = $mydomain
    141c141
    < #inet_interfaces = all
    ---
    > inet_interfaces = all
    189c189
    < #mydestination = $myhostname, localhost.$mydomain, localhost, $mydomain
    ---
    > mydestination = $myhostname, localhost.$mydomain, localhost, $mydomain
    232c232
    < #local_recipient_maps = unix:passwd.byname $alias_maps
    ---
    > local_recipient_maps = unix:passwd.byname $alias_maps
    583c583
    < #smtpd_banner = $myhostname ESMTP $mail_name
    ---
    > smtpd_banner = $myhostname ESMTP
    585c585
    < smtpd_banner = $myhostname ESMTP $mail_name (Ubuntu)
    ---
    > #smtpd_banner = $myhostname ESMTP $mail_name (Ubuntu)
    659c659
    < sendmail_path =
    ---
    > sendmail_path = /usr/sbin/postfix
    664c664
    < newaliases_path =
    ---
    > newaliases_path = /usr/bin/mailq
    669c669
    < mailq_path =
    ---
    > mailq_path = /usr/bin/mailq
    675c675
    < setgid_group =
    ---
    > setgid_group = postdrop
    679c679
    < html_directory =
    ---
    > #html_directory =
    683c683
    < manpage_directory =
    ---
    > #manpage_directory =
    688c688
    < sample_directory =
    ---
    > #sample_directory =
    692c692
    < readme_directory =
    ---
    > #readme_directory =
    693a694,696
    >
    > message_size_limit = 10485760
    > mailbox_size_limit = 1073741824
    ```
1. Postfixを再起動
    ```bash
    sudo newaliases
    sudo /etc/init.d/postfix restart
    ```
## 動作確認
- テストメールを送信してみる
    ```bash
    sudo echo -e 'Subject: Hello!\n\nHello!\nWorld' | sendmail -f {fromメールアドレス} {toメールアドレス}
    ```
    - 送信されたメールが受信できることを確認
## 参考
https://www.kagoya.jp/howto/it-glossary/mail/postfix/

https://access.redhat.com/ja/solutions/5942531
Zipファイルから中身を取り出すC#プログラム（＝pptxファイルからm4aを取り出す）


パワポに埋め込まれた音声ファイル（.m4a）を別ファイルに保存する
「メディアに名前を付けて保存」という機能が、パワポマクロには無いという。

ChatAIに聞いたら、pptxはzipファイルだから、zipファイルの中を探索して、中の音声ファイルを取り出して保存すればいい、という。
うそーん、と思ったけど、そのプログラム。


```C#:OutComp.cs
//c:\Windows\Microsoft.NET\Framework\v4.0.30319\csc.exe /target:exe /reference:System.IO.Compression.dll;System.IO.Compression.FileSystem.dll;System.IO.Compression.ZipFile.dll; OutComp.cs

//C:\Windows\Microsoft.NET\Framework\v4.0.30319
//System.IO.Compression.dll
//System.IO.Compression.FileSystem.dll
//System.IO.Compression.ZipFile.dll

using System;
using System.IO;
using System.IO.Compression;
class OutComp
{
	static void Main()
	{
		// zipファイルのパス
		string zipPath = @"C:\hogehoge\p1.pptx";
		string extractPath = @"C:\hogehoge\out\";
		using (ZipArchive archive = ZipFile.OpenRead(zipPath))
		{
			foreach (ZipArchiveEntry entry in archive.Entries)
			{
				if (Path.GetExtension(entry.FullName).Equals(".m4a", StringComparison.OrdinalIgnoreCase))
				{
					string destinationPath = Path.Combine(extractPath, entry.Name);
					entry.ExtractToFile(destinationPath, true);
				}
			}
		}
	}
}
```
【Flutter】shimmer パッケージを使用して読み込み画面のスケルトンUIを実装する

# はじめに
APIからのレスポンスを待っている際やその他データを取得している最中にはユーザの待機時間が発生します。コンテンツを読み込み中である事を視覚的に表示させるUIとしてスケルトンUIがあります。
本記事では`shimmer`パッケージを使用してスケルトンUIを実装してみます。


# 作るもの

SNSのタイムラインを読み込む際をイメージしてスケルトンUIを作成してみます。

![skeltnuidmo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/10a55011-7c73-0c05-29a4-ec3fca242654.gif)

# 環境
- Flutter 3.22.1
- shimmer 3.0.0

# パッケージのインストール

shimmerパッケージをインストールします。

```
flutter pub add shimmer
```

https://pub.dev/packages/shimmer/install


# ソース
SNSのタイムラインの画面をイメージして、スケルトンUIを作成してみます。
`Shimmer.fromColors` Widgetを使用して、スケルトンUIの要素を表示します。各要素では、`baseColor`で元となるスケルトンUIの背景色を指定し、`highlightColor`でハイライトされる際の色を設定します。また、スケルトンUIのアニメーション速度は`period`プロパティで調整します。

```dart:main.dart
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TimelineSkeletonScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class TimelineSkeletonScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('タイムライン画面'),
        centerTitle: true,
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Shimmer.fromColors(
              baseColor: Colors.grey.shade300, // Shimmerエフェクトの元となる色
              highlightColor: Colors.grey.shade100, // Shimmerエフェクトのハイライト部分の色
              period: const Duration(seconds: 2), // エフェクトの速度を調整
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      const CircleAvatar(
                        radius: 20,
                        backgroundColor: Colors.white,
                      ),
                      const SizedBox(width: 10),
                      Container(
                        width: 150,
                        height: 20,
                        color: Colors.white,
                      ),
                    ],
                  ),
                  const SizedBox(height: 10),
                  Container(
                    width: double.infinity,
                    height: 150,
                    color: Colors.white,
                  ),
                  const SizedBox(height: 10),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}
```


# 実行結果

デバッグして確認すると、以下のようにスケルトンUIが表示されます。

![skeltnuidmo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/10a55011-7c73-0c05-29a4-ec3fca242654.gif)



# 参考

https://zenn.dev/koichi_51/articles/0e1979925cab3c#%E3%81%BE%E3%81%A8%E3%82%81

https://pub.dev/packages/shimmer/example
Wio LTE JP Version(Wio LTE Cat.1) + STM32FreeRTOS で SerialUSB を使う方法

[Wio LTE JP Version](https://soracom.jp/store/5301/) で FreeRTOS を使おうとして `#include <STM32FreeRTOS.h>` を加えると、SerialUSB が使えなくなる※問題への解決策です。

※使えなくなる = OS 上では COMxx で認識できているが、TeraTerm 等で上記 COM ポートに接続を試みても「見つからない」となる

確認環境:

* ボード定義
    * SeeedJP STM32 Boards 1.9
* ライブラリ
    * STM32duino FreeRTOS 10.3.2
    * Wio LTE for Arduino 2.31.0

## 結論

スケッチファイル(**.ino)があるディレクトリに `STM32FreeRTOSConfig_extra.h` を作成してプロジェクト内に加え、 `#define configMEMMANG_HEAP_NB 3` を設定すれば SerialUSB が使えます。

```c++:STM32FreeRTOSConfig_extra.h
#define configMEMMANG_HEAP_NB 3
```

```c++:YOUR_PROJECT.ino
#include <WioLTEforArduino.h>
#include <STM32FreeRTOS.h>
#include <STM32FreeRTOSConfig_extra.h>
```

### 注意事項

[STM32ArduinoでCDCを利用しながらFreeRTOSとSTLinkのシリアル出力を利用](https://asukiaaa.blogspot.com/2023/03/use-stm32-cdc-with-freertos-and-serial-of-stlink.html) の "古い情報" と記載されているワークアラウンドにて `SerialUSB` の利用に成功しました。
参照元同様に動作の理由は深く追っていないため、この定義による副作用は未知数です。

## 参照

* [Wio LTE Cat.1 + FreeRTOS / Seeed K.K. エンジニアブログ](https://lab.seeed.co.jp/entry/2020/06/11/120000)
* [Why USB Serial is not working with STM32FreeRTOS in STM32 black pill?](https://stackoverflow.com/questions/78452065/why-usb-serial-is-not-working-with-stm32freertos-in-stm32-black-pill)
* [STM32FreeRTOS/src/heap.c at main · stm32duino/STM32FreeRTOS](https://github.com/stm32duino/STM32FreeRTOS/blob/main/src/heap.c)
* [STM32ArduinoでCDCを利用しながらFreeRTOSとSTLinkのシリアル出力を利用](https://asukiaaa.blogspot.com/2023/03/use-stm32-cdc-with-freertos-and-serial-of-stlink.html)
* [HID will not work if STM32FreeRTOS.h is included. #16](https://github.com/stm32duino/STM32FreeRTOS/issues/16)

EoT
【pnpm】依存パッケージについて調べるのに役立つコマンド5選

dependabot や renovate などが作った PR を手動ないし、オートマージで運用している人も多いと思いますが、このライブラリって何処で使われてるんだっけ？とか、どの依存なんです？を任意のタイミングで確認したい時に便利コマンド直ぐに忘れてしまうので、自分用にまとめておこうと思いこの記事を書くことにしました。

FYI：
https://docs.github.com/ja/code-security/dependabot
https://docs.renovatebot.com/

尚、全て pnpm v9.x の内容を前提としています。

## pnpm audit

https://pnpm.io/ja/cli/audit

依存関係の脆弱性チェックに使います。プロジェクトの依存関係を分析し、既知のセキュリティ脆弱性を報告してくれます。

報告の中身としてはこんな感じ
- Severity: 脆弱性の深刻度（Low、Moderate、High、Critical）
- Package: 脆弱性を持つパッケージの名前
- Version: 影響を受けるパッケージのバージョン範囲
- Path: 脆弱性を持つパッケージが依存関係ツリー内でどこに位置するか
- More Info: 脆弱性の詳細と推奨される修正についてのリンク

特定の深刻度以上の脆弱性のみを表示するには、次のように `--audit-level` オプションを使用します

```
pnpm audit --audit-level high
```

CI として組み込んで、脆弱性対応するまではリリース出来ないようにも出来ますね。
ちなみに、特定の脆弱性を許容したい場合、コマンドでの ignore オプションはないっぽくって、package.json で定義するようなことが書いてあります。

> If you want to tolerate some vulnerabilities as they don't affect your project, you may use the pnpm.auditConfig.ignoreCves setting.

https://pnpm.io/ja/package_json#pnpmauditconfigignorecves

こんな感じですかね
```
{
  "pnpm": {
    "auditConfig": {
      "ignoreCves": [
        "CVE-2022-36313"
      ]
    }
  }
}
```

他にも devDependencies のみ見る `--dev`, `-D` オプションや、
プロダクションの dependencies のみを見る `--prod`, `-P` オプションなどがあります。

## pnpm list

https://pnpm.io/ja/cli/list

パッケージ管理しているすべてのライブラリバージョンと依存関係を出力してくれます。
まあでも package.json 見ればええやろで単独で使うことあんまないかも。

## pnpm outdated

https://pnpm.io/ja/cli/outdated

パッケージ管理しているすべてのライブラリが最新からどれくらい更新が遅れているかを一覧で見ることが出来ます。引数にパッケージ名を入れれば、任意の範囲で見ることも可能です。良く使うかは微妙ではある。

```
pnpm outdated "*angular*"
```

## pnpm why

https://pnpm.io/ja/cli/why

これは結構使うんじゃないですかね。

引数に調べたいライブラリを指定して、依存ツリーを表示してくれます。
これ何処で使われてるんじゃ？あー jest で使われてるんですね、じゃテスト通ってるからええやろ、みたいな判断材料として使います。

```
pnpm why semver
```

## pnpm licenses

https://pnpm.io/ja/cli/licenses

管理する依存関係のメタデータからライセンス情報を抽出します。依存関係の package.json ファイル内の license フィールドを参照し、それらを一覧表示するそうです。まあ普段あんまり意識しないかな。
SLAMTEC RPLiDARの動作方法（ROS2）

## **はじめに**
**動作環境**
Ubuntu 22.04
ROS2 humble

**SLAMTEC RPLiDAR C1**
<img width="250" alt="Lidar.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817260/8a86249d-57ab-f13a-97e4-103f5796e6c6.png">

↓ 説明書

https://www.slamtec.ai/wp-content/uploads/2023/11/SLAMTEC_rplidarkit_usermanual_C1_v1.0_en.pdf

## **手順**
基本的にはREADMEの手順に従いますが、若干異なっています

https://github.com/Slamtec/sllidar_ros2

### **1.　パッケージをクローン・ビルド**
```shell
mkdir -p ~/ros2_ws/src

cd ~/ros2_ws/src
git clone https://github.com/Slamtec/sllidar_ros2.git

cd ~/ros2_ws/
source /opt/ros/humble/setup.bash
colcon build --symlink-install
```

### **2.　権限を付与**
```shell
ls -l /dev | grep ttyUSB
sudo chmod 666 /dev/ttyUSB0
```

### **3.　Rvizで確認**
```shell
source ~/ros2_ws/install/setup.bash
ros2 launch sllidar_ros2 view_sllidar_n_launch.py
```

[n] は使うLiDARの種類に依存します（今回の場合はc1）
以下のように点群が表示されればOKです

<img width="500" alt="rviz.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817260/65b923c2-9c9c-0156-87cf-1f5e050022f6.png">

## **謝辞**
この取り組みは株式会社GxP(グロースエクスパートナーズ)様のサポートを受けて実施しています。貴重なアドバイスやロボットに必要な機材の支援をいただきました。心より感謝申し上げます。

https://www.gxp.co.jp/

https://qiita.com/organizations/gxp
ニコ動のように文字が右から左に流れるだけの C#プログラム




実行例
　c:\> ScrlStr2.exe "あいうえお"

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107418/bb4a36d0-8399-a1b3-9d22-d80999d39587.png)


```c#:ScrlStr2.cs
//c:\Windows\Microsoft.NET\Framework\v4.0.30319\csc.exe /target:winexe ScrlStr2.cs
using System;
using System.IO;
using System.Windows.Forms;
using System.Drawing;
using System.Drawing.Drawing2D;
public partial class TransparentTextScroller
	: Form
{
	private Timer timer;
	private string textToScroll = "テスト／test";
	private int position;
	private int position_y;
	public TransparentTextScroller()
	{
		this.StartPosition = FormStartPosition.Manual;
		this.Location = new Point(0, 0);
		this.Width = Screen.PrimaryScreen.Bounds.Width;
		this.Height = Screen.PrimaryScreen.Bounds.Height;
		this.TopMost = true;
		this.FormBorderStyle = FormBorderStyle.None;
		this.BackColor = Color.DarkSlateBlue;
		this.TransparencyKey = Color.DarkSlateBlue;
		this.Font = new Font("Meiryo UI", 32, FontStyle.Bold);
		this.DoubleBuffered = true;
		position = this.Width;
		position_y = (new Random()).Next(10, Screen.PrimaryScreen.Bounds.Height- 100);
		timer = new Timer();
		timer.Interval = 50;
		timer.Tick += Timer_Tick;
		timer.Start();
	}
	public void setString(String s)
	{
		textToScroll = s;
	}
	private void Timer_Tick(object sender, EventArgs e)
	{
		position -= 12; // スクロールの速度
		if (position < -TextRenderer.MeasureText(textToScroll, this.Font).Width)
		{
			//position = this.Width;
			//position_y = (new Random()).Next(10, Screen.PrimaryScreen.Bounds.Height- 100);
			Environment.Exit(0);
		}
		this.Invalidate();
	}
	protected override void OnPaint(PaintEventArgs e)
	{
		base.OnPaint(e);
		Brush brush = new SolidBrush(Color.White);
		Graphics g = e.Graphics;
		g.SmoothingMode = SmoothingMode.None;
		StringFormat sf = new StringFormat();
		GraphicsPath path = new GraphicsPath();
		path.AddString(textToScroll, this.Font.FontFamily,
		 (int)this.Font.Style, this.Font.Size, new PointF(position, position_y), sf);
		Pen p = new Pen(Color.Black, 4.5f);
		p.LineJoin = LineJoin.Round;
		g.DrawPath(p, path);
		g.FillPath(Brushes.White, path);
		p.Dispose();
		path.Dispose();
	}
}
static class Program
{
	[STAThread]
	static void Main(string[] args)
	{
		Application.EnableVisualStyles();
		Application.SetCompatibleTextRenderingDefault(false);
		TransparentTextScroller tts = new TransparentTextScroller();
		tts.setString(args[0]);
		Application.Run(tts);
	}
}
```
『巡回セールスマン問題』は誰のため？

### 巡回セールスマン問題
大学で情報工学を専攻されたかたはTSP（traveling salesman problem）を学んだことがあるだろう。計算複雑度を学ぶ題材としても有名な問題だ。

しかし大学を卒業し、学問の場から離れ社会を見渡すと、現実的には巡回セールスマン問題を解くセールスマンはおそらくいない（もちろん学生が扱う多くの問題が社会のどこに適用されているか知ることはあまりない）。これにはいくつかの原因が考えられる。

- そもそも巡回セールスマン問題をしらない
- 知っているが、計算が面倒だし、最適解を知りたいわけではない
- 最適解と経験上得られる解に大した差がないと考えている 
- 顧客とはアポを取っているから、アポの時間に行けばいい
- 等々

### 現実世界への適用
では、巡回セールスマン問題は学問の場にしか役に立っていないのだろうか？実は巡回セールスマン問題の応用であるVRP（vehicle routing problem）として世界中で役に立っている。

VRPはその名の通り、車のルートを求めるものだ。TSP同様、１つのスタート地点、１つのゴール地点、複数の目的地を効率的に回るルートを計算する。TSPとの違いは複数人（複数のドライバー）で回るという点だ。

運送業のルート、宅配便のルート、仕出し弁当配布のルート、飲食店向け食品小売業のルートなど現実的な問題に近づいた。

さらに現実の問題では以下のような制約を考慮に入れることが多い

主な要件：
- 終業時間（勤務の開始/終了時間、休憩の開始/終了時間）
- 訪問先の順序制約（倉庫や弁当工場に行った後、配達先に向かうなど）
- 法令による勤務時間ルール（〇時間以上働く場合は〇分以上休憩をとるなど）
- 荷量による制約（小さなトラックは一度に詰める荷物の量に厳しい制約がある）

すでにこのような制約を解決しようとするサービスは世の中にいくつか提供されている。仮に上記の制約を満たす最適なルートを現実的な時間で計算できたとしても、ドライバーは配達中に多くの課題に直面する。

課題：
- 顧客に急に呼び出され計画が乱れた
- 配達先にお客様がおらず再配達となった、〇分待ってほしいといわれ、計画が乱れた
- 道路状況により計画から遅れが発生した
- 追加の荷物が当日に増えた

このような課題を解決するため、システムには以下の要件が加わる

追加要件：
- 新しく加わった訪問先と未訪問の目的地とを含めたルートの再計算ができる
- 現実的な時間で計算が終わらなくてはいけない（1度の計算で数分は待てない）

### VRPソルバー
前述の通りVRPを解くシステムがある。
- Loogia
- LYNA自動配車クラウド

### 『巡回セールスマン問題』は誰のため？
一部のルート最適化システムは佐川急便が採用するなど、運送業への導入が進められている。巡回セールスマン問題は今やVRPソルバーとして、多くの配送業のため、そして我々一般消費者のために役立てられている。
M3508とM2006の設定をRoboMaster Assistantで変更する

![M3508](https://stormsend1.djicdn.com/tpc/uploads/photos/1931/e2ecb649-c505-4543-bbf2-1a6058dc87ec.jpg)

![M2006](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551471/0cb31975-9dbc-1d42-deda-0adb1f58b7c6.jpeg)

DJI Robomaster Assistantについての情報がネットにあまりなかったので、M3508とM2006の設定画面のスクリーンショットを貼っていきます。
2024年6月9日にあったNHK学生ロボコンでも大量に使われていました。

# M3508のユーザーガイド(ドキュメント)
https://www.robomaster.com/en-US/products/components/detail/1277

:::note info
接続方法などは、GM6020を解説した下のページを参考にしてください。
:::
https://qiita.com/Raptor-S/items/199213236d1ae71ee8a5

うまくつなぐと、認識されるので「ESC C620」を選択します。
![スクリーンショット 2024-05-15 174152.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551471/1185702c-e1db-a6bd-905e-026d227bf640.png)

## 「パラメーターの設定」タブ
### 「ベーシック」タブ
初期状態だと以下のようになっていました。翻訳がガバガバですね。
簡単な実験は、PWM制御で動かすのが楽なので、単方向モードから双方向モードに変えました。
PWMモードのPゲイン、Iゲイン、最大RPM、回転方向などが設定できます。
![スクリーンショット 2024-05-15 174207.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551471/86e0234c-a439-5b48-611b-ca60dfa63c36.png)

### 「相互データ」タブ
モーターの回転数などが、リアルタイムで確認できます。
![スクリーンショット 2024-05-15 175603.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551471/1217d623-cc0f-1abd-4376-8a2b004eac5c.png)

## 「ファームウェアの更新」タブ
初期状態でLatest version (2.0.8.20)であったので、アップグレードする必要はありませんでした。(2024年5月時点)
![スクリーンショット 2024-05-15 175610.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551471/c74a5010-57bf-6702-2c22-2760351e3c79.png)

# M2006
M2006はPWM制御に対応していないので、M3508やGM6020のように、PWM制御時のPゲインやIゲインを変えられるわけではないです。
ESCがCAN-BUSにフィードバックするメッセージの送信頻度のみを1KHz,500Hz,250Hz,125Hzから変えられるようです。デフォルトは1KHzでした。
| DATA     | 内容                          |
|----------|-------------------------------|
| DATA[0]  | ローターの機械的角度 (上位8バイト) |
| DATA[1]  | ローターの機械的角度 (下位8バイト) |
| DATA[2]  | 回転速度 (上位8バイト)          |
| DATA[3]  | 回転速度 (下位8バイト)          |
| DATA[4]  | トルク電流 (上位8バイト)        |
| DATA[5]  | トルク電流 (下位8バイト)        |
| DATA[6]  | なし                           |
| DATA[7]  | なし                           |

![スクリーンショット 2024-06-27 182955.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551471/004817f2-03b2-4c18-b517-946f3ac6434b.png)
![スクリーンショット 2024-06-27 183007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551471/01f0f3c1-46ee-7f62-83b2-00ad41ba50b4.png)
![スクリーンショット 2024-06-27 183032.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551471/cb0eb856-023b-7dbd-29a2-f56c04798a3b.png)
![スクリーンショット 2024-06-27 183044.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551471/2001db22-8bb7-943f-398c-7e0c83d7fe03.png)
![スクリーンショット 2024-06-27 183058.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551471/65983d3c-ef9b-e803-ce2b-0cd666d3d6fb.png)
![スクリーンショット 2024-06-27 183109.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551471/2ef84909-8445-3f60-7f35-4762f44742d4.png)
毎日ABC day18【c++】ABC328 A-C問題解説【ACコード付き】

# AtCoder Beginner Contest 328

https://atcoder.jp/contests/abc328

## A - Not Too Hard
$N$ 個の問題があるので、$X$ 点以下の点数の問題の合計点を求めよ。

```cpp
int main()
{
	int N , X;
	cin >> N >> X;
	int S[10];
	int ans = 0;
	for (int i = 1; i <= N; i++)
	{
		cin >> S[i];
		if (S[i] <= X) ans += S[i];
	}
	cout << ans << endl;
	return 0;
}
```
## B - 11/11
$N$ 月までのそれぞれの月に $D_{i}$ 日ある暦がある。$i$月⚪$j$日と記述するときに、$i , j$が1つの数字のみから表されるのは1年で何回あるか。

```cpp
int main()
{
	int N;
	cin >> N;
	int D[109];
	int ans = 0;
	for (int i = 1; i <= N; i++)
	{
		cin >> D[i];
		if (i < 10)
		{
			if (i <= D[i]) ans++;
			if (i * 10 + i  <= D[i]) ans ++;
		}
		else
		{
			if (i / 10 == i % 10)
			{
				int tmp = i / 10;
				if (tmp <= D[i]) ans++;
				if (tmp * 10 + tmp  <= D[i]) ans ++;
			}
		}
	}
	cout << ans << endl;
	return 0;
}
```
## C - Consecutive
長さ $N$ の文字列 $S$ 列が与えられる。右端と左端のペアが $Q$ 個与えられるので、指定の範囲に連続するアルファベットのペアがいくつあるか、それぞれ出力せよ、という問題。

$Q$ 個のペアに対して毎度計算していくと計算量が膨大になってしまうため、累積和の考えを利用して、事前にどの場所まででいくらのペアができるかをdp配列に記憶しておき、右端から左端のペアの数を引くだけで計算できるようにしておく。

```cpp
int main() {
    int N, Q;
    cin >> N >> Q;
    string S;
    cin >> S;
    vector<int> dp(N + 1, 0); 
    for (int i = 1; i < N; i++) {
        dp[i] = dp[i - 1];
        if (S[i] == S[i - 1]) {
            dp[i]++;
        }
    }
    dp[N] = dp[N - 1];
    for (int i = 0; i < Q; i++) {
        int l, r;
        cin >> l >> r;
		// 0インデックスに変更
        l--;
        r--;
        int result = dp[r] - dp[l];
        cout << result << endl;
    }
    return 0;
}
```
【c++】ABC358 A-D問題解説【ACコード付き】（毎日ABC day20）

# AtCoder Beginner Contest 358
A,B,C,Dの4完。

レートは635→652の+17となり、+50を継続するのが目標だったので大幅にこけた形となった。パフォも久しぶりに700台を叩き出してしまい、E,F問題に挑戦しなかった自分を責めたい。（早くパフォ1000の壁を超えて、水色パフォ安定的に出せるようになりたい、、！）

https://atcoder.jp/contests/abc358

## A - Welcome to AtCoder Land
与えられる文字列二つが指定の文字列かどうかを判定する。

```cpp
int main()
{
	string S,T;
	cin >> S >> T;
	if (S == "AtCoder" && T == "Land") cout << "Yes" << endl;
	else cout << "No" << endl;
	return 0;
}
```
## B - Ticket Counter
チケットカウンターに来客が $N$ 人来る。チケットは $A$ 秒で購入できるが、購入手続き中の人がいたら後ろに並ばないといけない。それぞれの客が $T_{i}$ 秒後に来客するとき、それぞれの客がチケットを購入し終わるのは何秒後かを出力せよ、という問題。

$i-1$ 番目の客がが買い終わる時間を $total$ とおいて更新していくことにすると、$i$ 番目の客が買い終わるのは、$total$ が $T_i$ を超える場合と超えない場合で場合わけできる。

もし超えない場合はチケットカウンターに来たタイミングで買い始めることができるので、$T_i + A$ 秒後に買い終わり、超える場合は前の客が終わり次第の購入手続きになるため、 $total + A$ 秒後に買い終わる。

```cpp
int main()
{
	int N, A;
	cin >> N >> A;
	int T[109];
	int total = 0;
	for (int i = 1; i<= N; i++) 
	{
		cin >> T[i];
		if (total <= T[i]) total = T[i] + A;
		else total += A;
		if (i > 1) cout << " ";
		cout << total;
	}
	cout << endl;
	return 0;
}
```
## C - Popcorn
$N$ 個のポップコーン売り場で $M$ 個の種類のポップコーンが売られている。

なるべく少ない売り場数を巡ることで全種類のポップコーンを買うためには、最低いくつの売り場を巡る必要があるか。

ビット全探索で全ての選択パターン $2^N$ 通りを試し、全ての種類のポップコーンを買えた場合の最小売り場数を出力した。

```cpp
int main()
{
    int N, M;
    cin >> N >> M;
    string S[19];
    for (int i = 0; i< N; i++) cin >> S[i];
    bool pop[19][19];
    for (int i = 0; i< N; i++) 
    {
        for (int j = 0; j < M; j++)
        {
            if (S[i][j] == 'o') pop[i][j] = true;
            else pop[i][j] = false;
        }
    }
    int ans = INT_MAX;
    for (int k = 0; k < (1 << N); k++) 
    {
        int num = 0;
        vector<bool> tmp_pop(M, false);
        for (int i = 0; i < N; i++)
        {
            if ((k >> i) & 1)
            {
                for (int j = 0; j < M; j++)
                {
                    if (pop[i][j]) tmp_pop[j] = true;
                }
                num++;
            }
        }
        bool ok = true;
        for (int j = 0; j < M; j++)
        {
            if (!tmp_pop[j])
            {
                ok = false;
                break;
            }
        }
        if (ok) ans = min(ans, num);
    }
    cout << ans << endl;
    return 0;
}
```

## D - Souvenirs
$N$ 種類売られているお土産の中から、$M$ 種類を選択して1つずつ購入し、$M$ 人にそれぞれ1つずつ渡す。お土産はそれぞれ $A_i$ 円であり、渡す人には $B_i$ 円以上のお土産でないと受け取ってもらえない。

条件を満たすことは可能か。また、条件を満たす場合の最小の支払い金額はいくらか。

$B_i$ 以上の最小の金額のお土産を選択し続けることで最小金額を求めることができる。ただし、$N$ 種類のお土産に同一の金額のお土産がある可能性があること、1種類のお土産を2つ以上購入することができないことには注意が必要である。

```cpp
int main()
{
    int N, M;
    cin >> N >> M;
    vector<int> A(N);
    vector<int> B(M);
    for (int i = 0; i < N; i++) cin >> A[i];
    for (int i = 0; i < M; i++) cin >> B[i];
    multiset<int> A_set(A.begin(), A.end());
    long long ans = 0;
    for (int i = 0; i < M; i++)
    {
        // B[i]以上の最小の要素を探す
        auto it = A_set.lower_bound(B[i]);
        if (it == A_set.end())
        {
            cout << -1 << endl;
            return 0;
        }
        ans += *it;
        A_set.erase(it);
    }
    cout << ans << endl;
    return 0;
}

```
【ChatGPT＋DALL-E3】【Dream Machine】の動画から最後のフレームを取り出す方法


　どうも、カーブミラーです。

　今回は、Dream Machineの動画から最後のフレームを取り出す方法です。もちろんChatGPT（GPT-4o）で行ないます。

:::note info
本記事は、ChatGPT（有料版）
＋DALL-E3で行なっております。
画像はありません。あしからず。
:::

　Dream Machineは
　　素晴らしい。楽しい😸

　でもちょっと
　　イジりたい。

　最後のフレームを
　　取り出せないだろうか。

　最後のシーンが
　　とても好きだから。

　ということで
　　やります。

　やり方、
　　とても簡単。

　まずは、
　　セッションが
　　　GPT-4oになっていることを
　　　　確認します。

　次に
　　動画をアップロード。

```Text:動画の最後の1フレームを取得
最後の1フレームをjpegにしてください
```
　を入れて送信します。

　Code Interpreterが
　　動いて、少しすると
　　　ダウンロードリンクが
　　　　出てきます。

　それをタップして
　　ダウンロード。

　はい、終わり。
***
　実はこれを使えば、
　　ほかのフレームも
　　　画像の取得が可能です。

　お試しを。

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
僕なりの Twig 備忘録

# 改行と空白を制御したい

## 課題

改行と空白を`-`を使って制御したい

不要な改行、不要な空白を削除したい


## 解決

`{%%}`のときは左側の`-`は左側のタグと、右側の`-`は右側のタグもしくは文字列との改行と空白を制御する。

基本は、タグの後や文字列の前で改行しない状態でのマークアップが最善の形であることを前提と考えていれば問題ない。



## 詳細

```twig
<div>
	{%- if 'yes' == 'yes' -%}
		あああ
	{%- endif -%}
</div>
{# <div>あああ</div> #}

{% set hoge = 'あああ' %}
<div>
{{- hoge -}}
</div>
{# <div>あああ</div> #}
```
VSCodeでJavaを動かしてみる（Mac）

# 1.Javaのインストール
　まずはJavaをインストールしましょう

ダウンロードサイト
https://www.oracle.com/java/technologies/downloads/?er=221886#jdk22-mac

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3500655/e58165b6-98e5-daf0-a5fe-50a004a79f99.png)

どの製品をダウンロードするかは、以下のサイトを参考にしました

参考サイト
http://www602.math.ryukoku.ac.jp/OOProg/jdk-mac.html

 
# 2.VSCodeのインストール

VSCodeをインストールしましょう

https://code.visualstudio.com/download

次に、拡張機能「Java Extension Pack」をインストールしましょう

参考サイト
https://qiita.com/aoyaman/items/cd3ed987b8b704778144

# 3.VSCodeでJava-homeの設定

ターミナルを起動して、以下のコマンドを実行しましょう
/usr/libexec/java_home -V

すると、JDKのパス表示されます
/Library/Java/JavaVirtualMachines/jdk-22.jdk/Contents/Home

インストールしたJavaの確認方法参考サイト

https://qiita.com/ponsuke0531/items/0506d41e355a585ccc97

次に、VSCodeを起動し、"Command" + ","で設定画面を開きます

一番上の検索窓に"java"と打ち込んで、Java:Homeの"settings.jsonで編集"を押します

![スクリーンショット 2024-06-16 11.44.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3500655/1b5b5d22-66cb-bc4d-86c8-5a36911526a2.png)

一番下に"java.jdt.ls.java.home":""が表示されるので、
:の後の""の中に先ほどのJDKのパスを貼り付けましょう


![スクリーンショット 2024-06-16 11.48.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3500655/22dc1c43-f41f-5215-d951-226fb4f12896.png)


# 4.文字を出力してみる

一度、VSCodeを終了し、起動します

ローカルにテスト用のフォルダを作成します

VSCodeでそのフォルダを開き、新規ファイルを作成し、名前を「Hello.java」にします

以下のようにコードを書いて、public static voidと書かれた上の"Run Main"を実行すると、プログラムが実行できます


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3500655/d5575974-cfc5-38b3-9137-eb180bd537ee.png)

出力結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3500655/93c05ce9-9ffa-c71e-865e-2f9db54a6416.png)

# 終わりに
VSCodeでJavaをやってみたいと思うひとの役に立てれば、幸いです。
僕なりの SEO 備忘録

# クローラー

## robots.txt でクロールされないようにする

`robots.txt`

```txt
# www.robotstxt.org/
# www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449

User-agent: *

Disallow: /hoge/
```

これをドキュメントルート直下に置く。

∵ 管理画面をクロールされないために。検索でヒット表示されたら嫌だから