OmniAICreator/Qiita-1.07M huggingface dataset:
Mendixを通して分かったローコード開発

# ここまでの作成した記事

- [Mendix始めてみました](https://qiita.com/lacky-lacky/items/9b0fdf9b010ef16a5558)
Mendixの登録から簡単にwebページの土台が作れることを実践しました。

- [Mendix始めてみました（２）](https://qiita.com/lacky-lacky/items/6fc2ec78c95ea0aaebf0)
サンプルを使うと、もっと簡単にwebページを作れることを
実践で試してみました。
- [Mendix始めてみました（３）](https://qiita.com/lacky-lacky/items/a254d835d64eee5521bd)
新しいページを作ってみたり、マイクロフローに触れてみたりして
ページを作るうえでの基礎的な手法を学習しました。
- [Mendix始めてみました（４）](https://qiita.com/lacky-lacky/items/de6ceedce372273aaf04)
DBと連携させることにより、外からデータを取ってきた値を
画面に表示させてみました。

以上のページから、Mendixを使って基本的な操作について学習しました。

# Mendixに触れてみた感想
プログラミング的な知識はほぼ使用していません。
ただ、2023年4月時点では日本語版がありませんので、
ツールを使うのになかなか苦労する面も多々ありました。
日本語版があれば、もう少し学習面でもスムーズだったのかもしれませんね。

# 筆者が考えるローコードの可能性
筆者がローコードの記事を書こうと思ったのは、転職後初めての案件でした。
そこでは、Mendixを使ったローコード開発が主流の案件でした。
今まではJavaやJavaScriptなどをプログラミング言語を使った開発がメインでした。
しかし、このローコードというものを経験した時は衝撃的でした。
ここまで簡単にモノづくりができるのかと。
- ChatGPTの存在
このChatGPTの存在はすごく脅威に感じました。
例えば、VBAとpostgreSQLを繋げたい場合、以下の図のように
質問をすれば、簡単に答えを教えてくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/9aac53cb-4956-fe29-060e-aad77207f51d.png)
新人の頃、筆者がネットで調べて時間かけて見つけた答えが、
googleで検索するかのようにこんなに簡単に見つけてくれるのです。
これの存在からも分かるように
今まで仕事をしてきたプログラミングの仕事も
AIに奪われる可能性があります。

- なぜローコード？
今までは業務知識、プログラミング、両方の知識が必要でした。
しかし、ローコードを身に着ければ、
プログラミングに学習する時間をお客様の業務知識を習得するのに
割り当てることができるのです。
業務知識があって、それをシステムとして実現化するのが
これからの時代、それが出来る人がこのＩＴ業界に求められるのではないでしょうか。

# これから先
もう少し、このMendix記事は続けていきたいと思います。
まだ全ての機能を使った訳でもないですし、
SQLに関してもSELECT文しか試していません。
より、本格的なwebツールを作ってみたいと思います。
ただ、記事のタイトルはもう少し分かりやすいといいかもしれないですね。
- IT業界で生きていく者として
とは言え、プログラミングを利用したモノづくりは好きですし、
そういった未来を実現するためにはプログラムの知識がないと
実現できないのもまた事実。
プログラミングについてもしっかりと勉強を続けていきたいと思います。
chatGPTでオリジナルアプリのコードを修正

以前投稿したやってみたいこと（コードの修正）をやってみました。

# バグを修正してもらった。
「バグを修正してください」と複数ファイルに関して、お願いしたら、かなりの修正がありました。

# 何で気付かなかったか？
作成当時、何で気付かなかったか？
人間では見落としがちだったんでしょう。

# 最終的に
エラーは解消されてはいませんが、chatGPTを使えば、解決も早いと思います。

## 追記
会話を繰り返しながら試行しましたが、エラーは解決できませんでした。

対象コード

https://github.com/kazunarigit/noveltool

# 追記2
何度会話を繰り返し修正しても、エラーがなくなることはありませんでした。なので、一から作り直した方が良さそうです。
ChatGPTAPIで誹謗中傷をなくすための勉強


<h1>ChatGPTAPIで誹謗中傷をなくすための勉強

簡単だと思ってプロンプト舐めてたのでそのための学習インプットをQitaでアウトプットして載せていこうと思います。



どうもうまく実行されない

誹謗中傷は認識してくれるが、その先の出力が問題になっている

余分な出力は省いてもらえるように適切なプロンプトを渡せるようにするための成長日記的な感じですます

他の投稿と時系列ずれたけどこれが一番最初の投稿になります



以下は失敗作です

![スクリーンショット 2023-04-22 15.25.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331212/0c4d18d4-a5ec-3c65-464c-cc4eace1fca7.png)

![Send a message....png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331212/6c00ba2d-f423-9225-3e82-ae1183a7c682.png)



![スクリーンショット 2023-04-22 11.28.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331212/98515778-0b10-ee57-e62a-42483cab6b39.png)

関係なさそうなプロンプトをこれからは学んでいきますが
応用力をつけるためにやってます

これは時間かかるやつだと思いましたので、
基礎プロンプトを叩き込んで応用できるようにします(青チャートやってるてきな)

中途半端は応用力がなくて結果的に遠回りになりますからねぇ
APIで誹謗中傷をなくすなんて中途半端でできるって正直舐めてたっす

就活終わったらapiつかってサービス出しまくるつもりだったのでここで応用力つけるのはいいことだとおもっていやす

まあ、他にも思惑がありますけどね...
MacOSでVSCodeでPlantUMLを使う

# 概要
MacでVSCodeを使ってPlantUMLを書けるようにする。

# 環境
- MacBook Pro (M1): macOS 13.3.1 Build 22E261
- Visual Studio Code 1.77.3
- openjdk 20 2023-03-21

# 手順
## Graphvizのインストール
```shell
$ brew install graphviz
```
## PlantUML VSCode拡張機能のインストール
VSCodeの拡張機能タブから、Rich PlantUML support for Visual Studio Codeをインストールする。

# 動作確認
## サンプルファイル作成
VSCodeで下記内容のテキストファイルを作成する。
拡張子は`.wsd`、`.pu`、`.puml`、`.plantuml`、`.iuml`が使える。
```
@startuml
[*] --> State1
State1 --> [*]
State1 : this is a string
State1 : this is another string
State1 -> State2
State2 --> [*]
@enduml
```
## UML画像のプレビュー
VSCodeのコマンドパレットから、`PlantUML: Preview current diagram`を実行すると、UML画像が表示される。
![statechart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591123/b0e3612e-bbfb-da91-a771-e42cc2525786.png)

## UML画像の保存
VSCodeのコマンドパレットから、`PlantUML: Export current diagram`を実行すると、UML画像がファイルに保存される。

# 補足
VSCodeの拡張機能の設定に以下の機能がある。
- 拡張機能に組み込まれているplantuml.jarの代わりに、別のplantuml.jarを使用できる。例えば、別途入手した`plantuml-1.2023.6.jar`を使う場合、当該ファイルのパスを`Local Render Settings: plantuml.jar`に設定する。
- `Local Render Settings: plantuml.java`にjavaの所在を指定できる。例えば、`/opt/homebrew/opt/openjdk/libexec/openjdk.jdk/Contents/Home/bin/java`のようにjdkのインストールディレクトリを設定する。

# 参考情報
https://github.com/qjebbs/vscode-plantuml

https://github.com/plantuml/plantuml/releases
rails gコマンドとは

# はじめに
`rails g`コマンドについてまとめてみました。

# `rails g`とは
正式には`rails generate`コマンドと言い、短縮系で`rails g`と使う
Railsアプリケーションに必要なファイルを自動生成してくれる

### 具体的に何が作られるのか
| **`コマンド`** | コントローラ | ビュー | モデル | マイグレーション | アセット | ルート | テスト | ヘルパー |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| **`rails g scaffold`** | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: |:white_check_mark: | :white_check_mark: | :white_check_mark: |
| **`rails g scaffold_controller`** | :white_check_mark: | :white_check_mark: | :x: | :x: | :x: | :x: | :white_check_mark: | :white_check_mark: |
| **`rails g controller`** | :white_check_mark: | :white_check_mark: |:x: | :x: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: |
| **`rails g model`** | :x: | :x: | :white_check_mark: |:white_check_mark: | :x: | :x: | :white_check_mark: | :x: |
| **`rails g migration`** | :x: | :x: | :x: | :white_check_mark: | :x: | :x: | :white_check_mark: | :x: |

## `rails g scaffold`コマンドの使い方
* `rails g scaffold NAME [field[:type][:index] field[:type][:index]] [options]`

引数 | 説明 |
--- | --- |
**NAME** | モデル名(頭文字は大文字の単数系) | 
**field** | カラム名 |
**index** | インデックス |
**options** | オプション |

### 例
```zsh
rails g scaffold User name:string mail:string
```

## `rails g scaffold_controller`コマンドの使い方
コントローラとビューをアクション（`index`、`new`、`create`、`edit`、`show`、`update`、`destroy`）で生成する
* `rails g scaffold_controller NAME [options]`

引数 | 説明 |
--- | --- |
**NAME** | モデル名(単数系) | 
**options** | オプション |

### 例
```zsh
rails g scaffold_controller User
```

## `rails g controller`コマンドの使い方
コントローラとビューを生成する
* `rails g controller NAME [action action] [options]`

引数 | 説明 |
--- | --- |
**NAME** | コントローラ名(頭文字は大文字の複数形) | 
**action** | アクション |
**options** | オプション |

### 例
```zsh
rails g controller Users index show
```

## `rails g model`コマンドの使い方
モデルとマイグレーションを生成する
* `rails generate model NAME [field[:type][:index] field[:type][:index]] [options]`

引数 | 説明 |
--- | --- |
**NAME** | モデル名(頭文字は大文字の単数系) | 
**field** | カラム名 |
**type** | 型 |
**index** | インデックス |
**options** | オプション |

### 例
```zsh
rails g model User name:string mail:string
```

## `rails g migration`コマンドの使い方
マイグレーションを生成する
* `rails g migration NAME [field[:type][:index] field[:type][:index]] [options]`

引数 | 説明 |
--- | --- |
**NAME** | マイグレーション名 | 
**field** | カラム名 |
**type** | 型 |
**index** | インデックス |
**options** | オプション |

### 例
```zsh
rails g migration Users name:string
```


# 参考記事
[rails g コマンドが行なっていること](https://diveintocode.jp/blogs/Technology/RailsGenerateCommand#:~:text=%E3%81%A8%E6%80%9D%E3%81%84%E3%81%BE%E3%81%99%E3%80%82-,rails%20g%20(generate),%E3%81%84%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A7%E3%81%99%E3%80%82 'railsg')
[rails generateで自動生成されるファイルの設定](https://qiita.com/kodai_0122/items/14494a3848654f32909d 'railsgコマンド')
[いつも忘れる「Railsのgenerateコマンド」の備忘録](https://maeharin.hatenablog.com/entry/20130212/rails_generate 'railsgコマンド備忘録')
[Railsドキュメント](https://railsdoc.com/ 'Railsドキュメント')
ChatGPTに学習させる　理想の出力ために

<h1>少数サンプルを与える</h1>



サンプルを複数与え、その法則性から、chatgptがその答えを見つけ出すのである

<h2>逆文字サンプル

おすしたべたい=いたべたしすお
ねこかいたい=いたいかこね
たくさんねたい=いたねんさくた
うんどうしたい=いたしうどんう
おさけのみたい=いたみのけさお
べんきょう=うょきんべ
ごはん=


chatgptに入力したい方はぜひ試してみてください
<hr>

すべて、文字を反対にして表示しているので最後のところ考えてというと
しっかり法則に則って答えを表示してくれる

特に肝なのがサンプルの数を増やせば増やすほどその回答精度が上がるところである


![スクリーンショット 2023-04-22 15.50.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331212/d4a3cd67-b21e-761c-b969-1fc6d84fb1a2.png)

少し増やした。精度が上がった惜しい
![スクリーンショット 2023-04-22 15.54.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331212/3acda6fb-1397-5c28-68f3-9de216535907.png)

単語自体がむずかったので簡単なものにしたら無事表示できた


これをFew shot Promptingという

以上のように入力と出力のペアを与えると
ChatGPTがその関係性を学習して
出力結果を予測する
Ubuntu 22.04 でRTX4070を使うまで(2023/4/22時点)

Ubuntu 22.04実機でRTX3060→RTX4070に交換したときに、うまく動作しませんでした
対処方法を書きます

通常だと追加ドライバーでここにnvidiaのドライバーがヒットしますが下記のように何もでてこない症状がでます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/e695e324-a86e-e3e3-1919-0c60d77c0326.png)

そのため、nvidiaのページからドライバーをダウンロードしてきます。

https://www.nvidia.com/ja-jp/drivers/results/204379/

既存のドライバー（RTX3060で使ってたドライバ）を削除します

```
sudo apt remove  "nvidia-*"
```


その後念の再起動します


再起動後、ダウンロードしたドライバーをインストールします

```
sudo sh NVIDIA-Linux-x86_64-530.41.03.run
```
画面の指示通りにインストールをすすめます


これで動作しました。

実験にNeosVR（デスクトップモード）を動かしてみました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/bb8be8b5-b342-63b3-7d6f-579171298886.png)

追記　2023/4/27時点
HDMI-0でAcer　XV253Qで接続時リフレッシュレートが240Hzで認識しない
DP-0では問題なし

Windows11でも同様なことが起きているドライバーの不具合？
nvidiaのGPUとXV253Qの組み合わせでなければお互いに正しく240Hz動作している
未解決でHDMIでは120Hzでの動作が限界になっている
Ubuntuで古いドライバー525.116.03で検証しても同様なことが起きる（Windows11は未検証）
異次元の教育効率なバグコード教育メソッド

## はじめに

「バグコード教育メソッド」は、本記事を書くまでは名前もなかった教育メソッドです。
個人的に長いこと愛用している、実践的で教育効果の高い（と思っている）教育メソッドですが、メンターをやっているメンバーとの会話で「言語化されていないと分からない」と意見を頂きましたので、メソッド名をつけてこちらで言語化しておこうと思います。


## バグコード教育メソッドとは

やり方はとても簡単です。

『まぁまぁに動くけど**バグが埋め込んであって微妙に動かない**プログラム』を新人に渡して動くようにしてもらうだけです。

OJTでやる場合は、メンターが勢いよくコードを書いて自分で**デバッグしていないまま**渡す感じでしょうか。流石にまったくデバッグしないで渡すと詰むので、まぁまぁ動く状態になったものを渡すのがよいでしょう。

ひどいと思うかもしれませんが、自分がデバッグで手一杯になってしまうと、新人には「いい感じに試験項目を作ってみてて」と雑な指示しか出せない上に、質問対応に追われるものの、結局最後に全部自分で作り直すみたいなことをやることを考えると、プロジェクト全体としては効率的な施策ではないでしょうか？

また「メンター側が予測できる程度のバグしか埋まってないコード[^1]」であれば、質問対応もさほど手間はかからず教育効果の高いフィードバックを返すことも可能です。

さらに、デバッグをまずやらせることで、どのようなところで障害が発生しやすいか？といった試験時に役に立つ感覚を養う事ができ、ついでにコードリーディングのスキルが上がったり、デバッガの使い方を覚えたり障害票の書き方を覚えたりといいことづくめのメソッドです。

以下、バグコード教育メソッドで身につくスキルについて記載します。


### コードリーディング

コードを書けるようになる近道は大量のコードを読むことです。ただし、漫然と読んでもダメです。国語よろしく作者の想いや設計思想を想像したり自分ならどう書くかを考えながら読んだり、なんらかの観点を持って読む必要があります。

バグコード教育メソッドでは **「動かないところを特定して、動くように修正する」** という明確な観点を提供しています。

**『プログラムを勉強したいが何から書いていいか分からない』** という方のモヤモヤもすっ飛びますね。

動かないところを特定する過程で、他人が書いたさっぱり意図の分からないコードを読み始めることになります。
端から全部読むのは大変だから、仕方なく英語のエラーメッセージを読むことを覚えることになるでしょう。
新人がエラーメッセージを読まないのは「読む必要性」を理解していないからです。目先の課題の解決のためにエラーメッセージを読んだ方がよいことを体験してもらいましょう。
自分で読めないなら、ChatGPT先生に読んでもらってもまぁよしとしましょう。


### print デバッグ

動かない場所付近に print 文や console.log などのログを埋め込んで、どこまで動いたかを確認する原始的な昭和からの伝統技能（？）です。

根気強く続けていれば「どの行で動かなくなってるか」までは特定できる反面、およそあたりがついていないと 大量の print 文を埋めこむことになったり、消し忘れが出たりするので注意が必要です。


### デバッガ

令和の世の中ではIDEが発達していてデバッガという便利ツールがあります。また、chrome などのブラウザにでさえデバッガ（開発者ツール）がついてます。

およそ動かなそうな場所にブレークポイント（プログラムを一時停止させる場所）を設置し、そこから１行ずつステップ実行をすることで簡単に動かない場所を特定することができます。

また、プログラムを一時停止した時の変数の値を見たり加工したりできるので、どの様に修正すれば動くようになるかを考えるのに役に立ちます。


### 報連相のタイミング・障害票

メンター側から見ると、自分でデバッグする場合の手順や見積もりを基準に、『適切に報連相が行われて課題解決に向けて進んでいるか』を考察することができます。自分の考えと相違がある場合は会話をして差異を埋めるのがよいでしょう。

また、うまく動いていない場所の特定ができたら障害票を書くことになります。
開発をやっていない人の書く障害票は開発者に優しくない傾向があるようですが、どのような障害票を書いたらコミュニケーションコストが最小になるかも会話しながら進めるのがよいでしょう。

ここで学ぶべき最高に重要なスキルは『障害発生時に、にこやかに切り分けをして問題解決をする』というスキルです。障害が発生すると殺伐とすることがありますが、このメソッドで発生するバグはすべて織り込み済みなので殺伐とするところはありません。萎縮せずにバンバン笑顔で報連相していきましょう。


## おわりに

職業エンジニアは、ゼロからスクラッチする案件よりも、何らかの案件に途中から参画したり、改修や保守案件にアサインされるケースの方が多いでしょう。

とした場合『他人の書いた意味の分からないコードを読んで理解して、それに対して必要な改修を加える』という作業は職業エンジニア生涯でずっと使える重要なスキルと言えるでしょう。

『バグコード教育メソッド』では、そのような極めて実践的で息の長いスキルを身につけることができると考えています。

メンターを担当されている皆様におきましても、アウトプットを出さなければならない中で新人の教育も行わなければいけないといった難しい状況にあるかと思いますが、この記事が一助になれば幸いです。


## おまけ１（新卒エンジニア向け手紙）

https://qiita.com/kaku3/items/2c8d4d783be7ce4fc9ea

https://qiita.com/kaku3/items/0bf1703cb8d6f84afbc5


## おまけ２（新卒エンジニア向け記事）

https://qiita.com/kaku3/items/fb949aa1a53f1f71c796

https://qiita.com/kaku3/items/aa2f81cf1e3974b8ad3a

https://qiita.com/kaku3/items/f8411523cce000de750e

https://qiita.com/kaku3/items/937354cc180c8bee823b

https://qiita.com/kaku3/items/9ef5ad3a4df0d7be9c32

## おまけ３（営業A短編シリーズ）

https://qiita.com/kaku3/items/03aae7b9e3c70c55f513

https://qiita.com/kaku3/items/3378ea55b1240d7360a1


## おまけ４（エンジニアのためのお仕事問題集）

2030年にIT人材が最大79万人不足するらしいので、学習用の資料をgitで**無料**公開してます(不定期更新)。
よろしければどうぞ。

[エンジニアのためのお仕事問題集](https://github.com/kaku3/workbooks)


[^1]: たまに予測できないバグも埋まってますが動揺してはいけません。
ストワで始めるLua第5回のコード

動画はこちら

https://www.nicovideo.jp/watch/sm42115011

https://www.nicovideo.jp/watch/sm42115018

```lua:button
--initialize
selectFlg=false
isTouching=false

--class
button={}
button.new=function(x,y,w,h,str)
	local obj={}
	obj.x=x
	obj.y=y
	obj.w=w
	obj.h=h
	obj.isBool=false
	obj.str=str
	obj.getBool=function (this)
		return this.isBool
	end
	obj.display=function(this)
		screen.setColor(255,255,255)
    	screen.drawRectF(this.x,this.y,this.w,this.h)
		if this.isBool then
			screen.setColor(0,255,0)
		else
			screen.setColor(255,0,0)
		end
		screen.drawText(this.x,this.y,this.str)
    end
	obj.isPointIn=function (this, pointX, pointY)
		return pointX > this.x and pointY > this.y and pointX < this.x+this.w and pointY < this.y+this.h
	end
	return obj
end

--toggle button
toggleButton={}
toggleButton.new=function(x,y,w,h,str)
	local obj=button.new(x,y,w,h,str)
	obj.toggle=function(this)
		this.isBool=not(this.isBool)
	end
	return obj
end

--push button
pushButton={}
pushButton.new=function(x,y,w,h,str)
	local obj=button.new(x,y,w,h,str)
	obj.push=function(this)
		this.isBool=true
	end
	obj.release=function(this)
		this.isBool=false
	end
	return obj
end

--instance
toggleButtonTbl={toggleButton.new(0,0,4,5,"A"),toggleButton.new(0,6,4,5,"B"),toggleButton.new(0,12,4,5,"C")}
pushButtonTbl={pushButton.new(0,20,4,5,"1"),pushButton.new(0,26,4,5,"2")}

function onTick()
	local w,h,inputX,inputY

	--input
	isTouch=input.getBool(1)
	w=input.getNumber(1)
	h=input.getNumber(2)
	inputX=input.getNumber(3)
	inputY=input.getNumber(4)
	
	--Touch display
	if isTouch==true and isTouching==false then
		isTouching=true
		--toggle
		for k, value in pairs(toggleButtonTbl) do
			if value:isPointIn(inputX,inputY) then
				value:toggle()
			end
		end
		--push
		for k, value in pairs(pushButtonTbl) do
			if value:isPointIn(inputX,inputY) then
				value:push()
			end
		end
	end
	
	--no touch
	if isTouch==false then
		isTouching=false
		for k, value in pairs(pushButtonTbl) do
			value:release()
		end
	end
end

function onDraw()
	--display
	local w,h
	w=screen.getWidth()
	h=screen.getHeight()
	
	for k, value in pairs(toggleButtonTbl) do
		value:display()
	end
	for k, value in pairs(pushButtonTbl) do
		value:display()
	end
end
```
RubyでAtCoder ABC276(A, B, C, D)を解いてみた

# はじめに
Webエンジニアを目指して、RubyやRailsをいじってます。
今回は、RubyでAtCoder ABC276のA, B, C, Dを解きました。備忘録として解き方をまとめていきたいと思います。

# A - Rightmost
https://atcoder.jp/contests/abc276/tasks/abc276_a
```ruby:a-276.rb
s = gets.chomp.chars
unless s.include?("a")
  puts -1
else
  puts s.rindex("a") + 1
end
```
<追記>
コメントでいただいた別解になります。上記コードを簡略したものです。
```ruby:別解
s = gets.chomp
puts s.rindex("a")&.succ || -1
```
## 解説
一番右側にあるaの位置は、rindexメソッドを使って取得することができます。

# B - Adjacency List
https://atcoder.jp/contests/abc276/tasks/abc276_b
```ruby:b-276.rb
n, m = gets.split.map(&:to_i)
array = Array.new(n) { [] }
m.times do
  a, b = gets.split.map(&:to_i)
  array[a - 1] << b
  array[b - 1] << a
end

if array.size == 0
  puts 0
  exit
end

array.each do |factor|
  factor.sort!
  puts "#{factor.size} #{factor.join(" ")}"
end
```
## 解説
まず、結ばれている都市を配列に格納します。後は、問題文の通りに昇順にソートして出力すればOKです。

# C - Previous Permutation
https://atcoder.jp/contests/abc276/tasks/abc276_c
```ruby:c-276.rb
n = gets.to_i
m = gets.split.map(&:to_i)

i = 0
while m[i + 1..n - 1] != m[i + 1..n - 1].sort
  i += 1
end

m[i + 1..n - 1] = m[i + 1..n - 1].sort.reverse
for j in i + 1..n - 1
  if m[j] < m[i]
    m[i], m[j] = m[j], m[i]
    break
  end
end
puts m.join(" ")
```
<追記>
コメントでいただいた別解になります。
```ruby:別解
def number_in_lex_order(ary)
  n = ary.size
  return 1 if n <= 1
  idx = ary.sort.bsearch_index { _1 >= ary[0] }
  (1..n - 1).inject(:*) * idx + number_in_lex_order(ary[1..-1])
end

def nth_sequence_in_lex_order(n, size)
  i = 1
  table = (1..size - 1).map { i *= _1 }
  
  order = (1..size).to_a
  ans = []
  n -= 1
  size.pred.times do
    factorial = table.pop
    i = n / factorial
    n -= i * factorial
    ans << (a = order[i])
    order.delete(a)
    break if n <= 0
  end
  ans.concat(order)
end

n = gets.to_i
ps = gets.split.map(&:to_i)

i = number_in_lex_order(ps)
puts nth_sequence_in_lex_order(i - 1, n).join(" ")
```
## 解説
（[公式解説](https://atcoder.jp/contests/abc276/editorial/5161)を参考にしました）

公式解説にあるように先頭に近い要素はなるべく変えず、かつ残った末尾は降順にすることで実装することができます。

# D - Divide by 2 or 3
https://atcoder.jp/contests/abc276/tasks/abc276_d
```ruby:d-276.rb
gets
a = gets.split.map(&:to_i)

g = a.inject(:gcd)

ans = 0
a.each do |factor|
    factor /= g
    while factor.even?
        ans += 1
        factor /= 2
    end

    while factor % 3 == 0
        ans += 1
        factor /= 3
    end

    if factor != 1
        puts -1
        exit
    end
end
puts ans
```
## 解説
（公式解説を参考にしました）

まず、与えられた配列の要素における最大公約数gを求めます。このとき、nを2でも3でも割り切れない整数とすると、g=2^x * 3^y * nとなります。
そして、各要素をgで割った値に対して2と3それぞれで割り切れるまでansの値をインクリメントしていきます。最後の時点でその要素が1となっていなければ-1を出力して終了、最後まで探索できればansの値を出力します。なお、最初に各要素をgで割っているのは、「各要素が2,3,nのみで構成されていればg,2,3で割っていくことで最後は1となる」ということを利用するためです。

https://qiita.com/shoya15/items/50fd17e37d7c64f2b166
MCUプログラミングにおける修飾子、ディレクティブ、構文の活用

本記事では、組込みプログラミングでたまに使われるが重要な修飾子、ディレクティブ、構文に焦点を当てて解説します。これらの機能を理解し、適切に使用することで、効果的なコード記述が可能になり、品質や効率性の向上が期待できます。

## 1. volatile

`volatile`修飾子は、コンパイラに対して変数が外部要因（例えば割り込み処理や他のスレッド）によって変更される可能性があることを伝えます。これにより、コンパイラは最適化を行う際に、`volatile`変数に対して慎重にアクセスするようになります。例えば、`volatile`変数の値は最適化によってレジスタにキャッシュされず、常にメモリから読み取られます。これにより、外部要因による変数の変更が正確に反映されるようになります。

以下に、割り込み処理によって変更される`flag`変数を`volatile`修飾子を使って宣言する例を示します。

```c
#include <stdint.h>

volatile uint8_t flag = 0;

void interrupt_handler(void) {
    flag = 1;
}

int main(void) {
    while (!flag) {
        // Do something
    }
    return 0;
}
```
この例では、割り込みハンドラ関数interrupt_handlerによってflag変数が変更されます。flag変数にvolatile修飾子をつけることで、main関数のwhileループが割り込み処理による変更を正確に検出し、ループを抜けることができます。volatile修飾子がない場合、コンパイラは最適化の過程でループを無限ループとして解釈し、割り込み処理による変更を検出できなくなることがあります。

volatile修飾子は、ハードウェアレジスタへのアクセスや、マルチスレッド環境で共有される変数など、外部要因によって変更される変数に対して使用することで、予期しない問題を回避できます。

## 2 __attribute__

`__attribute__`修飾子は、GCCコンパイラに対して特定の属性を指定するために使用されます。これにより、関数や変数に対してコンパイラがデフォルトでは行わない最適化や振る舞いを指定できます。例えば、`weak`属性や`aligned`属性などがあります。
```c
__attribute__((aligned(8))) int aligned_variable;
```


## 3. weak

`weak`修飾子は、シンボル（関数や変数）が弱い束縛を持つことを示す属性で、リンカに対して他の同名シンボルを優先して使用させます。
```c
__attribute__((weak)) void custom_function(void) {
    // Default implementation
}

int main(void) {
    custom_function();
    return 0;
}
```
`weak`属性が指定された`custom_function`は、リンカが他の同名関数を見つけた場合に、その他の実装が優先されます。これにより、デフォルトの動作を提供する一方で、柔軟な実装を行うことができます。

## 4. \_\_restrict\_\_

`__restrict__`修飾子は、ポインタが他のポインタと重複しないことを示すために使用されます。これにより、コンパイラは最適化を行いやすくなります。
```c
void custom_function(int * __restrict__ ptr1, int * __restrict__ ptr2) {
    // Do something
}
```
## 5. _Thread_local

`_Thread_local`修飾子は、変数がスレッドごとに独立したインスタンスを持つことを示すために使用されます。C11およびC++11以降でサポートされています。
```c
_Thread_local int thread_specific_counter;
```
## 6. #pragma
#pragmaディレクティブは、コンパイラに対して特定の動作を指示するために使用されます。これにより、コンパイラ固有の機能を利用したり、最適化や設定を制御することができます。#pragmaの後に指定されるトークンによって、ディレクティブの動作が決まります。

組込み開発では、割り込みベクターやメモリマップを制御するために#pragmaディレクティブが使われることがあります。例えば、#pragma locationは、特定の変数や関数を指定されたメモリアドレスに配置するために使用されます。
```c
#pragma location = 0x20000000
uint32_t custom_memory_section[1024];
```
この例では、custom_memory_section配列が0x20000000アドレスに配置されます。

また、#pragma interruptディレクティブは、関数を割り込みハンドラとして指定するために使用されることがあります。

```c
#pragma interrupt
void timer_interrupt_handler(void) {
    // Interrupt handling code
}
```

この例では、timer_interrupt_handler関数が割り込みハンドラとして設定されます。

このように、#pragmaディレクティブは、組込み開発においてコンパイラに対して特定の動作を指示するために使用され、コードの品質や効率性を向上させることができます。



## 7. asm

`asm`構文は、C言語やC++言語のコード内にアセンブリコードを埋め込むために使用されます。インラインアセンブリとも呼ばれます。


```c
void custom_function(void) {
    asm("nop");
}
```


## 8. offsetof

`offsetof`構文は、構造体のメンバのバイトオフセットを計算するために使用されます。構造体のメンバへのポインタ操作を行う際に役立ちます。

```c
#include <stddef.h>

struct CustomStruct {
    uint8_t field1;
    uint32_t field2;
};

size_t offset = offsetof(struct CustomStruct, field2);
```

## まとめ
この記事では、組込みシステム開発におけるマイクロコントローラ（MCU）プログラミングでたまに使われるが重要な修飾子、ディレクティブ、構文について解説しました。これらの機能は、組込みエンジニアにとって、効果的なコード記述に役立ちます。
Reactについて復習（DOM、仮想DOM、パッケージマネージャー、node_modules、モジュールバンドラー、トランスパイラ）

## DOM
HTMLを解釈して木構造で表示したもの。
Document Object Modelの略である。

従来のJSでは画面の要素を更新する際DOMを直接指定して書き換えていた。
問題点として、レンダリングコスト（画面の表示速度）に問題が生じやすかったり
プログラムコードが肥大化してくるとどこで何をしているか分からなくなるという辛さがあった。

## 仮想DOM
上記問題を解決するために作られたのが仮想DOM。
仮想DOMとは、JSのオブジェクトで作られた仮想的なDOMのこと。
実際のDOMとの差分を比較して、変更箇所のみを実際のDOMに反映させることで、
DOMへの操作を最小限に抑えることが可能になった。

## パッケージマネージャー
パッケージの管理、インストール、アップデート等を担う管理ツール。
（JSではnpmやyarn、Rubyはgem）

npmやyarnは以下の課題を解決してくれる。
・パッケージの依存関係を意識する必要がない。
・チーム内でパッケージの共有、バージョン統一するのが容易。
等

NPMというパッケージを公開するレジストリがあって、
npm install [パッケージ名]とコマンドを実行することで、
自分のPCにパッケージをインストールすることができる。
コマンドを実行すると、ローカルファイルのpackage.json、lockファイルにパッケージの情報が追記される。
lockファイルにはパッケージ内部で使用している別パッケージ等のバージョン情報や依存関係が記載されている。

## node_modules
npm insatllコマンドを実行すると、
package.json、lockファイルを参照して、バージョンや依存関係が解決された状態で
node_modulesというフォルダが生成される。
（node_modulesには、パッケージの実態が展開される。）
注意点として、GitHub等のソースコード管理ツール上にあげたりはしない方がよいとのこと。
サイズが膨大だし、package.json、lockファイルを用意してnpm installを実行すれば、
node_modulesを再現できるので、わざわざ重たいファイルをやり取りする必要はない。

## モジュールバンドラー
複数のモジュールを一つのJSファイルへ変換して出力するツール。

> モジュール：
変数や関数などをまとめたものです。 
JavaScriptにおいては、1つのモジュールは1つのJavaScriptファイルに対応します。
>> https://jsprimer.net/basic/module/

> バンドル：
> バンドルはインポートされたファイルをたどって、それらを 1 つのファイルにまとめるプロセスです。
>> https://ja.legacy.reactjs.org/docs/code-splitting.html#bundling

> モジュールバンドラーとは、JavaScriptのモジュール依存関係を解決し、複数のモジュールを1つのJavaScriptファイルに結合するツールのことです
>> https://jsprimer.net/appendix/links/


>「開発はファイルを分けて行い、本番用にビルドする時に1つのファイルにまとめよう」という思想を実現するために、jsファイルやcssファイル等をまとめてくれるモジュールバンドラーが作られました。
>> モダンJavaScriptの基本から始める React実践の教科書　p.24


## トランスパイラ
> トランスパイラはJavaScriptの記法をブラウザで実行できる形に変換してくれるものです。
>> モダンJavaScriptの基本から始める React実践の教科書　p.24

古いバージョンのブラウザでも実行可能なコードに変換したり、
jsx記法で書かれたコードを、ブラウザが認識できる形に変換をしてくれたりする。
現在主流のトランスパイラは「Babel」とのこと。


# 参考文献：
モダンJavaScriptの基本から始める React実践の教科書

https://www.sbcr.jp/product/4815610722/
【個人開発】リアルタイムな写真アルバムを作った話

# はじめに
先日、友達が結婚されました。
私が、2次会の幹事に任命されたため何かやりたいなと思いました。私は写真を撮ることが好きなので写真関係が良いなと思い、リアルタイムな写真アルバムを作ることにしました。

# 作ったもの

**Real-time photo album**
![bandicam_2023-04-22_12-37-00-436_-_Trim_AdobeExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2401966/649e2b98-bde9-8dea-97bf-3690fb4755b9.gif)


- ユーザーがLineBotに写真を送信すると、ポップアップする形で表示されます。最大8枚の写真が一度に表示できます。8枚表示された状態で新しい写真が送信した場合は待機され、8枚未満となったら先入れ先出しで表示されます。（キューの動き）

- 送信された写真がアルバム形式でランダムに表示されます。写真はフリップするごとに更新されます。


↓デモ動画。右端の画面はLineBotのチャット画面です。動画の14秒くらいで写真を送信しています。
この写真たちはデモ用でAIで生成したものや自分で撮影したものです。
<iframe width="560" height="315" src="https://www.youtube.com/embed/Dou0KYF4PDI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

- 管理用の画面として、アルバムに表示するか非表示にするかの機能も作りました。
不適切な写真や重複の写真を非表示にするのに役立ちます。

↓グレーアウトしてるのが、非表示状態です。（私だけしか見ないので雑になってしまいました）
![管理画面.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2401966/e34aaeca-b921-41a5-4757-8f1705547e79.png)



# 用意したもの
LineBotアカウントのQRコードを参加人数文用意して、受付で配布しました。

（このQRコードはダミー）
![akiyama_meishi-square-omote.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2401966/3867ae28-7b21-54a2-a6b0-84de5adb3e5b.jpeg)

ソフト：Adobe Photoshop 
印刷：[メガプリント](https://www.megaprint.jp/Technical/technical-photoshop)さんの 55*55 mmのスクエアカードにしました。紙はヌーボー180kgで両面モノクロ100枚で1,140円。


# 構成
ちょうどAWSを勉強していたこともあり、サーバーレス構成にしました。
初心者なので構成図の矢印の向きがおかしいかもしれませんがご容赦ください。
![システム構成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2401966/2265ba9c-a975-8553-a8a7-401535c2f997.png)

### バックエンド
LambdaのPython3.9を採用。LineBotからのwebhookを受けるLambdaに全ての処理を書くと画像処理が遅かったので、複数のLambdaに切り出し、非同期で呼び出し形式にしてみました。

### フロントエンド
OSに依存しないブラウザアプリケーションにしました。React＋GSAPを採用。GSAPは初めてでしたが扱いやすかったです。
CloudFrontでS3に置いた静的ファイルを配信する形式にしました。参列者はこのアプリを使用しないので、Cognitoの認証は不要でしたが勉強を兼ねて使用してみました。


# 大変だったこと

### 本のアニメーションってどうやればいいの？

[こちら](https://codepen.io/diemoritat/pen/LKROYZ)などを参考にしながら試行錯誤しました。

### S3の静的ホスティングの認証はどうすればいいの？

[このUdemy](https://www.udemy.com/course/aws-beginner-lecture-and-handson/learn/lecture/34026994?start=0#content)が参考になりました。(LambdaなどやRoute53も）

### デザリングのネットワークが遅すぎる！！！
会場にwifiはなさそうだったので、スマホのデザリングでネットワーク環境を用意しようと思ってました。
前日にいざテストをすると、私が格安Simを使っていたこともあり遅延が発生しまくりに・・・
仕方ないので、povoのeSimを契約して事なきを得ました。（もっと早くテストしとけばよかった）

**その他もろもろありますが、わからないところは流行りのChatGPT先生に聞くことが多かったです。**

# 結果
投稿していただいた写真は110枚。40人程度の規模だったのでまずまず。自分の経験にもなり、楽しんでくれたようだったのでやってよかったと思います。

# 改善点

- 同じページに同じ写真が表示されてしまう問題がありました。写真が増えてくれば発生確率は下がるのですが・・・時間がなかったので妥協しました。

- 会場の関係でスクリーンが80インチ程度となり写真が小さく見えた。もう少し大きくするべきだったと思います。

- 投稿してくれた中から新郎新婦がベストショットを選び、選ばれた方にはちょっとした景品を贈るとかにすれば、もう少し投稿していただけたかな。

- 投稿された写真を使用して最後に音楽に合うようなエンドロールを作れればよかった。（ただ新郎新婦に関係ない写真もあったのでそれを除外する必要がある）

# まとめ
2カ月前に思い立ち、なんとか形にすることができました。私は仕事でちょっとしたアプリを作成することはありますが、バックエンドも含めたアプリ作成は初めてだったのでいい経験になりました。
せっかく作ったので、他でも使えればいいなと思います。
vimで英語を書くプラグインを作った

追記
2024/6/2
ddcのアップデートで動かなくなっていたのですが、こっちもアップデートしたので今は動きます。

# 書いたもの
nin-english.vim

https://github.com/uesseu/nin-english.vim

出来ることは以下の通り

- 英単語の非同期補完
- 英和辞典を引く
- なんちゃってシンタックスハイライト
- ユーザー辞書
- vimでもneovimでも動く

![sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139153/8d86e07f-107b-08ef-47d3-d529231cd4c4.gif)

個人的にはある程度満足行くものが出来ました。
ちなみに、nin-english-vimという別のもありますが、こっちはレガシーなので無視してくれると助かります。

# 何故？自動翻訳じゃないん？
自動翻訳は、まぁ、凄く良いと思います(´・ω・｀)
僕も使います。例えば、pythonとかで下記のサイトのクライアントを実装して、visualモードで選択した範囲を!コマンドで投げて英訳・和訳してもらったりはしています。

https://mt-auto-minhon-mlt.ucri.jgn-x.jp/

このサイト、滅茶苦茶に使いやすいんですよね。
他にはこういうのもあるようです。

https://qiita.com/gorilla0513/items/37c80569ff8f3a1c721c

だけど、原文読み書きしたい時もあるじゃん？僕にはある。
そこで、作りました。僕のためだけにね。

# 内容
とりあえず、辞書がないとどうしようもないです。下記を使っています。パブリックドメインです。圧倒的感謝。(後でライセンスが変わったりしちゃいけないので内蔵はしていない。ダウンロードコマンドはある。)

https://github.com/kujirahand/EJDict

これを非同期補完プラグインとして下記のプラグインに食べさせて動かします。暗黒美無王のプラグインなので、設定は必須ですね。

https://github.com/Shougo/ddc.vim

## 辞書を引く
さて、ここまでで適当に非同期補完出来るのですが、さらに辞書を引きたかったのです。辞書を引く時にめんどいのが、英語には接頭語と接尾語がある事です。
〇〇ingとか、そういうのありますよね。これを、まぁ、当てずっぽうで付けたり外したりゴニョゴニョして辞書を引いてくれるようにしました。ポップアップで表示してくれます。
この辺の処理はdenoに任せています。正直、速く処理できれば何を使っても問題ないと思いますが…ddc自体がdeno依存なので、ddcを選んだ時点であまり選択の余地がないです。

## なんちゃってシンタックスハイライト
英語を含めて自然言語にシンタックスハイライトつける発想が何故か皆さんには無いようです。だけど、僕はマジでクソザコなので最大限の支援が欲しかったんです。

だけど、MeCaBを使うのは一寸大げさかなと思いました。複雑にすると遅くなるしね。何よりめんどい。そこで、何をやったかというと…ハードコーディングです。関係代名詞とか接続詞を思いつくままに色分けしただけ…。
まぁ、シンタックスハイライトなんて使わないのが王道なのでしょうが、僕は満足しています。

## ユーザー辞書
ユーザー辞書だって欲しいです。理由は専門用語を僕は使いがちだからです。ninenglish.vimにはユーザー辞書を作るコマンドがありますのでどうとでもなるのです。

# 感想
自分で満足行く英語プラグインを作れたけれど、需要ないから僕専用。
Azure Container Registryを作成しコンテナイメージをプッシュ

## 目的
業務でAzure Container Instances使う可能性が出てきたため
その際の調査結果を書き留めておくのが目的です

## 概要
この記事はAzure Container Registryにコンテナイメージをプッシュするところまでを記載しています

## 実施環境
- Windows 11
- WSL2
- Docker DeskTop 4.18.0 (104112)

## 必要なもの
- Azureアカウント
- Azure CLI バージョン 2.4 以降
- Windowsターミナル

## 事前準備
### 検証用のコンテナアプリを作成
ユーザ名を入力してそれをprintで表示するだけのFlaskアプリを作成します

(1) app.py
```python
import click
from flask import Flask
from flask.cli import AppGroup

app = Flask(__name__)

user_cli = AppGroup('user')

@user_cli.command('create')
@click.argument("name")
def create_user(name):
    print(name)

app.cli.add_command(user_cli)
```

(2) requirements.txt
```
Flask==2.2.3
```

(3) Dockerfile
```docker
FROM python:3.10
WORKDIR /usr/src/app
COPY . .
RUN pip install --no-cache-dir -r requirements.txt
cmd flask user create hoge
```

(4) docker-compose.yml
```yaml
version: '3'
services:
  flask_job:
    container_name: flask_job
    build:
      context: .
      dockerfile: Dockerfile
```

ビルドする
```shell
docker compose up -d --build
```

実行する
```shell
docker compose run --rm flask_job
```

以下のような表示が帰ってくればOKです
```shell
hoge
```

## 手順
### 1. Azure CLIを使いAzureにログイン
```
az login
```

### 2.リソースグループの作成
```
az group create --name sample20230422 --location japaneast
```

### 3. Azure Container Registryを作成
```
az acr create --resource-group sample20230422 --name sample20230422 --sku Basic
```

### 4. Azure Container Registryへログイン
```
az acr login --name sample20230422
```

以下のような状態になればOKです
```
Login Succeeded
```

### 5. Azure Container Registryへプッシュ
※sample20230422-flask_jobは事前準備でビルドした際に付けられたもの

① プッシュ先のコンテナレジストリのフル ネームを取得
```
az acr show --name sample20230422 --query loginServer --output table
```

②　プッシュするイメージにタグをつける
```
docker tag sample20230422-flask_job sample20230422.azurecr.io/sample20230422-flask_job:v1
```

③ プッシュ
```
docker push sample20230422.azurecr.io/sample20230422-flask_job:v1
```

プッシュが完了すると以下のような文言が表示されます
```
...
ae56c0c5405b: Pushed
v1: digest: sha256:7f6651b3c3220fd1806bbd2d1c01ddf839bca906c5a2de0c766e1f2150ba2126 size: 2843
```

### 6. プッシュしたイメージを確認する
```
az acr repository list --name sample20230422 --output table
```

以下のような結果が帰ってくればOK
```
Result
------------------------
sample20230422-flask_job
```

## 参考サイト
https://learn.microsoft.com/ja-jp/azure/container-instances/container-instances-tutorial-prepare-acr
長いWebページのスクリーンショットを綺麗に撮る方法

# はじめに

この記事では、縦に長いWebページのスクリーンショットを<font color="#FF4B00">**Chrome拡張を使わずに**</font>綺麗に撮る方法についてまとめます。

また、例えばChatGPTの画面のような、<font color="#FF4B00">**画面の一部のみがスクロールするせいで中々うまくスクリーンショットを撮るのが難しいページ**</font>を撮るコツについて紹介します。

# 方法

ChatGPTの画面を例にして説明していきます。


### 1. Chromeの検証ツールを起動する

右クリックで表示されるメニューから「検証」をクリックするか、ショートカットキーで起動します。

- ショートカットキー
    - Mac: command + option + I
    - Windows: ctrl + shift + I

![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263059/ec1ee4d3-356c-3527-bf61-35a4bb531436.png)

### 2. 画面サイズを調整する

検証ツールでは、表示される画面サイズを自由に変更することができます。
画面上の「Dimensions」の項目を「Responsive」に設定し、スクリーンショットを撮りたい範囲全体が映るように高さを調整しましょう。

:::note warn
※通常のWebサイトであればこの作業は不要です。ChatGPTのような<font color="#FF4B00">**画面の一部のみがスクロールするせいで中々うまくスクリーンショットを撮るのが難しいページ**</font>の場合に、この作業を行ってください。
:::

![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263059/5d4c7184-2295-fef7-4f1d-7e72717152ea.png)

### 3. Capture full size screenshotを呼び出す

ショートカットキーで機能検索を呼び出します。下記のショートカットキーで検索ウィンドウを出し、「capture」と入力します。出てきた「Capture full size screenshot」を選択することで、スクリーンショットを撮影することができます。

- ショートカットキー
    - Mac: command + shift + P
    - Windows: ctrl + shift + P

![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263059/e1955404-2457-f8b4-cd43-65b92f9d39f0.png)

# おわりに

以上の作業により、Chrome拡張なしでスクリーンショットを撮影することができました！

最近では、ヘッダーやサイドバーが固定されていて、一部のみがスクロールするようなWebページが多く存在します。
そのため、Chrome拡張を使ってもうまく全体を撮るのに苦戦していました。

この方法でだいたいのページを撮影できそうです。
ぜひ皆さんも試してみてください！

# 補足: 綺麗に撮れたスクリーンショット

![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263059/5fc74a2e-57b1-8dbf-8db6-21ac91c5f2f5.png)
【Rails】Timeメソッドのフォーマット

## はじめに
Timeメソッドで時間を表示したい時、迷わないようにするためにメモとして残します。

## 日本語設定
Gemfileにgemを追加
```ruby:Gemfile
gem 'rails-i18n'
gem 'i18n_generators'
```
config/application.rbにデフォルトを設定
```ruby:config/application.rb
config.i18n.default_locale = :ja
config.time_zone = 'Asia/Tokyo'
```
config/locales/ja.ymlファイルを作成
```
$ bin/rails g i18n_locale ja
```
### 設定方法と呼び出し
ファイルが生成されると、中身はこのような形式になっています。
```yml:config/locales/ja.yml
ja:
  time:
    formats: 
      default: "%m月%d日（%a）"
      short: "%m/%d %H:%M"
      long: "%Y年%m月%d日 %H時%M分%S秒 %Z"
``` 
呼び出し方法は「lメソッド」で呼び出します。lメソッドは主に日付や時間などのフォーマットのローカライズに使用されます。
```erb:view
<%= l Time.now %>　　　#　=> "04月22日（土）"
<%= l(Time.now, format: :short) %> # => "04/22 16:36"
<%= l(Time.now, format: :long) %> # => "2023年04月22日 16時36分41秒 JST"
```
view以外の場所では`I18n.l`で呼び出します。
```ruby
I18n.l(Time.now)
```

## 日
```yml
"%d日" # => 22日
```
## 月・日
```yml
"%m月%d日" # => 04月22日
"%m/%d"   # => 04/22
"%m-%d"   # => 04-22
```
## 年・月・日
```yml
"%Y年%m月%d日" # => 2023年04月22日
"%Y/%m/%d"   # => 2023/04/22
"%Y-%m-%d"   # => 2023-04-22
```
## 年・月・日・曜日
```yml
"%Y年%m月%d日（%A）" # => 2023年04月22日（土）
"%Y/%m/%d（%A）"   # => 2023/04/22（土）
"%Y-%m-%d（%A）"   # => 2023-04-22（土）
```
## 年・月・日・時間
```
"%Y年%m月%d日　 %H:%M:%S" # => 2023年04月22日　17:22:45
"%Y/%m/%d %H:%M:%S"   # => 2023/04/22　17:22:45
"%Y-%m-%d　 %H:%M:%S"   # => 2023-04-22　17:22:45
```

## 04月22日の、「0」を表示させないようにするには
-mオプションを指定する
```yml:config/locales/ja.yml
ja:
  time:
    formats: 
      default: "%-m月%d日（%a）"
```
```erb:view
<%= l Time.now %>　　　#　=> "4月22日（土）"
```
Mysqlでは`%-d`がサポートされていないため、`%c`を使用することで0を省ける。
## 参考
[【初心者向け・動画付き】Railsで日時をフォーマットするときはstrftimeよりも、lメソッドを使おう](https://qiita.com/jnchito/items/831654253fb8a958ec25)
concat を実装した (rfc9402)

# 概要
github: https://github.com/yabeenico/concat
rfc9402: https://datatracker.ietf.org/doc/html/rfc9402
す
ジョーク rfc9402 [Concat Notation](https://datatracker.ietf.org/doc/html/rfc9402) が2023年4月1日に公開されました。

この rfc では猫が箱に入っている状態の表記方法が定義されました。

例
```
### 2匹の猫が横に座っている
cat + cat

### 箱の中に猫がいる
[cat]

### 猫が入っている箱の上に猫がいる
cat / [cat]

### 猫の頭が箱に入っている
[c]at

### 猫のしっぽ
t
```


ABNF
```
SEQUENCE  =  POSITION / POSITION "=>" SEQUENCE
POSITION  =  ADJACENT
ADJACENT  =  OVER / ADJACENT "+" OVER
OVER      =  MULTIPLE / MULTIPLE "/" POSITION
MULTIPLE  =  CONCAT / NUMBER [ "*" ] MULTIPLE / NUMBER "/" MULTIPLE
CONCAT    =  SUBJECT [ NUMBER ] / [ PARTIAL ] CONTAINER [ PARTIAL ]
CONTAINER =  "[" OPT-POS "]" / "(" OPT-POS ")"
CONTAINER =/ "{" OPT-POS "}" / "<" OPT-POS ">"
OPT-POS   =  [ POSITION ]
SUBJECT   =  CAT / 1*ALPHA / "@"
CAT       =  "cat" / PARTIAL
PARTIAL   =  "c" / "a" / "t" / "ca" / "at"
ALPHA     =   %x41-5A / %x61-7A
NUMBER    =  1*DIGIT
DIGIT     =  "0" / "1" / "2" / "3" / "4"
DIGIT     =/ "5" / "6" / "7" / "8" / "9"
```

# 実装
python / Lark-parser で実装しました。
ABNF のいい感じの処理系がなかったので、EBNF を自分で定義しました。
rfc9402 の全てを実装することはまだできていません。
実装したのは以下の表記のみです。

```
<>: grouping
/: over
*: multiple
+: next
(): round container
{}: soft container
[]: square container
@: ball
cat: cat
```

# インストール
```
$ git clone https://github.com/yabeenico/concat.git
$ cd concat/
$ pip3 install -r requirements.txt
$ ./concat.py 'cat'
 /\    /
(' )  (
 (  \  )
 |(__)/
```

# 実行例
```
$ ./concat.py 'cat'
 /\    /
(' )  (
 (  \  )
 |(__)/

$ ./concat.py '[cat]'
 --------
| /\    /|
|(' )  ( |
| (  \  )|
| |(__)/ |
 --------

$ ./concat.py 'cat + cat'
 /\    /  /\    /
(' )  (  (' )  (
 (  \  )  (  \  )
 |(__)/   |(__)/

$ ./concat.py 'cat / cat'
 /\    /
(' )  (
 (  \  )
 |(__)/
 /\    /
(' )  (
 (  \  )
 |(__)/

$ ./concat.py '<(cat * 2) + {@ + cat}> / [cat]'
  ~~~~~~~~~~~~~~~~~     -----------------
 ( /\    /  /\    /)   /          /\    /\
( (' )  (  (' )  (  ) /          (' )  (  |
(  (  \  )  (  \  ) ) |    __     (  \  ) |
 ( |(__)/   |(__)/ )   \ _/  \_@  |(__)/  |
  ~~~~~~~~~~~~~~~~~     \________________/
 --------
| /\    /|
|(' )  ( |
| (  \  )|
| |(__)/ |
 --------
```

# シェル芸勉強会用メモ
- 技術選定に2日 (月火)
- 飲み会 (水)
- 実装時間に2日 (木金)
- ABNF は通信プロトコルの定義でよく使われるらしい
- BNF が原始的なやつで EBNF が BNF の拡張版
- Lark は EBNF を少し拡張したやつらしい
- rfc の例
    - tcp
        - https://www.ietf.org/rfc/rfc793.txt
    - 鳥類キャリアによるIP (ジョーク)
        - https://www.ietf.org/rfc/rfc2549.txt
【書籍】1冊ですべて身につくHTML＆CSSとWebデザイン

# プログラミング初学者おすすめ参考書
　　　　　![アートボード 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3330104/726ccfde-fb06-c47d-47e9-07cecfe69146.png)

## この書籍をおすすめしたい人
まずは、まっさらな状態からWebエンジニアを目指しこれから学習を始める人にぜひおすすめしたいです。
私自身は知識0の状態からオンラインスクールに通い、ある程度HTML・CSSのことを学んだ上で拝読しましたが、先にこの本を読んでおけばと思いました。基礎から書いてくれているので、Webサイトとは？HTMLとは？CSSとは？というところから全体像を掴めるかと思います。またサンプルサイトの作成手順に沿って解説してくれているので、読み進めながら実際に手を動かし実践できます。
しかしある程度学んだ後でも復習はもちろんのこと、便利なツールやサイトを紹介してくれていたり新しい学びもあるので、とても価値のある書籍でした。お値段以上です！

## この書籍を特におすすめポイント
- 色が使われていたり文字も大きく、読みやすい！
- コードも添えて丁寧に解説してくれているのでわかりやすい！

## 身につく技術
- HTMLの基礎
- CSSの基礎

## 購入場所
私は[Amazon](https://www.amazon.co.jp/gp/product/B07PS1ZJN6/ref=dbs_a_def_rwt_bibl_vppi_i0)から購入しました！

## まとめ
HTML.CSS応用編とJavaScript編も出版されているので購入しました！
また読み終わったら投稿しようと思います: )
良いプロンプトの書き方



<h2>良い文章を消してもらうための4つの基本


指示
作成してくださいなど

文脈
あなたは優秀な翻訳家です
役になりきってもらう

入力データ
こうしたいなどの質問

出力形式
50文字以内or小学生にもわかるようになど


例としては

あなたは銀行で働くサラリーマンです。寝坊で遅刻してしまいました。(文脈)
下記の要望を実現する言い訳を
30文字以内(出力形式)
で作成してください。(指示)

要望:上司に叱られない(入力データ)

言い訳:(ここに合わせた言葉を考えてもらう)


実際に入力してみる
![スクリーンショット 2023-04-22 11.57.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331212/8eb30bb1-8743-9bd6-2bc3-589578ed03e9.png)￼

言い訳:電車遅延でした

銀行で働いてるから、それに即した適切な言い訳を望んだけど今回は無理だった。
めちゃめちゃ堂々と嘘つくやん…
しかもめっちゃバレやすい嘘をなぜ選んだ….

また、上記の基本に合わせず脊髄反射の如く入力すると…
￼
![スクリーンショット 2023-04-22 12.01.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331212/b2d4a97d-4d1b-22ff-4254-b715104b6201.png)

知りたいこと以外にも結構情報を加えて返してくる
これは指示に合わせた出力ではない。

「言い訳」だけでもいいのにそれ以外が無駄に混じっていることや
言い訳の文を提供してくれていないことがわかるんば








Apiでもやってみる
![スクリーンショット 2023-04-22 12.31.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331212/16f1520d-4c1b-ccd5-f7b3-27f8c7e3d9b8.png)


 実際に動かしてみると…
![api.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331212/83de5050-9763-d7d4-fcef-eac02b7c8505.png)

同じ出力結果が出た。普通に嬉しい


そして入力した文字に合わせて内容が変えられ、汎用性が上がった。
![スクリーンショット 2023-04-22 12.41.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331212/0a58a934-c148-c22c-39c3-fb28bf8fd2a0.png)
これを
上司専用遅刻言い訳アプリとでも命名してやろう
これだけは覚えておこう！初めてGitを触る人へ

# 1.Gitとは？

ファイルのバージョン管理を行うもの。

リーナス・トーバルズ：Linuxを使った人

リポジトリ：スナップショットを記録(git commit)

ステージ：コミットする変更を準備(git add)

ワークツリー：ファイルを変更する作業場

コミット・・・スナップショットを記録すること

# 2.各種コマンドの裏で起こっていること。

## 2.1 git addコマンドの裏側で起こっていること。

例：index.htmlファイルをワークツリーで作成したとする。

git add index.htmlをすることによって、

リモートリポジトリでファイルの内容を圧縮して、圧縮ファイルAが作成される。

その後、ステージにindex.htmlと圧縮ファイルAとマッピングされている。

## 2.2 git commitコマンドの裏側で起こっていること。

マッピングされた情報がリモートリポジトリに保存される。

そのさい、ツリーというのが作られる。

ツリーが作られたら、その後そのツリーファイルに紐付けされているコミットファイルが作られる。

ツリーファイルにより、その時のスナップショットの状態がわかる。

## 2.3 git statusコマンドの裏で起こっていること。

例：ワークツリーとステージで変更されたものとリモートリポジトリとステージで変更された部分をみている。

### コミットファイルに書かれていること。

- ツリー名
- 作成者
- 日付
- コミットメッセージ

わかりやすくコミットメッセージを書くこと。

### 2.4 git init は何をしているのか？

git init:

.git ディレクトリが作成され、gitに必要なファイルが生成される

プラスα：railsでは自動的に.gitが作られる

### 2.5.git cloneは何をしているのか？

git clone  <リポジトリ名>

git cloneをすることによって、

- プロジェクトのファイル
- リモートリポジトリ

この２つがコピーされる

### 2.6 git statusは何をしているのか

git status

変更されたファイルを確認することができる

## 3.現在の変更状況を確認する

### 3.1コミットやステージに追加する前にどのファイルが変更されたかを確認する癖をつける

変更されたファイルを全てコミットしてしまうと、まだコミットするべきではなかったものまで変更してしまうから。

git statusで行うことができる。

### 3.2コミットやステージについてする前に、どんな変更したかを確認する

gitdiff コマンドを使用する

注意： git diffは git addする前の変更分を見ることができる。

もし、git addした後の変更分をみたい場合は、

git diff —stagedというオプションを追加すること。
Djangoスタートアップ　その12(Nginxにstaticファイルを設置、Postgresql接続)

# Nginxにstaticファイルを設置
Django内の`static`ディレクトリまでのパスを記述する
```:/etc/nginx/sites-available/portfolio
location /static/ {
root /home/ubuntu/(プロジェクトディレクトリ名)/（アプリ名）/;
}
```

# PostgresqlとDjangoを接続
## インストール手順
https://www.digitalocean.com/community/tutorials/how-to-install-postgresql-on-ubuntu-20-04-quickstart

## Postgresql側の設定変更
https://itc.tokyo/django/setup-with-postgresql/

# 問題点
## Djangoのadmin画面にcss, javascriptが反映されない
### 原因
admin画面の静的ファイルのパスはアプリケーションのパスと異なり、`(仮想環境のフォルダ)/lib/python3.10/site-packages/django/contrib/admin/static/`以下に配置される。

### 解決策
`/etc/nginx/sites-available/portfolio`に新たな`location`ディレクティブを記述する必要がある
```:/etc/nginx/sites-available/portfolio
location /static/ {
root /home/ubuntu/(プロジェクトディレクトリ名)/（アプリ名）/;
}

#以下追加
location /static/admin {
root /home/ubuntu/(仮想環境のフォルダ)/lib/python3.10/site-packages/django/contrib/admin/static/;
}

```

`python manage.py createsuperuser`で管理者を作成して、管理画面を操作できるようにする

### 2023/9/24 追記
migrationファイルを更新する等ファイルのアップデートを行うときは、gunicornのプロセスを再起動する


----
参考記事
https://itc.tokyo/django/setup-with-postgresql/
【基本情報】ソフトウェアとマルチメディア

# ジョブ管理

### スプーリング
システム全体のスループットを高めるため、主記憶装置と低速の入出力装置との間のデータ転送を、補助記憶装置を介して行うこと。
出力データを磁気ディスクに書き込んでから出力する。

### ラウンドロビン方式
実行可能待ち行列の先頭にあるタスクから順に、CPUを使用できる時間（タイムクォンタム）を定め、その時間内に処理が終わらない場合は、処理を中断し待ち行列の最後尾に移動し、次のタスクにCPUの使用権が与えられる方式。

### ノンプリエンプティブ方式

OSがCPUを管理せずプログラムに任せるスクの実行方式。

### プリエンプティブ方式

OSがCPUを管理するタスクの実行方式。


### マルチスレッド
一つのプログラムの中で並行処理が可能な部分を、複数の処理単位(スレッド)に分解して、それらを並行して処理するOSの機能。

# 記憶管理

### メモリコンパクション
フラグメンテーションを解決するために、細切れの未使用領域を連続した一つの領域にまとめ、再び利用可能にすること。

###　スワッピング方式
優先度の低いプログラムを一時中断して、自己ディスクに退避(スワップアウト)して、優先度の高いプログラムを主記憶に配置(スワップイン)する方式。

### オーバーレイ方式
あらかじめプログラムを同時に実行しない排他的ないくつかの単位(セグメント)に分割しておき、実行時に必要な部分だけを雪おくに配置して実行する方式。

### メモリリーク
使用可能な主記憶の容量が減少すること。

### ガーベジコレクション
メモリリークを解消するため、不要になった領域を解放する。

## 仮想記憶方式
補助記憶の一部を主記憶に見せかけて、大きな記憶空間を作る方式。

### 動的アドレス変換機構(DAT)

仮想記憶上の番地(仮想アドレス)を主記憶上の番地(実アドレス)に変換。

###　ページング方式
主記憶とプログラムを固定長(ページ)に分割し、ページ単位で管理する方式。

### ページフォルト
実行するページが主記憶に存在しないときに発生する割り込み。
不要なページを実記憶から補助記憶に追い出し(ページアウト)、必要なページを補助記憶から主記憶に配置する(ページイン)。

### スラッシング
ページフォルトが多発すると、処理効率が急激に低下する現象。
仮想記憶システムにおいて主記憶の容量が十分でない場合、プログラムの多重度を増かさせるとシステムのオーバヘッドが増加し、アプリケーションのプロセッサ使用率が減少する状態。

### ページ置き換えアルゴリズム

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/a1d5f002-5a69-74e8-2bcb-0931639c84d1.png)

# マルチメディア

### ラスタデータ
ピクセルの集まりで画像を表現する。

### ベクタデータ
座標の位置や線分の長さなどを演算で表現する。

### SVG
図形オブジェクトをXMLで記述し、Webページで図形描画にも使うことができる画像フォーマット。

### バーチャルリアリティ
仮想の空間に入り込んだような効果を生み出す技術。

### AR
目の前にある現実の情景や風景の映像をコンピュータに取り込み、現実には存在しない仮想の情報を合成して映し出す技術。
Flutterでローカルにある効果音を再生する

ボタンをクリックした場合などの効果音をFlutterで再生する方法です。

[audiocache](https://github.com/AgeOfLearning/flutter_audioplayers/blob/master/doc/audio_cache.md)の方法や[just_audio](https://pub.dev/packages/just_audio)などあっちこっち探し回った結果、一番シンプルな[audioplayers](https://pub.dev/packages/audioplayers)の方法にたどり着きました。

* audiocacheは執筆時点(2023/4/22)で廃止されたようです。

# 手順

```yaml:pubspec.yaml
dependencies:
  audioplayers:  #この行をdependenciesに追加

```

ディレクトリ構成
> root/
> ├ assets
> 　　├ sounds
> 　　　　├ audio.mp3

```dart:sample.dart
//再生するファイルのトップにimport文を追加
import 'package:audioplayers/audioplayers.dart';

//再生したいところで以下を実行
final player = AudioPlayer();
player.play(AssetSource('sounds/audio.mp3'));

```

# 参考

https://stackoverflow.com/questions/72654603/the-method-play-isnt-defined-for-the-type-audiocache
Nuxt3 – URLクエリを変えたときのブラウザバックを watch で検知する

# コード例

routeの変更を監視することで実現できるようだ

```vue
<script lang="ts" setup>
const route = useRoute()
watch(
  () => route.query,
  () => {
    console.log(route['query'])
  }
)



function move() {
  navigateTo({
    name: 'example',
    query: { foo: Math.floor(Math.random() * 99999) },
  })
}
</script>

<template>
  <button @click="move">move</button>
</template>

```

# 動作例

ボタンを押した時もブラウザバックした時も同じように検知してくれる

![image](https://user-images.githubusercontent.com/13635059/233757446-92da5e1d-ba85-4dd2-b2d9-3e6f76ff0325.png)

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
C++er から見た JavaScript の参照について

# はじめに


C++er と言っていますが競技プログラミングでしか C++ を使ったことがありません

# 主張

**参照の値渡しを参照渡しと呼ぶのはやめろ！**

# 本文

JavaScript は,

プリミティブ型の変数は値渡しをされ, オブジェクト型の変数は参照渡しをされる

と言われることがあると思います [要出典]

ここで言っているのは, 関数の引数に渡した変数に破壊的な変更を加えたときに, その変数がプリミティブ型なら呼び出し元は何も変わらないが, オブジェクト型なら呼び出し元の変数から見たオブジェクトも書き変わっている ということです

```js
function f(a) {
  a.push(4);
}

a = [1, 2, 3];

console.log(a); // [ 1, 2, 3 ]

f(a);

console.log(a); // [ 1, 2, 3, 4 ]
```

そのこと自体はそうなのですが, この 参照渡し という言葉を C++ における 参照渡し と同じ意味だと思ってしまうと, 非常に困ったことになります

それは, オブジェクトに変更を加えたとき ではなく, オブジェクトを代入したとき に起こります

さて, C++ における 参照渡し とはどのようなものでしょうか
JavaScript とは違い, 型によって決まっているのではなく, & を付けることによって値渡しか参照渡しか切り替えることができます


```c++
#include <iostream>
#include <vector>

void output(const std::vector<int> &v){
  for(int e : v) std::cout << e << " ";
  std:: cout << "\n";
}

void f(std::vector<int> &v){
  v.push_back(4);
}


int main() {
  std::vector<int> a = {1, 2, 3};

  output(a); /// 1 2 3

  f(a);

  output(a); // 1 2 3 4

}
```

このように, 関数内で行った引数への操作が, 呼び出し側の変数にも反映されます
ここまでは同じようですが, 次のように書いた場合が問題です

```c++
#include <iostream>
#include <vector>

void output(const std::vector<int> &v){
  for(int e : v) std::cout << e << " ";
  std:: cout << "\n";
}

void f(std::vector<int> &v){
  v = std::vector<int>{1, 2, 3, 4};
}


int main() {
  std::vector<int> a = {1, 2, 3};

  output(a); /// 1 2 3

  f(a);

  output(a); // 1 2 3 4

}
```

このように, 引数になった変数への代入も, 元の変数に反映されています

同じことを JavaScript で行ってみましょう

```js
function f(a) {
  a = [1, 2, 3, 4]
}

a = [1, 2, 3];

console.log(a); // [ 1, 2, 3 ]

f(a);

console.log(a); // [ 1, 2, 3 ]
```

このように, 代入が反映されていません

参照している先のオブジェクトを破壊的に書き換えている訳ではなく新しいオブジェクトへ参照先を変えているわけですが, その変更が元の変数には反映されないわけです

この現象は, C++ において 参照渡し というよりも ポインタの値渡し に近いものがあります

```c++
#include <iostream>
#include <vector>

void output(const std::vector<int> &v){
  for(int e : v) std::cout << e << " ";
  std:: cout << "\n";
}

void f(std::vector<int> *v){
  v->pop_back();
}

void g(std::vector<int> *v){
  v = new std::vector<int>{1, 2, 3, 4};
}


int main() {
  std::vector<int> *a = new std::vector<int>{1, 2, 3};

  output(*a); /// 1 2 3

  f(a);

  output(*a); /// 1 2

  g(a);

  output(*a); // 1 2

}
```

ポインタの参照先は共通なのでオブジェクトへの操作は共有され, ポインタとなっている変数自体はコピーが渡されているだけなので, 書き換えても元の変数は変わりません

変数を使う際, ポインタとなっている変数 を指しているのか ポインタが指している先の変数 を指しているのかを C++ の場合はアロー演算子の有無によって明示的に切り替えていますが, JavaScript ではそういったものがないので (僕にとっては) 非常に混乱する元となりました


# おわりに

主張として強い言葉を使ってしまいましたが, まぁ用語が被るのはよくあるので別にいいです (数学と日常で 以下 とか または とかが違ったりね)

けど, 切り替えられないの不便じゃないかなって思ったりはした (C++ が特殊説はあるけどこれに慣れているので...)
Nuxt3 – navigateTo で URLクエリを変えて watch で監視する

```vue
<script lang="ts" setup>
const route = useRoute()

watch(
  () => route.query,
  () => {
    console.log(route['query'])
  }
)

function move() {
  navigateTo({
    name: 'example',
    query: { foo: 'bar' },
  })
}
</script>

<template>
  <button @click="move">move</button>
</template>

```


# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
【基本情報】半導体メモリ/補助記憶装置

# 半導体メモリ

コンピュータの記憶装置に使われる。

## RAM
読み書きできるメモリ。
電源を切ると記憶していた内容が消えてしまう特性(揮発性)がある。

### DRAM
コンデンサに電荷を備えた状態か否かによって1ビットを表現。

・主記憶に用いられる。
・大容量で安価。
・構造が簡単で高集積化に適している。
・自然放電を防ぐため、リフレッシュ動作(再書き込み)が必要。

### SRAM

・キャッシュメモリに用いられる。
・フリップフロップ回路で構成され高速。
・小容量で高価。
・構造が複雑で集積度を高めにくい。
・電源が供給されている限り、記憶内容を保持し続けるため、リフレッシュ動作は不要

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/d426ae41-1360-b279-8369-f61a2657ca2d.png)




## ROM
本来は、読み出し専用のメモリ。
電源を切っても記憶していた内容が消えない特性(不揮発)がある。

### PROM
利用者が書き込めるROM。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/b3f741f3-0c89-c007-0d7c-3cbfe2481fd4.png)

フラッシュメモリはUSBメモリやSDカードなどに使用される。

### SDXC
SDメモリカードの上位規格。
ファイルシステムにexFATを採用し、最大2Tバイトの容量に対応できる。

# キャッシュメモリ

主記憶よりも高速。
CPUと主記憶の間に配置して、アクセスの高速化を図る。

## 実行アクセス時間

### ヒット率
アクセスするデータがキャッシュメモリに存在する確率。

### キャッシュメモリを使った実効アクセス時間

ヒット率 * キャッシュメモリのアクセス時間 + ( 1 - ヒット率 ) * 主記憶のアクセス時間

### キャッシュメモリへの書き込み方

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/a197f151-a379-e81e-8493-ae25b19a4bba.png)

# メモリインタリーブ

主記憶を複数のバンク(区画)に分け、連続するアドレスの内容を並列アクセスすることで、アクセスの高速化を図る。

## アクセス速度

※レジスタ
CPUに内蔵される演算処理用の記憶回路。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/576da51f-0526-c501-4fd0-572a57049462.png)

### SSD

フラッシュメモリを用いた、磁気ディスク装置の代わりとなる記憶媒体。
位置決め時間や回転待ち時間などがない。
静音で振動や衝撃に強く、消費電力が小さい。アクセス速度が速い。

# 補助記憶装置

CPUが直接読み書きできるのは、主記憶上にあるプログラムやデータのみ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/d49beff5-88ec-ab59-c990-77487efd9cfe.png)

# 磁気ディスク装置(ハードディスク)

磁性体を塗った円盤状のディスクにデータが記憶され、磁気ヘッドを移動させながらデータを読み書きする装置。


### セクタ方式(記憶方式)

データを記録する最小単位のセクタ。
セクタがいくつか集まって円心円状のトラック。
トラックがいくつか集まって1面を構成する。

中心から等距離にあるトラックの集まりをシリンダ。

## アクセス実行時間

CPUが、データの読み書きの指令を出してから、データの読み書きが終わるまでの時間。

アクセス実行時間 = 位置決め時間 + 回転待ち時間 + データ転送時間

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/06a6d21a-554c-e4f6-b4af-7e07746e3c88.png)


## フラグメンテーション

磁気ディスク装置にデータの追加や削除を繰り返すことで、データが断片化する現象。

### デフラグ
フラグメンテーションを解消する。
断片化したデータを連続した領域に再配置。