20歳エンジニアが"これまで"・"これから"を述べる　【🎉アプリをリリースした・1000草🌱達成記念で投稿🎉】

この記事は、僕が
- 1000 contributionを達成した
- 145人所属する団体で使うメンバーサイトを2人で開発＆リリースした
という達成感のあること終えたので、一つの区切りとして

上記二つを主軸に
1. これまでやってきたこと
1. これからやること
の2つを絡めて書いた記事になります！（技術の話は少しだけになります🙏）

# 0.はじめに
初めまして、山本新（しん）と申します！
<img width="20%" alt="shinyamamoto" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/47536691-55d4-25ee-1bb3-17deb205cae5.jpeg">
・プログラミング研究会Tech.Uniの副代表
・フロントエンドをメインに、
```
Javascript ・ Typescript ・ Next.js ・ GraphQL
```
とかを触っている若干20歳の学生です。

# 1. アプリをリリースした🎉
これは、僕が副代表を務める、[プログラミング研究会Tech.Uni](https://twitter.com/TechUni1026)に所属する学生145名が使用するメンバーサイトを開発しました。

https://twitter.com/TechUni1026/status/1568147319228436480?s=20&t=bqBrc2uoydGMHOLyk-mivg

ただ、セキュリティ上Tech.Uniメンバー以外は入れません🙏
https://tech-uni-member-site.vercel.app/

*なので、今回は特別に何ができるかを3つ抜粋します！*
#### 何ができるか
1. メンバーページ
Tech.Uniは145名学生さんが在籍しているため、今まで誰がどの分野をやっているのか。同学年のメンバーは誰なのか詳細には把握できていないのが現状でした💦😵 それをきっかけに作成しました（そこを改善する一手を打てたのは大きいのかなと思っています）
 <img width="75%" alt="新規登録step1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/380bc744-4f40-3896-65b2-61d20c4e60e2.jpeg">


2. ログイン後の新規登録
 <img width="25%" alt="新規登録step1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/c972cc85-3208-d85d-72ad-602d3623c613.png"><img width="25%" alt="新規登録step1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/afee7a1a-2c2b-adb0-1bb1-6096e1391847.png"><img width="25%" alt="新規登録step1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/8791d8e0-8066-494f-42bf-b9d790261b4e.png"><img width="25%" alt="新規登録step1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/c9691ff9-b6bd-2e9a-f940-9eed0dd99a0a.png">

3. 管理画面からのステータス変更
最初に新規登録したユーザーは 📝未登録で来て、Slackで確認作業をしてから ✅登録済み に変更できるようにしました。
<img width="50%" alt="新規登録step1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/350b497b-2651-6869-ab71-5b8aa8cbc318.jpeg"><img width="50%" alt="新規登録step1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/63af7065-2847-2cc0-9981-7b6de1f990cd.png">
もちろん登録のフローなど凝った部分はありますが、セキュリティ上部外者が侵入できないような設計にしないといけないためここをどうするか悩みましたね。。

一応、全部のページを貼っときますね（拡大して下さい）
（ちょっと完全ではないデータもあるのでお許しを）
<img width="33%" alt="新規登録step1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/4d775fa8-9b8d-586b-c831-46b6185f4e7d.png"><img width="33%" alt="新規登録step1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/380bc744-4f40-3896-65b2-61d20c4e60e2.jpeg"><img width="33%" alt="新規登録step1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/823107b6-9b0e-402c-17b7-c8505f4ea4e0.png"><img width="33%" alt="新規登録step1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/2cb307ed-a5f8-ab83-5516-a176120be16b.png"><img width="33%" alt="新規登録step1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/4f5ac14e-1f7e-06cc-2a37-3b9310931a2d.png"><img width="33%" alt="新規登録step1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/488d5476-d926-54d8-e2c4-8a46d4eb418b.png"><img width="33%" alt="新規登録step1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/215c93c3-9c32-49ff-6da5-8731a41159c7.png"><img width="33%" alt="新規登録step1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/00cbddef-ecfa-838a-2696-e1505120a555.png"><img width="33%" alt="新規登録step1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/576f2839-e4be-36a7-6ebb-c81b775ba584.png">

###### 開発メンバー
 <img width="20%" alt="shinyamamoto" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/47536691-55d4-25ee-1bb3-17deb205cae5.jpeg"> <img width="20%" alt="code_yy" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/24f30323-f368-8026-6366-b4debd69082a.png">
[山本新](https://twitter.com/cocococo_panda)   /  [ユウト君](https://twitter.com/codeyy_dev)

###### 技術スタックと期間
*フロント* 　 　　　　　React・Next.js・Typescript 
*状態管理* 　 　　　　　Recoil
*CSSフレームワーク* 　 Tailwind CSS
*UIライブラリ* 　　　　 Mantine
*クラウド* 　　　　　　 Firebase
*ホスティング* 　　　　 Vercel


###### 振り返り
これまでハッカソンなどに参加してwebアプリ・ゲームなど作成したりしていたのですが、それが実際にユーザーに使われることはなく自分の書いたコードは屍となってきました。

- 正直なところ、開発するのであれば、人に使って欲しいし、いわゆる「ハッカソンにウケるプロダクトを作らないと受賞しない」というしがらみ
- どうせ4回生の強強エンジニアが技術的には圧倒するので、1・2回生で出てもそこまで。。。 ねぇ？？😢
みたいな考えを持っていました。

今回、
1. 人に使ってもらえることが確定している
2. ユーザーの声が直に聞ける・
2. 需要がある（自分が運営しているので何が必要かわかる）
2. 仲間とピアラーニング・協力しながら開発に熱中することができた→結果1185contributionになった笑

という4拍子揃っており、自分達で設定した最低リリースラインを突破しメンバーにリリースできたことを嬉しく思います！

<p align="center">
  <img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/487b44ef-dc07-b641-9e03-f9078293b5b6.jpeg" />
</p>

# 2. メンバーサイトを開発して学んだこと・次のステップ
## 学んだこと
- Typescriptと少しは仲直りした
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/c9a52465-a773-3093-0cf1-0dbf44242dfb.png)
といったツイートにもあるように、前まではTypescriptと仲良しになれていませんでした。
今回の開発でも、型エラーに苦戦した箇所が多々あり、ユート君（一緒に開発した人）に「型が治らん」とぼやいて何度も一緒に解決したのを覚えていますw
開発を通じてマシになったと思います。

#### ロジックを考えることの大切さ
 メンバーしか使えないようにするため、
初回アクセス時にパスワードを要求したり、管理側が承認していなユーザーはリダイレクトしたり、管理画面側にいけるユーザーを制御したりと設計段階で考えることがあり、ここをミスるとアプリケーションとして破綻するので、慎重に相談・実装を行いました。

#### コードの保守性を高める
フォルダ構造や、どの程度の粒度でコンポーネント分けするかや、Firebaseが絡む処理のロジック部分はUIと完全に分離させるようにする
などこの点においても、悩みましたが、結果的に保守性が高いコードを書くことができたと思います。
<img width="50%" alt="code_yy" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/5285435b-8ac0-ec9d-8317-a57c3977fe1c.png">

#### デザイン
 今回すべてのデザインは、僕の頭の中のものだけで作りました笑
Figmaなど一才使っていません
 ありがとうMantine

## 次のステップ（技術のみ）
今回、Apolloのようなデータフェッチのライブラリを使用できていません。
なので、例えば、左のような勉強会のデータをもとにして、ユーザーの情報も取得しないといけないページの場合、右の画像のように
fetchEventList()とfetchUserList()をuseEffectで、現状取得しています。
ですが、これでは、無駄な読み取りが多くなってしまっています。（React公式にもuseEffect使うの微妙じゃね？という記事が確かある）
<img width="50%" alt="code_yy" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/99cae45c-da99-2f7d-1ebb-b60c9ad8cd4e.png"><img width="50%" alt="code_yy" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/77e55fe0-5ecb-004d-66aa-e4396f6ca9c3.png">
なので、React Queryというデータフェッチライブラリをしようして無駄な読み取りを少なくしUXを爆上げしようと思います。


# 3.　1000草🌱を達成した
僕がプログラミング・ITの世界の片鱗に触れたのは、高校を卒業し大学の入学式までの間の時期のことで、
あろうことか、当時タッチタイピングもままならないのに、10個程歳の離れている社会人ばっかりの勉強会に飛び込んでいきました。
そこで、仲良くなった方に1年生の夏にReactを使って開発経験を積ませてもらったのが、僕がgitを本格的に使い始めた契機になりました。

話に戻りますね💦

Githubのcontribution、いわゆる **草🌱** と言います。
プログラミングに本腰を入れたのは、去年の11月なのでそこから数えて、約11ヶ月で1000草を達成しました！

**1000 contribution**はプログラミングを始めた頃には先輩のすごい量の草を見て
「こんな量の大草原を僕は、育てれるのか？？😵😵‍💫」となっていたのですが、気づいたら目標の1000に達しました。

![スクリーンショット 2022-09-08 23.42.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/d912caea-fbd1-e847-0c75-58ebb0957ef4.png)
今回、メンバーサイトの開発に熱中していた中で、気づいたら10000contributionsを達成していましたが、やはり
他人がどのくらい草を生やしてるとか云々関係なく、僕の中で設定してた1つの目標が達成されることは何より嬉しいですね！！

# 4. 僕のこれまで
正直、開発においては良い思い出の方が少ないかもしれないですね笑

- 1年生の7月頃、ノーマウント勉強会の有志メンバーで、Reactのチーム開発にJSが0の状態で入った（分からん過ぎて泣いてた記憶があるww）
- 11月にプログラミング研究会Tech.Uniに入会した
- 11月にインターンに初めて応募し、初めてJavascriptと面と向かって対峙しボコボコになった😱
- 2回ハッカソンに出場したが、何も残せず、ただただ悔しい思いをした😰
- 1年の2月に初めて実務に入り、そこでは Next.js・Typescript・GraphQL・Apollo・GCPというモダンな技術に入り、苦戦はありつつも、もがいた
- ココカラ勉強会で[Recoilについて（資料）](https://www.canva.com/design/DAE60wSp0A0/cRz9UdY-d_tnJMTbUKfPEg/view?utm_content=DAE60wSp0A0&utm_campaign=designshare&utm_medium=link&utm_source=homepage_design_menu)LTをした
- [React18(github)](https://github.com/shinyamamoto0422/react18)の新機能のLTを[デプロイしたもの](https://react-ver18-hv7s1p4ts-shinyamamoto0422.vercel.app/concurrent)
 （start Transionのデモページだけがオリジナルで他ページはUdemyの講座を参考にした）[資料](https://www.canva.com/design/DAFD-Nh7I1g/b-74_ELq3jH7fymYExZA0A/view?utm_content=DAFD-Nh7I1g&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton)
- ノリと勢いで謎の[ポートフォリオ](http://shin-yamamoto.vercel.app)を作った （3Dで作りたくYoutubeを参考にしたので完全にオリジナルではない🙏）
- Tech.Uni内で1回生の1on1ができる環境を整備した
- 夏・6週連続で、Tech.Uni内で勉強会を開催する手配・実施をした（進行中）
  - ↓こんな感じ
　<img width="40%" alt="code_yy" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242042/2206c334-d8b9-eb13-04ab-c51af3331a37.png">
- [Javascript非同期処理を完全に理解する勉強会](https://github.com/shinyamamoto0422/Async-Await-study)を行った。（cloneしたら中身わかると思います）
- メンバーサイトをリリースした　**← 今、ココ**


# 5.「これから」

- 来月に僕は、Tech.Uniの代表になります
  - これまでの人数が多いだけのTech.Uniではなく、本当の意味で強いエンジニアが集まっている学生団体・組織化出来ており、属人化しない組織を目指します🫡
  - メンバーサイトで、明確にできてなかった部分・メンバーに提供できていなかった価値を提供するため開発を続ける

- 元々、経営・起業などビジネス的なことを目標に始めたプログラミングですが、このタイミングでエンジニアに全振りは辞め、ビズに寄ります *（そもそもエンジニア就活早い問題はあるのでこの時期がベスト）*


- 僕は小さい頃から、おばちゃんに好かれるスピードが尋常じゃなく早いです笑 
  - その分その世代の人も好きです。なので、その世代の方が *健康になる* ・ *笑顔になる* ビジネスをやります（今動いてることにも関係します😎）


# まとめ
ずっとしたかったことを、この時期にやっと達成し、自分のことを中心にこの記事を書きました。
僕は、マイペースにコツコツ色々とやっていきます😆

最後まで読んで頂きありがとうございました

もし、コーヒーを買っていただけると、すごく励みになります
https://www.buymeacoffee.com/shinyamamoto

|


|

|


*後書きとふと書いてて思ったことのぼやき*
```
よく、3ヶ月で〇〇達成とか言う人がいますが、何においてもそうですが、
- 触り始めた時期をスタートとするのか
- 本腰を入れて始めた時期をスタートとするのか
など人によって認識が曖昧すぎるため、そこで「自分なんて。。」と悲観的になる必要はないと思います。
```


次はゴリゴリ技術系の記事を書こうかな、