OmniAICreator/Qiita-1.07M huggingface dataset:
プログラミング学習を学ぶ前に知っておきたいこと~基礎知識編~

## 初めに
この記事は**プログラミング学習を学ぶ前に知っておきたいこと**と題したシリーズの一つです。
このシリーズは各テーマごとに連日投稿予定です。

## このシリーズ記事の対象者
- プログラミングに興味を持って、学習を検討している方
- 学習したいけど、何から手をつけたらいいのかわからない方

[前回の記事](https://qiita.com/MPrg2011/items/ed6d77a08665e1b0e267)の続きです。


https://qiita.com/MPrg2011/items/ed6d77a08665e1b0e267

## 開発したい分野が決まったら
### 言語を選択する
前回の記事に記載した**Webアプリケーション、スマホアプリケーション、ゲーム**の内一つを選択することをおすすめしました。
その中でも多くのプログラミング言語が存在します。
全て学習するのは非常に難しいので、以下の項目ごとに一つずつ選択しましょう。

:::note info
下記の言語を基に作られた言語やフレームワークに関しては、後の記事で紹介予定です。
:::

<dl>
<dt>Webアプリケーションの場合</dt>
<dd><b>フロントエンド</b></dd>
<dd>Webサイトやアプリケーションでユーザーが目にしたり操作したりする視覚的な要素を指します。</dd>
<dd>主な言語：HyperText Markup Language（HTML）、Cascading Style Sheets（CSS）、JavaScript</dd>

:::note info
HTMLとCSSは厳密にはプログラミング言語ではなく、マークアップ言語(Webサイト文章といったテキストに目印付けを行い、コンピューターに認識させるための言語)に当たります。
:::

<dd><b>バックエンド</b></dd>
<dd>Webサイトやアプリケーションのユーザーには見えない部分を担当します。</dd>
<dd>主な言語：Java、PHP、Ruby、Python、C++、C#、Go</dd>
</dl>
フロントエンドとバックエンドで開発者を分けている現場もあれば、一人で両方とも開発する現場もあります。<br>
片方のみの開発に進みたい場合も、もう片方の知識を知っておくと現場での開発に役立つので学んでおくのがおすすめです。
<dl>
<dt>スマホアプリケーションの場合</dt>
<dd>iOS：Swift</dd>
<dd>Android：Kotlin</dd>
<dd>iOS/Android：Dart</dd>
</dl>

<dl>
<dt>ゲームの場合</dt>
<dd>主な言語：C、C++、C#、JavaScript、Ruby、Swift、PHP</dd>
</dl>

:::note info
開発ツールとしてUnrealEngineやUnityなどのゲームエンジンを使用している場合もあります。
:::


## 言語を決めたらPCを準備
### よくある質問
**1. PCはWindowsかMacどちらがいいの？**
結論から言うと、どちらでも構いません。もしPCを持っているのなら、最初の学習はそのまま行っても問題はありません。
ただし学習を進めていく中で様々なソフトをインストールしていくと、一般的な使用(Youtubeなどの動画鑑賞、インターネットをする)を目的として購入したPCですと動作が遅かったり、容量不足になる可能性はあります。
まずは手持ちのPCで学習を進めていき、継続していきたいと思えた時点で買い替えもありでしょう。

:::note warn
こちらの記事では独学をしていく方向けの解説になります。
プログラミングスクールや教材で学ぶ予定の方でPCが指定されている場合はそれに従う必要があります。
現行のMacBook(M1/M2チップ)は対象外になっているところもあるので注意が必要です。
:::

参考記事

https://techacademy.jp/pro/jobchange-bootcamp#price

トップメニューの料金と比較=>参加条件を参照


**2. 新しく購入するならどんなPCを購入すればいい？**
WindowsやMac関係なく、以下のスペックが最低限あると理想です。
メモリ：8GB以上
ストレージ：500GB以上
一般的なPCはメモリ：4GB〜、ストレージ：200GB〜です。購入時には必ず確認しましょう。

![スクリーンショット 2022-12-01 20.22.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/33953843-7b5e-0905-38f5-b3fcba9230df.png)
[Appleの公式通販](https://www.apple.com/jp/shop/buy-mac/macbook-air/%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%82%B0%E3%83%AC%E3%82%A4-8%E3%82%B3%E3%82%A2cpu%E3%81%A87%E3%82%B3%E3%82%A2gpu%E3%82%92%E6%90%AD%E8%BC%89%E3%81%97%E3%81%9Fapple-m1%E3%83%81%E3%83%83%E3%83%97-256gb)でも、最初の選択は最小限のものが選択されています。よく確認してから購入しましょう。

:::note info
Windowsから発売されているSurfaceでも開発が可能です。
その場合は上記のスペックに加えてCPUも確認しておきましょう。
Intel Coreの場合**i5**か**i7**の製品を選びましょう。
例えばSurface GoはIntel Core **i3**のためプログラミング学習よりは書類作成など一般的な使用向けです。

:::

### 最後に
短い記事でしたが最後まで見ていただきありがとうございました。

明日は環境構築をせずに学習をすすめる方法を投稿予定です。

### 参照元サイト

- [フロントエンド開発とバックエンド開発の違いとは？ | Indeed (インディード)](https://jp.indeed.com/career-advice/career-development/front-end-vs-back-end)
- [マークアップ言語とは？プログラミング言語との違いやマークダウン言語も解説](https://hnavi.co.jp/knowledge/blog/markup-language/)
- [【ゲームプログラマーになるには】仕事内容と年収 | Indeed (インディード)](https://jp.indeed.com/career-advice/careers/what-does-a-game-programmer-do)
SRE事業をしているので「信頼性」について考えたくなった

## はじめに

はじめまして。スリーシェイクでSRE事業をしているSreake事業部のATSです。

私たちの部署では、お客様にSREのコンサルティング支援をしていますが、SRE事業をしていると、よく「信頼性」について語ることが多いです。

今回は私たちがよく話している「信頼性」ってもっと色々な所で活用できるんじゃないか、と思いつきました。

年末なので**軽い気持ちで読んで頂ければ**幸いです

## SRE = Site Reliability Engineering


Googleさんの内部で2004年頃から出てきた言葉なので、「サイト」という言葉を使っていますが、今は様々な「プロダクト」が対象となっています。

「SREとはプロダクトの信頼性をエンジニアリングで高めていくために考え抜かれたメソッドです」、と説明することが多いです。

## CRE = Customer Reliability Engineering


Googleさんが2016年頃に出した言葉で、お客様に対してSREの考え方を適用したものになります。

引用：[https://cloudplatform-jp.googleblog.com/2016/10/google-cre.html](https://cloudplatform-jp.googleblog.com/2016/10/google-cre.html)

## DBRE = Data Base Reliability Engineering


もう定義は不要かと思いますが、DBの信頼性をエンジニアリングで・・・以下略

そろそろこの言葉を聞くと、「うん？他にもSREの考え方を適用したらどうなるかな」と思った人もいるかと思います。

さて、何の信頼性をエンジニアリングで高めていきましょうか。

## HR + RE = Human Resource Reliability Engineering


エンジニアリングによって、採用や育成の信頼性を高めてみる、という造語です。

やはり最初は可視化・自動化かな、と思います。

SREでもまず最初のターゲットとしては、システム全体の可視化とToilを無くす自動化から始めます。

採用や育成においても、様々なデータの可視化や無駄を無くすことから始める感じです。

エンジニアがいれば、この辺りは比較的情報取得や自動化は実現できそうです。

可視化や自動化が進みました。次は継続的に改善してくことかと思います。

SREでいうと、インフラコード化、CI/CD導入、SLI/SLOの定義などが当たるかと思います。

採用や育成でコードは出てこないと思いますが、共通フォーマットで誰が何をやっても同じ結果になるものを作っておくというのは大事かも知れません。

採用や育成の指標を決めて、それを逸脱するような場合にはすぐにアラートが出るようにしましょう。


あら、、、
人事部長が経営層に対して「採用うまく行っている」と報告している横から、面接中にNGワードを出したAさんのアラートが出ましたよ・・・

## Health+ RE = Health Reliability Engineering


エンジニアリングによって、健康の信頼性を高めてみる、という造語です。

こちらも最初は可視化・自動化ですね。

健康の可視化だと、今はスマートウォッチなどで24時間体の状態を測定可能ですね。進んでいます。

自動化はどうでしょう。定期的に体重計に乗ったり、血圧を測ったり、人間ドックにいったり、薬を飲んだり・・・。Toilがたくさんあります。

スーパー・コンビニ・ドラッグストアなどに行く時に、簡易的に自動的に検査ができれば、かなりのToil削減になりますね。

健康の指標を決めて、それを逸脱する場合はアラートを出す、というのは健康に興味がない人からすると雑音になります。
なので、エンジニアリングを使って、健康の指標の基準を満たさないので、コンビニで甘いものを購入する時に、スマホ決済をできないようにしました・・・。

## F+ RE = Family Reliability Engineering


エンジニアリングによって、家族の信頼性を高めてみる、という造語です。


もうすぐ年末ですね。

みなさまぜひ、家族の信頼性を高めてくださいね。

働きすぎはよくないですよ。
Notionを使ってネットサーフィン（サーベイ）を快適にする

# はじめに
この記事では，ネットサーフィンのお供にNotionを紹介しようと思います．ネットを見ていてこんな状況になったことはありませんか？

* あとでじっくり読みたい記事を見つけたが，結局読まないまま忘れてしまった
* 読みたい記事をストックしているが，どれから読んだらいいか整理できていない
* 読んだもの記事を自分なりにまとめておきたい

これらのことをまとめて解決できるのがNotionです！
# Notionの準備
## サインアップ
https://www.notion.so/ja-jp/product?utm_source=google&utm_campaign=14877655427&utm_medium=125922091617&utm_content=611000004229&utm_term=notion&targetid=kwd-312974742&gclid=EAIaIQobChMIkdiDkuPa-wIV1GSLCh2kOgHNEAAYASAAEgKv6fD_BwE

まずは，ここからNotionにサインアップしていきます．学生は，有料プランを無料で使うことができるので [ここ](https://www.notion.so/ja-jp/product/notion-for-education)からサインアップしてみてください．
サインアップが完了すると，このような画面になります．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1282063/4f9e502a-41da-e5a8-f121-cb4d89b8cef1.png)
## ページを追加
画面左にあるサイドバーから「ページを追加」をクリックしてください．これで新規ページを作成できます．ページにはドキュメントやテーブル，別のページなど様々なものを置くことができます．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1282063/1982a217-5fa1-1032-a578-c57f2239a46d.png)

## データベースを作成
はじめに「無題」と書かれているところをクリックして，ページのタイトルを付けてください．
ページのタイトルの入力が終わったら， `/boardview` と入力してください．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1282063/caa16fca-8e51-61c1-95a5-e75f54be1228.png)
ここでエンターを押すと，空のボードビューが作成されます．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1282063/b5b486cb-ec3d-c61d-b830-a3b5275270cb.png)

続いて，画面右側にある「新規データベース」をクリックください．
すると，ボードビューの中にカードが追加されます．はじめに追加されているカードは，カードの上にマウスを持ってきてから表示される「･･･」から「削除」を選択することで削除することができます．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1282063/6082fd67-13b2-4e45-525b-e5ce8596f1ae.png)

データベースにも名前をつけましょう．ボードビューの右上の「無題」をクリックして名前を入力してください．

## Chromeの拡張機能を入れる
ここまでで，Notionの基本的な設定は完了です．続いて，作ったデータベースにネット上のページを簡単に登録できるようになるChomeの拡張機能を入れていきます．

https://chrome.google.com/webstore/detail/notion-web-clipper/knheggckgoiihginacbkhaalnibhilkk?hl=ja

インストールが完了すると，ブラウザの右上にNotionのアイコンが追加されます．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1282063/33a3f07e-eb55-1482-709c-5fc2d9fb0f6b.png)

ここまでで準備は完了です！

# 使い方
## あとで読むページを登録する
保存したいページを見つけたら，ブラウザの右上にあるNotionのアイコンをクリックしてください． 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1282063/11659721-68ec-4974-39fb-0420388069a8.png)

「Add to」に先程作成したデータベースを選択し，「Save page」をクリックすると登録することができます．
## 追加したページを確認する
ページを追加してNotionに戻ると，ボードビューの「未着手」の場所に新しくカードが追加されています．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1282063/ae1755a9-8c9c-14cb-9255-0af6abfa6393.png)

このカードはドラックアンドドロップすることで簡単に場所を変えることができるので，順番を変えたり「進行中」に移動させたりすることができます．これでどのページを読んだらいいのか一目瞭然です！

## ページにメモをとる
追加したカード毎にページが作成されているので，直接メモを取ることができます．
先程追加したカードをクリックしてください．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1282063/b12aadb4-633f-5f0b-bc3a-84124f993765.png)

カードに対応するページを開くことができます．
ここに，メモを取ったり他のページのリンクを記録することができます．

# おわりに
ここまでのやり方で今までのネットサーフィン（サーベイ）がより快適になると思います．Notionはできることが多くて使うを躊躇してしまいがちですが，とても便利なツールなのでぜひ使ってほしいです！！
集約を小さく保つ手法

# はじめに

この記事は[ZOZO　アドベントカレンダー２０２２#５](https://qiita.com/advent-calendar/2022/zozo) 4日目の記事になります。

今回はドメイン駆動設計における集約に関する問題を考察してみます。

# 問題

システムの稼働が長くなればなるほど、新しい機能やサービスによって集約が大きくなっていって、いつのまにか保守性が下がるという問題があります。

いかに集約を小さくするかという問題を考えてみます。

# 作戦１　コマンドとクエリでモデルを分ける。

そもそもコマンド（更新や削除）とクエリ（検索）では、基本的な要件が異なるので、思い切ってモデルを分けるという考えになります。

アーキテクチャ的には多少複雑になりますが、クエリに必要なパラメータとか、レスポンスの値とかをコマンド側では考えなくて良くなり、コマンド用のモデルはシンプルになります。

一方のクエリは検索して結果を返すだけなことが多いので、そもそもしっかりモデルを考える必要がないこともあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150455/cb3d59a3-2f46-c16c-6540-f503e4472345.png)

# 作戦２　集約をコンテキスト境界や担当業務ごとに分ける

コンテキストを意識して分けるやり方です。コンテキスト境界を意識して分けていく感じです。

![木目モ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150455/f595b637-6783-2887-3010-6fe8bcdd48a7.jpeg)

いわゆるマイクロサービスの概念です。今回は詳細まで記載しませんが、アーキテクチャの実装については、モノリスのままモジュラーモノリスの形態を取るか、きっちりマイクロサービスのアーキテクチャを取り入れるか、いずれにしてもサービス間、コンテキスト間のやり取りをどうするかというところが難しいところですね。

# まとめ

集約を小さく保つ、つまりコードをシンプルに保とうとすれば、するほどアーキテクチャは複雑になる傾向にあります。
もちろん集約内のドメインをいかに保守性高く保つかにも気を配らなければ元も子もないですよね。

アプリケーションの公開当初はシンプルであったとしても時間の経過につれて複雑になっていくものなので、いつどのようにアーキテクチャを変更するか、または最初から見越してやっておくかというのも決断が難しいところです。
電子レシートAPIでレシート発行組織を管理

昨日はこちらでした。APIへのアクセスはできましたでしょうか。
https://qiita.com/receiptroller/items/bf83848a4129698035b8

本日は電子レシート発行に必要な組織の作成と管理を紹介します。

# 組織、店舗、テーマ、スタッフ、端末の関係

まずは、組織の概念を紹介します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/788025/d95b0f9a-d28d-0e91-ede2-4bbc6145affc.png)

組織の下に店舗、テーマ、スタッフ、端末があります。これら全てが組織の下で管理されます。テーマ、スタッフ、端末に関しては店舗ごとに管理されるのが一般的ですが組織で管理されます。電子レシート発行時は店舗、1テーマ、1スタッフ、1端末を指定する必要があります。

# 組織の作成

先日作ったアカウントでログインしてみます。ログイン後トップページのところに「組織・チーム」というボタンがありますのでクリックしてください。↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/788025/b60454db-4038-00f6-ffa8-1ce85cba10c9.png)

まだ組織を登録してないときはこのようにフォームが表示されますので入力してください。全項目必須項目です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/788025/bd4e5c23-049c-05be-4466-c7c054250426.png)

「新規作成」ボタンを押すとここで組織がつくられます。↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/788025/1e82d80b-26d6-b4ce-1d2a-4a3d9bb4f204.png)

# APIで確認

本日のトピックはAPIがメインですので、ここでAPIで組織情報が閲覧できるか確認してみましょう。

## 組織一覧リクエスト 

/account/organizationsを呼んで確かめてみます。

```
curl -X 'GET' \
  'https://api.receiptroller.com/account/organizations' \
  -H 'accept: application/json' \
  -H 'Authorization: bearer {YOUR TOKEN}'
```


## 組織一覧レスポンス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/788025/80b9d744-58dd-4d79-25cc-10696d061e78.png)

下記のようにレスポンスが戻ってきます。

```
[
  {
    "id": "f33bf2a3-1834-40cd-b43e-d55f85512fb8",
    "name": "ショップABCD"
  }
]
```

# 次

明日は店舗の作成と管理を試してみます。

# 採用中

現在開発メンバー絶賛募集中です。紙レシート削減を目指して電子レシートの開発を一緒に進めるメンバーを募集しています。フルリモートです。詳細はこちら。　
https://receiptroller.com/ja/jobs
AUTOSAR 22-11 Reference Update and not updated.

AUTOSAR Advent Calendar 2022

https://qiita.com/advent-calendar/2022/autosar

2022/12/05日の投稿です。

AUTOSARが、今年の版、R22-11をまもなく公開します。

AUTOSAR R22-11 Release Event 20221208

https://qiita.com/kaizen_nagoya/items/18471d0b340480fdcd42

AUTOSARのURL

https://www.autosar.org/

文書は検索してダウンロードできます。

https://www.autosar.org/nc/document-search/

AUTOSAR R22-11記事一覧はこちら。

https://qiita.com/kaizen_nagoya/items/11a1654e1e9ec0e4d001

 <この項は書きかけです。順次追記します。>

# Reference not updated(たぶん)

## Specification of Vehicle-2-X Geo Networking, AUTOSAR 22-11, CP, No.793

[20] Intelligent Transport Systems (ITS); Vehicular Communications;
GeoNetworking; Part 4: Geographical addressing and forwarding for point-topoint and point-to-multipoint communications; Sub-part 2: Media-dependent functionalities for ITS-G5 ETSI TS 102 636-4-2 V1.1.1 (2013-10)

https://www.etsi.org/deliver/etsi_ts/102600_102699/1026360402/01.01.01_60/ts_1026360402v010101p.pdf

Intelligent Transport Systems (ITS); Vehicular Communications; GeoNetworking;
Part 4: Geographical addressing and forwarding for point-to-point and point-to-multipoint communications; Sub-part 2: Media-dependent functionalities for ITS-G5 ETSI TS 102 636-4-2 V1.2.1 (2020-04)
https://www.etsi.org/deliver/etsi_ts/102600_102699/1026360402/01.02.01_60/ts_1026360402v010201p.pdf



 ＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞

# 文書履歴(document history)
ver. 0.01 初稿 20221205
[備忘録]Tmux + Neovimで快適なターミナル環境を構築する

本投稿内容はこちらのYouTube動画の内容に沿って行いました。

https://www.youtube.com/watch?v=U-omALWIBos

### 構築後のターミナル使用のイメージ
![スクリーンショット 2022-12-02 19.05.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607991/e10e4b5f-7b83-861f-d870-f4a3cd13bd48.png)
ターミナル画面を複数のセッション、ウィンドウ、ペインに分割して利用することができ、それぞれの移動もスムーズな点が魅了的です。


### Tmuxとは
>ターミナルマルチプレクサ(Terminal Multiplexer) の略です。
Linux 系のターミナル画面を複数のセッション、ウィンドウ、ペインに分割して利用することができます。

（[とほほのtmux入門](https://www.tohoho-web.com/ex/tmux.html)を参照）

### 実施環境
```
mac OS Big Sur
バージョン 11.5.1
```

### HomebrewでTmuxをインストール
```shell
brew install tmux
```

### tpm (tmux plugin manager)をインストールする
```shell
git clone https://github.com/tmux-plugins/tpm ~/.tmux/plugins/tpm
```

### ~/.tmux.confファイルを作成する
```shell
touch ~/.tmux.conf
```

### ~/.tmux.confファイルを以下の内容を記載する
```conf
set -g default-terminal "screen-256color"

set -g prefix C-a
unbind C-b
bind-key C-a send-prefix

unbind %
bind | split-window -h

unbind '"'
bind - split-window -v

unbind r
bind r source-file ~/.tmux.conf

bind -r j resize-pane -D 5
bind -r k resize-pane -U 5
bind -r l resize-pane -R 5
bind -r h resize-pane -L 5

bind -r m resize-pane -Z

set -g mouse on

set-window-option -g mode-keys vi

bind-key -T copy-mode-vi 'v' send -X begin-selection # start selecting text with "v"
bind-key -T copy-mode-vi 'y' send -X copy-selection # copy text with "y"

unbind -T copy-mode-vi MouseDragEnd1Pane # don't exit copy mode when dragging with mouse

# tpm plugin
set -g @plugin 'tmux-plugins/tpm'

# list of tmux plugins
set -g @plugin 'christoomey/vim-tmux-navigator'
set -g @plugin 'jimeh/tmux-themepack'
set -g @plugin 'tmux-plugins/tmux-resurrect' # persist tmux sessions after computer restart
```

### カスタムポイント
##### Prefixを"Ctrl-a"に変更し、入力負荷を軽減
```conf
set -g prefix C-a
unbind C-b
bind-key C-a send-prefix
```

##### ウィンドウ分割のキーバインドを直感的なものに変更
```conf
unbind %
bind | split-window -h

unbind '"'
bind - split-window -v
```

##### プラグインを導入し、NeovimとTmuxウィンドウ・ペインの移動を同一コマンドシームレスに実行可能に
（※Neovim側にも同じプラグインを導入する必要あり）
```conf
set -g @plugin 'christoomey/vim-tmux-navigator'
```


以上で構築は完了です！
[備忘録]PowerLevel10KでiTerm2をオシャレにカスタムしてみた

本投稿内容はこちらのYouTube動画の内容に沿って行いました。

https://www.youtube.com/watch?v=CF1tMjvHDRA


### カスタム後のiTerms2
![スクリーンショット 2022-12-02 18.48.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607991/8c75210e-e2e8-6fee-da08-5089ae711e7c.png)
アイコンや時間表示などオシャレにカスタムできました。
コマンドサジェストのプラグインも導入しており、これから使い倒していけそうです。



### 実施環境
```
mac OS Big Sur
バージョン 11.5.1
Homebrew, Gitはインストール済み
```

### iTerm2をインストール
```shell
brew install --cask iterm2
```

### Oh My Zshをインストール
```shell
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
```

### Oh My ZshのTheme（PowerLevel10K）をインストール
```shell
git clone https://github.com/romkatv/powerlevel10k.git $ZSH_CUSTOM/themes/powerlevel10k
```
`~/.zshrc`ファイルの"ZSH_THEME"の値を以下に書き換える
```shell
ZSH_THEME="powerlevel10k/powerlevel10k"
```
変更を反映
```shell
source ~/.zshrc
```

### Meslo Nerd Fontをインストール
iTerm2を開くと`Meslo Nerd Font`をインストールするかどうかのプロンプトが表示されるので`y`押してダウンロードし、一度iTerm2を終了する。

### PowerLevel10Kの設定を行う
```
Prompt Style      -> 3:Rainbow
Character set     -> 1:Unicode
Show Current Time -> 3:12-hour format
Prompt Separators -> 1:angled
Prompt Heads      -> 1:Sharp
Prompt Tails      -> 1:Flat
Prompt height     -> 2:Two lines
Prompt Connection -> 3:Solid
Prompt Frame      -> 4:Full
Connection & Frame Color -> 1:Lightest
Prompt Spacing    -> 2:Spare
Icons             -> 2:Many icons
Prompt Flow       -> 1:Concise
Enable Transient Prompt -> n:no
```

### ターミナルのフォントサイズを大きくする
1. iTerm2のpreferenceを開く
2. Profiles > Textを選択する
3. フォントサイズを20pxに変更する

### iTerm2のTheme Colorsをカスタムする
1. iTerm2を開く
2. 動画投稿主さんのCustom Themeをダウンロードする
    ```shell
    curl https://raw.githubusercontent.com/josean-dev/dev-environment-files/main/coolnight.itermcolors --output ~/Downloads/coolnight.itermcolors
    ```

3. iTerm2 preferencesを開く
4. Profiles > Colorsを選択する
5. ダウンロードしたcolor profile(coolnight)をインポートする
6. インポートしたcolor profileを選択する

### ZSHのプラグインをダウンロードする
zsh-autosuggestionsをインストール
```shell
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
```

### zsh-syntax-highlightingをインストール
```shell
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
```

`~/.zshrc`ファイルのプラグイン記載を以下の通りに変更する
```shell
plugins=(git zsh-autosuggestions zsh-syntax-highlighting web-search)
```

変更を反映
```shell
source ~/.zshrc
```

以上でiTerm2のセットアップは完了です。
【インクリメント・デクリメント】java

## インクリメント・デクリメントとは

#### 演算子であり、数値型の変数の値を１足したり１減らしたりできるもの
#### ただし、演算子 '++' '--' を変数の「どこに置くか」で加算減算のタイミングが異なってくる

要約すると上記の説明になりますが、それだけでは理解に繋がらないのでまずは問題を解いてみましょう。

```java:例題1
public static void main(String[] args) {
		int a = 10;
		System.out.println(++a + a++ + a + a-- + --a);
}
```
どうでしょうか

すんなり解けた人はもう十分に知識があると思います。

少し悩んだ方は以下の解説を参考してください。

↓
↓
↓

```java:解答1
56
```

もう一つ問題

```java:例題2
public static void main(String[] args) {
		int a = 10;
		if (a++ > 10 && ++a < 10) {
			System.out.println("条件が満たされた。aの値は" + a);
		}
		System.out.println("条件が満たされない。aの値は" + a);
}
```
↓
↓
↓
　　
```java:解答2
"条件が満たされない。aの値は12"//a = 12
```

javaを学習し始めの人であれば少し混乱するかもしれません。この問題はまず、条件判定式の理解ができていなとインクリメントデクリメントの判断まで行き着く事ができません。
  
#### 解説
```java:解答1について解説
public static void main(String[] args) {
		int a = 10;
		System.out.println(++a + a++ + a + a-- + --a);
             // aの動き ⇨     11 + 11 + 12 + 12 + 10
}
```
変数の前にインクリメントがある場合は：先に足され計算されます　
　　a = 10 ⇨ a = 10 + 1（こっちが採用）
変数の後にインクリメントがある場合は：後に足され計算されます　
　　a = 10（こっちが採用） ⇨ a = 10 + 1
変数の前にデクリメントがある場合は：先に足され計算されます　
　　a = 10 ⇨ a = 10 - 1（こっちが採用）
変数の前にデクリメントがある場合は：先に足され計算されます　
　　a = 10（こっちが採用）⇨ a = 10 - 1
  
  

```java:解答2について解説
	if (a++ > 10 && ++a < 10)
```
この問題に関してはポイントが２つあり。
➀'&&'で繋がれている二つの条件判定式の理解
➁インクリメントデクリメントの理解

&&で結ばれる場合true&&true出ないと{}の部分は処理されない。
そして、１つ目の条件式でfalseだった場合は**２つ目の条件式が判定がされない。**
例で言えば **a++ > 10** は判定され　falseになるが **++a < 10** は判定されることもなくなってしまう。

**左の条件式　：　false　
右の条件式　：　true(判定されない)**
左の条件式　a++ は判定されるのでaに+1加算されます。ただ条件判定をする際は**a = 10**であることに注意が必要です。a++は変数の後にインクリメントを置いています。ですので条件判定をされる時はa = 10 での判定がされるのです。
**--結果--**
条件判定時はa = 10 で判定される
判定の後の行からはa = 11 の値になっている

最後に簡単な動きを確認してみる。
```java:簡単な動き確認
    int a = 10;
    boolean bool = (a++ = 10)
    System.out.println(bool);//true
    int b = 10;
    System.out.println(++b + --b);//21と出力される
    System.out.println(b);//10と出力される
```

インクリメントデクリメントはjavaを習い始めてすぐ出てくる一見簡単なものだと思いがちだが、しっかりとした理解をしていないと判定がされなかったり、思った出力と違うことがあってしまう。基礎を固めることを意識しながらこれからも学習していきたいです。
　　
###### 追記
```java:インクリメント・デクリメント
++とは
int a = 10;
++a;
//a = a + 1;

//演算子の一種
a += 1;//+= -= *= /=

int b = 10;
if (++b == 10) {
    System.out.println("true");
} else {
    System.out.println("false");
}
//結果はfalse
int c = 10;
if (c++ == 10) {
    System.out.println("true");
} else {
    System.out.println("false");
}
//結果はtrue   c = 11


++a
//先に + 1 をする
a++
//後に + 1 をする
--a
//先に - 1 をする
a--
//後に - 1 をする
```
【Jetpack Compose】特定の条件のときだけModifierを追加したい

# はじめに
この記事はand factory.inc Advent Calendar 2022 2日目の記事です。
昨日は　@doihei さんの [GitHub Apps + Dangerをやってみる](https://qiita.com/doihei/items/6dd338f2e55665cdaf28) でした。


# 特定の条件のときだけModifierを追加したい

jetpack compose で開発しているとちょいちょい
- hasRead(既読)のときだけ背景をグレーにしたい
- isRecommend（オススメ）のときだけ文字色を青にしたい

ということをしたいケースがあったりします。

```kotlin
if (hasRead) {
  Box(
    modifier = Modifier.background(Color.Gray)
  ){
    // 既読用のコンポーザブル
  }
} else {
  Box(
    modifier = Modifier.background(Color.Gray)
  ){
    // 未読用のコンポーザブル
  }
}

```
とかすれば良いのですが『背景しか変わらないんだよな〜。。。』ということがあると思います。

# 特定条件のときのみModifierが設定できるような拡張を作る

```kotlin
/**
 * predicateがtrueの時にactionを付与する拡張メソッド
 *
 * ```kotlin
 * Modifier.applyIf(true) { background(Color.Black) }
 * ```
 */
fun Modifier.applyIf(predicate: Boolean, action: Modifier.() -> Modifier): Modifier {
    return if (predicate) {
        action()
    } else this
}
```

# 使い方

一番最初に書いたコードを以下のようにリファクタリングできるようになります。

```kotlin
Box(
	modifier = Modifier.applyIf(hasRead) { background(Color.Gray) }
) {
  // 既読・未読共通のコンポーザブル
}

```

# 最後に

拡張関数やスコープ関数を使うとより重複コードを削減できたりコーディングしやすくなったりしますので色々と試したくなりますね。

明日の[Advent Calendar](https://qiita.com/advent-calendar/2022/andfactory)の記事もお楽しみに:santa:
2022年はこんなことがありました！

2022年は皆さんにとってどんな年、良い年だったでしょうか？
日本語プログラミング言語なでしこにとっては、なんといってもの年だったかもしれません。

<B>💡ひまわり正式版公開（２００２年）から２０年目</B>

あっという間の20周年です。
私は学生の時にひまわりと出会い２０年目。年齢を感じてしまう自分がいます💦💦が、そういった方ではない方にとっては、びっくりすることかもしれません。そういった意味でいろんな挑戦したりしました。

【更新情報】


<B>🎁なでしこが大学入試対策に向けた学習コースに採択されます！(2022/02/09)</B>

全国に「ロジカ式」プログラミング教室を展開するロジカ・エデュケーションで、大学入試に向けた、なでしこを利用したプログラミング言語の学習コースが新設。

https://www.atpress.ne.jp/news/293638

<B>🎁paiza.ioのなでしこ3が最新に更新されました(2022/03/01)</B>

「なでしこv3」にも対応しているpaiza.IOですが、DNCLモード(大学入試記述言語)も動くようになりました。

https://paiza.io/projects/B0o9nEZeh2hY0bihwAcI6A

<B>🎁OSC2022にオンライン出展+チャット会お疲れ様でした(2022/03/12)</B>

3/12のオープンソースカンファレンス(OSC2022)に参加しました。また、OSCの後、チャット会を開催しました！

https://www.youtube.com/watch?v=_iw4xqB2Q1Y&t=31s

<B>🎁なでしこでAtCoderに挑戦できる「なでしこーだー」 (2022/07/05)</B>
日本語プログラミング言語「なでしこ」でAtCoderの問題を解くためのchrome拡張機能「なでしこーだー」が公開されたそうです。

https://axt-one.github.io/nadesicoder/

<B>🎁IPAセキュリティ・ネクストキャンプにてなでしこの開発について講義を行いました(2022/08/13)</B>

開発者のクジラ飛行机は、2022年のIPAセキュリティ・ネクストキャンプにて「プログラミング言語の作り方」というテーマで、なでしこの開発について熱く4時間も語りました。

https://www.ipa.go.jp/jinzai/camp/2022/next2022_program_list.html#list_next4

<B>🎁2022グッドデザインしずおかに応募して一次審査通過(2022/10/03)</B>

ひまわりから20年目を迎えた日本語プログラミング言語「なでしこ」ですが、「2022グッドデザインしずおか」に応募し、静岡県庁で展示を行いました👍

https://www.pref.shizuoka.jp/sangyou/sa-560/2022gds_ichizishinsa.html


こんな、２０２２年でしたがどうだったでしょうか？
来年の２０２３年どんなことになるワクワク楽しみですね！


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565975/9a3d92e1-7728-b904-f0c6-777b3cdb0ec4.png)
github actionでdb migrate時にffi周りでLoadErrorが発生した

## 背景
2022/12月になってからgithub actionでdb migrate周りでエラーになり出したので対処の覚書。
(原因を完全に特定しているわけではないのでさっくり)

エラー内容抜粋
```bash
LoadError: libffi.so.7: cannot open shared object file: No such file or directory - /home/runner/work/appname/vendor/bundle/ruby/3.0.0/gems/ffi-1.15.5/lib/ffi_c.so
/home/runner/work/appname/vendor/bundle/ruby/3.0.0/gems/bootsnap-1.15.0/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:32:in `require'
/home/runner/work/appname/vendor/bundle/ruby/3.0.0/gems/bootsnap-1.15.0/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:32:in `require'
/home/runner/work/appname/vendor/bundle/ruby/3.0.0/gems/activesupport-6.1.4.6/lib/active_support/dependencies.rb:332:in `block in require'
/home/runner/work/appname/vendor/bundle/ruby/3.0.0/gems/activesupport-6.1.4.6/lib/active_support/dependencies.rb:299:in `load_dependency'
/home/runner/work/appname/vendor/bundle/ruby/3.0.0/gems/activesupport-6.1.4.6/lib/active_support/dependencies.rb:332:in `require'
/home/runner/work/appname/vendor/bundle/ruby/3.0.0/gems/ffi-1.15.5/lib/ffi.rb:5:in `rescue in <main>'
/home/runner/work/appname/vendor/bundle/ruby/3.0.0/gems/ffi-1.15.5/lib/ffi.rb:2:in `<main>'
/home/runner/work/appname/vendor/bundle/ruby/3.0.0/gems/bootsnap-1.15.0/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:32:in `require'
/home/runner/work/appname/vendor/bundle/ruby/3.0.0/gems/bootsnap-1.15.0/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:32:in `require'
/home/runner/work/appname/vendor/bundle/ruby/3.0.0/gems/activesupport-6.1.4.6/lib/active_support/dependencies.rb:332:in `block in require'
/home/runner/work/appname/vendor/bundle/ruby/3.0.0/gems/activesupport-6.1.4.6/lib/active_support/dependencies.rb:299:in `load_dependency'
/home/runner/work/appname/vendor/bundle/ruby/3.0.0/gems/activesupport-6.1.4.6/lib/active_support/dependencies.rb:332:in `require'
...
```

似ていそうな問題
https://github.com/ffi/ffi/issues/881
https://github.com/orgs/community/discussions/24949

当方も　`ruby/setup-ruby@v1` を利用しており、bundlerのキャッシュが効いている状態でffi周りのファイルが足りないと言うエラーが発生した。

## 対応
github actionのymlで `cache-version` を変更
```diff
      - name: Setup ruby
        uses: ruby/setup-ruby@v1
        with:
          bundler-cache: true
          ruby-version: 3.0.2
-         cache-version: 1
+         cache-version: 2
```
電子レシートAPIにログイン

本日は電子レシートAPIのログイン方法を紹介します。

利用するAPIはこちらです。
https://api.receiptroller.com/index.html

# まずはアカウント登録

まずAPIを使うためにはこちらでアカウントの登録が必要です。登録されていればどなたでもこのAPIの利用は可能です。アカウントの登録は下記URLで行うことができます。
https://receiptroller.com/identity/account/register?culture=ja

↓登録画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/788025/c3c5c44e-a113-0abf-7f53-b016ce7103a3.png)

↓仮登録完了画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/788025/40daeca7-313c-6308-a892-68e202d04e21.png)

↓確認メール、確認メールのリンクをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/788025/61e25473-aea0-897b-f565-97c0166020a6.png)

↓確認完了画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/788025/f7220bdb-2c98-a4c6-0a5b-014ba9799779.png)

一旦ここでログインできることを確認しましょう。

↓正常にログインできた後のトップページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/788025/3ef35924-80b1-7e27-712a-33ce9f4fca66.png)

では、ここでAPIに戻り同じログイン情報でログインしてみます。


# ログイン

ログインAPIを使うとアクセス用の`token`を取得することができます。これから先（ログアウト以外）のAPIを使うときはここで取得する`token`を`header`に付与する必要があります。

## ログインリクエスト

早速ですがCurlのリクエストは下記です。

```
curl -X 'POST' \
  'https://api.receiptroller.com/account/login' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d '{
  "userName": "YOUR EMAIL",
  "password": "YOUR PASSWORD",
  "expire": "2023-12-24T11:11:15.913Z"
}'
```

ここでのポイントは自分でトークンの有効期限を設定することができます。あまり長い期間を設定することはお勧めできませんが、何度も`token`を取得するのも面倒なので今回は24日までの`token`を取得します。

## ログインレスポンス

↓ログインレスポンス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/788025/408926c6-fe90-2160-bb76-cb71f2277a7b.png)

ここでは`token`と有効期限が戻ってきます。この有効期限は自身で設定したものですが、戻ってきます。

# ログインできているか確認

ログインできいるかどうか確認するために、`/account/me`というメソッドを呼んでみます。

## me リクエスト

```
curl -X 'GET' \
  'https://api.receiptroller.com/account/me' \
  -H 'accept: application/json' \
  -H 'Authorization: bearer {YOUR TOKEN}'
```

## me レスポンス

```
{
  "userName": "{YOUR USER NAME}",
  "roles": []
}
```

正常に自身の`UserName`が表示されていればOKです。

# 次

明日は企業登録を試してみます。
https://qiita.com/receiptroller/items/b32096696ec92c89905b

# 採用中

現在開発メンバー絶賛募集中です。紙レシート削減を目指して電子レシートの開発を一緒に進めるメンバーを募集しています。フルリモートです。詳細はこちら。　
https://receiptroller.com/ja/jobs
Azure AutoMLで作ったモデルをPythonから推論してみた

# はじめに
前回KaggleのTPSコンペのデータを用いてAzure Auto MLからモデルを作成しましたが、(前回の記事は[こちら](https://qiita.com/kkawano_neko/items/39f0af1429b27ab636ca))これを今度はPythonから推論してみようと思います。

# 開発環境
+ OS Windows 10(NVIDIA GTX 1650Ti,16GB RAM, i5-10300H CPU)
+ Visual Studio Code 1.73.1
+ Python 3.9

# 実行してみます！
モデルを作成するところで終わっていたので、まずはデプロイするところからやってみます。

## デプロイ
「モデル」タグから一番精度の良いものを選択し、
![automl2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2976188/eca4f80b-cbbd-7194-6924-c2c0a17499c2.png)

「デプロイ」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2976188/5ae3084f-0e75-bf21-9a84-a73cb183fbaf.png)

+ リアルタイムエンドポイント
+ Webサービスへの配置
の2つを選べますが、今回はWebサービスの方でデプロイを行います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2976188/c1cd8c71-3583-950e-3ebc-da1cf662546a.png)

「名前」と「コンピューティングの種類」を入力したらデプロイできます。


デプロイ完了後、推論を行ってみます。
「テスト」タブに移って実行すると…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2976188/8c7f4309-db6f-f021-822b-a254eca9f9a2.png)
結果がJSON形式で返ってきました。

次に「使用」タブのところでPythonコードが載っているのでこれを回してみます。
```predict.py
import urllib.request
import json
import os
import ssl

def allowSelfSignedHttps(allowed):
    if allowed and not os.environ.get('PYTHONHTTPSVERIFY', '') and getattr(ssl, '_create_unverified_context', None):
        ssl._create_default_https_context = ssl._create_unverified_context

allowSelfSignedHttps(True) 

data =  {
  "Inputs": {
    "data": [
      {
        "id": 0,
        "product_code": "example_value",
        "loading": 0.0,
        "attribute_0": "example_value",
        "attribute_1": "example_value",
        "attribute_2": 0,
        "attribute_3": 0,
        "measurement_0": 0,
        "measurement_1": 0,
        "measurement_2": 0,
        "measurement_3": 0.0,
        "measurement_4": 0.0,
        "measurement_5": 0.0,
        "measurement_6": 0.0,
        "measurement_7": 0.0,
        "measurement_8": 0.0,
        "measurement_9": 0.0,
        "measurement_10": 0.0,
        "measurement_11": 0.0,
        "measurement_12": 0.0,
        "measurement_13": 0.0,
        "measurement_14": 0.0,
        "measurement_15": 0.0,
        "measurement_16": 0.0,
        "measurement_17": 0.0
      }
    ]
  },
  "GlobalParameters": {
    "method": "predict"
  }
}

body = str.encode(json.dumps(data))

url = 'http://XXX'
api_key = '' 

headers = {'Content-Type':'application/json', 'Authorization':('Bearer '+ api_key)}

req = urllib.request.Request(url, body, headers)

try:
    response = urllib.request.urlopen(req)

    result = response.read()
    print(result)
except urllib.error.HTTPError as error:
    print("The request failed with status code: " + str(error.code))

    # Print the headers - they include the requert ID and the timestamp, which are useful for debugging the failure
    print(error.info())
    print(error.read().decode("utf8", 'ignore'))

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2976188/9cff782f-e622-6138-b367-240833170243.png)
このように先ほどと同じ結果が返ってきました！
Java　基本の基本４

# はじめに
自身でprogataやスクールでJavaを勉強中。学んだことをアウトプットして、より定着させるために記事にまとめていきます。継続は力なり！

# 演算子（前回の続き）
### 関係演算子
```java
int num1 = 10;
int num2 = 5;
boolean result;

result = (num1 == num2) //false
result = (num1 != num2) //true
result = (num1 > num2) //true
result = (num1 <= num2) //false
```

### 論理演算子
```java
int num1 = 10;
int num2 = 5;
boolean result;
//and
result = ((num1 < 10) && (num2 < 10)) //false
//or
result = ((num1 < 10) || (num2 < 10)) //true
//notand
result = !(num1 < num2) //true
```

# 文字列の比較
文字列は参照型データなので、==は使えません。
```java
String str1 = "山田";
String str2 = "やまだ";
String str3 = "山田";
boolean result;

result = str1.equals(str2); //false
result = str1.equals(str3); //true
result = str1.equals("山田"); //true
```
リンクだけです。「グループリーグ」「グループステージ」「プール」を調べてみた。

「グループリーグ」は和製英語であり、英語圏では一般的にグループステージないしプールと言う。


https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E3%83%AA%E3%83%BC%E3%82%B0


https://en.wikipedia.org/wiki/Tournament#Group_stage


2018年6月22日＜

https://interlink.blog/2018/06/w%E6%9D%AF%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E3%83%AA%E3%83%BC%E3%82%B0%E3%82%92%E5%8B%9D%E3%81%A1%E6%8A%9C%E3%81%8F%E7%A2%BA%E7%8E%87%E3%82%92%E8%A8%88%E7%AE%97%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F.html
JetpackComposeでFloatingActionButtonの中央にアイコンを表示する実装方法


今回はJetpackComposeでFloatingActionButtonの中央にアイコンを表示する実装を行いたいと思います。

単純なFloatingActionButtonでアイコンだけ表示させたい時に、中心ではなく左寄せで表示されてしまっていたので、中央にアイコンだけ表示させたい場合の実装方法です。

# 実装方法

こちらはそのまま`icon`に設定した場合です
```ExtendedFloatingActionButtonView.kt
@Composable
fun ExtendedFloatingActionButtonView() {
    Column {
        ExtendedFloatingActionButton(
            icon = { Icon(Icons.Filled.Favorite, "Favorite") },
            text = { Text("") },
            onClick = { /*今回は説明に必要ないので省略します。*/ },
            elevation = FloatingActionButtonDefaults.elevation(8.dp)
        )
    }
}
```

通常ではこのように設定すると思います。
ですがこの場合左にずれてしまいます。
![Screenshot_20221202_195453.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/3e0df83e-b5b2-d664-207d-e837ab7e2bef.png)



```ExtendedFloatingActionButtonView.kt
@Composable
fun ExtendedFloatingActionButtonView() {
    Column {
        ExtendedFloatingActionButton(
            text = { Icon(Icons.Filled.Favorite, "Favorite") },
            onClick = { /*今回は説明に必要ないので省略します。*/ },
            elevation = FloatingActionButtonDefaults.elevation(8.dp)
        )
    }
}

```
`text = { Icon(Icons.Filled.Favorite, "Favorite") }`

こちらのようにtextの引数に対して設定をすると中央に表示してくれます。


![Screenshot_20221202_195419.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/a779ccc2-47bb-7423-dcbc-3b41fc61268d.png)

以上です！
React入門

![Reactロゴ.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985441/62b8c03a-0f99-4f2d-a25b-fba9700ad2ee.jpeg)

## はじめに

今回の記事では、日本で非常に人気の高いJavascriptライブラリの1つである
Reactについて、簡単な概要を備忘録として残しておきたいと思います。

## Reactはフレームワークではなく、ライブラリである

Reactはフレームワークであると勘違いされやすいですが、公式サイトでは「ライブラリ」と書かれています。フレームワークはアプリ開発で土台として使うプログラムを指し、開発に関する一通りの機能が備わっているもののことです。Reactには多くの機能が備わっていますが、基本的にUI設計に限定したものとなっているため、フレームワークではなくライブラリに分類されます。

## 1. React とは

Reactとは、一言でいうとUIを作ることに特化したJavascriptのライブラリです。
UIとは、ユーザー（利用者）インターフェース（接点・繋がり）の略で、ユーザーとコンピュータの接点となる部分を指します。
すなわち、ReactはWebサイト上のUIパーツ構築に優れたライブラリということです。
[React公式サイト](https://ja.reactjs.org/)では、大きく3つのコンセプトを掲げられています。以下引用文になります。

**- Declarative(宣言的)**
>React は、インタラクティブなユーザインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。
宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしやすいものになります。

**- Component-Based(コンポーネント指向)**
>自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、これらを組み合わせることで複雑なユーザインターフェイスを構築します。
コンポーネントのロジックは、Template ではなく JavaScript そのもので書くことができるので、様々なデータをアプリケーション内で簡単に取り回すことができ、かつ DOM に状態を持たせないようにすることができます。

**- Learn Once, Write Anywhere(一度学べばどこでも書ける)**
>React と組み合わせて使用する技術に制限はありません。React を使って新しい機能を追加する際に、既存のソースコードを書き換える必要はありません。
React は Node を使ったサーバ上でもレンダーできますし、React Native を使うことでモバイルアプリケーションの中でも動きます。


参照：[React公式チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)

### 仮想DOM構造

React は「仮想DOM」という仕組みを特徴としています。
仮想化したDOMを使うことで、HTMLのDOMとの差分をReactが検知し、必要な部分だけを更新してくれるので、処理を高速化させることができます。

# Reactにできること

- Webアプリ開発ができる。特に今トレンドのSPA(シングルページアプリケーション)開発に向いている。
- モバイルアプリ開発ができる。React Native React 360というツールを使ってWebアプリとほぼ同様なコーディングでiOs・Android向けアプリを開発できる。
- VR開発もできる。React 360 というツールを使えばAR/VR開発もできます。ReactVRというフレームワークも用意されている。
Alpine.jsのネット上での知名度や評価を調べてみた

# 国内と海外での評価・評判
## ①国内（日本語記事）での評価・評判まとめ

<b><font color="red">良いと言われている点</font></b>
・シンプル
・覚えること少なめ
・導入が簡単
・学習コストが低い
・手軽
・JQueryの代替になりそう　:point_left:わかる


<b><font color="red">その他感想</font></b>
・日本語の情報が少ない
・TypeScriptがサポートされていない ※たぶん



::: note
参考記事
・[Alpine.js 5分で説明するよ](https://qiita.com/kohashi/items/ae8b1186567ec34b2a75)
・[Alpine.jsでサクッとフロントを構築する](https://webty.jp/staffblog/production/post-4734/)
・[Alpine.jsでドロップダウンメニューをスクラッチから作成(Alpine.jsの基礎)](https://reffect.co.jp/html/alpine-js)
:::

## ②海外（英語記事）での評価・評判まとめ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311883/764740ea-5bef-0ee0-d684-28327eabbe6a.png)
画像元：[Front-end Frameworks - The State of JS 2021](https://2021.stateofjs.com/en-US/libraries/front-end-frameworks/)


<b><font color="red">良いと言われている点</font></b>
・シンプル
・覚えること少なめ
・導入が簡単
・学習コストが低い
・手軽
・Tailwindと組み合わせが良い　 :point_left:わかる
・JQueryの代替になりそう　　　:point_left:わかる
・シンプルだけど十分な機能を備えている
・TailwindCSSのJavaScript版だ 　:point_left:わかる

<b><font color="red">その他感想</font></b>
・Laravelと一緒に使う場合が多い
・デカいプロジェクトには向いてなさそう。<b>←むしろこれがVue,Reactとの違いであり強みでもある</b>

　↓ VueとReactと比較した立ち位置こんな感じ
![jsalpine@4x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311883/05c9238a-9d61-5232-6bb1-41b0e3cbb7b0.png)
画像元：・[Introduction to Alpine.js | When to use it?](https://lightit.io/blog/when-to-use-alpine-js/)

::: note
参考記事
・[Front-end Frameworks - The State of JS 2021](https://2021.stateofjs.com/en-US/libraries/front-end-frameworks/)
・[Alpine.js Crash Course - Youtube](https://www.youtube.com/watch?v=r5iWCtfltso)
・[Introduction to Alpine.js | When to use it?](https://lightit.io/blog/when-to-use-alpine-js/)
:::

# GitHubのスター比較（2022/12/2現在）
<b>Vue</b> 
初版：2014年
スター:star:：201k
<b>React</b>
初版：2013年
スター:star:：199k
<b>Alpine.js</b>
初版：2019年
スター:star:：22.3k

まだ新しいライブラリだからこれからだな。

# 国内求人
勝手に載せていいのか分かりませんが、一件Alpine.jsを使う予定であるという求人がありました。

https://www.anken-navi.jp/anken/navi/a100024285.htm

# 総合的に見て
評価に関しては、やはりシンプルかつ学習コストが低いのが評価されているライブラリだと分かります。
知名度に関しては、日本語の記事や学習教材が少なすぎるところから日本での知名度は低いと思われます。
海外の知名度は割とあるっぽいです。
検索はやはり海外の記事に引っかかることが多く、Youtubeでも海外の方がチュートリアルを公開しています。
VueやReactとは一線を画すシンプルさと手軽さが魅力なJavaScriptライブラリとして君臨してほしいですね～
[oracle] UNION ALLを含むマテリアライズド・ビューの高速リフレッシュ

基本的にunion allのクエリでマテビューの高速リフレッシュはできない
しかし例外的に回避する手段がある

# 要件

union allするクエリのマテビューで高速リフレッシュする

# リファレンス

https://docs.oracle.com/cd/F19136_01/dwhsg/basic-materialized-views.html#GUID-81A544CA-14C4-41B1-ACC1-5FF7960F18A6

> 5.3.8.7 UNION ALLを含むマテリアライズド・ビューの高速リフレッシュに関する制限
> UNION ALL集合演算子を含むマテリアライズド・ビューは、次の条件が満たされる場合に、REFRESH FASTオプションをサポートします。
> 
> 定義問合せの最上位レベルにUNION ALL演算子を含める必要があります。
> 
> UNION ALL演算子は、1つの例外を除き、副問合せ内に埋め込むことはできません。この例外とは、定義問合せの形式がSELECT * FROM(UNION ALLを含むビューまたは副問合せ)の場合に、UNION ALLを副問合せのFROM句に指定できるということです。この例を次に示します。
> 
> CREATE VIEW view_with_unionall AS
> (SELECT c.rowid crid, c.cust_id, 2 umarker
>  FROM customers c WHERE c.cust_last_name = 'Smith'
>  UNION ALL
>  SELECT c.rowid crid, c.cust_id, 3 umarker
>  FROM customers c WHERE c.cust_last_name = 'Jones');
> 
> CREATE MATERIALIZED VIEW unionall_inside_view_mv
> REFRESH FAST ON DEMAND AS
> SELECT * FROM view_with_unionall;

つまり、union allするクエリでビューを作って、そのビューに対してselect *するマテビューを作成すれば高速リフレッシュ可能になる

# 手順

## 適当なテーブルを作成

- t1, t2
- union all前提のためカラムを合わせる

```
create table t1 ( c1 number, c2 number, c3 number );
create table t2 ( c1 number, c2 number, c3 number );
```

## MLOG(マテリアライズド・ビュー・ログ)作成

```
CREATE MATERIALIZED VIEW LOG ON T1 WITH SEQUENCE, ROWID( c1, c2, c3 ), COMMIT SCN INCLUDING NEW VALUES;
```

```
CREATE MATERIALIZED VIEW LOG ON T2 WITH SEQUENCE, ROWID( c1, c2, c3 ), COMMIT SCN INCLUDING NEW VALUES;
```

## ビュー作成

- rowidに列別名が必要
- union allする各select文で別リテラルのmarkerが必要

```
create view v1 as (
    SELECT t.c1, t.c2, t.c3, t.rowid rowid, 1 MARKER FROM t1 t 
    UNION ALL
    SELECT t.c1, t.c2, t.c3, t.rowid rowid, 2 MARKER FROM t2 t
```

## マテビュー作成

```
create materialized view mv1 REFRESH FAST on commit AS select * from v1;
```

## MV_CAPABILITIES_TABLEチェック

### utlxmv.sql実行

```
@?/rdbms/admin/utlxmv
```

### MV_CAPABILITIES_TABLE更新

```
TRUNCATE TABLE MV_CAPABILITIES_TABLE;
exec DBMS_MVIEW.EXPLAIN_MVIEW('MV1');
```

### MV_CAPABILITIES_TABLE確認

```
SELECT
    capability_name,
    possible,
    SUBSTR(related_text, 1, 8) AS rel_text,
    SUBSTR(msgtxt, 1, 60) AS msgtxt
FROM
    MV_CAPABILITIES_TABLE
ORDER BY
    seq
;
```

REFRESH_FASTがYなら高速リフレッシュ可

```
			
CAPABILITY_NAME	POSSIBLE	REL_TEXT	MSGTXT
PCT	N		
REFRESH_COMPLETE	Y		
REFRESH_FAST	Y	SCN base	
REWRITE	N		
PCT_TABLE	N	V1	表示された表がパーティション化されていません。
REFRESH_FAST_AFTER_INSERT	Y		
REFRESH_FAST_AFTER_ONETAB_DML	Y		
REFRESH_FAST_AFTER_ANY_DML	Y		
REFRESH_FAST_PCT	N		問合せに名前付きビューが含まれていると、PCT FAST REFRESHはできません
REWRITE_FULL_TEXT_MATCH	N		問合せのリライトはマテリアライズド・ビューではできません
REWRITE_PARTIAL_TEXT_MATCH	N		問合せのリライトはマテリアライズド・ビューではできません
REWRITE_GENERAL	N		問合せのリライトはマテリアライズド・ビューではできません
REWRITE_PCT	N		通常のリライトが不可能か、すべてのディテール表でPCTが使用不可能です。
PCT_TABLE_REWRITE	N	V1	表示された表がパーティション化されていません。
```

## 動作確認

```
insert into t1 values( 1, 1, 1 ) ;
commit;
select * from mv1 ;
```

commitしたレコードがmv1で確認できればOK

## 再実行用SQL

```
-- テーブル削除
drop table t1;
drop table t2;

-- MLOG削除
DROP MATERIALIZED VIEW LOG ON t1;
DROP MATERIALIZED VIEW LOG ON t2;

-- ビュー削除
drop view v1;

-- マテビュー削除
drop materialized view mv1;
```
【超簡単】CSS 画像をスライドにする実装方法

#  はじめに
綺麗なサイトとかによくある画像をスライドにしているのを真似したくなったことはありませんか？今回はそういった人向けにCSSだけで簡単にできる画像スライドの実装を紹介します。
完成形は下のようなイメージです！我が家の愛犬のちろです！
![chiro.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1081227/82736492-d249-da7f-17e7-12595a082f95.gif)

# HTML
```html:slide.html
  <div class="slide">
    <img src="static/image/chiro1.jpeg">
    <img src="static/image/chiro2.jpeg">
    <img src="static/image/chiro3.jpeg">
    <img src="static/image/chiro4.jpeg">
    <img src="static/image/chiro5.jpeg">
  </div>
```
ちなみに写真の相対パスはご自身のに変更ください。
筆者はflaskでアプリを作成しているためこのような階層になっております。
![スクリーンショット 2022-12-02 19.45.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1081227/c1ad8e4c-e558-dea3-bd3e-7b034794decb.png)

#  CSS

```css:slide.css
.slide {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  margin: auto;
  background: #fff;
}
.slide img {
  display: block;
  position: absolute;
  width: inherit;
  height: inherit;
  left: 100%;
  animation: slide-anime 15s ease infinite;
}
.slide img:nth-of-type(1) {animation-delay: 0s;}
.slide img:nth-of-type(2) {animation-delay: 3s;}
.slide img:nth-of-type(3) {animation-delay: 6s;}
.slide img:nth-of-type(4) {animation-delay: 9s;}
.slide img:nth-of-type(5) {animation-delay: 12s;}
 
@keyframes slide-anime{
  0% {left: 100%;}
  2% {left: 0;}
  18% {left: 0;}
  20% {left: -100%;}
  100% {left: -100%;}
}


```


## ※もしFlaskで書きたい人がいれば！

先ほどflaskの話も出てきたので、もしflaskでアプリを作っておりスライドにしたい方がいらっしゃればぜひこちらを参考ください
```html:slide.html
{% extends 'base.html' %}

{% block header %}
  <link rel="stylesheet" href="static/css/slide.css">
{% endblock %}

{% block slide %}
  <div class="slide">
    <img src="static/image/chiro1.jpeg">
    <img src="static/image/chiro2.jpeg">
    <img src="static/image/chiro3.jpeg">
    <img src="static/image/chiro4.jpeg">
    <img src="static/image/chiro5.jpeg">
  </div>
{% endblock %}
```

これが大事です！↓
```html:base.html
<!DOCTYPE html>
<html lang="ja">
   <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        {% block header %}
        {% endblock %}
        <title>Slide Sample</title>
  </head>
  <body>
    <div class="container">
	    {% block slide %}
	    {% endblock %}
    </div>    
  </body>
</html>  
```



## 最後に
いかがでしたでしょうか？
何か不明点や編集点などありましたらご連絡ください。
【Git】初回コミットを削除する方法

## 削除方法

以下のコマンドを実行すると初回コミットを削除できます。  

```terminal
git update-ref -d HEAD
```

2回目以降のコミットの含めて削除されます。  

すでに`push`済みの場合には`git push -f`する必要があります。
Power Automate の すべてのデータ型 と [作成]アクション について

この記事は、Microsoft Power Automate Advent Calendar 2022に参加しています。
カレンダー３ の 3日目 です。

# はじめに

Power Automate の[作成（Compose）]は、データの代入および参照を手軽に行うことが可能なアクションです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/344e5d87-570d-4284-c1bf-a0ebc7bf0398.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/2806a3c5-73c2-f3ae-49ae-0d71262ab587.png)

その動きは、[変数(Variable)]と似ていますが、ちょっと違います。
[変数]と比較すると、データ型の宣言や変数名の指定が不要なので手軽なのですが、使い方を理解していないと思い通りに利用できません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/1dd85ce1-e004-b827-80f6-3e9117e19ad2.png)

例えば、

* 代入した値のデータ型が期待するものと異なる　とか
* そもそも代入は、Input欄に直接入力するのか？、または式エディタを利用するのか？

など、仕様の理解が曖昧な状態では、利用するたびに試行錯誤する羽目になります。
このような無駄な時間を省くため、データ型や入力方法について仕様を押させていただければと思います。


# 前提

当記事は、[「気ままに勉強会 #38 データ操作について」](https://kimamani.connpass.com/event/266446/)で登壇した内容の一部抜粋になります。
Power Automate をメインに、Power Platform　について扱う勉強会になりますので、ご興味ある方は是非ご参加ください。

https://kimamani.connpass.com/

また、当記事では、上記で利用したスライドからスクリーンショットを引用します。
実際のスライドは以下をご覧ください。
https://speakerdeck.com/miyakemito/detacao-zuo-nituite





# [作成]アクションについて

[作成]アクションは[変数]アクションと似ていますが、[変数]アクションのように異なる値を再代入することは不可能です。
よって、フロー内では定数（constant値）として利用しするのがオススメです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/4e0d87d7-4c12-620b-0a2d-7f163f6c4a4e.png)

[変数]アクションとの比較になります。
[作成]アクションは命名や型指定が不要なため、手軽に利用可能だと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/6588c245-0d86-de98-2b6e-adf77710522c.png)

# [作成]アクションでの値の代入

以下の一覧は[変数]アクションにも共通しますが、値を[作成]アクションに代入する際のルールです。
Power　Automate で定義可能なデータ型は下記の通りです。これはJSONのデータ型と一致しています。

:::note info
日付型は存在しません
あくまでタイムスタンプの形をしている文字列として扱います
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/e918afab-6cd4-fdc3-088d-58233959b062.png)

また、この一覧の通り、データ型により[変数]アクションの **Input欄に直接入力** するのか **式エディタで入力** するのかは、決まっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/31339c09-b7c8-bd55-0064-1617ae7c272f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/6dff0ab0-d18e-1e29-97f8-68056bf7dc1c.png)

特筆すべきは、数字のみの文字列や、'true'および'false'を文字列として扱いたい場合は、式エディタを開き、''(シングルクォーテーション)で囲んで記載する必要があります。


# まとめ

データ型の仕様を理解し、手軽で便利な[作成]アクションを活用してみてください！
リッチテキストをキャンバスアプリで表示する

Dataverseのリッチテキスト列はモデル駆動型アプリで使うとスクショを張り付けることができたり、リンクを付けることができたり、装飾ができて便利です。
しかし、それをキャンバスアプリで普通にテキストラベルで表示すると、以下のように表示されてしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/398b8091-11a0-bbc3-b44b-b4d6d9127c6d.png)


# HTMLテキストコントロールと使う
ここに表示されているのはHTMLテキストです。リッチテキスト列はHTMLでデータを持っているので、そのまま出てしまうんですね。
そんな時に使えるのがのがHTMLテキストコントロールです。HTMLタグを認識して変換、表示することができます。

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-html-text

アプリ編集画面の[挿入]の[ディスプレイ]に含まれています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/5aba57fc-c102-2bff-696d-91ffd59cf5e9.png)


# 手順
実際のアプリのフォームでHTMLテキストコントロールを使う方法をご紹介します。デフォルトだとのテキストラベルで表示されてしまうので、変更しましょう。
キャンバスアプリの編集画面にて、HTMLタグが表示されているテキストラベルを選択します。
（このテキストラベルのテキストプロパティに「Parent.Default」が値として入っていることを確認します。）
これを消します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/7d769249-6477-b44b-23dd-bdbddb84cff8.png)

入れたいデータカードを選択したまま、[挿入]>[ディスプレイ]>[HTMLテキスト]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/45dfd875-49ca-e6d3-6d2e-8aa7352c83dd.png)

するとデータカードの中にコントロールが追加されます。
このHtmlTextプロパティの値を削除します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/d972d240-ee85-fde0-7464-2ec4ca8cc245.png)

もともとテキストコントロールに入っていた
「Parent.Default」を入れると、タグが変換され、文章だけ表示されましたね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/1be8ffc0-a76d-410f-acd6-3c1a98557ac9.png)
体育会系の部活からエンジニアになって思うこと

# はじめに
　新卒でオークファンにエンジニアとして就職した[@af_ono](https://qiita.com/af_ono)です。
入社してからは、二ヶ月しかたっていませんが、半年間インターンもさせていただいていたので、これまでに感じた学生時代と就職してからの違いや共通点、一人でプログラミングしていた時と仕事とのギャップなどを書いてみようと思います。
# 自己紹介
・入社前は業務未経験
・大学では、文系で経済を専攻
・中学から大学まで体育会系でチームスポーツの部活動をしていた。
・プログラミングスクールでC言語を中心にプログラミングと軽くコンピュータサイエンスを学ぶ。
・入社前は簡単なCRUDアプリを作っていた。
・入社後はKotlinでバックエンドのAPIを作ってる。
# 部活とエンジニア
## 共通点
### チームを組むこと
　私が所属していたアイスホッケーでは、フィールドに6人のプレイヤーが、それぞれのポジションでプレーします。自分が今エンジニアとして所属しているチームも、数人のチームを組んでプロジェクトに取り組みます。チームを組むという点で、スポーツと開発は少し似ていると感じます。
### コミュニケーション
　部活をする上で、コミュニケーションは、試合中や練習や共通認識の確認においても、非常に重要でした。入社する前は、エンジニアに対して、一人で黙々と取り組むという漠然としたイメージがありました。ですが、実際は、チームで開発をしているので、意外とコミュニケーション取ることがあると感じます。進捗の確認、共通認識の確認、相談、質問などコミュニケーションが大事な面は、部活と似ています。
### 個人のスキル
　アイスホッケーでは、スケート、パス、シュートなど様々な個人の技術を高めることで上手くなっていきます。エンジニアも様々なスキルを身につけていくことで、成長していくという点は、部活と似ていると思います。


## 違い
### コミュニケーション手段
　部活では、LINEのグループが、業務連絡的なコミュニケーションの手段となっていました。戦術的な話や、練習についてやチームのことなどは、練習の時や練習の前後にミーティングや個別で相談をすることが多かったです。一方、仕事では、slackというコミュニケーションツールを使っているので、気軽に報連相ができ、通話や画面共有ができるので、ちょっとした質問や相談なども、気軽にできます。便利なので、部活にもslackを取り入れればよかったなと思います。

### 運動
　私が所属していたのは体育会系部活でしたので、体を動かすことが当たり前で身近なことでした。一方、エンジニアは、基本的に座って作業をしているため、運動不足になりやすいと思います。健康のためにも、意識的に運動の習慣をつけ必要があると思います。私は、社内のフットサル部に週一で参加して、体を動かしたり、所属していた部活動にOBとして、参加させていただいて、運動するように心がけています。他のエンジニアの方も、ボルダリングやランニング、スイミングなどをしています。

### オンライン
　部活動は、オンラインではできないので、直接会うことが多いです。一方、エンジニアはリモートでも作業ができるので、オークファンでは、出社とリモートを選ぶことができます。ですので、フルリモートにして、あまり会社に来ない人もいます。（私は、週2出社、週3リモート）
エンジニアは、基本的にslackでコミュニケーションを取るので、直接のコミュニケーションは少し取りづらいと感じています。ですが、オークファンのエンジニアはお酒が好きな人が多いので、みんなで飲みにいくこともあります。一度、BBQもありました。そういった場で、直接のコミュニケーションをとったりしてます。
### 教育
　私は、業務未経験で入社しましたが、新卒で入社した人には、しっかりとした研修と研修期間が用意されているので、未経験の人にも非常に優しい会社だと個人的には感じています。


# エンジニアに対する入社前と入社後のギャップ
### レビューをしてくれる。
　一人で、プログラミングを勉強しているときは、誰かに見せることがあまりありませんでした。入社後は、必ず、誰かが自分のコードをレビューしてくれ、自分では気づかなかった間違いに気づくことができます。レビューは、非常に重要なことだと感じています。また、自分のコードをよりよくでき、勉強にもなります。

### コードを周りに見せることを意識する必要がある。
　チーム開発ですので、他の人に見せることを意識して書くといいうことは、入社後意識するようになりました。入社後は、可読性、汎用性、改修のしやすさ、コメントを書くなどを意識してコーディングするようになりました。

### 文章を書くことが意外に多い。
　エンジニアは、日本語を書くことが少ないイメージでしたが、設計書や仕様書の作成、将来に確認するための記録、チームの認識を揃えるためなどさまざまな場面で、日本語で記事を残すことが多いと感じます。

### 使えるものは使う
　以前所属していたプログラミングコミュニティが、for文が使えなかったり、指定されているライブラリや関数以外は使ってはいけないので、「ないものは作り出す」という心がけでプログラミングしていました。現在は、「あるものは全て使った方がいい」という考えになったので、便利なメソッドやライブラリは使うようになりました。

### 何が仕事に役に立ち、何が趣味の範囲か
入社前は、知らないことはできるだけ多く知るべきだと思って勉強していました。もちろん、スキルアップやできることの幅を広げるためには、大事な意識だと思います。ですが、自分の業務上の役割や自分のやりたいことを意識しながら勉強をすることが大事だと思います。便利なライブラリやメソッドなどもあるので、必要ではないことは知らないままにすることも大事だと思うようになりました。以前、チームマネージャーに、「車を運転するのに、車を作れる必要はない。」と言われ、納得し、この考えになりました。


# おわりに
　文系出身、体育会系部活出身から、エンジニアは珍しいとよく言われるので、未経験の方や同じようなバックグラウンドを持つ人の参考になれば幸いです。