OmniAICreator/Qiita-1.07M huggingface dataset:
ガベージコレクションによる削除の対象になるインスタンスの条件について

:::note
ガベージコレクションはゴミ集めを意味し、ヒープ領域に残った不要なインスタンスを自動的に削除する仕組みのこと。
:::

##### 誰がガベージコレクションを実行するのか
これは**ガベージコレクタ**と呼ぶ専用のプログラムが行う。このプログラムはプログラミング言語の実行環境が提供するもので、独立したスレッドとして動作する。

このプログラムは適切なタイミングでヒープ領域の状態を調べ、空きメモリ領域が少なくなったことを検知すると実際のガベージコレクション処理を起動する。

##### ガベージコレクタはどうやって不要なインスタンスを判断するのか
:::note
ガベージコレクタは、スタック領域とメソッドエリア（静的領域）から辿れなくなった不要なインスタンスを削除する。
:::

オブジェクト指向プログラミングを使って書いたアプリケーションでは、クラスからインスタンスを作り、そのインスタンスに対してメソッドを起動することで動作する。そしてインスタンスはさらに別のインスタンスを参照することができる。

オブジェクト指向プログラミングを使って書いたアプリケーションはたくさんのインスタンスを作るが、それらが参照しあって全体としてネットワークを構成する。

このインスタンスのネットワークはヒープ領域だけでなく、スタックとメソッドエリア（静的領域）も関わる。

スタックとメソッドエリアはアプリケーション処理で必要な情報のため、ここから参照されているインスタンスはガベージコレクタの対象にならない。

:::note
プログラミングをする上で気をつけるべきことは、不要になったインスタンスをスタックやメソッドエリアから参照し続けないようにすること。しかしこれは気づきづらいものなので、メモリの使いすぎを防ぐためのアプリケーションを見直すポイントして覚えておく。
:::
GIthub Project管理方法 忘備録

## 記事の萌芽
今年いくつかのプロジェクトを並行して進めていったが，やりたいことが発散してしまったことで，タスクが飽和し管理しきれなくなってしまった．

- 管理ツールに対して継続して造詣を深めること
- 自分の経験を過信しすぎないこと
- 自分の中で課題管理方法を整理すること

上記3点は今回の反省で抽出した課題感となる要素である．

本記事ではこの中でも，課題管理について調査した内容を整理する．

## URL
### 課題管理
https://lychee-redmine.jp/blogs/efficiency/tips-kadaikanri-tool/

- 課題が発生した背景
- 課題をいつまでに解決する必要があるのか
- 課題に対してどのようなアプローチを行うのか
- アプローチにより課題は解決したか、解決しなかった場合その問題点

下記4点についてissue毎にFBできることが理想．

### issueラベル

https://qiita.com/shun_tak/items/d363b7c5d9e8fa19dc6b

プロジェクト管理の際にissueラベルを適切に使用できていなかったと反省．本記事を参考に今後活用していく

### プルリクのお作法的な話
https://qiita.com/umanoda/items/93aec41213f8e3ce14c8

これは以前も見たが，おろそかになっていた節があるので今回の機会を大切にして意識していきたい．


## まとめ
本記事では課題管理に関して参考となるURLを整理した．
今後，本記事の内容をかみ砕き，課題管理の際に有効活用していく．
良さげな管理用テンプレートを作成できたら本記事にて更新する予定．

プロジェクトにぶら下がっているタスクをぬか漬け状態にしないようにしていきたい
新卒エンジニアが入社して感じたこと

## 初めに
私は都内のベンチャー企業に23卒として入社した@KI-kouと申します！

今年の4月から新卒として入社し、現場に配属されてから3ヶ月がたったので、これまでに感じたことをまとめてみたいと思います。来年以降、新卒でソフトウェアエンジニアになる方や、受け入れる方に新卒はこんなことを考えていると言うことがわかっていただけると嬉しいです。

## 入社してからの流れ
- 4月~8月: 社会人研修や開発研修
- 9月~: サーバーサイドエンジニアとして現場に配属

## 主な業務内容
- Python(FastAPI)を使用したWeb開発
- AWS(Terraform)を使用したインフラ構築

## 配属されてからの心境の変化
1. 配属前の研修よりも配属されからの方が日々楽しく開発ができている
研修は基本的に受け身であることが多く、最初こそはやる気があるものの5ヶ月も続くと途中でバテてしまいました。
やはり、自分で考え試行錯誤しながらコードを書くことのできる時間は楽しいものです。

2. 自分が作成した機能が顧客に直接使用されると言う嬉しさ
日々書いているコードは顧客に使用されるものであり、自分が作成した機能がリリースされた時の嬉しさは研修では得られない達成感があります。(当然バグを起こさないかという心配もついてきますが)

3. 日々のレビューや議論で得られる新たな学びへの感謝
コードレビューは日々行われ、そのたびに「なんでこの仕様の実装漏れてしまったのだろう」、「この指摘前も受けたのに同じ失敗をしてしまった」ということで自分が情けなくってしまう事は日常茶飯事です。ですが、そこでくよくよしても仕方ないので申し訳ないと思いつつ次に同じ失敗を繰り返さないように心に誓います。

## 配属されてから意識するようになったこと
1. コードレビューを受けた際にはなるべく爆速で修正し、再レビューをお願いする
私のような新米エンジニアはコードレビューを受けると莫大なレビューがくるのですが、できる限り早く修正し、再レビューをお願いするようにしています。これは、自分のためでもレビュワーのためでもあると思っています。
レビューから時間が経つと、自分の中でコード修正のモチベーションが下がってしまい、生産性に関わってきてしまいます。また、そもそもコードの読みやすさ以前に実装の方針が間違っているということもあるので一人で悩む前にとりあえずコードを見てもらい早めのレビューをもらうようにしています。
レビュワーにとってもレビューしてから長い時間が経って、コメントした内容が全く伝わってないコードを見せられることを避けることもできると思います。

2. 迷ったら公式ドキュメントを読むOSSであればコードを読む
配属されるまでほとんで意識してこなかったことではありますが、何かコードを書いていて分からないことがあった際の手段として公式ドキュメントや実際のコードを読む事は非常に大事であると考えるようになりました。
それまでは、エラーコードをChatGPTやGoogle検索に貼り付けて解決しようとしていましたが、最新のライブラリを使用している場合や情報の正確性といった観点から、公式ドキュメントやコードを読むことが増えました。

## 最後に
新社会人として、約8ヶ月が経ちました(早い！)。日々悩みながらも学びがあり、エンジニアという職業は楽しいなと感じているところです。就活でエンジニアになろうか悩んでいる方、是非おいでませ！人生長いので向いてなければ転職すればいいだけです(無責任w)是非お待ちしております。
【これからNext.jsを勉強する人必見！】SSR（サーバーサイドレンダリング）とSSG（静的サイト生成）について

# サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）の比較

ウェブ開発におけるページのレンダリング方法として、サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）の二つがあります。これらの技術は、どのようにしてユーザーにコンテンツを提供するかという点で異なります。

![DALL·E 2023-11-12 12.38.02 - An infographic comparing Server-Side Rendering (SSR) and Static Site Generation (SSG). The image should be split in two vertical halves, with the left.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711391/c73e8b6b-d4ad-a4eb-9113-90705aff878a.png)


## サーバーサイドレンダリング（SSR）

SSRは、ユーザーからのリクエストがサーバーに送られるたびに、サーバー上でHTMLを動的に生成し、ページをレンダリングする方法です。これにより、ページは常に最新の状態を反映できますが、各リクエストでサーバーの処理が必要になるため、レンダリングに時間がかかることがあります。


## 静的サイト生成（SSG）

SSGでは、ビルド時に全てのページがHTMLとして生成され、それらのページは事前にサーバー上に保存されます。ユーザーからのリクエストには、すでに生成された静的なページが返されるため、サーバーの処理が不要で高速にレンダリングされます。ただし、コンテンツの更新にはビルドの再実行が必要です。

# SSRとSSGの適切な利用シナリオ

ウェブ開発では、サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）が異なるシナリオに適しています。以下は、それぞれのアプローチを採用するのに最適なケースです。

## サーバーサイドレンダリング（SSR）

SSRは以下の場合に適しています

- **SEO最適化が重要なウェブサイト**
検索エンジンのクローラーにコンテンツを効率的に認識させるために役立ちます。
- **リアルタイムでコンテンツが更新されるウェブサイト**
ニュースサイトやSNSのように、最新情報をユーザーに提供する必要がある場合に理想的です。
- **初期ページロードパフォーマンスが重要なウェブアプリ**
SSRは初回のページ読み込みを高速化し、ユーザーエクスペリエンスを改善します。

使用例
- ユーザーのアクションに応じて動的に内容が変更されるEコマースサイト。
- ユーザーログインに基づいたカスタマイズされたコンテンツを表示するウェブアプリケーション。


## 静的サイト生成（SSG）
SSGは以下の場合に適しています

- **高速なページロードタイムを必要とするウェブサイト**
静的ファイルはCDNを介して迅速に配信され、ページのロード時間を最小限に抑えます。
- **セキュリティが優先されるウェブサイト**
サーバーサイドの処理が少ないため、攻撃面が減ります。
- **定期的には更新されないコンテンツ**
マーケティングサイトやブログなど、定期的な変更がないものに適しています。

使用例
- ポートフォリオサイトやイベント告知サイトなど、頻繁な更新が必要ないウェブサイト。
- ドキュメントやマニュアルなど、一度公開後に変更が少ない情報を扱うサイト。

SSRとSSGの選択は、ウェブサイトの要件、コンテンツの性質、そして求められるユーザーエクスペリエンスに基づいて行うべきです。

## まとめ

SSRは動的なコンテンツに適しており、SSGは変更が少ないコンテンツに適しています。選択は、プロジェクトの要件とページの更新頻度に基づいて行います。
Goで作るクリーンアーキテクチャの自己解釈まとめ

# 本記事の内容
Go言語によるWebアプリの個人開発に挑戦中の非Web系エンジニアが、個人の勉強の過程で情報を整理するための自分向けページ。
調べる中で出てきた別ページの情報を1か所にまとめるために使用。
この記事を見て読者であるあなたが何か学べる、という内容ではありません、、、

## クリーンアーキテクチャの目的
# 設計思想
- 依存性逆転の原則(Dependency Inversion Principle): 高レベルのモジュールは低レベルのモジュールに依存すべきではなく、どちらも抽象に依存すべき。抽象は詳細に依存してはならない。
- 単一責任の原則(Single Responsibility Principle): 一つのクラスはただ一つの責務を持つべきであり、変更の理由は一つであるべき。

## メリット/デメリット
- :smile: 保守性向上: フレームワーク非依存で変更が容易。バグが発生しにくい構造を提供
- :smile: テストが容易性: 機能を分割しドメインを区切ることでテスト、統合テストがしやすい
- :smile: 拡張性: 別のドメインとの間にインターフェースを介することにより、内部の修正を外部に漏らさない。新しい機能や変更が容易に組み込める構造を確立
- :cry: 機能の分断、別ロジックとはインターフェースを介すためコードが冗長になる

# 本題
ここから自分の理解を整理する内容です。

### クリーンアーキテクチャの図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604944/fad48ce0-c9e1-4680-3ade-5ac862f6c755.png)
[1]より引用

### DDDアーキテクチャ詳細像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604944/66bc4e84-a097-d48d-ea51-be2c317fc70b.png)
[2]より引用

### DDDアーキテクチャとクリーンアーキテクチャ図のマッピング 
- Presentation層（Controller）
    - エンドポイント定義
    - Http requestで渡された値とApplication層に渡す値のマッピング
    - 入力値のvalidation（一部）
    - クリーンアーキテクチャの`Frameworks & Drivers`に対応
        - WebサーバーからのリクエストやUIでの操作を吸収。
        - 処理の結果を返す
        - 外部との境界（バウンダリ）

- Interface層（Repositry（実装クラス））
    - Entityの永続化/検索
    - クリーンアーキテクチャの`Interface Adapters`に対応
        - データの取得や永続化を担当
        - Interfaceなので、機能の外側だけを定義（例えばデータの追加、検索など）
            - 中の実装はDomein層で書く。公開部分を変更しなければ内部処理が変わっても外部に影響は及ばない

- Use Case層（Application層）
    - ユースケースの実現
    - Entity、Value、Objectの生成、使用、永続化 **依頼**
    - EntityからPresentation層に渡す値への変換
    - クリーンアーキテクチャの`Application Business Rules`に対応
        - アプリケーション固有のビジネスルール、DDDにおけるアプリケーションサービスなどを定義します。
        - ここに実現したい処理を書く

- Domain層（Repositry）
    - Repositryの仕様定義
    - ドメイン知識（ルール/制約）の表現
        - Entity、Value、Object、Domain Serviceなど
    - クリーンアーキテクチャの`Enterprise Business Rules`に対応
        - 最重要ビジネスルール、DDDにおける値オブジェクト、エンティティ、ドメインサービスなどを定義

## usecaseを中心としたクラス図で表現してみる
![clean-architecture.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604944/9b03ad11-3e84-adc6-9611-07eff3cd78c3.jpeg)

- Use CaseはDomainに依存する
    - Use Caseはアプリケーションで実現したいビジネスロジック
    - Domainはビジネスロジックを構成（表現）するルールやデータ構造
- Use CaseはRepositoryインターフェースに依存する
    - インターフェースは提供する機能の「側」だけを提供（関数とその入出力の側しか知らなくてよい）
        - 側さえ守ればインターフェースの実態の実装はどのように変化させても良い
- Use Caseを扱うcontrollerにはUse Caseインターフェースを提供。
    - こちらもUse Caseの実態の実装はインターフェースで定義した側を守っていれば
    - どのように実装しても構わない

このようにインターフェースを介することで依存の逆転を実現している

## UMLに準拠したクラス図での表現
![architecture_class_diagram.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604944/a43bfce4-5d50-5bf0-49b9-c751ed282cb7.jpeg)

- Use Caseはインターフェースで定義した内容に準拠したmethodを実装
- modelsや振る舞いのデータ授受に必要な機能はRepositoryインターフェースを介して実行


## 参考元
- https://qiita.com/arakawa_moriyuki/items/59ce00542d5859d60a2d [1]
- https://little-hands.hatenablog.com/entry/2018/12/10/ddd-architecture [2]
- https://zenn.dev/88888888_kota/articles/1a5caac8d743b8 [3]
Next.jsの概要と歴史、メリットとデメリットをまとめてみた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711391/6110e4a7-d74c-3b62-013e-c97efdcc1814.png)

# Next.jsを知る前に。。。
Next.jsは、Reactベースのフレームワークになりますので、
以下もご興味があれば、ご覧になってください！

https://qiita.com/ri-oo/items/9ab1e6eb07f6bb248cbf


# Next.jsについて
Next.jsは、Reactベースのフレームワークで、サーバーサイドレンダリング（SSR）、静的サイト生成（SSG）、クライアントサイドレンダリングを組み合わせたハイブリッドなウェブアプリケーションを構築するためのものです。
Zeit（現在はVercelとして知られています）によって開発され、2016年にリリースされました。
Next.jsは、開発者がSEO対応のウェブサイトを簡単に作成できるようにすると共に、パフォーマンスと開発体験を向上させます。

## Next.jsの歴史

- **2016年**
Next.jsがVercel（当時のZeit）によって発表された。
- **2017年以降**
コミュニティの成長と共に、Next.jsは多くの機能アップデートを繰り返し、より使いやすく、パフォーマンスの高いフレームワークへと進化した。
- **現在**
Next.jsはReactエコシステム内で重要な位置を占めており、多くのウェブ開発者に利用されている。

## Next.jsのメリット

1. **サーバーサイドレンダリング**
ページのロード時間を短縮し、SEOを向上させる。
2. **静的サイト生成**
パフォーマンスが重要なページに対して、ビルド時にHTMLを生成する。
3. **自動コード分割**
ページのロード速度を向上させるために、必要なコードのみをロードする。
4. **ビルトインCSSサポート**
スタイリングが簡単になり、追加の設定なしでCSS-in-JSを使用できる。
5. **APIルートを提供**
サーバーレス関数を使用してAPIエンドポイントを簡単に構築できる。
6. **開発体験**
ホットリロード、エラーレポーティングなど、開発者フレンドリーな機能を備えている。

## Next.jsのデメリット

1. **学習曲線**
Reactよりも複雑であり、新しい抽象化や概念を学ぶ必要がある。
2. **フルスタックフレームワークに依存**
フロントエンドだけでなく、バックエンドの知識も必要となる場合がある。
3. **カスタマイズの限界**
Next.jsの設定は柔軟性があるものの、特定のカスタマイズが難しいことがある。
4. **大規模なコミュニティ**
Reactや他の有名なフレームワークに比べて小さいため、情報やリソースが限られている場合がある。

Next.jsは、SEOとパフォーマンスを重視する現代のウェブ開発において、強力な選択肢です。
しかし、そのメリットを最大限に活かすためには、ReactとNext.jsの両方に対する理解が不可欠です。
Reactの概要、歴史、メリットデメリットをまとめてみた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711391/28838093-5bf7-9455-e34d-4529428f46c8.png)


# Reactについて

Reactは、ユーザーインターフェイスを構築するための宣言的で効率的、かつ柔軟なJavaScriptライブラリです。
Facebookによって開発され、2013年にオープンソースとしてリリースされました。コンポーネントベースのアーキテクチャを採用しており、大規模アプリケーションのデータが変更されても効率的に画面を更新することができます。

## Reactの歴史

- **2011年**
Facebookのソフトウェアエンジニア、ジョーダン・ウォークによってReactの前身となるプロトタイプが開発された。
- **2013年**
Reactがオープンソースとして公開され、開発者コミュニティに受け入れられた。
- **2015年**
React Nativeが発表され、Reactのコンセプトをモバイルアプリケーションに拡張した。
- **2016年**
Reactがバージョン15にアップデートされ、多くの改善が加えられた。
- **2020年**
React 17がリリースされ、アップグレードが容易になり、将来の機能のための基盤が整備された。

## Reactのメリット

1. **宣言的ビュー**
Reactを使用すると、アプリケーションの各状態に対して簡単にビューを設計し、Reactがそのビューを最も効率的な方法で更新および描画します。
2. **コンポーネントベース**
再利用可能なコンポーネントを構築することで、コードの管理が容易になり、開発の速度が向上します。
3. **ラーニングカーブ**
JavaScriptに精通していれば、Reactを学ぶのは比較的簡単です。
4. **豊富なエコシステム**
大量のサードパーティコンポーネント、開発ツール、そして豊かなコミュニティによるサポートがあります。
5. **SEO対応**
Reactはサーバーサイドレンダリングに対応しており、検索エンジン最適化が容易です。

## Reactのデメリット

1. **高速な開発サイクル**
頻繁な更新と新しいバージョンのリリースに追いつくのは大変な場合があります。
2. **複雑なアプリケーション**
大規模かつ複雑なアプリケーションでは、状態管理が複雑になることがあります。
3. **JavaScript XML (JSX)**
JSXはHTMLに似た構文を持つJavaScriptの拡張であり、慣れるまでに時間がかかるかもしれません。
4. **ドキュメント**
充実している一方で、更新が迅速なためにドキュメントが古くなることがあります。

## Next.jsについて

Reactベースのフレームワークである、Next.jsについて、
以下で触れていますので、ご興味のある方は、みてみてください！

https://qiita.com/ri-oo/items/ec86ae683ba53ef50c4a

## まとめ
Reactは、その柔軟性と効率性により、多くの企業や個人開発者に選ばれ続けています。その一方で、Reactの学習と適用には継続的な学習と適応が求められることを理解しておくことが重要です。
ローカル開発を効率化するトンネリングツール比較


## はじめに

ローカル開発中に外部からアクセスするためのトンネリングツールは、開発者にとってとても便利なツールだと思います。本記事では、私が、実装にあたって使用したトンネリングツールであるlocaltunnel、ngrok、および最新のVSCodeのBuilt-in port forwarding機能に焦点を当て、それぞれの特徴、メリット、デメリット、導入方法について説明します。

## 1. localtunnel

### 特徴

- シンプルなコマンドで簡単に利用可能
- インターネット経由で公開されるため、外部からのアクセスが可能

### メリット

- インストールが簡単で、すぐに利用を開始できる
- ローカル環境の素早い共有が可能

### デメリット

- インターネット経由のため、セキュリティ上の懸念がある

### 導入方法

```bash
npm install -g localtunnel
lt --port <ローカルポート番号>
```
## 2. ngrok

### 特徴

- HTTPS対応でセキュアなトンネリングが可能
- カスタムドメインの使用が可能

### メリット

- HTTPSが必要な場合に適している
- 多彩な機能と設定が利用可能

### デメリット

- 無料プランの制限がある（同時接続数など）

### 導入方法

```bash
brew install ngrok/ngrok/ngrok
ngrok http <ローカルポート番号>
```

※HTTPSが必要な場合
```bash
brew install ngrok/ngrok/ngrok
// ngrokにログインし、Authtokenを確認する
ngrok config add-authtoken *************** // マスキング部分にAuthtokenを貼り付け
ngrok http {httpsからはじまるドメイン} --host-header=rewrite
```

## 3. VSCodeのBuilt-in port forwarding機能

### 特徴

- Visual Studio Code内でのポートフォワーディングが可能
- 拡張機能を追加する必要がない

### メリット

- VSCodeユーザーにとっては追加のツールをインストールせずに利用可能
- プロジェクト内で一元的に管理可能

### デメリット

- 外部からのアクセスを制御するための柔軟性がやや制限される

### 導入方法

1. デバッグビューで「PORTS」アイコンをクリック
1. Forward a Portをクリックし、ポート番号を定義する
2. 作成されたURLに飛ぶ

## まとめ

それぞれのトンネリングツールには特徴があり、プロジェクトのニーズによって適したものが異なります。開発環境の要件に合わせて、柔軟かつセキュアなトンネリングツールを選択しましょう。

この記事では各ツールの基本的な特徴やメリット、デメリット、導入方法について紹介しました。お役立ていただければ幸いです。
Flow error using External Services でのエラー



+ [Unable to map response for output parameter 200 of invocable action ](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007QbNnj)


:::note alert
Unable to map response for output parameter 200 of invocable action SFRequestPersonDetailsv2.SFRequestPersonDetailsOperation. Received response: {"ResponsePersonDetails":{"Person_Reference":"25161614990003","Title":"Mr","Other_Title":null,"Forenames":"David","Surname":"Office","Date_of_Birth":**"1893-02-07Z"**,"National_Insurance_Number":null,"Deceased":false,"Date_of_Death":null,"Home_Tel":null,"Mobile":"07805198","Work_Tel":null,"Email":"office.david@gmail.com","NoK_Name":null,"Nok_Contact_Details":null,"Relationship":null,"OnTenancy":true,"MainContact":true,"TenancyReference":"20109671"}}
:::

:::note
I saw that, but the only solution suggest was something about special characters. It doesn't explain why it was working a few days ago.

But, then I noticed a 'Z' a the end of the date field. No idea why that suddenly started being sent by the 3rd party system.

So, in summary. it was data being sent in the incorrect format

それを見ましたが、唯一の解決策は特殊文字に関するものでした。数日前まで機能していた理由は説明されていません。

しかし、日付フィールドの終わりに「Z」があることに気づきました。なぜそれが突然サードパーティシステムによって送信され始めたのかわかりません。

ということで、要約すると。データが間違った形式で送信されていました
:::
TypeScriptの歴史をざっくりとまとめてみた

# TypeScriptの歴史

TypeScriptは、JavaScriptに静的型付けとクラスベースオブジェクト指向を導入することを目的としてMicrosoftによって開発されたプログラミング言語です。JavaScriptの上位集合として設計されており、TypeScriptはJavaScriptが動作するすべての環境で動作するようになっています。

## 2012年
- TypeScriptの開発がMicrosoftによって開始され、アンダース・ヘルスバーグらのチームによって最初のバージョンが公開された。

## 2013年
- TypeScript 1.0が公開され、JavaScriptの大規模なアプリケーション開発を容易にするためのクラス、モジュール、アロー関数などの機能が導入された。

## 2014年以降
- TypeScriptはコミュニティからのフィードバックを受けて進化し、Generics、Union Types、Intersection Types、Access Modifiersなどの新機能が追加された。

## 2016年
- TypeScript 2.0がリリースされ、NullとUndefinedの新しい型、より厳格な型チェック、制御フローベースの型分析、より強力な型推論などが導入された。

## 2017年以降
- TypeScriptの採用が急速に増加し、多くの企業やオープンソースプロジェクトで採用されるようになった。より強力なマッピング型や改善された型チェックなどの新機能が追加された。

## 2018年以降
- TypeScriptはConditional TypesやRest/Spreadプロパティなどの新機能を継続的にリリースし、開発者の生産性とコードの安全性を高めた。

## 現在
- TypeScriptは開発者コミュニティで広く受け入れられており、新しいフレームワークやライブラリがTypeScriptで書かれることが多い。Visual Studio CodeなどのIDEはTypeScriptを完全にサポートしている。

TypeScriptは、大規模開発におけるJavaScriptの問題点を解決するための強力なツールとして定着しており、その地位を強化し続けています。
CSSのみでタブ切り替えデザインを実装する

## はじめに
こんにちは、普段はフロントエンドもバックエンドもどっちもやっているエンジニアです。
久々にHTMLをハードコーディングする機会があったのですが、その時にちょっと驚いたことがあったので記事を書くことにしました。

その驚いたこととはタイトルにもある通り、タブ切り替えのデザインを実装する際に**JSを使わずに**実装できるということです、、！

▼一般的なタブ切り替えデザインの図



## 世の中のエンジニアはどうやって実装してるの？
僕はタブ切り替えを実装する際はJSを使い、クリックされた要素に`display:block`を付与するクラスを追加し、今まで表示してたタブに`display:none`を付与するクラスを追加するのが常識だと思ったました。

何故なら初めてタブ切り替えのデザインを実装した時に、参考にした記事がそうやっていたから……( ;∀;)

もちろんこのやり方が不正解というわけではないですし、むしろ一般的なやり方だとと思います。

## JSなしでタブ切り替えデザインを実装する方法
今回初めて知ったタブ切り替えの実装方法が、**CSSのみ**で実装する方法になります。

参考にさせていただいたサイトがこちら↓
https://pote-chil.com/html-maker/tab

タブ切り替えデザインを実装する際のテンプレートを探していたらたまたま見つけました。

JSを使ったやり方ではクリックされたタブに表示非表示用のクラスを付与してタブの切り替えを実現していました。

ですがこちらのやり方だとクラスの代わりに**ラジオボタンのcheckedをキー**にして表示非表示を制御しています。

```.html
<div class="tab-001">
    <label>
        <input type="radio" name="tab-001" checked>
        タブ1
    </label>
    <div>
        上に枠線の付いたタプです。現在表示されているタブがどれなのか判別しやすいのが特徴。
        背景が白以外の箇所で利用するとよりおしゃれに見えます。
    </div>

    <label>
        <input type="radio" name="tab-001">
        タブ2
    </label>
    <div>ぜひ線の色をお好みの色に変えてみてください。</div>

    <label>
        <input type="radio" name="tab-001">
        タブ3
    </label>
    <div>もちろんレスポンシブ対応で、タブの追加にも対応しています。</div>
</div>
```

```.css
.tab-001 {
    display: flex;
    flex-wrap: wrap;
    max-width: 500px;
}

.tab-001 > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: .7em 1em .5em;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    background-color: #e9f0f6;
    color: #535353;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}

.tab-001 > label:hover {
    opacity: .8;
}

.tab-001 input {
    display: none;
}

.tab-001 > div {
    display: none;   /* ←注目：コンテンツは基本非表示 */
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
}

.tab-001 label:has(:checked) {
    background-color: #fff;
    border-color: #2589d0 #f0f0f0 #fff;
    border-style: solid;
    border-width: 4px 1px 1px;
    border-radius: 5px;
    color: #333333;
}

.tab-001 label:has(:checked) + div {
    display: block;   /* ←注目：checkedがついたタブに隣接するコンテンツを表示させる */
}

```

確かに上記の構成にすればJSを使わなくてもタブ切り替えができる……

まあクリック判定のためにラジオボタン使っていたり、**HTMLの書き方的にあまりよろしくない**感はありますが、CSSしか使ってないので動作は軽いです。
あまりHTML構造を意識しなくていいようなページ（そんな要件があればになってしまいますが）などにはこの書き方でも問題ないのではないでしょうか。



## 感想
生成AIやノーコードツールが台頭してきたこの時代にHTMLをハードコーディングするスキルなんていらないだろ～などと思ってましたが、実際に自分で実装してみるとやはり知見が広がりますね。

何よりラジオボタンでタブ切り替えの実装をするという発想がなかったことが悔しいです、、、笑

エンジニアたるものもっと頭を柔らかくせねば、、、と気を引き締めつつ今後もいっぱい手を動かしていく所存です。
Express.js をわかりやすく説明してみた

# node.js とは

Node.jsはJavaScriptをブラウザの外で実行するためのプラットフォームです。
元々は、ウェブブラウザ内でのみ実行されていたJavaScriptを、サーバーサイドで利用可能にしました。
これにより、JavaScriptを使用してサーバーアプリケーションを開発することができるようになります。

# Express.jsとは
Express.jsは、Node.jsのための最も人気のあるウェブアプリケーションフレームワークの一つです。
Expressを使用することで、ウェブアプリケーションやAPIを簡単に作成できます。
このフレームワークは、ルーティング、ミドルウェアの概念を導入し、リクエスト処理のパイプラインを構築することで、開発者がより効率的にウェブアプリケーションを構築できるようにします。

# Node.jsとExpress.jsはどう違うのか。

Node.jsとExpress.jsの比較をすると、Node.jsはJavaScript実行環境そのものであり、Express.jsはその上で動作するフレームワークです。
Express.jsはNode.jsの機能を拡張し、ウェブアプリケーションの開発を容易にするための追加機能と構造を提供します。

簡単に言えば、Node.jsはエンジンであり、Express.jsはそのエンジンを使用して車を効果的に組み立てるためのツールキットのようなものです。Express.jsは、Node.jsの複雑さを抽象化し、ウェブアプリケーションの開発プロセスをよりシンプルかつ迅速にすることができます。
Databricksのクラスターポリシーでライブラリを指定できるようになりました！

こちらの機能です。これによって、ご利用されている環境において、特定のバージョンのライブラリに固定したいなどの要件に応えることができるようになります。

https://docs.databricks.com/ja/administration-guide/clusters/policies.html#add-libraries-to-a-policy

> ライブラリをポリシーに追加して、ライブラリがコンピュート リソースに自動的にインストールされるようにすることができます。

サイドメニューから**クラスター > ポリシー**に移動します。**ポリシーを作成**をクリックします。**ライブラリ**タブが追加されています。
![Screenshot 2023-11-12 at 12.05.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/93985f87-4be5-99cc-5bb5-91d06fb55c0f.png)

通常、クラスターにライブラリを追加するのと同じようにライブラリを指定します。バージョンを固定することもできます。
![Screenshot 2023-11-12 at 12.13.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/070126fa-baff-5257-9c0a-b754343dcb94.png)
![Screenshot 2023-11-12 at 12.14.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/9e7bc730-312d-921a-b664-b2ef409132f5.png)

クラスター作成時に、上で作成したポリシーを選択します。
![Screenshot 2023-11-12 at 12.06.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/c34ee339-fdb8-2230-dca5-db4acbab71ec.png)

ポリシーで指定されたライブラリがインストールされます。
![Screenshot 2023-11-12 at 12.15.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/b5ca88ea-7ce3-2c73-92d3-0dac6160b2ca.png)

インストールされました！是非ご活用ください。
![Screenshot 2023-11-12 at 12.16.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/a2676e56-961a-6a8e-4591-0754c9a0ebd3.png)


### Databricksクイックスタートガイド

[Databricksクイックスタートガイド](https://www.amazon.co.jp/dp/B09V1YXFVQ/)


### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
【Vue.js】選択した要素のstyleを変更する

# はじめに
例えば要素をクリックした時に、選択した要素が分かりやすいように色を変更する方法を記録。

クリック前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2521217/a76c8523-632d-732f-4a96-60b8a9b3e6d1.png)

クリック後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2521217/c7fb24e8-8a0b-07cf-051a-352151ff488a.png)

# 1.style属性を変える

```ruby:HTML
  <section id="styling">
      <div class="demo" :style="{borderColor :  boxSelectedA ? 'red' : 'black'}" @click="selectBoxA"></div>
  </section>
```
```ruby:Javascript
Vue.createApp({
  data() {
      return {
       boxSelectedA:false,
      }
    },
    methods:{
      selectBoxA(){
          this.boxSelectedA = true;
      }
    },
}).mount('#styling')
```

### 解説
divタグをクリックすると、boxSelectedAプロパティがtrueになる。
boxSelectedAがtrueであればborder-colorを赤、falseであれば黒に設定。

# 2.クラスを追加
```ruby:HTML
 <section id="styling">
      <div :class="boxSelectedA ? 'demo active' : 'demo'"  @click="selectBoxA"></div>
  </section>
```
```ruby:Javascript
Vue.createApp({
  data() {
      return {
       boxSelectedA:false,
      }
    },
    methods:{
      selectBoxA(){
          this.boxSelectedA = true;
      }
    },
}).mount('#styling')
```
```ruby:CSS
.active{
  border-color: red;
}
```

### 解説
divタグをクリックすると、boxSelectedAプロパティがtrueになる。
boxSelectedAがtrueであればactiveクラスを付与する。

# 3.オブジェクトで指定
```ruby:HTML
  <section id="styling">
    <div :class="{demo : true, active:boxSelectedA}"  @click="selectBox('A')"></div>
 </section>
```
```ruby:Javascript
Vue.createApp({
  data() {
      return {
       boxSelectedA:false,
      }
    },
    methods:{
      selectBoxA(){
          this.boxSelectedA = true;
      }
    },
}).mount('#styling')
```
### 解説
divタグをクリックすると、boxSelectedAプロパティがtrueになる。
trueになればactiveクラスが付与されるように、オブジェクトで指定。

# 4.配列で指定
```ruby:HTML
  <section id="styling">
    <div :class="['demo',{active:boxSelectedA}]"  @click="selectBoxA"></div>
 </section>
```
```ruby:Javascript
Vue.createApp({
  data() {
      return {
       boxSelectedA:false,
      }
    },
    methods:{
      selectBoxA(){
          this.boxSelectedA = true;
      }
    },
}).mount('#styling')
```

### 解説
divタグをクリックすると、boxSelectedAプロパティがtrueになる。
既存のクラスと、動的に付与したいクラスをまとめて配列で指定している。


# 参考
Vueの勉強で活用中⇒https://www.udemy.com/course/vuejs-2-the-complete-guide/
形式記述言語VDM++の制御構文（for文）をJava C# Re:Mind(自作言語)と比較

# はじめに

要求仕様記述段階での使用が主に想定されている数学的形式手法VDM(Vienna Development Method)[^1]のオブジェクト指向拡張言語VDM++ですが、ロジックの実装も記述できる構文が用意されています。本記事ではVDM++の制御構文（for文）をJavaとC#そして自作言語のRe:Mind[^2] と比較してみます。Re:MindはJavaやC#の経験者向けに設計された日本語プログラミング言語の一種で、ロジック仕様記述言語とトランスコンパイラ言語とで言語仕様を共有しています。

## この記事内容の作業目的
VDM++の下記の制御構文[^3][^4]についていくつかの記事に分割して比較検討します。

・ブロック文
・代入文
・条件文
・**ループ文**　←本記事対象
・call文
・return文
・コメント文
・例外

VDM++はオブジェクト指向言語的な言語要素を持ち、数学的形式手法言語の中では一般のプログラミング言語のオブジェクト指向言語に近い面がありますが、かなり別物という面もあります。また、VDMのような数学的形式手法を使わない場合は、一般的に自然言語の日本語で要求仕様が記述されているものと推察されます。本記事では数学的形式手法と自然言語の日本語記述とのはざまで、構造化された日本語が要求仕様記述に使えないか模索しています。

クラスの定義構文についてはこちらの記事[^5]を参照することができます。

## この記事内容の保証
各言語で書かれた引用ソースの妥当性は保証されません。また、本記事に開示された自作言語の仕様は、開発中の仕様のため予告なく変更される場合があります。

# 構文比較
## VDM++
```vdm:VDM++
   for i = 0 to 9 by 1 do
    (
        --todo
    );
```
VDM++はカウンタ付き繰り返し構文for文をサポートします。

```vdm:VDM++
    for all e in set S do
    (
        --todo
    );
```
集合要素に対する拡張for文があります。

## Java
```java:Java
    for (int i=0; i<10; i++)
    {
         //todo
    }
```
Javaはカウンタ付き繰り返し構文for文をサポートします。
```java:Java
    for(TypeS s : arrayS){
    {
         //todo
    }
```
Javaは拡張for文があります。

## C#
```cs:C#
    for (int i=0; i<10; i++)
    {
         //todo
    }
```
C#はカウンタ付き繰り返し構文for文をサポートします。
```cs:C#
    foreach(TypeS s in arrayS) {
    {
         //todo
    }
```
C#はforeachで拡張for文をサポートします。

## Re:Mind
```mind:Re:Mind
    〇i=0,i<10,i++ 繰り返す
        //todo
    〇ここまで
```
Re:Mindはカウンタ付き繰り返し構文for文をサポートします。
```mind:Re:Mind
    〇TypeS s : arrayS 繰り返す
        //todo
    〇ここまで
```
Re:Mindは拡張for文をサポートします。

# おわりに
いかがでしたでしょうか？VDM++は実務で使ったことはないので、拡張for文がサポートされているのは新鮮でした。

ロジック仕様記述言語Re:Mindは疑似言語みたいなものですから、コンパイラを通さないことを前提にするならば未定義の関数を要件表記として使うこともできます。自然言語の日本語で記述するよりは厳密な構造的な記述が可能です。


[^1]: IBMのウィーン研究所で1960年代から70年代にかけて開発された形式手法。その実装には1996年にISO標準（ISO_IEC_13817-1）となったVDM-SLと、そのオブジェクト指向拡張のVDM++がある。
[^2]: Qiita [オープンな設計言語仕様 日本語ロジック仕様記述言語 Re:Mind（リマインド）](https://qiita.com/mylifewithviolin/items/52f806777e6ea031de94) 参照
[^3]: FMVDM　[VDMTools 付属文書](http://fmvdm.org/doc/index-ja.h
[^4]: FMVDM-> github [[PDF] VDMTools VDM 言語マニュアル VDM++](https://github.com/vdmtools/vdmtools/raw/stable/doc-jp/lang-man/langmanpp_a4J.pdf)
[^5]: Qiita [要求仕様 形式記述言語VDM++ との構文比較 ロジック仕様記述言語 Re:Mind（リマインド）](https://qiita.com/mylifewithviolin/items/2a8c6dc66cead04536a8)
Security Basics : Module


+ [Security Basics ](https://trailhead.salesforce.com/content/learn/modules/security_basics)


# Use Health Check to Scan Your Security Configurations

+ [when i try to edit the medium risks for password setting, why does it return URL Not Found?](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007QcFrtSAF)

:::note
Cleared the cache and cookies and now it worked.
:::


# Require identity verification for email address changes

+ [Enabling the "Require identity verification for email address changes" in security settings](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007ah4tDSAQ)


# 未解決

+ [Use Health Check to Scan Your Security Configurations - Hands-on Challenge - Business Analyst Certification Prep](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007epbQV)
【ChatGPT無・有】自己紹介を聞いてみた


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

　今回は、自己紹介を聞いてみました。無料版だけに尋ねてもつまらないので、ChatGPT 3.5 / GPT 3.5 Turbo / GPT-4でやってみます。

:::note info
本記事は、ChatGPT（無料版）で
行なっております。GPT4での確認
はできておりません。あしからず。
:::

　X-Twitter界隈では、
　　GPTsの話題で、
　　　もちきりですね。

　とはいえ、
　　無料版利用者には
　　　関係のない話。

　アプリユーザーも
　　My GPTsを作成できない仕様。

　作成できるweb版でも
　　凝ったものを
　　　作ろうとしたら、
　　　　APIを叩く必要がある。

　極めようとしたら
　　それなりの知識が必要。

　まぁ、頑張っていただきましょう。
***
　さて、本題です。

　自己紹介から
　　頼みました。
***
***User***
あなたの自己紹介をお願いします。できるだけ詳細をお願いします。

***ChatGPT 3.5（無料版）***
こんにちは！私はChatGPTと呼ばれる言語モデルです。OpenAIによって開発されたGPT-3.5アーキテクチャに基づいています。自然言語処理を使用して、ユーザーと対話し、質問に答え、様々なトピックに関する情報を提供します。私は2022年1月までのデータまでしか知識がないので、それ以降の出来事には対応できません。どのような質問がありますか？

***ChatGPT 3.5 Turbo***
もちろんです。私はChatGPTと呼ばれるAIモデルです。OpenAIが開発したGPT-3.5アーキテクチャに基づいています。私の目的は、ユーザーの質問に答え、情報提供、アドバイス、または会話のサポートを提供することです。さまざまなトピックに関する知識があり、文法的に正確な日本語を使用して返答します。ただし、私の知識は2022年1月までのものであり、それ以降の情報は提供できません。どのような質問やお手伝いが必要でしょうか？

***GPT-4***
こんにちは！私はOpenAIによって開発された大規模な言語モデル、ChatGPTです。私はGPT-4アーキテクチャをベースにしており、多様なテキストデータを学習することで、さまざまな質問に答えたり、対話をしたりできます。

私の能力は多岐にわたります。例えば、一般的な知識の質問、文学や科学、歴史に関する話題、日常のアドバイス、さらにはクリエイティブな文章の作成やコードの書き方など、幅広いトピックに対応しています。ただし、私の知識は2023年4月までのもので、それ以降の出来事や情報はわかりません。

また、私は画像生成やブラウザ機能を使って、特定のリクエストに対応することもできます。例えば、ユーザーの要望に基づいて画像を生成したり、インターネット上の情報を検索したりすることが可能です。

どうぞ、何でも聞いてください！お手伝いできることがあれば、喜んで対応いたします。
***

　まぁ、こんなもんですかね。

　次に、
　　入力最大文字数を聞きます。

***
***User***
あなたに入力できる文字数を教えてください。

***ChatGPT 3.5（無料版）***
一度の入力できる文字数は約2048文字までです。それ以上のテキストを送信する場合は、分割してください。どのようなお手伝いができますか？

***ChatGPT 3.5 Turbo***
私の一度の入力に対応できる最大文字数は、おおよそ2048文字までです。長いテキストを分割して送信することが必要な場合は、それに合わせて分割してください。お気軽に質問やリクエストを送っていただければと思います。

***GPT-4***
私に入力できる文字数には実質的な制限がありませんが、一つのメッセージで取り扱える理想的な文字数は、おおよそ3,000文字程度です。この範囲内であれば、質問やリクエストを適切に理解し、効果的に回答することができます。

ただし、とても長いテキストや複雑なリクエストの場合、内容を分割して複数のメッセージに分けて入力することをお勧めします。これにより、各部分に対するより精度の高い回答を提供することが可能になります。また、入力内容が非常に長い場合、一部が切り捨てられることがありますので、適切な長さでの入力にご注意ください。
***
　一度に入力できる文字数は
　　2048文字ですか。

　GPT-4が、
　　多めなのは
　　　わからんでもありません。

　というか、
　　ユーザーのプロンプトが
　　　だんだんと、
　　　　高度化するにつれて、
　　　　　いまやメガプロンプトと
　　　　　　呼ばれるくらいに
　　　　　　　なっているわけで、
　　　　　　　　少しでも多くないと
　　　　　　　　　対応できないか。

　今回は、ここまで。
LangChain のバージョン確認

# 方法1: コードによる確認

現在のコードで使用されているバージョンを表示。

```python
import langchain

print(langchain.__version__)
```

# 方法2: ターミナルで確認

```
pip show langchain
```

jupyter notebook ならコードブロック上で
```
!pip show langchain
```

# 参考）リリースされている最新バージョンの確認

https://github.com/langchain-ai/langchain/releases
Markdownでメモが取れるアプリ「ideaNote」を作りました

## はじめに
自分はObsidian, Typora, SimplenoteなどたくさんのPC向けメモアプリを使ってきたのですが、どれも自分の好みに合うものではなかったので、自分で作ってみることにしました。

## 作ったもの
https://ideanote.korange.work/
※ 現時点ではWindowsのみ対応です。Macの方すみません、、、

## どんなアプリ？
現時点で、**３種類**+プレーンテキスト のメモが作れるソフトです✨
フォルダを作ることもできます📂

### メモの種類
 - **📄 Markdown**
   皆さんご存知、Markdownのメモです。
  
 - **📜 Scrap**
   順番に物事を積み重ねていけるメモです。
   ZennのScrapを参考にしています。

 - **✅ ToDo**
   文字通り、ToDoリストです。チェックボックスを作れます。

### 実際の画面
![](https://storage.googleapis.com/zenn-user-upload/11034aeef0cf-20231109.png)

## 作るに当たって工夫したこと
ユーザーが簡単に意見を送れるように、画面左下に「意見を送る」ボタンを設置しました。
なるべく気軽に送れるように、メールアドレスなどは必要とせず、意見だけを入力すればいいように作りました。

![](https://storage.googleapis.com/zenn-user-upload/af5d2e68cdcc-20231109.png)


## どんな技術で動いているのか
まず、主に使用した技術は・・・
 - Vue3
 - Vite
 - Electron
 - Electron-Forge

です。

仕組みとしては、Vueで書いたコードをViteでビルドし、`/dist/`フォルダの中身をElectronが開く、といった感じです！

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983892/1451f9f5-d85a-63be-4619-94df6d627922.png)


また、MarkdownのエディタにはEasyMDE、HTMLへの変換には`marked`を使いました。

ElectronのコードをビルドするのにはElectron-Forgeを使いました。

## 最後に
拙い記事ですが最後まで読んでいただきありがとうございました！！！
では、まだまだ発展途上ですがideaNoteをよろしくお願いします！
https://ideanote.korange.work/
（もし興味があればダウンロードお願いします！）
継承　メソッドとインスタンス変数のメモリ配置

継承とは「**クラスの共通部分を別クラスにまとめる仕組み**」。共通部分とは、具体的には共通なメソッドとインスタンス変数を指す。この継承の仕組みにより、スーパークラスの定義場所をサブクラスでそのまま利用できる。

しかし同じ継承される情報と言っても、メモリ配置の観点からするとメソッドとインスタンス変数では全く異なる場所に配置される。

```java
class Employee extends Person {
    private int employeeNum
    public void setEmployeeNum(int empNum) { /* ロジックは省略 */}
    public int getEmployeeNum() { /* ロジックが省略 */}
}
```
EmployeeクラスはPersonクラスを継承しているので、Personクラスに定義されたメソッドとインスタンス変数をそのまま利用できる。

この時のメモリ配置を整理すると以下のようになる。
||配置場所|
|:-|:-|
|スーパークラスに定義されたメソッド|スーパークラスのメソッドテーブルに定義。|
|継承されたメソッド|サブクラスのメソッドデーブルに格納されるが、実際のコード情報はスーパークラスのものを使い回す。サブクラスでは継承されたメソッドのコード情報はサブクラスでメモリに展開はせずに、スーパークラスの情報を利用する。|
|インスタンス変数|親クラスから継承されたインスタンス変数は各インスタンスにコピーされる。しかし、実際の値はインスタンスごとに異なる。|

▼参考

https://bookplus.nikkei.com/atcl/catalog/21/S00180/
Next.js13でsitemap.xmlを設定する

# はじめに

Next.jsで`sitemap.xml`を設定するのに苦戦したのでまとめていきます

# 問題

以下のライブラリを利用して設定を行いました

https://github.com/iamvishnusankar/next-sitemap

```js:next-sitemap.config.js
/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true,
  sitemapSize: 7000,
}
```
これで`npm run build`をしたところなぜか**sitempa.xml**と**sitemap-0.xml**が出力されます。
また、デプロイして`Google Search Console`に登録したところ以下のようなエラーが出ました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/f43e21b8-a6dc-f85f-3cf3-34d1d790f8d8.png)

ローカルでもアクセスして確認したところ`localhost:3000/sitemap.xml`は**404エラー**となっていました。

次に以下の記事を見つけました

https://zenn.dev/masa5714/articles/b00f4ebffbbcd4

ここでsitemap.xmlとsitemap-0.xmlの情報をうまいことまとめるようにスクリプトを追加しました

```js:sitemap-replace.js
const replaceSitemap = async (fileName) => {
  const fs = require('fs/promises')
  const appRoot = require('app-root-path')
  const subDirectory = 'fugafuga' // ここディレクトリを変更する
  const filePath = `${appRoot}/public/${subDirectory}/${fileName}`

  const original = await fs.readFile(filePath, 'utf8')
  const replacedData = original.replace(
    /https\:\/\/hoge\.jp\/sitemap/g,  // ここドメインを変更する
    `https://hoge.jp/${subDirectory}/sitemap`  // ここドメインを変更する
  )

  await fs.writeFile(filePath, replacedData, 'utf8')
}

;(async () => {
  await replaceSitemap('robots.txt')
  await replaceSitemap('sitemap.xml')
})()
```

しかし、アクセスしても**404エラー**でした

# 解決方法

ここでひらめきました。これは**AppRoute**を使っているのが問題なのでは？と思い、調べたところ以下の記事で解決しました

https://financial-programmer.net/blog/nextjs-sitemap

以下のスクリプトを追加しました

```ts:app/sitemap.ts
import { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://himaria.jp";
  const lastModified = new Date();

  const staticPaths = [
    {
      url: `${baseUrl}/`,
      lastModified,
    },
    {
      url: `${baseUrl}/about`,
      lastModified,
    },
    {
      url: `${baseUrl}/news`,
      lastModified,
    },
    {
      url: `${baseUrl}/coffee`,
      lastModified,
    },
    {
      url: `${baseUrl}/terms`,
      lastModified,
    },
    {
      url: `${baseUrl}/contact`,
      lastModified,
    },
  ];

  return staticPaths;
}
```

追加したら以下のコマンドを実行します

```
$ npm run build
$ npm run start 
```
:::note warn
startで起動しないと本番のoutに出力したファイルを見ないので404になってしまいます。startで起動して確認しましょう
:::

アクセスもうまくいき、Google Search Consoleの登録もうまくいきました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/0fc415fa-1df6-94b8-ef89-245702f0679d.png)

# おわりに

SEO対策をするまではsitemapについて何も知りませんでしたが、今回調べることで深く学ぶことができました

# 参考
https://github.com/iamvishnusankar/next-sitemap

https://zenn.dev/masa5714/articles/b00f4ebffbbcd4

https://financial-programmer.net/blog/nextjs-sitemap
Unity+iOS+FirebaseFirestore対応時のメモ

2023/11/12 : 初稿
Unity : 2022.3.12f1
マシン : M1Mac(Metal) Sonoma14.1.1
Xcode : 15.0.1 (15A507)

UnityでiOSアプリを作ってて、mBaasとしてFirebaseを導入することになりました。ということでFirebaseのアカウント作ってプロジェクト作って、と公式ドキュメントの手順通りに導入すればうご・・・かない。

ともかく、実機でデータベースからデータ読み出せる＆Storageにファイルアップロードできるまでにやったことをメモしておきます。

# GoogleService-info.plistの再ダウンロード
Firebaseプロジェクトの設定を色々やってからもう一度ダウンロードしたやつを使う。
RealtimeDatabaseならRealtimeDatabaseを作ってから。

Firebaseのプロジェクト作った直後にダウンロードしろと言われたやつでは情報が足りない。公式のサンプルコード実行しようとしても`FirebaseDatabase.DefaultInstance.RootReference`でnullアクセスしたり、`Database URL not set in the Firebase config.`みたいなwarningが出たり。一応`DefaultInstance`ではなく`GetInstance("https://ほにゃらら-default-rtdb.firebaseio.com/")`でURL直指定すれば動くものの、やはり気になる。

# GoogleService-Info.plist file missing REVERSED_CLIENT_ID, Google Sign-In will fail to initialize.

どうもサインイン手段としてGoogle認証をOKしないとだめっぽい。
メアド認証のみだと発行されず、Unityのビルド時に上記エラーが出てた。
Google認証も可能にした後、GoogleService-info.plistを再ダウンロードすればOK。

# GoogleService-info.plistの配置場所

`Assets/Firebase`が正解っぽい。ドキュメントにはAssetsの下ならどこでも良いみたいなこと書いてるけど、それだとダメだった。

# cocoapodsの再インストール

こちらの記事を参考に、一旦アンインストールした後homebrewでインストール。
https://qiita.com/noprops/items/f997a438fabb64c15f10

これやらないとUnityのビルドで.xcodeprojが吐き出されはするものの
```
unity firebase iOS framework addition failed due to a CocoaPods installation failure. This will will likely result in an non-functional Xcode project. 
```
みたいなログ出るし、実際Xcodeでもフレームワークがリンクできない的なエラーが出る。

# ついでにcocoapods問題

ターミナルでUnity-iPhone.xcworkspaceのあるフォルダを開いて
インテルMacなら
```
pod install
```
M1Macなら
```
sudo arch -x86_64 gem install ffi
arch -x86_64 pod install
```
とかやると解決することもある・・かも。

# xcodeのプロジェクト

Unity-iPhone.xcodeprojではなくUnity-iPhone.xcworkspaceを開いてビルド

# xcodeでリンクエラー

FirebaseConsoleでFirestoreと間違えてRealtimeDBの方を作ってしまったせいか、
それとも元々Firestoreでも必要なのか、
FIRDatabaseとかなんとかがリンクできないって出てたので、
仕方なくFirebaseDatabase.unitypackageをインポート。
中に含まれるファイルが100MB超えてるのでGitLFSを使わないとプッシュできないという罠付き。

一旦有効化したRealtimeDBを無効化したけど、GoogleService-info.plistにはRDBに関連する項目が残ったままで、実際リンクも通らない。手動で削除すればいいのかもしれないけど、誰か教えてください

# ついでにxcodeのリンクが通らない対処その２

UnityFrameworkを選んでBuild Settingsを選択、Build Active Architecture OnlyをNoしてみる。

# 実機でStorageにローカルファイルをアップロードできない

```
firebase.storage.storageexception: no object exists at the desired reference
```
xcodeでログ見ると上記のエラー。
PutFileAsync()に渡すローカルファイルのパスは、"file://"で始めないといけない模様。
エディタだと問題なく動いちゃうひどい罠。

# firebasecppapp-11_6_0.bundleは、開発元を検証できないため開けません。

Macのシステム設定>プライバシーとセキュリティ
この中に該当ファイルが開けませんみたいな項目出てるのでここで許可する。

# セキュリティルール

最初はテストモードで作りましたが、早めにアクセス制限しておいた。
例えばデータベースのルート直下にUsersっていうデータがあって、こいつは
Authenticationを使って認証された人だけが読み取れるようにしたいとするなら、こんな感じにする。

```
{
  "rules": {
    "Users": {
      ".read": "auth != null",
    }
  }
}
```
似たようなサンプルはネットにあるけど、ここでいう"Users"ってなんだ？と思ってたら自分でデータベースに追加した項目のキーだったのね。
変数にはインスタンスの「ポインタ」が格納される

:::note
作成したインスタンスがどのように変数に格納されるのか。

```java
TextFileReader reader = new TextFileReader();
```
:::

作成した`TextFileReader`クラスのインスタンスはヒープ領域に確保される。

一方で変数`reader`はヒープ領域にあるとは限らない。メソッドの引数やローカルクラス変数ならスタックに置かれ、メソッドエリア（静的領域）にあるクラス情報に配置することも可能。

そのため変数`reader`には`TextFileReader`クラスのインスタンスそのものは格納しない。その代わりにこの変数には、ヒープ領域に作られたインスタンスの**ポインタ**を格納される。


:::note
インスタンスを格納する変数にはインスタンスそのものではなく、インスタンスの「ポインタ」が格納される。
:::

##### ポインタ
メモリ領域の場所を示す情報。ヒープ領域に確保されたメモリ領域を土地とすると、ポインタはその住所に相当する。メモリ領域の大きさに関わらず表現形式は一定。

:::note
変数にはインスタンスそのものではなく、インスタンスのポインタ（場所を示す情報）が格納される。

インスタンスを格納する変数を他の変数に代入した場合、ポインタがコピーされるだけで、ヒープ領域にあるインスタンスそのものは変化しない。
:::

▼参考

https://bookplus.nikkei.com/atcl/catalog/21/S00180/
AtCoder Beginner Contest 328 D問題 解説見ながらpythonで解く

D問題をreplace()で解いたらTLEになったため、解説を見ながらやってみた🥳

# ソースコード(Python)
```Python
s=input()
stack=""
for se in s:
    stack+=se
    if stack[-3:]=="ABC":
        stack=stack[:-3]
print(stack)
```

## 解説
本家の解説はこちら

https://atcoder.jp/contests/abc328/editorial/7655

スタックというデータ構造を用いる🫙
スタックは最後に入れたものを最初に取り出すようにできている。(FIFO)
特にモジュールとかはいらなさそうなので、Python標準の文字列を使ってスタックを再現した。
3,4行目では入力した文字列sをfor文で一文字ずつスタックに代入している。

<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985674/008976d7-cd2a-12fc-ab87-025f75cd07af.png">

肝心なのは5,6行目。スタックの後ろ3文字を見て、もしそれが"ABC"なら削除する。

<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985674/7d5f9246-025f-8f5b-716d-e01b382bd37a.png">

<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985674/a79cbbca-0141-00c3-519e-37fb7ab97faf.png">

それ以降はスタックに追加して、"ABC"が出たら削除して...の繰り返し。
ややこしいところだがstack[-3:]は後ろから3文字を参照して、stack[:-3]は後ろから3文字"以外"を参照している😵‍💫

なぜreplace()だとTLEになるのか。
先頭や途中の要素を削除するとそれ以降の要素をすべて前に持ってこなければならず、計算量がかさむからと言われている。
スタックなら毎回後ろから取り出せるので計算量が少なくて済む。

<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985674/a98cd81b-02d0-672e-dbd4-7f6909ff133e.png">

通った！🍭

![スクリーンショット 2023-11-12 103055.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985674/213cb116-8580-a2a0-39a3-6f4595664335.png)


参考：[Pythonistaなら知っておきたい計算量のはなし](https://qiita.com/Hironsan/items/68161ee16b1c9d7b25fb)
【Vue.js】 vue.jsの基礎学習1

## 例：バインディング（紐付け）

```vue: App.vue 例

// HTML
<template>
<h1 :title = "b_title">{{　str1　}}</h1>
</template>

// Javascript
<script setup>

const str1 = "Hello";

</script>

```

## 記載場所
- ` <script setup> <script>`のタグ内にjavascriptの記載をする。

- ` <template> </template>`のタグ内にhtmlの記載をする。
- ` <style> </style>`のタグ内にcssの記載をする。

## 属性値のバインディング

```vue
<h1 v-bind:title= "b_title"></h1>
```
- **v-bind:"属性値"="値"** で属性値を設定できる。
また、v-bindを省略し　**:"属性値"="値"**　と入力することでも属性値を設定できる。

- 今回の例では、タイトル属性に変数名：str1の値を設定している。

## テキストのバインディング

```vue
<span>{{ str1 }}</span>
```

- javascript内で変数定義した変数名を{{ "変数名" }}で画面に出力することができる。


## 出力イメージ
![スクリーンショット 2023-11-12 10.21.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3477695/a1136697-8854-55a6-cc5f-4161b4634f48.png)


## 参考記事
https://qiita.com/RINYU_DRVO/items/4c963e72ca0a0523b2fa
TypeScriptでDate型にstring型が入る

# 概要
TypeScriptは型が定義されているから定義された型以外の値が入ったらエラーになるはず。と勘違いしてました。
静的型付け言語のためコンパイル時や開発エディタ上では型チェックがされるけど、実行時はJavaScriptに変換されるので動的型付けとなる。

# 何があったかというと
Date型を渡して表示するカレンダーの共通コンポーネントがありました。
画面間で遷移する際に今日日付をパラメータに設定して、遷移先の画面で表示したかったです。
パラメータにnew Date()を設定してら表示されると思ったのに表示されませんでした。

# 原因
TypeScript上はDate型と設定されているが、実態はstring型でDate型のフォーマット(例）`Wed Oct 18 2023 09:27:36 GMT+0900 (GMT+09:00)` )では共通コンポーネントが受け付けていなかった。
サーバではDateTime型で渡されたプロパティがクライアントでは `YYYYY/MM/DD HH:mm:ss` でフォーマットされたstring型で扱われていた。

# 勘違いポイント
- TypeScriptの型チェックはコンパイルまたはコーディング中での話であること
- サーバからDateTime型でクライアントに渡してもDate型になるわけではない

# 対応
パラメータの定義を以下のようなstringを許容するようにし、共通コンポーネントが対応しているフォーマットにした
```ts
hoge: Date | string | null = ''
```

# 検討事項
本当は実態と定義が絶対にズレないようにギッチギチにした方がベターな気もした。でも、これは共通コンポーネント側でData型に対応するべきか。
クライアント側で絶対にズレないように頑張る労力に対するメリットがちょっと薄い。引数で渡される側で、型チェック・変換をケアする方がよさそう

# 参考
https://zenn.dev/mybest_dev/articles/82ef8c34dfd1b7
pythonのモジュールaseを使ってみる#2

# python + ase を構造ビューワとして利用

分子動力学計算の結果得られた原子構造を、AtomEyeを用いて可視化している（いた？）人は多いはず。
http://li.mit.edu/Archive/Graphics/A/

ただ最近、Windows上でAtomEyeのインストールが難航するケースが増えているらしい。そこで、AtomEyeの代替ツールとして、AtomEye用の原子構造ファイルフォーマット（*.cfg）を、python+aseを用いて描画してみた。

# とりあえず描画はできそう

Galleryより、例えばSiVacancy.cfgを作業ディレクトリに保存しておく。
（Jupyter Notebookを使用しているなら、.ipynbファイルがあるのと同じ場所で良いはず。）

pythonコードの例はこちら。

```python
import ase.io.cfg
model = ase.io.cfg.read_cfg('SiVacancy.cfg')
view(model, viewer='ngl')
```

描画結果。「とりあえず原子の配置を見る」ことはできる。

![SiVacancy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893569/021f281e-d1ff-f2a1-a903-ec93446c5dc4.png)
CloudWatchFullAccessV2に変わると何が変わるの？

# ■概要

CloudWatchFullAccessV2への移行が推奨されるアナウンスがあり、いくつか質問を受ける機会があったので簡単にまとめます。
もう既にたくさん記事は出ていますが、自分用でまとめたので誰かに役立ててもらえたら嬉しいです。

# ■AWSより届いたアナウンス

こんな件名で届いていました。
[Action Required] Changes to AWS Managed Policy [AWS Account: xxxxxxxxxxxx]

要点は以下です。

:::note info
1\. あなたのアカウントで「CloudWatchFullAccess」が利用されているので通知しますよ。
:::

:::note info
2\. “CloudWatchFullAccess” 管理ポリシーを “CloudWatchFullAccessV2” に置き換えることを推奨します。
:::

:::note info
3\. AWS Health Dashboardの ‘Affected Resources’ タブで影響を受けるリソースのリストを確認できます。
:::

:::note info
4\. 今後はCloudWatchFullAccessはアタッチできなくなりますよ。
:::

:::note info
5\. 新しいポリシーには、Autoscaling:Describeの権限、SNSの権限、IAMの権限、oam:ListSinksおよびoam:ListAttachedLinksの権限が含まれています。
:::

# ■V2との違い

### ・Action の部分が変わった
オートスケーリングとSNSに関するアクションは以下のように「*」でまとめられていました。

```
"autoscaling:Describe*“
"sns:*"
```

V2では以下のように詳細化されています。

[autoscaling]
```
"application-autoscaling:DescribeScalingPolicies”, 
“autoscaling:DescribeAutoScalingGroups”, 
"autoscaling:DescribePolicies"
```

[sns]
```
"sns:CreateTopic", 
“sns:ListSubscriptions”, 
“sns:ListSubscriptionsByTopic”, 
“sns:ListTopics”, "sns:Subscribe"
```

とは言ってもよく分からんという事であれば、
この権限の詳細を見てもらえれば理解が早まるかもしれません！

# ■今回変更になった権限の詳細

### ・Auto Scaling

```
application-autoscaling:DescribeScalingPolicies：
Application Auto Scalingポリシーの詳細を取得します。

autoscaling:DescribeAutoScalingGroups：
Auto Scalingグループの詳細を取得します。

autoscaling:DescribePolicies：
Auto Scalingポリシーの詳細を取得します。
```

:::note warn
上記の権限では、Auto Scalingの設定やポリシーの詳細を確認することができます。
ただし、Auto Scalingの設定を変更したり、新しいAuto Scalingグループを作成したりすることはできません。
:::

### ・SNS (Simple Notification Service)

```
sns:CreateTopic：
新しいSNSトピックを作成します。

sns:ListSubscriptions：
現在のアカウントのすべてのサブスクリプションを一覧表示します。

sns:ListSubscriptionsByTopic：
特定のトピックのすべてのサブスクリプションを一覧表示します。

sns:ListTopics：
現在のアカウントのすべてのトピックを一覧表示します。

sns:Subscribe：
特定のトピックにエンドポイントをサブスクライブします。
```

:::note warn
これらの権限により、SNSトピックの作成、サブスクリプションの一覧表示と作成が可能です。
ただし、メッセージの公開やトピックの削除など、他のSNS操作を行うことはできません。
:::

# ■まとめると

余計に広く付けていた権限を絞ったものが「V2」ですよ。って事みたいですね。

# ■その他の変更点

### ・Statement ID (Sid) の部分
V2では各ステートメントにIDが付与されていますが、V1では存在しません。
具体的には、“CloudWatchFullAccessPermissions”, “EventsServicePermissions”, "OAMReadPermissions"というIDが追加されています。

### ・他の部分はV1とV2で同じです。
これらの変更は、ポリシーの精度と管理を向上させるために行われたと考えられます。
具体的には、"autoscaling:Describe*"のようなワイルドカードを使用すると、予期しないリソースへのアクセスを許可してしまう可能性があります。
そのため、必要なアクションを明示的に指定することで、セキュリティを強化しています。
また、Statement IDを追加することで、各ステートメントの目的を明確にし、管理を容易にしています。

以上です！
統計検定2級にギリギリで合格した方法

## この記事について

・先日、なんとか統計検定２級に合格することができました。
　６０点取れば合格のところ結果は６１点と、まったく人に紹介できる成績ではないのですが、
　余裕をもって合格するにはどうしたらよいのか（よかったのか）、備忘の意味もあわせて記載します。


##  私がおこなった勉強方法（振り返り）





https://www.udemy.com/course/toukei-kentei/

 ・まずは基礎を身につけなけばということで、Udemyのセールで購入しました。 
　こちら、網羅的な解説・説明があってとてもよいコンテンツなのですが、
 　私の基礎知識がなさすぎてついていけず、流してみるだけで終わってしまいました。



  →いまになって見返しても解けないような問題がいくつかありました。
  　小テストも含め、繰り返しやるのが良かったかもしれません。
　　（他コンテンツに比べると字が多く、とっつきにくいのは事実、、）
　　
  
https://www.youtube.com/@yobinori/

・有名なヨビノリさんのサイトです。
　統計について一通り見ましたが、変なギャグはともかく、とてもわかりやすいです。
 
 →「なんとなくわかった」気にはなりますが、これだけでは自分で問題を解けるようにならないことに注意です。
　　


https://bellcurve.jp/statistics/course/

・こちらも超有名な「統計学の時間」。最初に勉強すべきはこれでしょう。
　図も含め、わかりやすいです。

　→ただし練習問題の文章がかなりシンプルです。本番の文章はそれなりの長さなので注意。
 （解説はしっかり書かれていて、かつ説明がわかりやすいです）
 
　　 



 
https://note.com/e_dao/m/m65744aa3d1d2

・公式問題集（CBT対応版）をやっていると、解説がよく理解できないところががありました。
　そんなとき、このサイトがとても役に立ちました。とてもおススメです。
 　特に第一種過誤、第二種過誤のグラフでの意味や、統計ソフトウェアの出力結果の見方など、　
　まったく理解できなかったところがスッキリしました。
　本当にありがとうございます。
 
 →私の場合、公式問題集＋このサイトでの確認に時間をかけて３周しました。
 　そのためある程度自信をもって本番に臨むことができたのですが、本番では公式問題集に
  　ないような問題も出てきます。
  　高得点を狙うのであれば、過去問もガッチリやったほうが良かったかと思います。


## その他
・私が受験した会場では、ボールペン＋紙２枚が利用可能でした。
　もっと紙が欲しいとお願いしたのですが、利用したものと交換だと言われてしまいました。
　実際には時間がなかったので監督員を呼ぶ暇もなく、２枚でなんとか間に合わせたのですが
　この辺りはうまいやり方を考えておくべきだったかもしれません。


## 終わりに
・点数はいまいちでしたが、合格できて嬉しかったです。
・これから試験受ける方、頑張ってください！！
NTFSファイルシステム上で、管理者でも消せないフォルダを消したい

# 先におことわり

どこかに同じような記事が既にあるかもしれませんがご了承ください。
記事を探すよりも試すほうが早かったので。


# 先に結論

コマンドプロンプトから以下を叩きます。

```01_reset_inheritance_recursive.cmd

takeown /F "N:\Target Folder" /R /D Y
icacls "N:\Target Folder" /l /t /grant:r Everyone:(OI)(CI)(F) /inheritance:e

```

これは `N:\Target Folder` 配下フォルダの全オブジェクトの所有権を取得し、 `Everyone` へのフルコントロールを付与するとともに、継承を有効にします。

そのままコマンドラインから削除したいなら、以下でOK。

```02a_remove_directory_recursive.cmd

rd /s "N:\Target Folder"

```

プロンプトが出るのがイヤなら以下にします。

```02_remove_directory_recursive_quiet.cmd

rd /s /q "N:\Target Folder"

```

もちろん既に `Everyone` フルコントロール付与されているので、エクスプローラから消せるし、ゴミ箱への移動も可能です。


# どういうこと？

ちょっとだけ解説です。

とくにUnix系のファイルシステムに慣れた人にとっては、まず

  「管理者:rootで消せないって、どういうこと？？」
  （SELinuxとかAppArmorとかで保護されているならともかく）

って考えると思います。（自分もそうでした）

NTFSでは、そうではない。
おそらくだけど、こんな感じになっているみたい。

1. オブジェクトには「所有者」がある
1. 管理者アカウント（Administrators,LOCAL SYSTEM）は、所有者を変更することが可能
1. 「所有者」および「定義済みの」権限保持者がACL（DACLsおよびSACLs）を触れる
1. 「所有者」「管理者」を含め、すべてのユーザーは、定義済みのACLの制約を受ける

なので、ファイルシステム上でDACLsで管理者に `Read/Write` しかついてないようなオブジェクトでは、先にDACLsを書き換えてからじゃないと削除とかの特殊な操作はできない。
定義済み権限の中に含まれていないのならACLの書き換えもできないので、まず所有権も取得しないといけない。

たとえばWindowsのインストール処理なんかだと、管理者とは別の `TrustedInstaller` というユーザに握らせている。
親オブジェクト（フォルダ）の継承を切って、ファイルを `TrustedInstaller` に握らせると、管理者であってもそう簡単には消せない。

そうではあるけれど、まぁ仕組みさえ分かってしまえば、冒頭のような操作で対応可能。


# ちょっと余談

`%WINDIR%\System32` 配下のファイルは、（全部かどうかは確認できてないけど）上記の仕組みで `TrustedInstaller` が握っているように見える。
ところが最近、とある業務システムで、こんな事故があったそうな。

```crash_job.cmd

cd /d %WINDIR%\System32

rem (..詳細省略..)

del /f *.*

```

これでWindows再起動かけたら、起動しなくなってバックアップから復旧させた、とのこと。

先に触れたとおり `TrustedInstaller` が握っているはずなら、管理者権限で誤削除されちゃうような事故は回避される（されている）と思うのだが。。
誰かが意図せずに（わけもわからず）権限変更したとか、他の要因もプラスされているのでは？？
ちょっと事故の検証が足らないのかもしれない。（ぼそっ）


# 最後に、おことわり

ちゃんと調べたわけでないので不正確なところがあるかもしれない。マイクロソフトの記事とかを探せば正確な仕様も見つかるはずなので探してください。
コメント欄とかで教えていただけると嬉しいです。
基本情報　システム構成要素編

この記事基本情報技術者試験の資格勉強において、アウトプットすることによって
より理解を深め、合格するだけではなく、実務で使えるような考え方を発信していきます。

# システム構成で知っておかなければいけない用語まとめ

１．ミッションクリティカル
業務を遂行する上で不可欠なシステムや、停止すると社会に深刻なダメージを及ぼすシステムのことをいいます。

２．デュプレックスシステム
一つのCPUで処理を行うことは大きくミッションクリティカルになりかねません。

例えば、オーバーフローしてしまって、サーバーが落ちてしまう
なんてこともあり得ます

対策として、並列にCPUを設置する手段をデュプレックスシステムといいます。

その中でも
ホットスタンバイとコールドスタンバイが存在します。

ホットスタンバイは、稼働中のシステムと待機中のシステムがあり
稼働中のシステムが停止した場合、速やかに移行することです。

コールドスタンバイは、稼働中のシステムが停止した場合
待機中のシステムに移行することは同じですが、待機中のシステムは待機中に別のシステムが動いていて、停止した場合、そのシステムを中断して待機中に移行するものになってます。

これはシステムの信頼性評価にかかわるものであり、
システムが故障して修復に要する時間のことをＭＴＴＲ（Mean Time Time To Repair）といいます。

また、ＭＴＢＦというものもあり、システムが故障してから次に故障するまでの平均時間というものがあり、長ければ長いほど信頼性が高いシステムといえます。

また、ＭＴＴＲをＭＴＴＲとＭＴＢＦの和で除したものを
稼働率といいます。

ＭＴＢＦが０であれば稼働率は１になるので、素晴らしいシステムといえますね。

システムの稼働率というのはよく基本情報で出題されるとされており

例えば、システム１とシステム２があったとして

システム２がシステム１が終わらないと稼働しない（直列）場合、
これは２つの稼働率を掛け算すれば、２つの合わせた稼働率が出ます。


では並列のシステムがあった場合どうなるでしょう

システム１とシステム２があり、どちらかが稼働していればＯＫな場合、
稼働率の計算が変わってきます。

確率をイメージしてもらって、先ほどの稼働率は１でしたね。つまり１００％

並列のシステムの場合は
１ー（故障の割合）です。
システム１の稼働率が50パーセント
システム２の稼働率は30パーセント
その場合、故障率はそれぞれ
1-0.5 = 0.5
1-0.3 = 0,7 になります。これをかけてあげれば0.35が並列システムの故障率になります。
つまり故障率を１から引いてあげれば稼働率が出ます。

## バスタブ曲線

Ａ課長　このシステムを作りたい。障害はゼロでお願いね！

B主任　障害ゼロって、、、どんだけ可用性を持たせても。。

ここで可用性とは『要求されたサービスを、提供し続ける特性のこと』を指します。
それに稼働率が用いられているということですね。

こんな会話があったとします。

開発にはバスタブ曲線というものがあり、リリース当初は障害がつきものです。
よくゲームでも、リリース当初はエラーばかりですよね？

開発が進んでいく上で障害が少なくなっていく曲線をバスタブ曲線と言います。
IT用語だけかと言われるとそうでもないので、是非下記のリンクで確認してみてください。

https://www.fukudaco.co.jp/support/glossary/bathtub-curve.html


# システムの性能評価

システムの性能を評価する指標には、次のようなものがあります。

## スループット
単位時間あたりに処理される仕事の量

　## ターンアラウンドタイム
 利用者が処理を依頼してから結果の出力が終了するまでの時間を指します。

 ## レスポンスタイム
 利用者が処理を行なってから、最初の出力が出るまでの時間

 ターンアラウンドタイムが全体の時間としたら
 レスポンスタイムはその間の時間ということですね。

 ## MIPS
 1秒間に実行される命令数を百万単位で著したものになります。

同一メーカーの同一アーキテクチャのCPU性能比較によく用いられるそうです
なぜ百万単位なのかがわかりませんが、まぁこの単位がちょうどよかったのでしょう

よく出される問題内容としは、命令ミックスというものが使われて出題されます。
CPUの命令には種類があり、単一の処理だけではありません。

整数演算命令：
移動命令：
分岐命令：

それぞれの実行速度が1.0,5.0,5.0（μs）だとして、その出現頻度がそれぞれ50%だとした場合、
それぞれに出現頻度をかけてあげて和を求めます。
0.5 + 2.5 + 2.5 = 5.5 μs
これはマイクロ秒なので、これを１秒あたりで計算します。襷掛けをするとわかりやすいので、やってみてください。

ここで、『マイクロ秒ってどんな単位だっけ？』となるかもしれません。

小さな数値を表す単位として
m（ミリ）　μ(マイクロ) n(ナノ) p(ピコ)
これらはそれぞれ10^-3 ^-6 ^-9 ^-12 となります。

今回の場合は、5.5*10^-6ということになります。


# RAIDと信頼性設計
RAIDとくれば、複数のディスクを用いて高信頼性を獲得するものとまずは大雑把に理解してください。

その後にRAIDは４つありRAID0 RAID1 RAID3 RAID5があります。
0から始まり、4がなくて少し理解がしづらいかと思います。

RAIDの最後の数字が小さいほど処理が高速化するものと考えてください。

パリティという概念も先に覚えた方がいいです
パリティとは、仮に複数ディスクの中でどこかに障害が起こった場合
復元させる役割を持ちます。

パリティを用いず複数の磁気ディスクにデータをブロック単位で分割して処理をそのまま行うのがRAID0です。
余すことなく処理を行うため、高速化になるということですね。

RAID1は、2つのディスクに同じ処理をさせる手法です。
ミラーリングといい、信頼性は高いが使用効率は悪いです

RAID3からはパリティを用います。
複数の磁気ディスクの中で１つを完全に復元用のパリティとして用います。

他のディスクが破損してもパリティを用いれば復元できるということですね。

では、パリティ用のディスクが破損した場合はどうでしょうか。その後に他のディスクが破損したら問題ですね。
それについては、

RAID5を用います。
RAID5は、磁気ディスクを分散させた際に、それぞれのディスクにパリティを持たせます。

RAID3と比べて単一障害を起こさせないメリットがあります。

# まとめ

他にも覚えておかなければいけないことはありますが、ひとまずこれくらいにします。
次も記事を書くので良かったらみてください。