OmniAICreator/Qiita-1.07M huggingface dataset:
【Rails】application.cssについて

# 記事概要
Ruby on Railsのマニフェストファイルについて、まとめる

# 前提
- Ruby on Railsでアプリケーションを作成している

# 基本情報
## ファイルパス
app/assets/stylesheets/application.css

## 記載方法
`*=`に続けて他のCSSファイルなどを指定すると、複数のCSSファイルをまとめて読み込むことが可能だが、編集不要

## 処理概要
アプリケーション全体に適用するCSSを指定できる

# まとめ
## require_tree
引数として与えられたディレクトリ以下のCSSファイルを、アルファベット順にすべて読み込む機能

`require_tree .`の記述によって、`app/assets/stylesheets`ディレクトリにある全てのCSSファイルを読み込む

```application.css
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
```

[![Image from Gyazo](https://i.gyazo.com/d8f007ad66eeb43f1c03aec3dc10cc3a.png)](https://gyazo.com/d8f007ad66eeb43f1c03aec3dc10cc3a)

# Ruby on Railsまとめ
https://qiita.com/likapantrip/items/46b43c9d1309b6633f0a

# ビュー
https://qiita.com/likapantrip/items/7773987cdd641ea3aad9

# application.html.erb
https://qiita.com/likapantrip/items/abbdeaabc88e330cb038
【Rails】application.html.erbについて

# 記事概要
Ruby on Railsのレイアウトテンプレートについて、まとめる

# 前提
- Ruby on Railsでアプリケーションを作成している

# 基本情報
## ファイルパス
app/views/layouts/application.html.erb

## 記載方法
[[アクション名].html.erb](https://qiita.com/likapantrip/items/41e40c774daa310711de)を、参照

# まとめ(head要素)
## stylesheet_link_tagメソッド
読み込むCSSファイルを指定できるヘルパーメソッド
[application.css](https://qiita.com/likapantrip/items/14663a6aca391896f739)を指定する

```erb
<!DOCTYPE html>
<html>
  <head>
    <!-- 省略 -->
    
    <!-- 読み込みたいCSSファイル(application.css)を「app/assets/stylesheets」に配置
         stylesheet_link_tagの引数に'application'を指定 -->
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  </head>

  <!-- 省略 -->
```

## リセットCSS
link要素でリセットCSSを参照する

```erb
<!DOCTYPE html>
<html>
  <head>
    <!-- 省略 -->
    
    <!-- メジャーなリセットCSSのひとつである「normalize.css」を参照 -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
  </head>
  <!-- 省略 -->
</html>
```

# まとめ(body要素)
## yieldメソッド
レイアウトテンプレートに、各テンプレートファイルを展開するためのメソッド
yieldメソッドを使うことで、全ページ共通の記述を各テンプレートファイルに記載する必要がない

```erb
<!DOCTYPE html>
<html>
  <head>
    <!-- 省略 -->
  </head>
  <body>
    <header>
      <!-- 省略 -->
    </header>
    <main>
      <!-- main要素のみ、各テンプレートに記述 -->
      <%= yield %>
    </main>
    <footer>
      <!-- 省略 -->
    </footer>
  </body>
</html>
```

[![Image from Gyazo](https://i.gyazo.com/ea4089e583466931a0c6bf3cea660601.png)](https://gyazo.com/ea4089e583466931a0c6bf3cea660601)

# Ruby on Railsまとめ
https://qiita.com/likapantrip/items/46b43c9d1309b6633f0a

# ビュー
https://qiita.com/likapantrip/items/7773987cdd641ea3aad9
バックエンド開発についての気づきメモ

## 今回の気づき

バックエンド開発は結局、以下の流れが本質であり、それに集中すれば開発がスムーズになると感じた。

---

## 僕なりの理解の流れ

1. ユーザーがやりたいことを明確にする
2. そのためにどんなデータが必要かを明確にする
3. そのデータをどう動かしたら、ユーザーのやりたいことができるようになるかを明確にする
4. どのURLに、どのデータや、データの動きを割り当てるか決める
5. データや、動かしたデータをビューに埋め込むのか、それともAPIとして返すのか判別する

---

## この視点がなぜ良いと感じたか

- プログラミングとは、データを動かすことだと考えている。データに着目すれば、開発がシンプルに感じられると考えた。
Salesforce:(SAML)IDP - Mulesoft:SP

## MuleのDomain Name
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/39d63ef1-842c-41c8-8a8b-3e470693b840.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/e623f923-1248-49fd-b5b2-c79f75bb7ea8.png)


## IDPはSalesforce側で接続アプリケーションを利用して作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/d109439c-1c59-4f76-af0e-d2b52c45709c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/f14b4937-acc0-4072-aaa7-b3192ca25a8a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/137cbce6-bda5-43e8-a3ef-959b331571f3.png)


## Mule側
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/6204fb00-c6fc-4ac5-8b78-57b3fb35ac0a.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/1e922b16-492e-4035-88ec-f394869a02c3.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/9316ec2a-45b5-4a76-848f-cd0b07338fe6.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/fbeb909a-890b-481a-ba64-7d82c0cf878c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/7ce864dd-7761-4b0c-ab60-58ef4dde2e56.png)

## Salesforce側
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/1dca6c77-9fc4-48a3-a665-1c397846addd.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/535d9cd7-e0ed-4bcc-a62a-889a153dca57.png)

## Test

https://anypoint.mulesoft.com/accounts/login/petercom
書き式：
https://anypoint.mulesoft.com/accounts/login/MuleDomain

SalesforceのID、PWを入力すると
Muleへログインができｒ
Reactの勉強環境を準備する①

最近、Reactが稼働しているサイトが増えたと感じています。
（Chromeの拡張機能で、Reactが稼働している事を知ることが可能です）
って事で、、、若者には負けてられない・・・（勝手に若者が作った事にしてますが…）
（と、思いつつも、自分のことをジジィと言い、出来ない事が増えたと嘆く事多々…）
という事で、今回も勉強した内容をメモしておきます。（Windows操作でした）

**Node.js**
下記のURLからInstallしていきます。
https://nodejs.org/ja
「LTS：長期サポート版」を選択するのが手堅いでしょう。
インストール作業自体は、デフォルトのままで問題ありません。

**React環境の準備**
セットアップする環境には、インターネットへの接続が必須です。あらかじめ、
https://registry.npmjs.org/ に正常にアクセスできる事を確認しておきましょう。
PowerShellを管理者モードで開き、コマンドを実行します。
npx create-react-app ＜Reactのフォルダ＝ホーム＞
Typescriptを勉強したい場合は、
npx create-react-app ＜Reactのフォルダ＝ホーム＞ --template typescript
で準備しましょう。

**Windows固有のエラー**
「npx : このシステムではスクリプトの実行が無効になっているため…」
Windowsで作業をすると、セキュリティ的に、コマンド実行させて貰えない場合があります。
この時は、Windowsのセキュリティレベルを落としましょう。
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted
開発が終わったら、npxのコマンドを実行する必要もないので、セキュリティレベルを元に戻しましょう。
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Restricted

**TypeScriptを考える**
「変数は、しっかり定義して使いましょう」
これは、プログラムを開発する人が、必ず目指すべき環境だと思っています。（年寄りの冷や水でしょうか？）
小規模プロジェクトは良いんですけどね…。大人数が参加するプロジェクトでは、ルールがあっても無視する人や、ルールを守れるレベルにない開発者が参加している等あり、後からプログラムを見直すと、スパゲッティですよね…。
それなら、是非とも、TypeScriptを使いたい…。定義されない変数は、全てエラーになってしまえ…と。
しかしながら、サンプルプログラムをAiに生成させると、エラーばかりで解消しない事多々...。（自分がルールを守れるレベルに無いと自覚しました）
現時点のAiでは、TypeScriptに関する知識が足りないのか、なかなかエラーの解消に至れないので、開発者の知識が要求される状況のようです。
（ジジィには、Javascriptの知見が足らないので、Typescriptは使えないと判断しました...）

**Reactの開発環境を起動**
cd ＜Reactのフォルダ＝ホーム＞
npm start
通常、ここまでの処理で、正常に起動するはずですが、稀にコンポーネント不足なエラーが…。
この場合、「npm install 足らないコンポーネント」みたいな感じで頑張りましょう。
しばらくするとブラウザが起動して、REACTの初期画面的なものが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3878922/6630b67b-1b63-4fd2-8e6e-a2656fb60ac6.png)

**Webサイトで使いそうなパッケージの導入**
色々ありますし、これがBESTというわけでもないですが、とりあえず…です。
npm install use-immer　構造データを使うときに便利です         
npm install react-hook-form　　入力チェックを容易にします   
npm install @hookform/resolvers yup　　入力チェックを容易にします   
npm install styled-jsx　　Styleの導入を容易にします        
npm install react-app-rewired customize-cra --save-dev　　Styleの導入を容易にします 
npm install styled-components　　Styleの導入を容易にします
npm install @emotion/styled　　Styleの導入を容易にします
npm install @mui/material @mui/icons-material @emotion/react　　ReactのデフォルトのStyleを導入しましょう
npm install react-router-dom　　ルーティング管理に必要です
※今後の勉強で、少しずつ使っていければと思います。

**IISへ乗せていく**
Reactアプリケーションをビルドします
cd ＜Reactのフォルダ＝ホーム＞
npm run build
この時、ホームディレクトリの下に、「build」が作成されます。
Windowsの設定から、アプリの画面を開き、「プログラムと機能」より、「Windowsの機能の有効化または無効化」で、IISを準備しましょう。
下記のURLより、「URL書換モジュール」をINSTALLします。　（ルーティング管理の為）
https://learn.microsoft.com/en-us/iis/extensions/url-rewrite-module/using-url-rewrite-module-20
IISを起動し、Webサイトを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3878922/1b58ee32-93a3-4696-8ec6-caffbb746a61.png)
※物理パスには、ホームディレクトリの「build」を設定します。

**開発と本番環境を切り分ける**
IISで「build」フォルダで本番稼働し、「src」フォルダで開発し、検証は「npm start」で行うと良さそうです。開発したものをリリースする時は「npm run build」すればOKです。
Reactについては、稼働中にbuildしても、操作中の方への影響が軽微で済む仕様です。
（とは言え、大規模改修すると、やはりタダではすみませんが…）
稼働時間外に、大規模buildする場合と、軽微な修正であれば、稼働中にbuildする運用の両方が成り立ちそうです。
ただ、リリース後に不具合に気が付いたら…？
何事も、色々な準備を事前に用意することは重要です。

以上、御疲れ様でした～
Strategy パターン

### Strategyパターンとは

アルゴリズムをカプセル化して交換可能にする。
Strategyパターンを使うと、アルゴリズムを利用するクライアントとは独立してアルゴリズムを変更できる。

「同じようなことしてるけど、少しやり方が違う」というときに、Strategy パターンでうまく分離できると、見通しがよくなって保守しやすくなる。

### Strategyパターンが有効な場面

| 状況 | 有効な理由 |
|---|---|
| 条件分岐が多くて読みにくい | 処理をクラスに分離できる |
| 実行時に処理を切り替えたい | Strategyを差し替えるだけでOK |
| 共通の処理と可変の処理が混ざっている | 共通部分はContextに、可変部分はStrategyに分けられる |
| テストをしやすくしたい | Strategyごとに単体テストできる |


### Javaの例

アルゴリズムを保持するインターフェース型の変数をクラスで保持しておき、クラスをnewする際に、コンストラクタ引数にインターフェースの実装クラスを指定することで、使用するアルゴリズムを動的に切り替えることを実現している。

```java

package org.wikipedia.patterns.strategy;

// MainApp test application
class MainApp {
    public static void main(String[] args) {
        Context context;

        // 異なるアルゴリズムに従う3つのコンテキスト。
        context = new Context(new ConcreteStrategyA());
        context.execute();

        context = new Context(new ConcreteStrategyB());
        context.execute();

        context = new Context(new ConcreteStrategyC());
        context.execute();
    }
}

// 具体的な戦略を実装するクラスは、このインターフェイスを実装する。
// コンテキストクラスは、具体的な戦略を呼び出すためにこのインターフェイスを使用する。
interface Strategy {
    void execute();
}

// Strategy インターフェイスを用いたアルゴリズムの実装。
class ConcreteStrategyA implements Strategy {
    public void execute() {
        System.out.println("Called ConcreteStrategyA.execute()");
    }
}

class ConcreteStrategyB implements Strategy  {
    public void execute() {
        System.out.println("Called ConcreteStrategyB.execute()");
    }
}

class ConcreteStrategyC implements Strategy {
    public void execute() {
        System.out.println("Called ConcreteStrategyC.execute()");
    }
}

// ConcreteStrategy を指定して作成され、Strategy オブジェクトへの参照を保持する。
class Context {
    Strategy strategy;

    // Constructor
    public Context(Strategy strategy) {
        this.strategy = strategy;
    }

    public void execute() {
        this.strategy.execute();
    }
}

```
Jupyter Notebookの.ipynbファイルをPythonスクリプトに変換する方法

# この記事は

私は普段サイエンティストとしてJupyter Notebook形式(.ipynb)のファイルをPythonスクリプト形式(.py)に変換することが多いのですが、
簡単に変換する方法に今更気づいたので共有します。

今回は`/Users/test/Downloads/test.ipynb`というパスにipynbファイルが存在するとします。



## CLIでの変換
コマンドラインで簡単に変換する方法です。シンプルで素早く変換したい場合におすすめです。

```bash
jupyter nbconvert --to script /Users/test/Downloads/test.ipynb
```

このコマンドを実行すると、同じディレクトリに`test.py`というファイルが生成されます。



## Pythonスクリプトでの変換
マークダウンの部分を除外したり、より細かい処理を入れたい場合はPythonスクリプトで変換します。柔軟にカスタマイズしたい場合に適しています。


```python
import nbformat
from nbconvert import PythonExporter
from traitlets.config import Config
import os

# ConfigでMarkdownセルを除外
cfg = Config()
cfg.PythonExporter.exclude_markdown = True

# PythonExporter を生成
exporter = PythonExporter(config=cfg)

# 入力ファイルパス
input_path = '/Users/test/Downloads/test.ipynb'

# 出力ファイル名を入力ファイル名から生成
output_filename = os.path.splitext(os.path.basename(input_path))[0] + '.py'

# ノートブックを読み込んでスクリプト生成
nb = nbformat.read(input_path, as_version=4)
(script_body, resources) = exporter.from_notebook_node(nb)

# .py ファイルに書き込み
with open(output_filename, 'w') as f:
    f.write(script_body)

print(f"変換完了: {output_filename}が生成されました")
```

このスクリプトを実行すると、入力ファイル名に基づいた出力ファイル（この例では`test.py`）が生成されます。
【Python初心者】演算子の優先順位まとめ

Pythonを学習していて、ふとこんなコードに出会ったときに「え、どこからどう計算されるの？」と混乱した経験がありました。

```python
3 + 2 > 4 and not False
```

これは**演算子の優先順位（precedence）**が関係しています。  
この記事では、まず**ざっくり押さえておくべきポイント**と、**詳しい優先順位の表**を整理してみました。

## 簡単に覚えるポイント（超ざっくり）

```text
数値演算子 > 比較演算子 > 論理演算子（not > and > or）
```

- `+`, `-`, `*`, `/` など → **数値の計算系は最優先**
- `>`, `==`, `!=` など → **値を比較する演算子がその次**
- `not`, `and`, `or` → **論理判断系は最後**

## 演算子の優先順位（詳細）

以下は、**優先順位が高い順に並べた表**です。  
全部を暗記する必要はありませんが、よく使うものから少しずつ慣れていきましょう。

| 優先度 | 演算子                   | 説明                         | 例                             |
|--------|--------------------------|------------------------------|--------------------------------|
| 1      | `()`                     | 丸括弧（グループ化）         | `(3 + 2) * 4` → `20`           |
| 2      | `**`                     | べき乗（指数）               | `2 ** 3` → `8`                 |
| 3      | `+x`, `-x`, `~x`         | 単項演算子                   | `-5`, `~2`                     |
| 4      | `*`, `/`, `//`, `%`      | 掛け算、割り算、切り捨て、余り | `10 / 3`, `10 % 3`             |
| 5      | `+`, `-`                 | 足し算、引き算               | `5 + 2 - 1` → `6`              |
| 6      | `<<`, `>>`               | ビットシフト                 | `1 << 2` → `4`                 |
| 7      | `&`                      | ビットAND                    | `5 & 3` → `1`                  |
| 8      | `^`                      | ビットXOR                    | `5 ^ 3` → `6`                  |
| 9      | `|`                      | ビットOR                     | `5 \| 3` → `7`                 |
| 10     | 比較演算子               | `==`, `!=`, `>`, `<`, `<=`等 | `3 < 5` → `True`              |
| 11     | `is`, `in`               | 同一性・所属判定             | `x is y`, `"a" in "abc"`       |
| 12     | `not`                    | 論理否定                     | `not True` → `False`           |
| 13     | `and`                    | 論理積（AND）                | `True and False` → `False`     |
| 14     | `or`                     | 論理和（OR）                 | `True or False` → `True`       |
| 15     | `if ~ else`              | 条件式（三項演算子）         | `x if cond else y`             |
| 16     | `lambda`                 | 無名関数                     | `lambda x: x + 1`              |
| 17     | `=`, `+=`, `-=` など     | 代入演算子                   | `x = 5`, `x += 2`              |

## 実際の例で確認してみよう

次の式を一つ一つの優先順位で見ていきます。

```python
result = 3 + 2 > 4 and not False
```

評価の流れ：

1. `3 + 2` → `5`（加算）
2. `5 > 4` → `True`（比較）
3. `not False` → `True`（論理否定）
4. `True and True` → `True`（論理積）

結果：

```python
print(result)  # True
```

## 補足：右結合と左結合って何？

演算子には「どちらから結合されるか」というルールがあります。

- **右結合**：右から処理される  
    ```python
    2 ** 3 ** 2  # → 2 ** (3 ** 2) → 512
    ```

- **左結合**：左から順に処理される（多くの演算子はこちら）  
    ```python
    3 - 2 + 1  # → (3 - 2) + 1 → 2
    ```

## まとめ

- 複雑な式では、**演算子の優先順位**を理解しておくことが重要
- 基本は「**数値 > 比較 > 論理**」とざっくり覚えるだけでも違う
- **迷ったときは丸括弧 `()` を使って明示**すると安全

演算子の評価順序は、コードの挙動に直結する大事なルールなので、  
今後もコードを書きながら自然に理解を深めていきたいと思います。

## 参考：公式ドキュメント

https://docs.python.org/ja/3/reference/expressions.html#operator-precedence
Railsで関連テーブルにレコードを追加する方法：user.tags.create(...) の使い方

Railsでは、モデル間の関連付けを活用することで、親モデルから子モデルへのレコード追加が簡単に行えます。​例えば、User モデルが Tag モデルと has_many の関係にある場合、user.tags.create(tag: "旅行好き") のように記述することで、関連する Tag レコードを作成できます。​

# モデルの関連付けの定義
まず、User モデルと Tag モデルの関連付けを定義します。​

```ruby
# app/models/user.rb
class User < ApplicationRecord
  has_many :tags
end

# app/models/tag.rb
class Tag < ApplicationRecord
  belongs_to :user
end
```
このように定義することで、User モデルのインスタンスから tags という関連を通じて、Tag モデルのインスタンスを作成・取得することが可能になります。​

# 関連レコードの作成
関連付けが定義された状態で、以下のように記述することで、User に関連する Tag レコードを作成できます。​

```ruby
user = User.find(1)
user.tags.create(tag: "旅行好き")
```
このコードは、user_id が 1 の User に関連付けられた Tag レコードを作成します。​内部的には、Tag.create(user_id: user.id, tag: "旅行好き") と同等の処理が行われます。​

# バリデーションエラー時の対応
バリデーションエラーが発生した場合に例外を発生させたい場合は、create! メソッドを使用します。​

```ruby
user.tags.create!(tag: "飲み会好き")
```
このように記述することで、バリデーションエラーが発生した際に ActiveRecord::RecordInvalid の例外が発生し、エラーの詳細を把握することができます。​

# 他の関連モデルでも同様の操作が可能
has_many と belongs_to の関係が定義されている他のモデルでも、同様の方法で関連レコードの作成が可能です。​例えば、User モデルが Post モデルと関連付けられている場合、user.posts.create(title: "新しい投稿") のように記述できます。​

# まとめ
Railsのモデル間の関連付けを活用することで、親モデルから子モデルへのレコード追加が簡潔に行えます。​has_many と belongs_to の関係を正しく定義し、親モデルのインスタンスから関連メソッドを呼び出すことで、関連レコードの作成が可能になります。​

この方法を活用することで、コードの可読性と保守性が向上し、効率的な開発が可能になります。
switchのreturnはこうした方が分かりやすいと感じる🤔

## はじめに

Flutter、Dartで開発をしていてふと思ったことを記事にしてみようと思います。

今回は表題の通り`switch`と`return`についてです。

:::note warn
今回の内容はどちらかと言うと私の好みの問題なので、
それを踏まえていただけましたら幸いです。
:::

## よくあるswitch + return

関数やメソッドの中で`switch`文を使って条件分岐を行い、

それに基づいて`return`を返す場合においては以下のようにも書けます。

```dart
String getGreetingByTime(String timeOfDay) {
  switch (timeOfDay) {
    case 'morning':
      return 'おはようございます';
    case 'afternoon':
      return 'こんにちは';
    case 'evening':
      return 'こんばんは';
    default:
      return 'こんにちは（時間帯不明）';
  }
}

void main() {
  print(getGreetingByTime('morning')); 
  print(getGreetingByTime('evening')); 
  print(getGreetingByTime('night')); 
}
```

もちろんこのコードでも動きますし、特に問題はないと思われます。
<br>

ただこの関数やメソッドのロジックがもっと長大で複雑であり、

実装されているファイルの行数も長かった場合、

または同じような`switch + return`の書き方をしている箇所がいくつもあると、

ちょっと私は読みづらく感じてしまいます。。。😅
<br>

`return`がスコープの中の方、深い方にあると、

ぱっと見た時のコードの入りやすさと言いますか、

なんだか脳内にスッキリ入っていかないと言いますか、

処理のイメージがクリーンにしづらい感じがするんですよね💦
<br>

開発をしていると結構長い時間コードを読むかと思われるのですが、

ちょっとでも認知上の負荷と言いますか、脳の負荷と言いますか、

すんなり頭に入りやすい、イメージしやすい方が助かるかなぁと思っています。。。


## 先にreturnから書いてみた💪

それを踏まえると、私は`return`が先にあった方が読みやすい感じがしていまして、

ちょっとリファクタリングしてみました🎶

```dart
String getGreetingByTime(String timeOfDay) {
  return switch (timeOfDay) {
    'morning' => 'おはようございます',
    'afternoon' => 'こんにちは',
    'evening' => 'こんばんは',
    _ => 'こんにちは（時間帯不明）',
  };
}

void main() {
  print(getGreetingByTime('morning')); 
  print(getGreetingByTime('evening')); 
  print(getGreetingByTime('night')); 
}
```

処理内容は全く同じなのですが、先に`return`を書いているので、

こちらの方が私は内容が頭に入りやすく、イメージもしやすい感じがしています。

コードの見た目もスッキリしていて、個人的にはこっちが好みです😄
<br>

もちろんこれは私の好みによるものかと思われますので、

前者のコードでも全然問題はないかと思われるのですが、

もしこの書き方が参考になりましたら幸いです🙇‍♂️
OAuthについて

## OAuthとは
`Open Authorization`の略
認可プロトコルで、オンライン認可の業界基準。
最新バージョンは`2.0`

異なるサービス間での認証や情報共有を安全に、かつ簡単に行うための標準プロトコルで、多くのWebサービスやアプリケーションで使用されている。

**活用事例**
ユーザーが自分のアカウントパスワードを共有せずに、サードパーティのアプリケーションに自分のデータ（X、Googleなど）へアクセスできる

Google, Facebookなどのソーシャルログイン（ID,PWが不要でログインできる）など


## OAuthを利用するメリット
- **ユーザビリティの向上**
ユーザーは新たにユーザー名やパスワードを覚える必要なく、既存のソーシャルメディアアカウントを使用してサービスにログインができ、ユーザー体験が向上する。
- **登録の簡素化**
新規ユーザーは、ソーシャルメディアアカウントを使用して簡単に登録できる。これにより、登録プロセスが簡素化され、ユーザーの離脱率低下に貢献。
- **セキュリティの強化**
パスワードを直接管理する必要がなくなるため、パスワードリセットやパスワード盗難のリスクが減少します。また、ソーシャルメディアプロバイダーは通常、セキュリティ対策（例えば二段階認証）を提供しています。

### 認証と認可の違い
- **認証（Authentication）**
ユーザーの身元を確認すること

- **認可（Authorization）**
ユーザーにリソースにアクセスする権利を与えること


## OAuthの仕組み
### 構成
- **リソースオーナー（ユーザー）**
リソースの持ち主で、アクセスを許可する

- **クライアント（アプリ、バックエンドAPIなど）**
リソースオーナーに代わり、リソースへアクセスを要求する

- **認可サーバー（X API、Google APIなど）**
リソースオーナーを認証し、クライアントにアクセストークンを発行する
OAuth2.0において最も重要な役割を果たす
このサーバーは、クライアントからのアクセストークンのリクエストを受信し、認証が成功してリソースオーナーから合意を得たら、アクセストークンを発行します。
認可サーバーは、2つのエンドポイントを公開します。
・認可エンドポイント：インタラクティブな認証とユーザーの合意を取り扱う
・トークンエンドポイント：マシンtoマシンに関与する

- **リソースサーバー（X、Googleなど）**
リソースを管理する

<sup>*認可サーバーとリソースサーバーは同一のシステムで統合されてるケースも多い


### 認可グラントタイプ
クライアントがアクセストークンを取得する方法
- 認可コードグラント
- 認可コード＋PKCE
- インプリシットグラント

### 認可コード
認可サーバーに認可リクエストをして、成功するとアクセストークンを発行するための認可コードを発行してくれる。クライアントはそれを使ってアクセストークンを取得する

認可コードはアクセストークンの引換チケットのようなもの。

ただ、なぜアクセストークンを直接返さないのか？の理由は盗難リスクに備えて、そういう設計になっている。
実際に認可コードはセキュリティを高めるために以下のように設計されている
・有効期間が短い
・1回しか使えない

*インプリシットグラントだと、認可コードなしに直接アクセストークンが付与される

***PKCEについて**
PKCE（Proof Key for Code Exchangeの略で、呼び方はピクシー）は、OAuth2.0の拡張使用で、認可コード横取り攻撃を防止するセキュリティの強化手法。認可コードフローのフロー自体を変えるものではなく、認可コード横取り攻撃への対策を追加する。

### アクセストークンとリフレッシュトークン
**アクセストークン**
クライアントがリソースサーバーへリクエストするために必要

**リフレッシュトークン**
アクセストークンには期限があり、基本的に短いので期限が切れたら新しいアクセストークンを取得するのに、このリフレッシュトークンが使用される。
アクセストークンと一緒に発行されるが、リソースへのアクセスには使わない、あくまで更新の為に使う。

- アクセストークンの期限：数時間くらい
- リフレッシュトークンの期限：数ヶ月とか無期限もある

*アクセストークンの期限が短くしてあるのは悪用を防ぐため

## 認可コードフロー
1. クライアント（アプリ）がリソースオーナー（ユーザー）を認可サーバーにリダイレクトし、認可画面が表示される
2. ユーザーがアクセスを承認すると認可サーバーに認可リクエストが送られる
3. 認可サーバーはクライアントのリダイレクトURIに認可コードを送信
4. クライアントは、認可コードを使用して認可サーバーからアクセストークンを要求する（トークンリクエスト）
4. 認可サーバーはリクエストを検証し、正当であればアクセストークンを発行し、クライアントに返す
5. クライアントは、取得したアクセストークンを使用してリソースサーバーに保護リソースへのアクセスを要求
6. リソースサーバーはアクセストークンを検証し、正当であれば要求された保護リソースをクライアントに返す

![Frame 1 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173182/be377d92-c3b5-4b67-ae57-a89b489c9243.png)

[こちらの記事](https://qiita.com/hisashi_matsui/items/55e445b6a34a522dcbd8)で、OAuth2.0フローPKCEで X APIのアクセストークンを実際に取得する流れ、PKCEの詳細などを記事にしています。

引用元 https://auth0.com/jp/intro-to-iam/what-is-oauth-2
Firebase Hosting

Reactでアプリを作成中なのですが、firebaseでデプロイするときに設定を間違えたのが原因かわからませんが、デプロイするとindex.htmlがFirebase Hostingのページに書き換えられてしまい、npm startもデプロイもできなくなってしまいました。解決方法を教えていただきたいです。
【Sourcetree】基本的な使い方

# 導入方法
1. 下記のurlからexeファイルをダウンロード
[Sourcetree](https://www.sourcetreeapp.com/)
1. 右クリックメニュー/開くでexeファイルを開く
1. `Registration`は**スキップ**
1. `Pick tools to download and install`は**次へ**
1. `ツールのインストールが完了しました。`は**次へ**
1. `Preferences`は利用するためのユーザー名とメールアドレスを打って**次へ**
1. `SSHキーを読み込みますか?`は**いいえ**

# Githubアカウントの追加方法
1. Remote(雲のマーク)をクリック
1. リモートリポジトリ:/アカウントを追加をクリック
1. `ホスティングサービス`を**Github**に
1. OAuthトークンを再読み込みをクリック
1. `ユーザー名`に名前が入っていたら、**OK**

# 基本的な使い方
## リポジトリ
### クリエイト
Create(+)から、
`保存先のパス:`はどこに保存するか、
`名前:`はリポジトリ名
をそれぞれ入力し、クリエイトを行う

### アッド
Add(ファイルが開いているマーク)から、
`作業コピーのパス:`はどこに保存されているか、
`名前:`はリポジトリ名
をそれぞれ入力し、アッドを行う

### クローン
`リモートリポジトリ:`にクローン(自身でGithub上に上げているものを複製)できる
リストがあるので、そこからクローンを行う

or

Clone(ダウンロードマーク)から、
`元のパス/URL:`はGithub上でのurl、
`保存先のパス:`はどこに保存するか、
`名前:`はリポジトリ名
をそれぞれ入力し、クローンを行う

## git操作
**フェッチ** : リモートリポジトリ(ネット上に保存されている作業)を取得する
**コミット** : ローカルでの作業内容を履歴として保存する
**プッシュ** : コミットされたものをリモートリポジトリに上げる
**ブランチ** : 個々の作業スペースのこと
**マージ** : 自身のプッシュしている作業内容を、他のブランチに合わせること
**プル**(git上級者向け) :
フェッチ + マージで、自身の作業内容にリモートリポジトリの変更を合わせる
ただし、自分の作業範囲であるファイルに変更が加わっていると、
コンフリクト(どちらの内容を使うの?)が発生する

### 誤操作系に役立つ機能
**このコミットを打ち消し(リバート)** :
機能がオミットになった場合や間違えてコミットした場合に、取り消しができる機能

**チェリーピック** :
違うブランチに変更内容を保存したとき、現在のブランチにコミットできる機能

## Git Flow(チーム開発)
クリックすると、ウィンドウが表示され、下記について理解したら**OK**

**製品ブランチ:maseter** :
制作が終了した内容が保存されるブランチ
バグや最終調整が終了しているときのみ、developブランチからマージを行う

**開発ブランチ:develop** : 全ての開発データが保存されるブランチ
**フィーチャーブランチ:feature/実装する内容** : 新機能の制作を行うブランチ
**リリースブランチ:release/ver** : リリースに向け、バグの修正や最終調整を行うブランチ
**ホットフィックスブランチ:hotfix/バグ修正する内容** :
リリース後、発生した緊急性の高いバグの修正を行うブランチ
masterブランチにも、developブランチにもマージを行わなければならない

[ここのリンクの図を参考に](https://qiita.com/KosukeSone/items/514dd24828b485c69a05)

## チーム開発で使う機能
**プルリクエストを作成** : 
現在pushしている内容を、他者からソースレビューをもらうための機能
1. ブランチを右クリック
1. プルリクエストを作成
1. ソースレビュー
1. 修正
1. okをもらったら、マージ

大体の流れはこんな感じ
LinuxのmountコマンドでWindowsの共有フォルダーが接続できなくなった現象を解決

## 環境
- ファイルサーバー
  - Windows Server 2025 Datacenter (試用中)
- マウント先環境
  - Ubuntu Server 24.04.2

## 起こった現象
数か月前に、Ubuntuへネットワーク上に存在するファイルサーバー(Windowsで構築)を`mount`コマンドでマウントしていたが、メンテナンス時の再起動後にマウントできなくなった。
以下がその時のエラー。
```bash
mount error(127): Key has expired
Refer to the mount.cifs(8) manual page (e.g. man mount.cifs) and kernel log messages (dmesg)
```
パスワード有効期限の存在を完全に忘れていた。
## 解決
`net user [ユーザー名]`でWindows側のパスワード有効期限を確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349992/93f757f4-66b8-4f9c-b3be-44946470e658.png)
記事作成時、`2025/04/20`で2日ほど切れていたため、
パスワードを変更し有効期限を延ばすか、無期限化を行うことで解決した。

### パスワード変更する方法
コマンドプロンプトかPowerShellを管理者権限で開く。
`net user [ユーザー名] [パスワード]` で変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349992/f6afb77b-f987-4baa-8d9f-752793ababe3.png)
変更できた。
### パスワードの無期限化
PowerShellを管理者権限で開く。
`Set-LocalUser -Name "ユーザー名" -PasswordNeverExpires $true`で無期限化できる。

---
※この記事は、AI文章校正ツール「[ちゅらいと](https://chuwrite.com/)」で校正されています。
意外と知らないJavaScriptの便利機能Object.freezeとObject.seal

## オブジェクトの話って退屈？

「オブジェクトの話をします」と言われると、多くの人が「ああ、オブジェクトね」と思われる方も多いのではないでしょうか。

私はオブジェクトの機能で言うと`Object.assign`でクローンを作ったり、キーを取り出して配列を操作したりするので十分知っていると思っていた時期がありました。

そこで今や古い技術扱いされているjQuery。そのjQueryの使い方から参考になる便利なテクニックがあり、今回は`Object.freeze`と`Object.seal`について調べてみました。

## Object.freezeは文字通り「凍結」

`Object.freeze`は、その名の通りオブジェクトを完全に凍らせちゃいます。いったん凍結すると、そのオブジェクトは一切変更できなくなります。

以下のような使い方になります。

```javascript
let a = {};
Object.freeze(a);

// 値を代入しようとしても..
a.name = "値";
console.log(a); // {}、何も変わっていません！
```

「それって`const`と同じでは？」と思う方もいらっしゃるかもしれません。
しかし、オブジェクトでは違った挙動をします。

```javascript
const a = { name: "A" };
a.name = "B"; // これは変更できる
console.log(a); // { name: "B" }
```

`const`は変数の再代入を防ぐだけで、オブジェクトの中身は自由に変更できるんです。でも`Object.freeze`を使うと、オブジェクトの中身も一切変更できなくなる。拡張も再定義もできない状態になります。

## Object.sealは「封印」する機能

`Object.seal`は「封印」です。こちらは凍結より少し制限が緩くて、新しいプロパティの追加はできませんが、既存の値を上書きするのはできます。

```javascript
const a = Object.seal({ name: "A" });

// 新しいプロパティは追加できない
a.height = 170;
console.log(a.height); // undefined

// でも既存の値は変更できる
a.name = "B";
console.log(a.name); // "B"
```

## 実用例

### 1. ライブラリやモジュール開発が最適

自分で作ったライブラリやモジュールが、他の人によって勝手に再定義されて欲しくない時に使えます。

```javascript
// Reactを使っているとき
import { useState } from 'react';

// もし誰かがこんなことをしたら...
useState = myCustomUseState;
```

実際こんなコードを書く人はいないと思いますが、大きなプロジェクトでは似たような名前の関数を誤って上書きしてしまう可能性はありますのでそのような時にはいい仕組みになると思います。

### 2. サーバーサイドの設定が守れる

サーバーサイドの設定ファイルは、一度読み込んだら変更されてはいけないなものが多いです。

```javascript
const config = Object.freeze({
  port: process.env.PORT,
  apiKey: process.env.API_KEY
  // ...他の設定
});
```

これで設定が誤って変更されることを防げます。

### 3. 単方向データフロー

Reactの内部実装を考えると、ステートストアは本来直接変更されて欲しくないものです。
例えば`useState`を使うときに、以下のような記述をよく書きますよね。

```javascript
const [a, setA] = useState(0);
```

この`a`は単なるゲッター（値を取得するもの）で、オリジナルの状態はReactの内部ストアに保存されています。もし直接ストアを変更できたら大変なことになります。

なので内部的には状態が凍結されていて、特定のセッター（`setA`）を通じてだけ変更できるようになっています。このパターンを実現するのに`Object.freeze`のような仕組みが使われています。

## これって必要？

「そんなの使わなくてもいいでしょ」と思われる方もいるかもしれませんが、モジュール開発ではこれが本当に役立ちます。

特に大規模プロジェクトになると、人間のエラーがどんどん増えていきます。

コード自体は問題なくても、人間がミスを犯す。プロジェクトが大きすぎて、同じ名前の関数が複数箇所で定義されたりして...

こういう小さな防御策でプロダクトを品質を上げられると個人的には思っています。

## おまけ：昔のJSの技

ちょっと昔の話には、プロトタイプ拡張というテクニックがあったようです。

以下のように配列のプロトタイプを拡張してみると

```javascript
Array.prototype.sum = function() {
  return this.reduce((a, b) => a + b, 0);
};

// そうすると、こんな感じで使えます。
[1, 2, 3].sum(); // 6
```

なんでもオブジェクトになっていて自由に変えられるRubyのようなことができたと言うことです。
大規模なプロジェクトでこんなことをすると危ないので、個人開発でたまに使える感じですかね！

ここで、このようなカスタム拡張をした後は`Object.freeze`で保護すれば完璧ですね！
git merge --no-ff の動作検証と考察

## はじめに

Gitにおける `merge` コマンドには、`--no-ff` オプションが存在する。このオプションの意味を明確に理解するために、まず `fast-forward` マージの挙動から整理し、各オプションの挙動の違いを検証してみた。

---

## fast-forward とは何か

Gitにおける `fast-forward`（早送り）マージとは、以下のような状況で発生する。

例として、`master` ブランチから `develop` ブランチを作成し、`develop` 側で複数回のコミットを行った後、再び `master` にマージするケースを考える。

このとき、`master` ブランチ側でその間に新たなコミットが1つも行われていなければ、`develop` の最終コミットは `master` の最新コミットに直結する形となる。この場合、マージコミットを作成することなく、単に `master` のHEADを `develop` のHEADに移動するだけで履歴が一本化される。この操作がいわゆる `fast-forward` マージである。

一方、`master` 側でも独立したコミットが存在する場合は、履歴の整合性のためにマージコミットを生成する必要が生じる。これが `non fast-forward` なマージである。

---

## `--ff` または指定なし（デフォルト）

このオプションは「fast-forward が可能であれば、それを行う」というGitのデフォルト動作である。

### 実行例

```bash
git checkout master
git log

git checkout develop
git log
# c6d96fd ver2
# 511c644 ver1

git checkout master
git merge develop
# Updating 9222684..c6d96fd
# Fast-forward ※デフォルトはfast-forward
```
master のログ（マージ後）
git log
```
# c6d96fd ver2
# 511c644 ver1
```
このように、マージコミットは生成されず、履歴は直線的に連結される。

--no-ff
このオプションは、fast-forward 可能な状況であっても、必ずマージコミットを生成するようにGitに指示する。

実行例
```
git checkout master
git merge --no-ff develop
# Merge made by the 'recursive' strategy.
```
master のログ（マージ後）
git log
```
# ab63095 Merge branch 'develop' ※マージコミットが生成されている
# c6d96fd ver2
# 511c644 ver1
```
マージ履歴が視覚的に明確となり、将来的な変更の追跡がしやすくなる利点がある。

--ff-only
このオプションは、fast-forward マージ以外を拒否する指定である。マージが fast-forward に該当しない場合、Gitは操作を中止し、エラーを出力する。

実行例（失敗ケース）
```
git checkout master
git log --oneline
# 86261b5 ver4
# c902dfb ver2
```

```
git checkout develop
git log --oneline
# 1a6c07d ver3
# 511c644 ver1
```

```
git checkout master
git merge --ff-only develop
# fatal: Not possible to fast-forward, aborting.
```
このように、--ff-only はfast-forwardでのマージが成立しない状況下では一切マージを許可しない。

## まとめ
- Gitの merge コマンドには、--ff（デフォルト）、--no-ff、--ff-only の3つのオプションが存在する。
- --ff は最もシンプルな履歴を維持できるが、マージの痕跡が履歴に残らないため、大規模開発では履歴の可読性に劣る場合がある。
- --no-ff を用いることで、どのタイミングでブランチが統合されたのかが履歴に明確に記録されるため、保守・調査の観点では有効である。
- --ff-only は、履歴の明確化とミスの抑止という観点で安全性が高いが、適用場面は限定される。

以上の特性を踏まえ、プロジェクトの規模や運用ルールに応じて、適切なオプションを選定すべき。
Flow Debugging Superbadge Unit


https://trailhead.salesforce.com/content/learn/superbadges/superbadge_flow_debugging_sbu



+ ユーザーが期待どおりに自動化を実行できない原因となっている問題を分析して修正します。
+ 適切な自動化の実行に影響するフロー構成のトラブルシューティングを行います。


# ケース3709: フローユーザーエクスペリエンス

ユーザーが自動化を実行できない問題をトラブルシューティングして解決します。 

:::note alert
The user 'Andesha Rahman' isn't able to run the 'Create a Case' flow.

ユーザー「Andesha Rahman」は「ケースの作成」フローを実行できません。
:::

共有設定も、フローの実行権限もあるとは思うけど... 意味が分からん

:::note alert
You do not have the level of access necessary to perform the operation you requested. Please contact the owner of the record or your administrator if access is necessary.
:::

:::note alert
A flow debug run failed to start because the running user doesn’t have the required permission and access to run the flow.
Salesforce Error ID: 2049807530-125391 (-1898225642)
:::

これを見たけど、フローの名前が違う。余計に分からん

https://www.youtube.com/watch?v=iZhrLie-Wr4

権限セットも付与したし、システムモードにしてもエラーになりますね。何だろう？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/0edc71bb-1804-4d26-905b-cce6dfe6ebda.png)

何をチェックしているのか？

UserPermissionsInteractionUser　

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/d685d282-23ca-42e5-a303-1e299a02ab45.png)

```
SELECT Id, Username, S FROM User WHERE ((FirstName = 'Andesha' AND LastName = 'Rahman') OR (FirstName = 'Rahman' AND LastName = 'Andesha')) LIMIT 1
```

ああああ、おかしい。

:::note alert
We can't verify that the flow was debugged as Andesha Rahman's user. Debug the automation as this user.
:::


# ケース3801: フロー構成

自動化が失敗する原因となる構成を確認し、デバッグをサポートするための通知を追加します。

:::note alert
The 'Create Opportunity' flow fails to create opportunity records dynamically.
:::

登録できない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/1809278c-7382-496b-9b01-f14d08c40b62.png)

+ [When adding Automated Process email address, keep receiving the error: "You must enter a valid value"](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000KetBMSAZ)


Organization-Wide Email Addresses ではメールアドレスには自分のアドレスを使わないと検証できないから？

入力できないですね

何だ？

:::note alert
Error Occurred: This error occurred when the flow tried to create records: REQUIRED_FIELD_MISSING: Required fields are missing: [StageName]. You can look up ExceptionCode values in the SOAP API Developer Guide.
:::

:::note alert
The flow error messages aren't being routed correctly.
:::

Apexの方を使うのか...


# ケース3819: フローの展開

運用環境でフローの構成を確認し、展開後の問題を特定します。

:::note alert
The 'High Value Opportunity Assignment' flow isn't reassigning high value opportunities to the expected user dynamically.


「高価値商談の割り当て」フローでは、高価値商談が想定されるユーザーに動的に再割り当てされません。
:::


# ケース3830: フローデバッグ

不適切なフロー構成と要素構成をトラブルシューティングして解決します。 

:::note alert
The flow 'Account Suspension' isn't using the appropriate resource to reference the account record.


フロー「アカウント停止」は、アカウント レコードを参照するために適切なリソースを使用していません。
:::
FastAPI + psycopg3 のメモ

psycopg のバージョン3がいつの間にか出ていた。[^psycopg3]

asyncio に対応しているのと row_factory が Pydantic 型を返せるようになったと聞いて気になったのでちょっと触ってみたメモ。

[^psycopg3]: https://www.psycopg.org/psycopg3/docs/index.html

## 初期設定
今回は FastAPI の非同期エンドポイントから使うことを想定して、コネクションプールと接続オブジェクトを返す非同期ジェネレータを作成した。

``` python:database.py
from os import getenv
from typing import AsyncGenerator

from psycopg import AsyncConnection
from psycopg_pool import AsyncConnectionPool

DATABASE_URL = getenv("DATABASE_URL")
assert DATABASE_URL

pool = AsyncConnectionPool(DATABASE_URL, open=False)


async def get_db() -> AsyncGenerator[AsyncConnection, None]:
    async with pool.connection() as conn:
        yield conn
```

``` python:app.py
from contextlib import asynccontextmanager

from fastapi import FastAPI

import database


@asynccontextmanager
async def lifespan(app: FastAPI):
    await database.pool.open()
    yield
    await database.pool.close()


app = FastAPI(lifespan=lifespan)
```

## row_factory で Pydantic 型を得る
row_factory を使うことでクエリ結果を Pydantic 型で得られるようになった。

``` python:views.py
from fastapi import APIRouter, Depends, HTTPException
from psycopg.rows import class_row
from pydantic import BaseModel

from database import AsyncConnection, get_db


router = APIRouter()


class Item(BaseModel):
    id: int
    name: str


@router.get("/items/{item_id}")
async def get_item(item_id: int, db: AsyncConnection = Depends(get_db)) -> Item:
    async with db.cursor(row_factory=class_row(Item)) as cur:
        await cur.execute("SELECT * FROM items WHERE %s", (item_id,))
        item = await cur.fetchone()
    if item is None:
        raise HTTPException(status_code=404)
    return item
```

## その他
操作感はだいたい psycopg2 と同じまま asyncio 対応されたという感触だった。

https://qiita.com/hoto17296/items/0ca1569d6fa54c7c4732

昔まとめたこの内容がほぼそのまま使えそう。
TypeScript 基本の型（string・number）

# はじめに
TypeScriptの学習を始めてみたので環境構築から簡単なコード実行まで試してみた。

---

##  前提条件

- Node.jsがインストール済みであること 
  ※[Node.js公式サイト](https://nodejs.org/)から最新版をインストールする。

---

## TypeScriptコンパイラをインストール

TypeScriptをグローバルにインストールする。

npm install -g typescript
インストール後、バージョン確認：
tsc -v
Version 3.9.5
（2025年時点では最新バージョンは 5.x 系かもしれないので必要に応じてアップデートする）

## string型とnumber型を試してみる
index1.ts というファイル名で、以下のコードを作成する。
```
let message: string = "hello";
console.log(message);

let color: string = 'green';
console.log(color);

let name1: string = `taro`;
console.log(name1);

// この代入はコンパイルエラーになる。
// name1 = 2;

let name2: string = `my name is ${name1}`;
console.log(name2);

let num: number = 30;
console.log(num);
```

文字列は `"ダブルクォート"`, `'シングルクォート'`, `` `バッククォート` `` いずれも使用可能。
テンプレートリテラル（バッククォート + ${}）で文字列中に変数を埋め込める。
: string や : number のように型を明示することで、誤った値の代入を防げる。

## 実行手順
1. トランスパイル（TypeScript → JavaScript）
tsc index1.ts
同じディレクトリに index1.js が生成される。

2. 実行（Node.js）
node index1.js
hello  
green  
taro  
my name is taro  
30  

## 学んだことのメモ
- TypeScriptはJavaScriptに型の仕組みを追加した言語である。
- tsc コマンドはトランスパイラとして、TypeScriptをJavaScriptに変換してくれる。
- コンパイル時に型エラーをチェックできるので、バグを早期に発見しやすい。
- チーム開発や中〜大規模開発では、型による安全性が役立つ。
- Microsoft製の言語であり、Visual Studio Codeとの相性がよさそう。
【廃止】Lightning Implementation Specialist



https://trailhead.salesforce.com/content/learn/superbadges/superbadge_lightning_specialist

+ Lightningツールを使用してカスタムオブジェクトを構築および構成します。
+ Lightningでコンソールアプリを構築、カスタマイズする
+ Lightningレコードページを最適化してパフォーマンスと洞察を得る
+ 動的なインタラクションとアクションおよび推奨事項を構成する。
+ 事前に構築された Lightning Web コンポーネントとフローを操作し、
+ ナビゲーションおよび情報ツールで価値を追加します。


# システム管理のレビュー

Lightning Object Creatorを使用して新しいカスタムオブジェクトを作成します。NTOブランド、ユーティリティバー、適切なチームアクセスを備えた Lightning コンソールアプリケーションを構築します。

# アンバサダーマネージャー向けのカスタム機能を作成する

アクションと推奨事項のデプロイメントを活用して、フローの表示、新しいLightningレコードページの作成、項目の表示設定を行います。アンバサダーマネージャーがブランドアンバサダーと連絡を取り合うためのクイックアクションを作成します。チームがアンバサダーの所在地を確認できるインタラクティブな機能を備えたLightningアプリケーションページを構築します。

# パフォーマンスの最適化

Lightningアプリを使用してシステム パフォーマンスを最適化し、読み込みが遅いページの要素を調整してパフォーマンスを向上させます。

# ビジネスプロセスの自動化を強化

アンバサダーマネージャーがアンバサダーの再認定プロセスを進める上で役立つ、成功へのガイダンスを含むパスを作成します。リストビュー内のすべてのレコードを更新する自動化と、フローをトリガーするグローバルアクションを作成します。

# 情報管理の強化

App Exchangeからアプリをインストールして、生産性と情報管理を向上させましょう。チームのニーズに合わせてリストビューを作成し、適切なチームメンバーに表示できます。チームメンバーがレコードを操作して効率を高める方法をデモンストレーションします。

# 採用を支援する

Lightning 使用状況アプリにリンクされた 2 つのカスタム レポート タイプを作成し、NTO が Lightning ページのパフォーマンスと表示頻度を分析するのに役立つレポートを構築します。

# クイズ: Lightning のベストプラクティス

リリース管理、アクセシビリティ、データ管理、パフォーマンスに関する質問に答えます。

# クイズ: アプリ、ダッシュボード、導入

ユーザーの採用、Lightning のパフォーマンス、アプリの設計、ダッシュボードの管理に関する質問に回答します。
Ubuntu24.04でOpenSSLをソースコードからビルドする


## 環境

- Ubuntu24.04

## ソースコードをダウンロード＆展開

```bash
curl -OL https://github.com/openssl/openssl/releases/download/openssl-3.5.0/openssl-3.5.0.tar.gz
tar xzvf openssl-3.5.0.tar.gz
rm openssl-3.5.0.tar.gz
```

## ビルド

```bash
cd openssl-3.5.0
./Configure \
  --prefix=/usr/local/ssl \
  --openssldir=/usr/local/ssl \
  '-Wl,-rpath,$(LIBRPATH)'
make
sudo make install
```

## システムの PATH やライブラリ検索パスを一時的に変更

```bash
export PATH="/usr/local/ssl/bin:$PATH"
export LD_LIBRARY_PATH="/usr/local/ssl/lib"
```
多言語環境におけるHugoテンプレートでのURL生成方法

自分はHugoを使った[個人ブログ](https://techblog.luxunworks.com/ja/posts/)を運営しています。

テンプレートを選ぶ際、ポートフォリオ兼テックブログ、ついでに英語と中国語の練習としての場も兼ね備えたい、と思っていました。
この条件で探したところ、現在も使用している[hugo-profile](https://github.com/gurusabarish/hugo-profile)にたどり着きました。

この[hugo-profile](https://github.com/gurusabarish/hugo-profile)なのですが、テンプレート部分で、`{{ .Site.BaseURL }}`を使用してリンク先としている個所が散見されました。
[公式ドキュメント](https://gohugo.io/methods/site/baseurl/)にも書いてある通り、これはHugoのコンフィグファイル（hugo.yaml）に記載してあるbaseURLの値が埋め込まれます。
このサイトを例に挙げると、`{{ .Site.BaseURL }}#about`は、`https://techblog.luxunworks.com/#about`を指すことになります。

前述した通り、このサイトは英語と中国語の練習の場も兼ねているので、多言語対応となっていて、Hugo.yamlでdefaultContentLanguageInSubdirをtrueにしています。
つまり、URLの形式は「ドメイン（baseURL）+ 言語名 + コンテンツへのパス」となっています。
一方で、`{{ .Site.BaseURL }}`はbaseURLのみを指します。

そのため、例えば中国語版のサイトを開いている時に`https://techblog.luxunworks.com/#about`へアクセスすると、hugo.yamlのdefaultContentLanguageに設定してあるenが自動的に設定されます。

しかし`#about`は無視されてしまうので、結果として`https://techblog.luxunworks.com/en/#about`ではなく`https://techblog.luxunworks.com/en/`にリダイレクトしてしまいます。

デザインは気に入っていただけに、このあたりの挙動をどうしようかと悩んでいたのですが、[ドキュメント](https://gohugo.io/methods/site/baseurl/)を見ると、以下の文言が書かれていました。

>There is almost never a good reason to use this method in your templates. Its usage tends to be fragile due to misconfiguration.
>
>Use the absURL, absLangURL, relURL, or relLangURL functions instead.

つまり、このメソッドはテンプレートで使わず、absURL, absLangURL, relURL, relLangURLを使え！ということですね。
実際に[absLangURLのドキュメント](https://gohugo.io/functions/urls/abslangurl/)を見てみると、どうやら言語サブディレクトリ付きで絶対URLを生成してくれるとのことでした。

早速テンプレートをカスタマイズしたところ、想定した通りの挙動となり、リンク先が`https://techblog.luxunworks.com/en/#about`のように設定されました。

同じような事象に悩まされている方は、是非absURL, absLangURL, relURL, relLangURLを使ってみてください！
【Laravel + Redis】初期構築時にsessionがredisから読み取れない原因と対処法

# 要約
Laravel(v11/v12)で408タイムアウトする原因は
config/database.phpの'scheme'が未指定だった
環境：SESSION_DRIVER=redis（Valkey/Redis）

##  現象

Laravel 12で `.env` に以下のように設定して、Redis（正確にはAWSの Valkey Serverless）をセッション管理に使おうとしたところ、**リクエストがタイムアウト（408）** する問題が発生。

```env
SESSION_DRIVER=redis
REDIS_CLIENT=phpredis
REDIS_HOST=valkey1-xxxx.cache.amazonaws.com
REDIS_PORT=6379
REDIS_USERNAME=my-user
REDIS_PASSWORD=secret
REDIS_TLS=true
REDIS_SCHEME=tls
REDIS_DB=0
REDIS_CACHE_DB=1
SESSION_CONNECTION=default
```

tinkerではcacheをRedisに配置できたとしても、ブラウザからアクセスするとNginxが408を返すだけでLaravelのログにも何も出ない。

## 原因：config/database.php の 'scheme' => 'tls' を default側に設定していなかった

```php
// これだとSESSION_DRIVER=redisが動かない
'default' => [
    'host' => env('REDIS_HOST'),
    'username' => env('REDIS_USERNAME'),
    'password' => env('REDIS_PASSWORD'),
    'port' => env('REDIS_PORT'),
    'database' => env('REDIS_DB'),
    // ← 'scheme' がないとTLSで接続できない
],
```
→ Laravelの SESSION_DRIVER=redis は redis.default を使うため、ここに scheme => 'tls' を入れないと Laravel 12 では Redisに接続できず、無限リトライ→タイムアウトになります。

## 正しい設定例

```php
'redis' => [

    'client' => env('REDIS_CLIENT', 'phpredis'),

    'default' => [
        'host' => env('REDIS_HOST'),
        'username' => env('REDIS_USERNAME'),
        'password' => env('REDIS_PASSWORD'),
        'port' => env('REDIS_PORT'),
        'database' => env('REDIS_DB'),
        'scheme' => 'tls', // ← これが必須！忘れてた
    ],

    'cache' => [
        'host' => env('REDIS_HOST'),
        'username' => env('REDIS_USERNAME'),
        'password' => env('REDIS_PASSWORD'),
        'port' => env('REDIS_PORT'),
        'database' => env('REDIS_CACHE_DB'),
        'scheme' => 'tls', // cache側も必須！
    ],

],
```
## そのほか注意点

- .env に SESSION_CONNECTION=default を入れておくと redis.default を明示的に使ってくれるのでより安全
- Laravel 12からは Redis の接続管理が厳密になっている
- phpredis + TLS 利用時は設定漏れに特に注意

## まとめ
Laravelでは、phpredis + TLS構成で Redis に接続する場合、'scheme' => 'tls' の指定が必須です。これを省略すると、セッション取得時にLaravelがハングして応答が返らなくなります。
[EC2]ssh: connect to host xx.xxx.xxx.xxx port 22: Operation timed outの解決方法

# はじめに
`EC2`でインスタンスを起動時に発生したエラーについての記事になります。

:::note warn
***この記事は<font color="Red">個人的なアウトプット</font>を目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです***。
:::

# 現象
`EC2`インスタンスのSSH接続時に下記のようなエラーが発生しました。`SSH`接続に必要な22番ポートがタイムアウトになってしまいました。

```
ssh: connect to host xx.xxx.xxx.xxx port 22: Operation timed out
```

# 解決方法
インバウンドルールにポート22番を許可するように変更します。

![スクリーンショット 2025-04-20 13.11.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835217/c5144d8b-b2d4-4f2e-9f93-d200a76fd8d8.png)

セキュリティグループでポートの設定をしているの問題ないと思っていました。セキュリティグループはVPC内の通信制御をするものですが、SSH接続は外部（今回はローカルPC）からのアクセスになるため、インバウンドルールに設定が必要になります。

# 終わりに
セキュリティグループについて認識が誤っていたので良い機会になりました。引き続きAWSの学習を進めていきます。

# 参考

『AWSでEC2に接続しようとしたら"ssh: connect to host xx.xxx.xx.xxx port 22: Operation timed out"と出た』Qiita

https://qiita.com/shimataro1988/items/5f136455403442ed228f
Inputの値をuseStateではなくuseRefで管理してみる

## 記事について
この記事は自身の考えを記録しておくことが目的であり、考えなどに間違いが含まれている可能性があります。

## 現状(今まで自分がしていたこと)
ユーザーがInputに入力する値を管理するときはuseStateで管理しており、onChangeで入力された値が変化するときにset関数が発火して最新の状態に更新。
しかし、現状の問題としてはonChangeが発火するたびに状態が更新されるため、不要なレンダリングが引き起こされてることです。下記動画でわかるとおり、入力する値が変化するたびにconsole.logが呼び出されてしまってます。
![react.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4053972/58f8f534-7a5b-441f-867e-97ddfca537b2.gif)

## useRefを使ってみる
![Screenshot 2025-04-20 at 13.08.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4053972/b890aad4-da6e-43e5-908d-d177a3eb7e99.png)
useRefは、公式ドキュメントによると「レンダー時には不要な値を参照するための React フック」とのこと。
chatGPTによると「Reactコンポーネント内で「変わるけど再レンダリングには関係ない値」を保持したいときに使うフック。」
参照する値が変化しても再レンダリングを起こさないというところが特徴。
実際動画でもわかるように、初回に一度console.log("再レンダリングされた")実行されただけでそれ以降は実行されてない。そして、フォームで大切なのはSubmitが押されたタイミングでユーザーが入力した値が問題なく取得できてること。これも問題なく取得できてますね。
![Untitled.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4053972/76825bb3-1c00-42ce-83b6-9a1a167ae0d8.gif)

## まとめ
不要な再レンダリングはパフォーマンスに影響を与えるので、useState,useRef使い分けれるようにしていきたい。
制御コンポーネント、非制御コンポーネントというのが関係しているみたいなので今後学習していきたい。
Port 8080 was already in use.

<使用環境>
OS:Windows
IDE:Eclipse

---
### きっかけ
- ポート8080が既に使用されているようだが、Eclipseからは実行中のプログラムが見当たらない。。

### 対処法


- コマンドプロンプトを起動し下記実行、プロセスを見つける
```
netstat -ano | findstr :8080
```


- 下記を実行し、見つけたプロセスを止める
```
taskkill /PID ${見つかったプロセスのPID} /F
```

### 例 (画像赤枠部分がPID)
![2025-04-20_13h08_41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808275/e03510ae-a351-4bfc-9cae-d0fd6c7c6969.png)

### 無事起動できた。。
![2025-04-20_13h21_57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808275/85bf3270-9372-46b3-86f7-735fa9389465.png)
SharePointリストの参照列でフィルタ操作

## 緒言
SharePointリストの参照列は非常に便利ですが、フィルタ操作が分かりにくかったので検証してみました。結論から言うと下記の通り。
- Power AppsではIDでの検索は委任問題に引っ掛かるがValueはOK
- Power Automateでは```列名```ではID検索になる。```列名/参照先列名```と書くと参照先の値でフィルタ可能。。


## 検証データ
### 参照先
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670355/a0ee881f-3337-4237-a51e-e6cfb8ed96b7.png)

### 参照元
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670355/69115cce-8a85-4e3a-8fe2-014a5b241c8b.png)
参照列でリスト```Fruit```を設定し、下記のようにレコード登録。
<strong>
1～2000番：リンゴ
2001～4000番：グレープフルーツ
4001～6000番：キウイ
6001～8000番：みかん
8001～8002番：バナナ
</strong>

## 検証結果
### Power Appsの場合
下図のようにID検索だと委任の警告が出て制限がかかり結果が返ってきませんが、Value検索だと委任の警告も無く期待通りの結果が返ってきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670355/876a6362-7b6d-4a94-b4b2-07e2950e9414.png)

### Power Automateの場合
下図のように列名だけならID値でフィルタされる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670355/bee10194-7647-469e-b114-02d06a8f079d.png)

```参照列名/参照先列名```と表記することで参照先の値でフィルタできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670355/0363702e-2315-4461-aefd-1809a013c3ff.png)

:::note alert
Paginationを有効にしているとき、取得するレコード数がTop Countでちょうど割り切れる状態だと最後の取得レコードが2重に取得されてしまうバグ？有るので注意。（2025年4月20日 時点）
:::

## 結言
バグ治りますように。報告先ご存じの方おられたらご教授ください。
ネットワーク機器監視における正常確認の重要性について

ネットワーク機器監視には、色々な目的があります。
　・障害の早期発見と修正
　・パフォーマンスの最適化
　・セキュリティの向上
　・コスト削減とリソース管理
　・法的および規制要件の遵守　など

この記事は、最も一般的である「障害の早期発見と修正」について考察します。

<h2>１．監視区分</h2>
まず、監視区分としては下記が最低限必要となります。<br>
　1. 正常監視（Alive監視／死活監視）。<br>
　2. 障害監視（異常監視）。<br>

<h2>２．障害区分</h2>
次に、実際の障害は2種類に分類すべき。<br>
　1. 既知の障害（Known Error）<br>
　2. 未知の障害（Unknown Error）<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3789518/0bbfd4f7-8238-4e85-a60d-c72f44340cbd.png)
 
<h2>３．障害の管理区分</h2>
最後に、各障害区分ごとに担当者を分けるべき。<br>
理由は、それぞれの目的が異なり、担当者の稼働時間の性質も変わってくる為。<br>
　1. インシデント管理<br>
　2. 問題管理<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3789518/aec7914c-bbc4-44cd-9b68-34f60e3a4488.png)

<h2>４．実際の障害対応に当てはめて考える</h2>
これらの管理区分/項目をもとに、正常確認が確立していている状況で、未知の障害が発生した場合を考えてみます。<br>

<h5>(1)未知の障害が発生した場合：正常確認あり</h5>
・未知の障害が発生した場合、切り分け手順は確立されていない。<br>
・インシデント管理は<b>「正常確認」</b>により即時対応の要否を切り分けし、問題管理に報告。<br>
・問題管理は、報告によって対応を判断できる。<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3789518/5aeef985-7559-4716-a22a-b5c178b6b16b.png)

次に、仮に正常確認が確立されていない場合はどうでしょうか。

<h5>(2)未知の障害が発生した場合：正常確認なし</h5>
確認方針を策定できないため、インシデント担当にも手順外の確認対応が多く発生する。<br>
結果、未知の障害が発生した際に、インシデント担当、問題管理担当が疲弊してしまう。<br>
また、対応が属人化しやすく、切り分け品質が安定しない。<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3789518/1fd949e6-476b-4b6a-a4a0-1178d11a6cf8.png)

次に、障害通知が無い場合、Trap通知の損失（サイレント障害）や、アラーム設定が漏れていた場合。<br>

<h5>(3)障害通知が無い場合：正常確認あり</h5>
障害監視よりは検知に時間がかかりますが、異常検知することができます。<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3789518/0af5174b-2389-49b0-a5cd-c17e7fe49b0c.png)

<h5>(4)障害通知が無い場合：正常確認なし</h5>
検知できず、異常が発生してもクレームが来るまで放置されてしまいます。<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3789518/676b2ecb-184b-4069-9e58-a7854e21f2f0.png)

<h2>５．正常確認の重要性まとめ</h2>
　監視システムによるオペレータの監視は、監視設計のデザインする際、「監視画面の障害通知を確認する事」に特化する場合が多いですが、決して「正常確認」を忘れてはいけません。正常確認・障害確認の両方が揃って、システムの安定稼働の骨子ができあがるのです。<br>

　また、業務効率化が流行っていますが、進め方としては現状の情報/業務の導線をヒアリングし、それを最適化する事を目指すパターンが多いかと思います。しかし、そもそもの監視設計のデザインに欠陥がある場合(本記事では正常確認が確立していない等)は、頑張って業務導線を改善したところで、品質/コスト/スピードの効率化は望めないのです。<br>

　まず技術的に監視設計のデザインを確立し、その上で効率化を目指すという流れで、各システムを見直すと発見があるかもしれません。<br>
[Flutter入門]StatelessWidgetとStatefulWidget

## Widget
FlutterのUIを構築しているパーツのことをWidgeと呼ぶ。
FlutterでUIを構築する際はWidgetをツリー状に組み合わせ、UI構築をしていく。

## StatelessWidget
### 特徴
・不変（immutable）なウィジェット
・状態（state）を持たない

-> UIの表示内容が変化しない場合に使う（すべての値はfinalな値）

### 主な使用例
アイコン, ボタン, テキストなど表示だけでユーザーの操作によって変化しないUIパーツ

## StatefulWidget
### 特徴
・可変（mutable）な状態（State）を持つウィジェット
・ユーザーの操作や非同期処理などに応じて UI が再構築される

-> UIに変化が必要な場合（ボタンを押す、データを取得する、アニメーションを表示する等）に使う

### 主な使用例
カウンター, チェックボックス, リストの動的な更新, フォーム入力など
視座とは何かまとめみた

## 視座とは何か

**視座**とは、「物事を見る姿勢や立場」を指す言葉です。エンジニアやビジネスの現場では、「視座を上げる」「視座を高く持つ」といった表現でよく使われます。

---

## 視座の具体的な意味

- **得たインプットからどの広さまで思考がめぐる目を持てているか**、という観点で使われます。
- 例えば、勉強会で新しい知識を得たときに「面白かった」で終わるのか、「この知識をどう活かせるか」と広く考えるのかで、視座の高さが異なります。

---

## 視座が高い／低い状態の違い

| 状態       | 特徴                                               |
|------------|----------------------------------------------------|
| 視座が低い | 目の前の作業だけに集中し、全体や他者を考えない|
| 視座が高い | 自分だけでなく、仲間や顧客、組織全体を考える |
※目の前の作業に集中することが認められるのは新入社員までとも思えますね。

---

## 視座を高めるメリット

- 当事者意識が強くなり、主体的に仕事に取り組める
- 仲間や顧客の価値創造につながる
- 長期的・広い視点で判断や行動ができる
※目の前に見えるマイナスが全体ではプラマイ0になることだってあります。
物事の本質を見抜く力を養いたいですね。

---

## 視座を高める方法

- **問いを持つ習慣をつける**  
  ただ知識を得るだけでなく、「これをどう活かせるか」「組織の課題解決に使えないか」と問い続ける。
- **視座の高い人と一緒に働く**  
  上司や経営者など、広い視点を持つ人の考え方や行動を観察し、真似する。
  ※リスペクトをもてる先輩方にどうやってその考えに至ったのか聞いてしますこともありですよね。

---

## まとめ

視座とは「どの広さまで思考を巡らせられるか」という“目線の高さ”です。視座を意識的に高めることで、より主体的で価値ある仕事ができるようになります。

情報源
[1] 「視座」とは何かを言語化する #マネジメント - Qiita https://qiita.com/getty104/items/3065225b5d7c961b922e
[2] 主体的に働くには視座を高めることが大切！じゃあどうやって ... - Qiita https://qiita.com/Tyamamoto1007/items/9150308817663b1c34fe
[3] 元教育関係者の視点でエンジニアのアウトプット文化について考察 ... https://qiita.com/Daha/items/48912d9de8e1d9d39e08
[4] Markdown記法って流れるように打てて気持ちいい！Qiitaへの投稿で ... https://note.com/watson404/n/nb8e50490f25b
[5] トンマナとは？ その意味や決め方、クオリティを上げる方法を解説 https://blog.nijibox.jp/article/tone_manner/
[6] 明日もう一度来て下さい。本当のマジックナンバーを見せて ... - Zenn https://zenn.dev/koduki/articles/95d4ced70db0ab
[7] [レポート] 【パネルディスカッション】Slack, Qiita, GitHub 利用者 ... https://dev.classmethod.jp/articles/awssummit-tools/
[8] アウトプットを続ける意味とエンジニアが技術記事を書く理由 ... - Qiita https://qiita.com/free-honda/items/832cab98b0bc2985e8b3