OmniAICreator/Qiita-1.07M huggingface dataset:
初めてのWebアプリ開発（未完）

# 概要
- 勉強のためにWebアプリの開発を試みる
- ついでに勉強したことを残すため、アドベントカレンダーへの投稿も試みる
- 投稿日までに完成せず、ユーザ管理機能の実装のみ ＆ 記事も前日に執筆

# 背景
1. 内定先のIT企業で活躍するためにWebアプリ開発の勉強を決意
1. 内定先で開発に主に用いている（らしい）JavaでのWebアプリ開発を勉強することに
1. Javaはそこそこ使ったことがあるが、Webアプリ開発をしたことがないため、udemyで手頃な講座を受講
1. 完全に理解した（大嘘）ので、別言語で開発していた作りかけのWebアプリを本格的に開発してみる

# 開発した（かった）もの
**発注管理アプリケーション**
- 研究室内で学生が行っていた発注管理を行いやすくする
- 現在の発注管理はSlack上で行っているため
    - 発注状況の管理が手間
    - プランが変更することになった場合、履歴が消える可能性がある
- 以前にハッカソンでVue.jsを使用した開発を試みたが中途半端で実用化に値しないもの
    - Todoアプリを少しいじった程度のもの

# 開発
## どこまでできたか
- 要件定義（もどき）：完了
- 設計（もどき）：完了
- 開発：未完了
    - ログイン画面：完了
    - ユーザ管理：完了
    - 物品管理：未着手
- テスト：未着手

## 要件定義
- 個人開発であり、かつ元々何をしたいかを決めていたので要件定義をしたことにしてヨシ！（よくない）
- 発注管理：発注依頼、発注状況確認、発注状況変更
- ユーザ管理：ユーザ追加・削除、役職変更、役職に応じた機能提供

## 設計
- ユーザの役職毎に使用できる機能を分ける
    - ゲスト(guest)：発注依頼、発注状況閲覧のみ
    
担当者(menber)：guestが使える機能＋発注状況の変更
    - 管理者(adimin)：memberが使える機能＋ユーザ登録・削除、ユーザの役職変更
- 発注管理
    1. 発注希望者が物品情報（物品名、金額、予算、発注先）を登録
    1. 担当者をmeberの中から自動割り当て
    1. 担当者は状況に応じて発注状況を変更

## 開発
### 開発環境
- Java：1.8.0_351
- Tomcat：10.0.27
- MySQL：8.0.31

### 開発状況
#### ログイン画面
![login.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166924/9dcb4fb4-d863-db73-9694-da12934feaea.png)

- jsp側に条件分岐を追加し、ログイン時の役職に応じて表示するメニューを追加
``` jsp
こんにちは <%= name %> さん<br><br>
	
アカウント管理<br>
物品管理<br>
	
<% if(role.equals("member") || role.equals("admin")){ %>
	物品登録<br>
<% } %>
<% if(role.equals("admin")){ %>
	<a href="./admin.jsp">ユーザ管理</a><br>
<% } %>
```

#### ユーザ管理
![user.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166924/1b4295a9-016b-b426-16f5-46677cb6f2f1.png)

- フォームから情報を取得し、入力情報に応じてMySQLでユーザデータを追加・修正・削除

# 今後の課題
- 発注管理機能を追加し、最低限のアプリケーションを完成させる
- UIも少し凝ってみる
- セキュリティについてちゃんと考える（せめてSQLインジェクション対策くらいはする）
- JavaBeansをちゃんと理解する

# まとめ
- ユーザ管理機能まで実装できてえらい！
- 今年はちゃんと記事も書いてえらい！（去年は書くことがなく投げ出したため）
- 入社に向けて勉強できてえらい！
シリアルコンソール有効後Sysprepを行ったAMIからEC2を起動するとSet-Wallpaperが実行されない

Windowsサーバを構築する際、DNSなど全サーバ共通の設定を行ったベースとなるAMIを用意する。
その共通設定としてシリアルコンソールを有効化し、Sysprepを実行後に取得したAMIからWindowsサーバを起動した際、壁紙にインスタンス情報が表示されなかったため、備忘として回避策を記す。
# 事象
EC2 LaunchでSysprepを実行したAMIからWindowsサーバを起動した際、壁紙の右上に表示されるインスタンス情報が表示されない。
スタートアップアプリの中に「RunWallpaperSetup」が存在しない。
管理者権限のPowerShellから以下コマンドを実行しても改善されない。
```
> Import-Module "C:\ProgramData\Amazon\EC2-Windows\Launch\Module\Ec2Launch.psd1"
> Set-Wallpaper
```

# 原因
シリアルコンソールを有効化している場合、EC2 Launchのタスクは正常に実行されない。


# 回避策
以下のコマンドでシリアルコンソールを無効化し、OSを再起動する。
```
> bcdedit /set '{bootmgr}' displaybootmenu no
> bcdedit /ems '{current}' off
> shutdown -r -t 0
```
再起動後、再度シリアルコンソールを有効化すればSet-Wallpaperは実行されたままになる。

# 参照
[SAC を使用して Windows インスタンスをトラブルシューティングする](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/WindowsGuide/troubleshooting-sac.html#sac-limitations)
【SwiftUI】マルチタスク画面に切り替わったら情報を見れなくする

# はじめに
iPhoneに標準でついているパスワード管理機能？(Twitterで二要素認証しようとしたら表示された)がマルチタスク画面に行くとパスワードなどが全て非表示になりました。
今回はそれを再現してみたいと思います。

# マルチタスク画面ってなに？
マルチタスク画面で合ってるの分からないので説明しておきます笑
![simulator_screenshot_DA3438A9-4838-48BE-AF01-560F80E4EE9F.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/6bc53154-fd72-9f8a-876c-df5c9a5cb871.png)

これのことです

# サンプルアプリ
![Simulator Screen Recording - iPhone 14 - 2022-12-13 at 20.38.22.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/93d7b5e9-8b19-5334-3a01-bf635ed7bba6.gif)


# 何が問題？
他人に見られたらまずいセキュアな情報を見られる可能性がある！
![IMG_1774.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/c4d82d38-093b-f23f-ba73-a1d6dff2e323.png)

# 実装
### View
```swift
import SwiftUI

struct ContentView: View {
    @StateObject private var viewModel = ViewModel()
    var body: some View {
        NavigationStack {
            Form {
                basicInfoSection
                detailInfoSection
            }
            .navigationTitle("登録情報")
        }
    }

    private var basicInfoSection: some View {
        Section {
            LabeledContent {
                Text(viewModel.status == .active ? "山田太郎" : "**********")
            } label: {
                Text("氏名")
            }
            LabeledContent {
                Text(viewModel.status == .active ? "41" : "**********")
            } label: {
                Text("年齢")
            }
        } header: {
            Text("基本情報")
        }
    }

    private var detailInfoSection: some View {
        Section {
            LabeledContent {
                Text(viewModel.status == .active ? "@YamadaTaro" : "**********")
            } label: {
                Text("アカウント名")
            }
            LabeledContent {
                Text(viewModel.status == .active ? "info@sample.com" : "**********")
            } label: {
                Text("メールアドレス")
            }
            LabeledContent {
                Text(viewModel.status == .active ? "123456789" : "**********")
            } label: {
                Text("パスワード")
            }
        } header: {
            Text("詳細情報")
        }
    }
}
```

### ViewModel
```swift
import Combine
import Foundation
import UIKit

final class ViewModel: ObservableObject {
    @Published var status: AppStatus = .inactive

    private var cancellable = Set<AnyCancellable>()

    enum AppStatus {
        case active
        case inactive
    }

    init() {
        NotificationCenter.default.publisher(for: UIApplication.didBecomeActiveNotification)
            .sink { [weak self] _ in
                guard let self else { return }
                self.status = .active
            }
            .store(in: &cancellable)

        NotificationCenter.default.publisher(for: UIApplication.willResignActiveNotification)
            .sink { [weak self] _ in
                guard let self else { return }
                self.status = .inactive
            }
            .store(in: &cancellable)
    }
}
```

# おわり
細かいところですが重要だと思います。
Excelパフォーマンスの改善（2020年後半）

2020年後半にMicrosoft365に導入されたExcelのパフォーマンス改善

1. SUMIFS, COUNTIFS, AVERAGEIFS, MAXIFS, MINIFS, COUNTIF, AVERAGEIF は、最初の行の計算を行っている間に再利用可能なインデックスを構築することで残りの計算のパフォーマンスを上げます。
1. ユーザー定義関数（UDF)を持つワークブックを開く時に行うリニアスキャンが改善されました。
1. 外部のHTMLや大きな画像をクリップボード経由で貼り付ける時の速度低下を、ストリーミング・データ構造の見直しで改善しました。
1. フィルタリングされたデータ列でを挿入する時の動作を改善しました。特に、非表示の行が多い時に速度が低下していました。
1. マージされたセルを含む範囲の削除で、行を複数回イテレートしていた問題は改善しました。
1. 空のセルがある1万行のデータに対してのエラーチェックは、場合によっては数分から数時間かかっていました。効率的なデータ構造を構築することで、数秒で結果を返すようになりました。
1. ユニコードのテキストの比較を実行するコードが改良されました。
1. 縦長セルや横派がセルでもスムーズなスクロールを実現しました。

:::note warn
VBAのユーザー定義関数を使用しているワークブックでは、VBA Editorを閉じることで計算を高速化することができます。
:::
detached headが出た時の対処法

# 本文

先日git checkoutコマンドを使用した際にYou are in 'detached HEAD'という表示が出ました。

## 原因

detached HEAD = ブランチがない状態のこと

過去のコミットIDをそのままcheckoutするとこの状態になり、ブランチがないままそのままコミットを続けるとあとで過去のコミットを参照できなくなってしまう

## 解決策

detached HEAD 状態を抜け出すには、そのまま、今チェックアウトしているコミット上でブランチを作る

```$ git branch 任意のブランチ名```

こうすることで、ポインタが

コミットオブジェクト←コミットID←ブランチ←HEAD
という正常な状態に戻り、detached HEAD 状態を抜け出せる
CORS 

# CORS

## はじめに
next.jsのHTTPクライアントから自作したgolangのapiサーバーにgetリクエストを送信した際、CORSエラーが発生しました。
CORSエラー解決までの流れを記録します。

## CORSとは
簡単にいうとオリジンが違うもの同士で通信しようとすると、セキュリティのためにエラーが発生するようになってる。

[Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
[なんとなく CORS がわかる...はもう終わりにする。](https://qiita.com/att55/items/2154a8aad8bf1409db2b)

## HTTPクライアント側で設定したこと

[CORS in axios](https://zenn.dev/httky/articles/2813c111141a47)
[corsに悩まされるな。axios でcorsを攻略する](https://qiita.com/inatatsu_csg/items/15f63be00096ec21535e)

## Goのapiサーバーで設定したこと

[CORS（preflight request）にハマったけど解決した話](https://qiita.com/laughingman/items/4ff20268fa34dc9e1be3)
[Golangのnet/httpでCORSを全許可するときにつけるヘッダー](https://qiita.com/yuta_vamdemic/items/8ee6e9ab87278c604f4b)

## Content-Typeとは

Content-Typeとは、HTTPヘッダのフィールド（項目）の一つで、本体（ボディ）として送信するデータの種類や形式を相手方に伝達するためのもの

https://e-words.jp/w/Content-Type.html

https://tech.stmn.co.jp/entry/2021/03/15/183722

application/jsonはJSONファイルでデータをわたしますよっていってる
GoでWebサーバーを作成する4 jwt認証 TESTについて

# はじめに
Goでjwt、TESTを実装するさいにしらべたことをまとめます。

## jwt

### jwtの基本　実装

以下2つの記事を参考にした。

https://iketechblog.com/go-jwt/#index_id3

https://qiita.com/yoheimuta/items/b17bfbac17c02d410f54

jwt-goパッケージの公式

https://github.com/dgrijalva/jwt-go


## ミドルウェア 
https://qiita.com/tobita0000/items/d2309cc3f0dd32006ead

ミドルウェアでエラーがでたときの対策

https://qiita.com/tobita0000/items/d2309cc3f0dd32006ead

# TEST
### GoのTEST　基本
簡単にまとめられた記事
[[Go] テストを実行する（go testの利用）](https://www.yoheim.net/blog.php?q=20170903&fbclid=IwAR3tb_IJ-GJFirAfRfEb-iVUrA4Lv2pmr4q4lA5E_BDFTBvq3y5zvb9IvMk)


より詳しい記事

https://developers.ysd.co.jp/post/u-aiaa/golang/webapi.c/#go-%E8%A8%80%E8%AA%9E%E3%81%AE%E3%83%86%E3%82%B9%E3%83%88



### APIのテスト方法

https://selfnote.work/20210924/programming/golang-api-greate-testing/

### テストデータの管理方法
go-testfixturesを用いてデータの管理を行った。

https://github.com/go-testfixtures/testfixtures
npmからyarnへ

# はじめに
next.jsのパッケージ管理をnpmからyarnに変更した。
参考にしたサイトをまとめる。

[npmとは　yarnとは](https://qiita.com/Hai-dozo/items/90b852ac29b79a7ea02b?fbclid=IwAR3UF6Rwb8mbTN7q6ttGM3gYxcf8a81gFsEzmOGo2jM4gygTbicvZ9xD1ks)

[パッケージマネージャー「Yarn」の使い方](https://www.wakuwakubank.com/posts/307-javascript-yarn/)

[package-lock.jsonとyarn.lockが共存しているときの解決方法](https://zenn.dev/mo_ri_regen/articles/package-lock-yarn-lock)
UIViewを砕く（Swift）

![Xcode-14.1](https://img.shields.io/badge/Xcode-14.1-brightgreen) ![iOS-16.0](https://img.shields.io/badge/iOS-16.0-brightgreen) 

## はじめに
 `SpriteKit` をさわっているときに天啓が降りました:bulb:

Confetti のパーティクルをちょっといじれば `UIView` を砕けるのでは？

ということでやってみました。完成形はこんな感じです。

![break](https://user-images.githubusercontent.com/34936885/207287914-a49c0156-6cbb-4985-b204-60306793747e.gif)

## SKSファイル作成
昔は SpriteKit Particle File にデフォルトであった Confetti を少し修正して使います。設定はこんな感じです。

<img width="403" alt="particle" src="https://user-images.githubusercontent.com/34936885/207287888-fbfd6762-f12e-4bf7-ac02-31d27cb62409.png">

## 実装
`UIView` の extension で `SKView` を使ってパーティクル表示を行うメソッドをはやします。

```swift
import UIKit
import SpriteKit

extension UIView {

    func `break`() {
        guard let window = window else {
            return
        }

        let skView = SKView(frame: window.bounds)
        skView.allowsTransparency = true
        window.addSubview(skView)
        let scene = SKScene(size: skView.frame.size)
        scene.backgroundColor = .clear
        skView.presentScene(scene)
        let point = convert(.init(x: frame.width/2, y: frame.height/2), to: window)
        if let particle = SKEmitterNode(fileNamed: "Confetti") {
            particle.particleColorSequence = nil
            particle.particleColorBlendFactor = 1.0
            particle.particleColor = backgroundColor ?? .white
            particle.position = scene.convertPoint(fromView: point)
            skView.scene?.addChild(particle)
        }
        UIView.animate(withDuration: 0.2, delay: 0, options: []) {
            self.alpha = 0.0
        } completion: { _ in
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                skView.removeFromSuperview()
            }
        }
    }
}
```

あとは `break()` を呼び出すだけです。

View を砕く方法としては指定の View の Window に `SKView` をのせ、指定の View の中心座標に View の背景色を設定したパーティクルを表示しています。そしてパーティクル表示とともに View をフェードアウトさせるアニメーションをつけています。

## 改善案
いくつか改善案です。

* Window ではなく superView か自身にのせる  
これはできそう
* SKView ではなく CAEmitterLayer を使う  
パーティクルの設定方法がわからずうまくいきませんでした。。。
* UIImageView とかも砕けるようにしたい  
View の細かい画像を取得してパーティクルに設定すればそれっぽくなりそうですがやり方がわからない。。。
* リソース管理がめんどくさいので全部コードにする  
これはできそう

## おわりに
これで `UIView` を砕き放題です！
みんなも好きな View を砕こう:boom:
意外と開いたことがなかった（かもしれない）App Service/Functions の `問題の診断と解決` 

本記事は、[Microsoft Azure Tech Advent Calendar 2022](https://qiita.com/advent-calendar/2022/microsoft-azure-tech) の 12/13 の投稿です。

# はじめに

昨今の DX の流れから、多くのお客様がアプリをサクッと開発し業務をデジタル化したいと考えていると思います。Azure の提供する App Service や Functions というサービスはそのような場面で最適です。お客様はビジネスロジックの実装に専念して出来上がったアプリを App Service にデプロイいただければ、あっという間に動くアプリが出来上がります。

とはいうものの、アプリがなぜか動かない、なぜかあそこ通信できていない、ということに遭遇することはあるかと思います。
そんな状況で、Azure ユーザーのトラブルシュートを手助けしてくれるページが Azure Portal にはあります。それが `問題の診断と解決` というページです。

とても便利なのですが、他のページと比べてあまり開くことがない（気がする）ページですので、せっかくの機会ということで一つ機能をご紹介します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169178/a97a57ee-cd15-f684-b657-6244f0c5b1cc.png)

# `問題の診断と解決` ページを触ってみる

`問題の診断と解決` ページは、検索窓から調べたい内容を検索して使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169178/6f8606fc-b2e4-d5f2-3013-0b6738973e07.png)

どうやら、106 個もあるようです。これだけでも知らない機能・触ったことない機能がありそうな予感がします。

今回は、検索タブに `network troubleshooter` と打って登場する `Network Troubleshooter` を見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169178/b5688b1e-dc06-12e4-170d-c914a7cbed8c.png)

`Network Troubleshooter` では、よくあるシナリオについてざっと調べてくれる機能がついているようです。2022-12-13 時点では「Connectivity issues」「Configuration issues」「Subnet/VNet deletion issue」「Learn more about VNet integration」から選択できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169178/e355a72a-ca03-95dd-fe70-434430a236ef.png)

例えば関数アプリの「Connectivity issues」を選択すると下の画像のように

- App Service ワーカーと VNET 間の接続の状態が正常かどうか
- DNS の設定に異常がないか
- VNET 統合している場合は、RouteAll が有効になっているのか、`WEBSITE_ALWAYS_FALLBACK_TO_PUBLIC_DNS` が設定されているのか
- 一部の一般的な関数アプリの依存先（Storage Account や Application Insights など）に接続文字列を用いて適切に接続できるか

を自動的に調べて結果を表示してくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169178/707c3094-4bf6-a985-e406-e3459a25777f.png)

さらに、このページのイケているところは下の方に「Explanation of the results and recommended next steps」が記載されているところです。

トラブルシュートの際に問題の切り分けがうまくいかず「いったい何が悪さをしているのかわからない」という状況になるのはよくあることかと思います。そのようなときに、一定のガイドラインを提供してくれるので心強い味方になってくれると思います。

ちなみに Web Apps では同じ `Network Troubleshooter` でも少し異なっているようでした。特に、 `Network Troubleshooter` のページ内で、指定したエンドポイントに対するネットワーク観点で疎通するかを確認できる箇所がありますね。痒い所に手が届く感があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169178/9de95ff3-08c9-2fa2-a2e4-54a1f09c7ec4.png)

残りの「Configuration issues」「Subnet/VNet deletion issue」「Learn more about VNet integration」については、読者の皆様にお譲りいたしますので、ぜひお手元の App Service リソースで開いてみてください。

# 参考文献

こちらの英語記事を参考に現在の Azure Portal の `問題の診断と解決` を触ってみました。

- https://azure.github.io/AppService/2021/04/13/Network-and-Connectivity-Troubleshooting-Tool.html

https://azure.github.io/AppService/ では多くの記事が配信されており、ご確認いただけると知りたかったことが解説されていることが往々にしてありますので、App Service ユーザーの方はぜひご覧ください。

# おわりに

本記事では、App Service/Functions の Azure Portal の `問題の診断と解決` ページからネットワークの疎通が取れているかのトラブルシュートを手助けしてくれる `Network Troubleshooter` をご紹介しました。

本記事の内容が皆様のトラブルシュートを少しでも楽にすることが出来たらうれしい限りです。
Kageki (TD4互換機) でpopcnt (1のビットを数える)

[TD4の命令を実行できる自作CPU「Kageki」](https://elchika.com/article/9ac9fd67-86c5-4b1b-a355-4f662e8af794/)で popcnt (1のビットを数える) をしてみた。

# 未定義の命令の使用

今回は、通常の命令だけではプログラムROMの容量が足りなそうであったため、未定義ではあるものの実装上動作する命令を使用することにした。
それは、`00100100` である。
この命令の上位ニブルは `IN A` 命令と同じであるが、下位ニブルが `IN A` の仕様に反して `0000` になっていない。

Kageki、および本家TD4では、この下位ニブルは加算器の入力の一方に直結されている。
また、加算器のキャリー出力も、無条件でフラグとして保存されるようになっている。
したがって、この命令は `IN A` 命令に続いて `ADD A, 0100` 命令を実行したかのような結果になる。
これにより、普通に `IN A` 命令と `ADD A, 0100` 命令を書くより1ワード節約できる。

ただし、やはり未定義の命令なので、エミュレータによっては動かないことがある。
例えば、[TD4 Emulator Web](https://umtkm.github.io/td4/) では `0100` の加算が行われず、通常の `IN A` 命令のようにふるまった。

# 仕様

入力ポートから4ビットの値を読み込み、そのうち「1」のビットの数を出力ポートに出力する。

# プログラム

```
位置 機械語   アセンブリ言語
---------------------------------------------------------
0    01110000        MOV B, 0000
1    00100100        DATAB 0b00100100 ; IN A; ADD A, 0100
2    11100100        JNC SKIP1
3    01010010        ADD B, 0010
4    00001000 SKIP1: ADD A, 1000
5    11100111        JNC SKIP2
6    01010001        ADD B, 0001
7    00000100 SKIP2: ADD A, 0100
8    11100111        JNC SKIP2
9    00001101        ADD A, 1101
A    11101100        JNC SKIP3
B    01010010        ADD B, 0010
C    00000010 SKIP3: ADD A, 0010
D    11101111        JNC SKIP4
E    01010001        ADD B, 0001
F    10010000 SKIP4: OUT B
```

# 解説

* 0番地 : Bレジスタを0に初期化する。 (この後、Bレジスタに「1」のビット数を格納する)
* 1番地～6番地 : 入力の上位2ビットを処理する。
  * 1番地 : Aレジスタに入力ポートの値を読み込み、上位2びっとに `01` を加算する (未定義の命令)
  * 2番地 : 上位2ビットが `11` であった場合、ここに `01` を加算するとキャリーが発生するので、ジャンプしない。上位ビットがそれ以外であった場合、キャリーは発生せず、ジャンプしてBレジスタへ2を加算する処理をスキップする。
  * 3番地 : (上位2ビットが `11` であった場合) Bレジスタに2を加算する。
  * 4番地 : Aレジスタの上位2ビットに `10` を加算する。入力の上位2ビットにより、以下の動作となる。
    * 入力が `00` → 1番地で `01` となっている → 加算結果は `11` となり、キャリーは発生しない
    * 入力が `01` → 1番地で `10` となっている → 加算結果は `00` となり、キャリーが発生する
    * 入力が `10` → 1番地で `11` となっている → 加算結果は `01` となり、キャリーが発生する
    * 入力が `11` → 1番地で `00` となっている → 加算結果は `10` となり、キャリーは発生しない
  * 5番地 : 4番地でキャリーが発生しない場合 (上位2ビットで立っているビットがちょうど1個でない場合) 6番地の加算をスキップする。
  * 6番地 : (上位2ビットで立っているビットがちょうど1個の場合) Bレジスタに1を加算する。
* 7番地～8番地 : Aレジスタの上位2ビットを `00` にする。
* 9番地～E番地 : 入力の下位2ビットを処理する。
  * 9番地～B番地 : 1番地～3番地と同様に、「1」のビットが2個かどうかの判定を行う。
    * `00` にした上位2ビットに `11` を加算し、下位2ビットからのキャリーが全体のキャリーになるようにする。
  * C番地～E番地 : 4番地～6番地と同様に、「1」のビットが1個かどうかの判定を行う。
    * 9番地～B番地の処理でキャリーが発生しなかった場合、Aレジスタの上位2ビットは `11` であり、下位2ビットからのキャリーが全体のキャリーになるようにする。
    * 9番地～B番地の処理でキャリーが発生した場合、Aレジスタの上位2ビットは `00` となるが、この場合どっちみちここでキャリーは発生しないはずなので問題無い。
* F番地 : 計算結果を出力する。

# 実行結果

入力ポートに [Pmod SWT](https://digilent.com/shop/pmod-swt-4-user-slide-switches/) を、出力ポートに [1-Digit 7seg Board](https://elchika.com/article/fb155241-6490-4cbf-ae85-c166c3743874/#h_1-Digit%207seg%20Board) を接続して実行した。
[グレイコード](https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%AC%E3%82%A4%E3%82%B3%E3%83%BC%E3%83%89)を用い、全パターンの入力を試した。

<iframe width="560" height="315" src="https://www.youtube.com/embed/oNMqqzoZkJ8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
【JavaScript】mapメソッド

# mapで配列の処理
JSを学習していて、mapについての理解に時間がかかったので記録しておきます。  
## mapとは？
mapとは、配列データに対して使うメソッドの一つです。それぞれの要素に対してコールバック関数を使って、その結果を新しい配列として返すメソッド...
と、文章だけだと分からないですね。（自分も分からない...）

コードで説明していきますね。まずは配列を用意します。

```js
const pokemons = ["ピチュー","ピカチュウ","ライチュウ"]
```
上記の文を繰り返し処理によって順番に出力したい...
通常だと、ここでfor文を使いたい...まずはfor文を...
```js
for (let index=0;index<pokemon.length;index++){
console.log(pokemon[index]);
}
//出力結果
ピチュー
ピカチュウ
ライチュウ
```
for文を記述することによって、繰り返し処理をしました。しかし、コードが少し面倒...
そこで、mapの出番。
上のpokemonsの配列はそのまま使えるのでそのまま利用。
続けて下記のように記述。
```js
pokemons.map((pokemon)=>console.log(pokemon));
//出力結果
ピチュー
ピカチュウ
ライチュウ
```
これだけでfor文と同じことができてしまいました...。
配列に対して繰り返し処理をしたい時に使うといいかもしれませんね。

認識としては、pokemons変数にmapを使い、取り出した値を引数に指定した変数名にした上で、一個ずつ出力していった...と言う認識です。

## 別パターン

繰り返し処理以外にもこんな使い方が...まずは配列を用意
```js
const counts = [1,2,3,5,7,11,13];
```
これらの素数を倍にしたいとします。

```js
const result = counts.map((count)=>{
  return count *2;
});
// 出力結果
[2, 4, 6, 10, 14, 22, 26]
```
一つずつ取り出した値を倍にしたものを戻り値として返す...といった使い方も。

# 総評

mapメソッドいうのは、一つの配列のデータに対して使えるメソッドで
配列のデータを元に、また新しい配列を作り、出力するメソッド...という認識だと自分は思いました。

何かおかしな点があればご一報ください。
ありがとうございました。
【TypeScript】意外と？ハマりやすいユニオン型

## はじめに

TypeScriptを完全に理解した私が、
TypeScriptならでは？の詰まりポイントであろうユニオン型について触れておきます。

## ユニオン型とは

ユニオン型が何かを説明しようかと思いましたが、ドキュメント見ればわかることなのでざっくり。
[サバイバルTypeScriptのドキュメント](https://typescriptbook.jp/reference/values-types-variables/union)をみると、


>ユニオン型の型注釈は、2つ以上の型をパイプ記号(|)で繋げて書きます。たとえば、数値型もしくはundefined型を表す場合は、number | undefinedのように書きます。

と書かれています。
つまりユニオン型とは、2つ以上の型を注釈することができるのです。

パイプ記号(|)をつないで書きますがこの記号は「または」や「もしくは」という意味合いで解釈されることが多いです。
この前提を踏まえた上で、実際にハマりやすいであろうポイントにフォーカスを当ててみました。

## ユニオン型の意外とハマりやすいポイント

まずは例を見ていただきたいです。
以下の例も前述の[サバイバルTypeScriptのドキュメント](https://typescriptbook.jp/reference/values-types-variables/union)のユニオン型紹介ページから引用してきたものです。

どん！
![スクリーンショット 2022-12-13 112049.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952868/227e6f2a-767e-2ae8-4162-7befb2ac9e0c.png)

TypeScript少しわかる人にとっては基本中の基本なのですが、
私も含めて意外とハマってしまう人が多いのがこの例です。

当然このコードのuserId（string型）にはmaybeUserId（string | null 型）を代入することができません。
以下のような型エラーとなる。
![スクリーンショット 2022-12-13 112115.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952868/8f4b27e1-cadf-cdcb-e665-6ccd2fba748f.png)

私も最初は「なんで？？？？maybeUserIdはstringもしくはnull型だからstring型には代入できるよね？？？」と困惑しました。
この疑問は正解ではあるが、不正解でもあるというのが現時点での私の意見です。

この場合だと、**maybeUserIdにnull型が入る可能性がある**ということが肝になってきます。
当然と言えばそれまでですが、maybeUserIdがnull型だとすると、userIdのstring型には代入できなくなります。

### 回避策

回避す方法は簡単です。
先ほど例を出したコードの下の方にあるif文。

![スクリーンショット 2022-12-13 195508.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952868/2528bab0-16e9-c64b-956d-669487b65c28.png)

このようにmaybeUserIdがstring型として入ってきた場合のみ初めて、userId(string型)にmaybeUserId(string型)を代入することができます。
maybeUserIdがnull型であるという懸念が解消されたため問題解決です。

## おわりに

意外とハマりやすかったりするユニオン型。

型注釈だけでなく、型推論が働いた型も自由自在に操れるようになれば、
TypeScriptマスターへの道はそう遠くはないだろうと考えます。

私はまた一歩、型定義おじさんへの道へ前進するのであった。
font-feature-settingsを使ってみる

[ひとりCSS Advent Calendar 2022](https://qiita.com/advent-calendar/2022/css-becolomochi) 14日目です。

font-feature-settings を使ってみます。

## 使ってみた

https://learn.microsoft.com/ja-jp/typography/opentype/spec/featurelist を参考にプレビューできるようにしてみた。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="eYKwmbV" data-user="becolomochi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/becolomochi/pen/eYKwmbV">
  Untitled</a> by Beco (<a href="https://codepen.io/becolomochi">@becolomochi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### よく見かける・使いそうな値

#### font-feature-settings: 'palt'

Proportional Alternate Widths とのこと。
字間が詰まるので見出しとかに使うと締まって見えて良さそう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41088/2248d1ec-2859-b291-6641-8a9f62ff2e51.png)

#### font-feature-settings: 'pkna'

Proportional Kana とのこと。
こちらは仮名だけ字間が詰まる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41088/0f1b0a96-7b0c-357e-e39a-d028a0575835.png)

## 感想

- タイポグラフィたのしい
- `swsh` 使い倒してみたい
    - 筆記体のぐるぐる


## 参考

- https://developer.mozilla.org/ja/docs/Web/CSS/font-feature-settings
- https://learn.microsoft.com/ja-jp/typography/opentype/spec/featurelist
- https://ics.media/entry/14087/
    - ICS MEDIA さんの記事が最高にわかりやすいし情報が整理されているのでよいです:pray:
Cypressでホバー した際のCSSを確認する

最近Cypressを使ってE2Eテストを行なっているのですが、Hoverした際にCSSの表示が適切に変わっているかテスト出来なかったため、方法を調査してみました。

## ■原因：
こちらの記事にて、下記内容がまとめられていました。

https://filiphric.com/hover-in-cypress

> This comes closer to our real-world scenario, as our icon is shown when a mouseover event is fired. Note that this event is not the same thing as CSS :hover state. When you run this test, you can see that the board item does not change color. Since this is change is handled by CSS, there is no real way we can trigger this change using JavaScript.

Cypressの`mouseover`イベント(下記参照)でHoverした際のJavaScriptの挙動はテストできるけれど、CSSのテストは出来ないよ！という事でした。

```javascript
cy.get('.menu-item').trigger('mouseover')
```
https://docs.cypress.io/api/commands/hover


## ■どうするか:
最初に載せた記事を参考に、ライブラリ `cypress-real-events` をインストールしました。

https://www.npmjs.com/package/cypress-real-events

https://github.com/dmtrKovalenko/cypress-real-events

開発環境のみで使えればいいので、--devをつけてコマンドを叩き、インストールしています。

```
yarn add cypress-real-events --dev
```

https://mo-gu-mo-gu.com/about-dependencies-devdependencies/


## ■導入してみる:

下記の書き方をすればいいようです。

クリックした時:
```react
cy.get("button").realClick();
cy.get("button").realClick(options);
```

ホバーした時:
```react
cy.get("button").realHover();
cy.get("button").realHover(options);
```

Cypressに書いてみる
```react:hogehoge.cy.ts
import 'cypress-real-events'

describe('コンポーネントのテスト', () => {
 it('Hoverした際にボタンが薄くなること', () => {
  //Hoverしていない時
  cy.get('button').should('have.css', 'opacity', '1')

  //Hoverしている時
  cy.get('button').realHover().should('have.css', 'opacity', '0.7')
 })
})
```
無事に通りました👏

## ■まとめ:
今回はCypressでHoverした際に、CSSが適切になっているかを確認する方法を調査しました。
Cypressに元々ある、`mouseover`イベントではJSの判断しか出来ないため、ライブラリの使用が必要なようです。

閲覧ありがとうございました！
Ubuntu 20.04LTS on Windows11 (using WSL2)を構築するときに参考にした記事

# 環境
- Windows 11 (バージョン:22H2, OSビルド:22621.900)
- Power Shell 5.1.22621.608
バージョン確認：`$PSversionTable`
- Windows Terminal 1.12.10983.0


# WSLにUbuntu20.04LTSをインストール
1. [Windows Update の設定]で更新プログラムがあれば更新する。
2. [Windowsの機能の有効化または無効化] > [仮想マシン プラットフォーム]にチェック > [OK] > [今すぐ再起動]
上記を実施しないと、自分の環境では、`wsl --install -d Ubuntu-20.04`はタイムアウトエラーになりました。
■参考：https://zenn.dev/ohno/articles/1cb49d190af1f4
3. [Windows PowerShell]を管理者として実行
4. Windows PowerShell上で、`wsl --install -d Ubuntu-20.04`
    1. Linux カーネル更新プログラム パッケージを適用（詳細は下記）
5. Windows PowerShell上で、`wsl -l -v`にてインストールの確認
うまくいっていると下記のようになります。
```powershell:PowerShell
> wsl -l -v
  NAME            STATE           VERSION
* Ubuntu-20.04    Stopped         2
```

## Linux カーネル更新プログラム パッケージを適用
エラー`WslRegisterDistribution failed with error: 0x800701bc`の対処法のため、`wsl --install -d Ubuntu-20.04`にて、エラーが出ていなければ不要。
1. エラーコード中の[https://aka.ms/wsl2kernel](https://aka.ms/wsl2kernel)をクリック
2. ダウンロードした[wsl_update_x64.msi]を実行
3.再度、Windows PowerShell上で`wsl --install -d Ubuntu-20.04`を実行。
■参考：https://qiita.com/hali/items/bf04a1e4012025a38d6b

# Tips
- Ubuntu 20.04 LTS以外をWSLにインストールしたい。
    1. Windows PowerShellにて、`wsl --list --online`を実行。
    2. Windows PowerShellにて、`wsl --install -d <NAME>`
        - `<NAME>` : `wsl --list --online`にて表示されたディストリビューション名。
```powershell:PowerShell : wsl --list --online
> wsl -l -v
インストールできる有効なディストリビューションの一覧を次に示します。
'wsl --install -d <Distro>' を使用してインストールします。

NAME               FRIENDLY NAME
Ubuntu             Ubuntu
Debian             Debian GNU/Linux
kali-linux         Kali Linux Rolling
SLES-12            SUSE Linux Enterprise Server v12
SLES-15            SUSE Linux Enterprise Server v15
Ubuntu-18.04       Ubuntu 18.04 LTS
Ubuntu-20.04       Ubuntu 20.04 LTS
OracleLinux_8_5    Oracle Linux 8.5
OracleLinux_7_9    Oracle Linux 7.9
```
その他、wslコマンドは、`wsl --help`にて。

- [Windows Update の設定], [Windowsの機能の有効化または無効化]などの場所が分からない。
Windowsの検索窓より検索ください。
参考：https://remote.east-flets.net/faq/673

- Windows PowerShellどこ。
参考：https://pc-karuma.net/how-to-open-powershell-in-windows-11/


# おわりに
ご不明点等ありましたらお気軽にコメントにてお願いします。
※PowerShellは古かったので更新しました。
`Invoke-Expression "& { $(Invoke-RestMethod https://aka.ms/install-powershell.ps1) } -UseMSI"`
【Linux】特定の文字列の次の行を削除する方法

## 削除方法

次のコマンドを実行すると特定の文字列を含む行の次の行を削除できます。  

```terminal
sed '/文字列/{n;d}' ファイルパス
```

以下のようなファイルを作成します。  

```sample.txt
sample
test
example

```

次のコマンドを実行すると`test`が削除されます。  

```terminal
$ sed -i '/sample/{n;d}' sample.txt
sample
example
```

また次のコマンドを実行すると`sample`の2行下の`exsample`を削除できます。  

```terminal
$ sed -i '/sample/{n;n;d}' sample.txt
sample
test
```
氾濫するSSL証明書の拡張子、中身を知って心理ハードルを下げよう (crt, cer, pem, der...)

# SSL証明書の拡張子、多すぎない…！？

SSL証明書を初めて扱うとき、なんだか沢山のファイルの種別があるようで圧倒されてしまいます。 **だけど実は、拡張子が違っても中身は同じような書式で書かれていることが多いんです。** 超ざっくばらんに、SSL証明書の拡張子についてまとめます。

# 拡張子は違っても、中身の形式は一緒なことが多い。

## X.509 という規格

SSL証明書は、 **[X.509](https://ja.wikipedia.org/wiki/X.509) という規格に沿って書かれた情報を、所定の方式でエンコードしたもの** 、とまずは乱暴に理解しましょう。

上記で書いた『所定の方式』というのが大きく分けて2種類あります。以下で説明します。

## "所定の方式でエンコード" その1 『PEM』

X.509 を PEM という方式でエンコードしたもの、それらが拡張子としては `.pem`, `.crt`, `.cer` として表されることが多いです。

PEM 方式でエンコードされたものは、 `-----BEGIN CERTIFICATE-----` の行で始まり、BASE64文字列の行が続き、 `-----END CERTIFICATE-----` の行で終わる **テキストファイル** になっています。

↓ こんなの ↓

```txt
-----BEGIN CERTIFICATE-----
MIIH/TCCBeWgAwIBAgIQaBYE3/M08XHYCnNVmcFBcjANBgkqhkiG9w0BAQsFADBy
MQswCQYDVQQGEwJVUzEOMAwGA1UECAwFVGV4YXMxEDAOBgNVBAcMB0hvdXN0b24x
...
uYZJuqb2pKku+zzT6gUwHUTZvBiNOtXL4Nxwc/KT7WzOSd2wP10QI8DKg4vfiNDs
HWmB1c4Kji6gOgA5uSUzaGmq/v4VncK5Ur+n9LbfnfLc28J5ft/GotinMyDk3iar
F10YlqcOmeX1uFmKbdi/XorGlkCoMF3TDx8rmp9DBiB/
-----END CERTIFICATE-----

```

## "所定の方式でエンコード" その2 『DER』

X.509 を DER という方式でエンコードしたもの、それらが拡張子としては `.der`, `.cer` として表されることが多いです。

DER 方式でエンコードされたものは、 **バイナリファイル** になっています。そのため、テキストエディタで開いても読めません。

# まとめ

- X.509という規格に沿って書かれた情報を…
    - テキスト形式の PEM でエンコードするよ → `.pem`, `.crt`, `.cer`
    - バイナリ形式の DER でエンコードするよ → `.der`, `.cer`

PERもDERも、エンコード元となっているのはX.509であるため、 PER ⇔ DER で相互に変換することも可能です。(oepnssl コマンドを使って簡単に変換できますが、ここでは割愛します)

# 参考リンク

- [X\.509 \- Wikipedia](https://ja.wikipedia.org/wiki/X.509)
- [PEM、DER、CRT、およびCER：X\.509エンコードおよび変換
](https://www.ssl.com/ja/%E3%82%AC%E3%82%A4%E3%83%89/pem-der-crt%E3%81%8A%E3%82%88%E3%81%B3cer-x-509%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A8%E5%A4%89%E6%8F%9B/)
- [デジタル証明書のエンコードと拡張子の違い](https://www.nextdoorwith.info/wp/se/infra/ssl-tls-pki/digital-certificate-encoding-extensions-difference/)
paizaラーニング「何番目にある? 1 Python3編」

https://paiza.jp/works/mondai/array_primer/array_primer__search_i-th_step1
#### 私の解答
```Python3
li = [1, 10, 2, 9, 3, 8, 4, 7, 5, 6]
for i in range(len(li)):
    if li[i] == 8:
        print(i + 1)
```
ほぼ同じになりました。
#### 解答例
```Python3
li = [1, 10, 2, 9, 3, 8, 4, 7, 5, 6]

for i in range(len(li)):
    if li[i] == 8:
        print(i + 1)
```
Softrについての基礎的な知識

# ジャンル
　ノーコード・ウエブアプリ作成

# プラットホーム
1. ウエブ版

# 料金
1. Free
    - アプリケーション数無制限
    - 1ワークスペースあたり5人の共同作業者
    - 1カスタムドメイン
    - Softrブランディング
    - 会員5名
    - ペイウォール（継続課金・一括課金）5名
    - Airtableとの連携　200レコード
    - メールサポート
1. Starter ($24/月)
    - No Softrブランディング
    - Airtableとの連携 1,000レコード
    - カスタムコード(HTML/CSS/Javascript)
    - ライブチャットサポート
1. Professional ($65/月)
    - 1ワークスペースあたり10人の共同作業者
    - 2カスタムドメイン
    - 会員数　10,000人
    - Airtableと連携 10,000レコード
1. Business ($165/月)
    - 1ワークスペースあたり15人の共同作業者
    - 3カスタムドメイン
    - 会員数 15万人
    - Airtableとの連携　無制限
    - Airtableレコードの更新
    - ユーザーグループごとのフィールドレベルの編集権限
    - チャート（ライン、バー、円グラフなど）
    - オンボーディングコール
    - モバイルアプリ化
1. Enterprise　（問い合わせ）
    - SAML SSO
    - 高度なセキュリティと制御
    - カスタム契約
    - 専任のアカウントマネージャー

# 概要
　Softr Platforms GmbHは、2020年にMariam HakobyanとArtur Mkrtchyanによってドイツ・ベルリンで設立されました。2021年6月に、Softrは再設計され、Siftedのヨーロッパで最も急成長しているノーコードスタートアップに掲載され、2022年1月には、Product Hunt の Golden Kitty Awards で「Product of the Year 2021」を受賞しました。

　Softrは、Webアプリケーションや、Airtableデータを基にしたマーケティングWebサイトを構築できるノーコードプラットフォームです。

　中小企業で利用され、用途としては、クライアントポータル、社内ツール、マーケットプライス、オンラインコミュニティ、マーケティングウエブサイトなどがあります。

　ユーザーが利用できるテンプレートが多数用意されており、すぐに開始することができます。

# 機能
 テンプレートは、40種類ありますが、最初にAirtableのAPIキーを入れるよう要求されます。（後で設定することもできます）
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/7f58cbcd-9b53-325f-fb33-99f12e74a2aa.png"/>
　AirtableのAccount設定画面から、APIキーを作成して、Softrに貼り付けると、連携が完了します。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/f76d273c-baa8-33df-247a-d3d8e063cf0b.png"/>
　テンプレートからの作成では、Airtableにサンプルデータが登録されます。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/47340a80-0c0d-00b1-d754-d6e0ee76fdbc.png"/>
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/0d5b6140-74f5-8a5b-a4bc-b31ffbc3936a.png"/>

　イメージ的には、ブロックを組み上げて、細かい調整をしながらアプリを作成する感じなので、素早く作り上げることができます。レスポンシブデザインにも対応しています。全体的に、シンプルな画面構成で、迷うことは少ないと思います。

　それでも、短時間で完成させることはできませんでしたが、2～3時間の学習で簡単なものは作れそうな印象でした。
Carrdについての初歩的な知識

# ジャンル
one-page Webサイト作成

# プラットホーム
1. ウエブ版

# 料金
1. Basic (無料)
    - サイト数 3
1. Pro Lite ($9/年)
    - サイト数 3
    - プレミアムURL
    - ブランディングなし
    - プロのテンプレート
    - 最大100エレメントをサイトに使用できます
    - 動画のアップロード
    - スライドショー
    - サイトのアイコン
    - 画像の共有
    - カスタムメタタグ
    - Google AnalyticsのトラッキングIDの追加
1. Pro Standard ($19/年)
    - サイト数 10
    - カスタムドメイン
    - 連絡フォームとサインアップフォーム
    - Stripe、PayPal、Gumroad、TypeformおよびFacebookからサードパーティのウィジェットを埋め込めます
1. Pro Plus ($49/年)
    - サイト数 25
    - カスタムドメイン
    - 連絡フォームとサインアップフォーム
    - Zapier、Make、Airtableへ統合するカスタムフォームの作成
    - Stripe、PayPal、Gumroad、TypeformおよびFacebookからサードパーティのウィジェットを埋め込めます
    - リダイレクト
    - パスワード保護
    - ダウンロードサイト


　有料プランでは、それぞれでサイト数を増やすプランが選択できます。

https://carrd.co/pro

# 概要
　Carrdは、AJ(@ajlkn)が立ち上げた、個人的なプロフィールやランディングページなど、シンプルでレスポンスに優れたシングルページのプロフィールテンプレートを提供し、ウェブサイトを作成することができるサービスです。
　1ページで完結するので、使いやすく素早く完成します。基本的な機能は無料で利用できます。レスポンシブであり、カスタマイズが簡単にできます。
　作成されたサイトは静的であり、サーバーサイドのスクリプトやコードは必要ありません。したがって、パフォーマンスに優れています。また、出来上がったサイトはHTMLとCSSの集合なので、移植性にも優れています。
　2016年3月7日にサービスを開始し、1年後には10,000以上のユーザーがサイトを作成し、900以上のユーザーがProを利用しました。

# 機能

　テンプレートを使用して、自分のプロフィール・ページを作成してみました。機能を限定したサービスなので、特にチュートリアルを見ることもなく完成したので、非常に使いやすいと思います。
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/f37f1b21-8f52-833f-076a-539b8c4e8a83.png"/>

　名刺代わりに、作成してみてはいかがでしょうか。

https://fukuyori.carrd.co/
【NewRelic】任意のコマンド実行結果をメトリクスとして収集する

## 概要
カスタムメトリクスとしてサーバ内での任意のコマンド実行結果をNewRelicに収集したい場合、サーバ内にインストールしたInfrastructure Agentの**Flex機能**が役に立つ。


## 前提
- 実行環境はAmazon Linux 2 
- Infrastructure Agentはインストール済み
    - `newrelic-infra`コマンドが使える状態
    - インストール手順については[こちら（公式ドキュメント）](https://docs.newrelic.com/jp/docs/infrastructure/install-infrastructure-agent/get-started/install-infrastructure-agent/)


## 手順

### 1: ymlファイルを作成
`/etc/newrelic-infra/integrations.d`配下にymlファイルを作成する。
ファイル名は自由。今回は`flex.yml`とする


以下サンプル
```yml

integrations:
  - name: nri-flex # ここには必ずnri-flexを指定
    interval: 30s # データを取得する間隔。デフォルトは30秒
    config:
      name: dfFlex # 一意の設定名をつける。
      apis:
        - name: dfOutput # メトリクス名。NewRelicのクエリビルダーでは"dfOutputSample"という名前になる。
          commands:
            - run: df -i # 実行するコマンド
              split: horizontal
              set_header: [filesystem,inodes,iused,ifree,iusedPerf,mountedOn]　# 後述のsplit_byで分割された値をそれぞれ格納するvalue
              regex_match: true
              split_by: (\S+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\S+)\s+(\S+) # 正規表現でコマンド実行結果を分割
          perc_to_decimal: true

```

このサンプルでは`df -i`コマンドの実行結果をメトリクスとして収集できる。

```
ファイルシス    Iノード  I使用    I残り I使用% マウント位置
devtmpfs         499594    297   499297     1% /dev
tmpfs            501843      2   501841     1% /dev/shm
tmpfs            501843    377   501466     1% /run
tmpfs            501843     16   501827     1% /sys/fs/cgroup
/dev/xvda1     15727552 129528 15598024     1% /
tmpfs            501843      1   501842     1% /run/user/1000
```

ymlを設定した時点でメトリクス収集設定は完了！

### 2: ちゃんとメトリクスが送信されているか確認


以下コマンドで確認可能
`sudo /var/db/newrelic-infra/newrelic-integrations/bin/nri-flex -verbose -pretty -config_path /etc/newrelic-infra/integrations.d/flex.yml`

`/var/db/newrelic-infra/newrelic-integrations/bin/`配下にnri-flexというバイナリファイルが存在しており、これによってエージェントの挙動を確認することができる。

出力結果として以下のように、自分が設定したメトリクスが送信されているよーってログが確認できていればOK

```json
"metrics": [
	{
		"event_type": "dfOutputSample",
		"filesystem": "devtmpfs",
		"ifree": 499297,
		"inodes": 499594,
		"integration_name": "com.newrelic.nri-flex",
		"integration_version": "1.5.2",
		"iused": 297,
		"iusedPerf": 1,
		"mountedOn": "/dev"
	},

```

**メトリクスが送信できていない時**

以下のケースが考えられる
- ymlファイルの正規表現にマッチしない
- コマンドの出力結果が意図するものになっていない（権限エラーなど）


### 3: NewRelicでクエリ作成

上記手順で作成したメトリクスをもとに、NewRelic側でクエリを作成する。

```
FROM dfOutputSample 
SELECT average(ifree) 
facet filesystem, mountedOn
```
ファイルシステム・マウント位置ごとの空きノードを取得してみる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689205/46ef7170-a9b7-36b5-6b28-7cb18beac6a0.png)


データが取得できることが確認できた。


## 参考
https://docs.newrelic.com/jp/docs/infrastructure/host-integrations/host-integrations-list/flex-integration-tool-build-your-own-integration/

https://github.com/newrelic/nri-flex/blob/master/examples/linux/df-inode-example.yml
paizaラーニング「配列に含まれている? 3 Python3編」

https://paiza.jp/works/mondai/array_primer/array_primer__search_include_step3
#### 私の解答
```Python3
values = input().split()
N = int(values[0])
M = int(values[1])
li = [int (x) for x in input().split()]
output = False

for ele in li:
    if ele == M:
        print("Yes")
        output = True
        break

if not output:
    print("No")
```
#### 解答例
```Python3
values = input().split()
N = int(values[0])
M = int(values[1])

A = [0] * N
values = input().split()
for i in range(N):
    A[i] = int(values[i])

output = False
for ele in A:
    if M == ele:
        print("Yes")
        output = True
        break

if not output:
    print("No")
```
AppSheetでPDF自動出力機能を実装

# はじめに
最近Appsheetをよく触るようになってきたのですが、
アプリからデータを反映させたPDFファイルを出力する機能を実装するのに少し苦労したので
今回はその内容について書いていこうと思います。

# 実装内容
今回は在庫管理のアプリにおいて、  
発注書をPDFファイルに自動出力する機能を実装していきます。

# 前提条件
- ソースファイルとなるスプレッドシートを下記フォルダ配下に格納
    マイドライブ > appsheet > data > [アプリID]
    ※私はこの作業をしていなかったために、苦労してました、、
- 上記フォルダに「orders」のフォルダを作成 
- 商品マスタテーブルの作成(下図参考)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342664/ac39c6e0-218a-b8f0-ab2d-a167ac41eb5a.png)

- Google Documentにて発注書テンプレートの作成
    今回は下図のような簡易なものを利用しています。変数については利用するデータに合わせて変更ください。
![image (28).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342664/faa72fc6-66ba-bc9b-8e34-32f53d0bff33.png)


# 実装手順
## 1. 発注テーブルを作成して、アプリに追加
1. ソースのスプレッドシートに下図のようなシートを追加
![image (27).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342664/927d042a-a7c8-8e12-5cea-91c3b4e94a15.png)
2. AppSheetにて1で上記で作成したテーブルを読み込む
![image (29).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342664/78705d6b-17b0-8723-1d77-a3264561ffe8.png)
3. テーブルのデータ型を上図を参考に修正する
## 2. Automationで発注書作成フローを作成する
1. New BotからBOTを新規作成
![image (30).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342664/607a9405-6a9a-a5fa-1b6a-ed6e9ceeb820.png)
2. 下図の通りイベント設定をする
![image (31).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342664/875213d1-4c0c-7b32-83aa-396ef4104f1d.png)
3. 下図の通りPDF出力プロセス設定をする
    [Template] 部分は前提条件で作成した発注書テンプレートを指定する
![image (32).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342664/9d98db7e-2665-87f9-e13c-8021d9233f83.png)

4. 下記の通りURL更新プロセス設定をする
    [Set these column(s)]の設定は下記の通り
    - カラム : url
    - 値     : CONCATENATE("/orders/",[order_id],".pdf")
![image (33).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342664/6862e0ca-8e2d-e63c-dccb-0510c8929ff0.png)

# アプリで実行
1. 今回追加した発注テーブル画面を表示し、右下[Add]を押下
![image (34).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342664/4b66fab2-f022-957d-492a-a0254aa07a75.png)
2. 各項目入力（URLのみ未設定）し、画面下[Save]を押下
![image (35).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342664/6d32d6c5-12cc-f066-fb0e-fb1e64a10508.png)
3. 画面右上のリフレッシュボタンを押下
![image (36).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342664/d9bcb36c-cb28-db91-dec0-2b5c11f9fe00.png)
4. 今回追加したレコードの詳細から、ファイルが作成されていることを確認
![image (37).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342664/21652028-8ad3-e65a-6862-245bbfaba80d.png)
![image (38).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342664/8265b0f8-96e9-db80-eee4-3f4290ec304d.png)



# まとめ

今回はAppSheetの在庫管理アプリで発注書を自動作成する方法をご紹介しました。
在庫管理アプリ自体はテンプレートが用意されているので、それをベースに今回の機能を追加することで、
更に便利になるのではないかと思っています。

また、今回は在庫管理アプリをベースに作成しましたが、  
その他のアプリにも、PDF自動作成機能は利用できると思うので、  
ぜひご活用いただければと思います。
Iteratorから値をとるサンプル

```sample.java
    public static void main(String[] args) {
        List<String> li = new ArrayList();
        li.add("a1");
        li.add("a2");
        Iterator it = li.iterator();
        while (it.hasNext()) {
            System.out.println(it.next());
        }
    }
```
実行結果
```
a1
a2
```
【2日目】discord.jsでDiscord Botを作ってみよう

# はじめに
こんにちは、なりかくんと申します。
今回は、discord.jsを使ってDiscord Botを作ってみようと思います。

この記事はある程度Node.jsが分かる方向けの記事です。
宣伝ではありますが、私のブログにサルでもわかるDiscord Botの作り方という講座を作っていますので良ければそちらも参考にしてみてください。

https://narikakun.net/tag/dis-saru/
# discord.jsとは？
discord.jsというのは、Discord APIを簡単に操作できるNode.jsのモジュールです。とにかくこれを使えばDiscord APIのほぼすべてを操作することが出来ます。
オープンソースで開発されていてプルリクエストを出すと誰でも開発に携わることが出来ます。

https://github.com/discordjs/discord.js

# discord.jsのインストール方法
discord.jsをインストールするには、Node.js 16.9.0以降のバージョンが必須となります。
npmやyarnなどでインストールすることが出来ます。
```
npm install discord.js
yarn add discord.js
pnpm add discord.js
```

# Botを起動しよう
まずは、機能も何もありませんがTokenでログインするとログインしたユーザーが表示されるBotを作ってみます。
TOKENは、[Discord Developer Portal](https://discord.com/developers/applications)で取得したTokenを使用します。
```js:index.js
const { Client, GatewayIntentBits } = require('discord.js');
const client = new Client({ intents: [GatewayIntentBits.Guilds] });

client.on('ready', () => {
	console.log(`${client.user.tag}でログインしました。`);
});

client.login(TOKEN);
```

このプログラムは、以下のようにログインしたユーザータグが表示されるプログラムです。
```shell
> node index.js
Narikakun Blog#4020でログインしました。
```

プログラム自体は見ればわかると思いますが、readyイベントが発生するとログイン成功で`client.user.tag`でユーザータグを取得して表示しているだけです。

以上ですっ！最後までお読みいただきありがとうございました。
paizaラーニング「配列に含まれている? 2 Python3編」

https://paiza.jp/works/mondai/array_primer/array_primer__search_include_step2
#### 私の解答
```Python3
n = int(input())
li = [5, 12, 6, 84, 14, 25, 44, 3, 7, 20]
output = False

for ele in li:
    if ele == n:
        print("Yes")
        output = True
        break

if not output:
    print("No")
```
前の解答例を参考にしたので、ほぼ同じになりました！
#### 解答例
```Python3
N = int(input())
li = [5, 12, 6, 84, 14, 25, 44, 3, 7, 20]
output = False

for ele in li:
    if N == ele:
        print("Yes")
        output = True
        break

if not output:
    print("No")
```
【GAS】設定できるトリガーの種類

# トリガーを追加する場所

![FireShot_Capture_450_-_test_-_プロジェクトのトリガー_-_Apps_Script_-_script_google_com.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136275/e44d683a-0bc8-2230-26a0-7a292a589c4f.jpeg)

# イベントソース

![スクリーンショット 2022-12-13 19.06.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136275/b9e9fe98-a0b5-4636-3926-ebb4277ce670.png)

## [イベントソース]スプレットシートから

![スクリーンショット 2022-12-13 18.59.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136275/db506a0a-559b-c685-0e11-6028f9e0e0a7.png)

## [イベントソース]時間主導型

![スクリーンショット_2022-12-13_19_01_18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136275/3edf6dde-9ffe-cb4d-7601-fc1a5f094e2e.jpeg)

## [イベントソース]カレンダーから

![スクリーンショット 2022-12-13 19.05.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136275/484c8bce-f912-ef3d-fa46-24c0361e62e9.png)
DeNA短期サマーインターンに参加してきた

# はじめに

2022年9月にDeNAのサマーインターン（9/3〜9/5）に参加してきました！
本記事はそのサマーインターンを振り返っていきたいと思います。


# 概要

募集ページにかかれていた概要としては次のとおりです。

> 短期インターンシップでは、チーム対抗でこのインターン向けに開発されたアプリの改修に取り組んでいただきます。様々な制約のある開発を通して、DeNAが大事にしているプロダクト作りの真髄を存分に経験いただけます。
>
>本インターンでは、実際のDeNAでのプロダクトと同様に高トラフィックな環境を想定するなど、機能だけでなく利用者の体験や非機能要件も満たす実装が要求されます。これらの要素も考慮しながら、皆様の持っている技術力を存分に使って課題にアプローチしてください。
>（[2022サマーインターン募集ページ](https://dena.snar.jp/jobboard/detail.aspx?id=lkEOp9xgWE944iUWKpdhiw)より引用）

具体的には、3日間でチームに分かれ~~クソ~~アプリを最高のアプリに改善するという内容でした！チームはフロントエンド2人とサーバーサイド3人で構成されていました。（僕はサーバーサイドでした）

課題自体は初日に説明があり、その後チームに分かれて各自で進めていくという方法で行いました。また、最終日は成果発表と懇親会が開かれました。成果発表では改善したアプリについて全てのチームがプレゼンを行い、1位と2位のチームには景品が贈られました。（僕たちのチームは副賞でした！嬉しい！！）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">インターンでの景品贈られてきた！<br>ありがとうございます！！<a href="https://twitter.com/hashtag/dena_eng_intern?src=hash&amp;ref_src=twsrc%5Etfw">#dena_eng_intern</a><a href="https://twitter.com/hashtag/DeNAIntern2022?src=hash&amp;ref_src=twsrc%5Etfw">#DeNAIntern2022</a> <a href="https://t.co/XKuo5kmj3h">pic.twitter.com/XKuo5kmj3h</a></p>&mdash; あぼぼん（abobon） (@__abobon__) <a href="https://twitter.com/__abobon__/status/1576940246922457088?ref_src=twsrc%5Etfw">October 3, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そして、チームにはメンターの方が2人ずつついてくださり、常に質問できる環境でした。また、毎日メンターの方と1on1を行うため、その日良かったことや悪かったこと、それに対して今後どのようにしていくべきかなどを中心に話すことができました。

# やったこと

インターンの課題としては、チャットアプリのパフォーマンスを改善していくという内容でした。

実際にサーバーサイド陣営としては以下の内容を行いました。

- クエリの調査
- N+1問題の解決
- Home画面のキャッシュ
- makeコマンド作成
- サーバーを増設
- お気に入り機能の実装

などなど...

当日使用したリポジトリを見ながらこの記事を執筆していますが、よく3日間でここまでやったな...というissueがたくさんありました。そして、まだまだやり残した課題もたくさんありました笑


# 学んだこと

3日間というとても短い期間でしたが学ぶことはたくさんありました！

- わからないことはどんどん質問する
    - 一緒のチームになった人やメンターの方にはわからないことをガンガン聞いていました。これまで一人で悩んで解決するタイプだったのですが、時間がない中でしたので意識的にすぐ聞くようにしていましたし、わからないことはチームの人に聞いた方が早いということが新たな学びになりました。
- チームはできるだけ仲良く
    - 僕たちのチームはインターン前に一度集まって話をしました（ただの雑談）。それがあったことで当日はスムーズに議論が進みましたし、より活発にコミュニケーションが取れたと思います。メンターさんがおっしゃっていた「仲が良いチームのプロジェクトが失敗することもあるが、仲が悪いチームのプロジェクトが成功することはない」という言葉がとても印象的でした。
- タスク管理と共有の難しさ
    - タスク管理と共有はissueにて行なっていましたが、その難しさを痛感しました。アサインする人やレビュワーの指定などは行なっていましたが、全員そこまでタスク管理と共有に慣れていなかったため、時間がない後半はお互いがどのタスクを行っているかの共有が疎かになってしまいました。時間がないなかでもタスク管理と共有はしっかりすべきだなと感じました。

# おわりに

サマーインターンは３日間というとても短い期間にもかかわらずたくさん吸収するものがありました。また、チームの雰囲気も一番良く課題に取り組めたのではないかと感じました。ぜひ、気になる方は来年のサマーインターンに参加してみてはいかがでしょうか！
また、最後になりますがサマーインターンでお世話になったメンターの方々や人事の方々をはじめDeNAの皆様、本当にありがとうございました！


# 参考リンク

- [2022サマーインターン募集ページ](https://dena.snar.jp/jobboard/detail.aspx?id=lkEOp9xgWE944iUWKpdhiw)
Devcontainer(Remote Container) いいぞという話 ~開発環境を整える~

# 概要

* もうすでに知っている人も多いと思いますが、今回は vscode を使った開発時に是非とも使用いただきたい[Devcontainer(Remote Container)](https://code.visualstudio.com/docs/devcontainers/containers)についてまとめていきます。

## Devcontainer(Remote Container)とは何か

* みなさんこんな経験をした人がいるんじゃないでしょうか。
* 新規チーム加入後に、環境構築します。手順書はこれねはい。
* 中を見てみると作業PCに何やらいっぱいインストール、vscode の Extension はこれとこれとこれと。。。
* 正直、こんな感じで開発する前に環境揃えるのが大変で投げ出したくなるでしょう。かつローカル環境が汚染されている感じが嫌ではないでしょうか。

**そこで登場。Devcontainer(Remote Container)**

* Devcontainer とは、 Dockerコンテナを開発環境とし作成することで、開発環境に必要なライブラリやランタイムのバージョン、Extension をコンテナ内に閉じ込めその中で完結させることができます。
* ユーザは、あるプロジェクトを開いた時に、Devcontainer で起動をするだけで開発環境が準備されるのです。

![スクリーンショット 2022-12-13 18.44.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/dfe9739c-3bcb-6543-8130-e9a2175e0af3.png)
(画像引用元: https://code.visualstudio.com/docs/devcontainers/containers)

## 使ってみる

* お手元に、Docker Desktop と vscode をご用意ください。
* vscode 内の拡張機能で下記の Extension をinstallします。

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

* 今回は、新規で Devcontainer の環境を構築していこうと思います。
* 左下の >< というマークを選択すると下記のようなプルダウンが表示されるので、ここで「create devcontainer」を選択します。


* そうすると選択できるベースの設定が表示されます。

![スクリーンショット 2022-12-13 18.56.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/fc7a3aee-0695-1139-71bd-d4c75fd17e9b.png)

* 作成された設定ファイルを見てみると下記のようになっていました。
* よく見てみると、「.devcontainer/devcontainer.json」が追加されていますね。
* これが vscode によって作成された開発コンテナの構成ファイルとなります。
* この構成ファイルに、コンテナの実行中にインストールする拡張機能を指定したり、作成後のコマンドを使用して環境を準備したりすることもできます。

![スクリーンショット 2022-12-13 18.57.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/0a95870c-8528-8614-c06a-22f866e95844.png)


```devcontainer.json
{
  "image": "mcr.microsoft.com/devcontainers/typescript-node:0-12",
  "forwardPorts": [3000],
  "customizations": {
    // Configure properties specific to VS Code.
    "vscode": {
      // Add the IDs of extensions you want installed when the container is created.
      "extensions": ["dbaeumer.vscode-eslint"]
    }
  }
}
```

* 例えば、下記のようにすることで Dockerfileを利用することもできます。

```devcontainer.json
{
	"name": "Docker from Docker",
	"dockerFile": "Dockerfile",
	"runArgs": ["--init"],
	"mounts": [ "source=/var/run/docker.sock,target=/var/run/docker-host.sock,type=bind" ],
	"overrideCommand": false,
	"remoteEnv": {
		"LOCAL_WORKSPACE_FOLDER": "${localWorkspaceFolder}"
	},
	"customizations": {
		"vscode": {	
			"extensions": [
				"ms-azuretools.vscode-docker"
			]
		}
	},
	"remoteUser": "vscode"
}
```

```Dockerfile 
FROM mcr.microsoft.com/vscode/devcontainers/base:bullseye
ENV DOCKER_BUILDKIT=1
RUN apt-get update
```


* また、すでに .devcontainer フォルダが作成されており、devcontainer.json や Dockerfile が用意されているプロジェクトがある場合には、その用意された構成をもとに devcontainer を立ち上げれば良いだけとなります。
* 下記のような表示されるので、「Reopen in Container」をクリックいただく形で起動することができます。

![スクリーンショット 2022-12-13 19.06.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/8264a900-e465-02a4-6e22-08d0370ca2ff.png)




# 参考資料

https://code.visualstudio.com/docs/devcontainers/containers
Mapに値格納、取り出しサンプル

```sample.java
    public static void main(String[] args) {
        Map<String,Integer> mp = new LinkedHashMap();
        mp.put("a1",1);
        mp.put("a2",2);
        System.out.println(mp.getClass());
        for (String s:mp.keySet()) {
            System.out.println(s);
        }
    }
```
実行結果
```
class java.util.LinkedHashMap
a1
a2
```
paizaラーニング「配列に含まれている? 1 Python3編」

https://paiza.jp/works/mondai/array_primer/array_primer__search_include_step1
#### 私の解答
```Python3
a = [10, 13, 21, 1, 6, 51, 10, 8, 15, 6]
b = 0

for i in a:
    if i == 6:
        b = b + 1
if b >= 1:
    print("Yes")
else:
    print("No")
```
#### 解答例
```Python3
li = [10, 13, 21, 1, 6, 51, 10, 8, 15, 6]
output = False

for ele in li:
    if ele == 6:
        print("Yes")
        output = True
        break

if not output:
    print("No")
```
【CommonLisp】letで定義できる変数は外部の変数と同名でも破壊しない

## 前書き

上級Lisperが得るものは何一つない記事です

## ソース

:::note warn
defparameterで定義する変数はアスタリスクで囲むのが一般的です
以下の例は単純に動作が見たい & お遊びコードのためアスタリスクで囲っていません
:::

```common-lisp
(defparameter tikuwa 1000)

(defun hoge (takosu)
  (let ((takosu (+ takosu 2))
        (tikuwa (+ tikuwa 20)))
    (format t "let takosu: ~a~%" takosu)
    (format t "let tikuwa: ~a~%" tikuwa))
  (format t "takosu: ~a~%" takosu)
  (format t "tikuwa: ~a~%" tikuwa))

(defun main ()
  (hoge 100))
```

### 出力結果

```
let takosu: 102
let tikuwa: 1020
takosu: 100
tikuwa: 1000
```

## 感想

察してくれるCommonLispは素敵