RUNTEQ4ヶ月目を振り返ってみたよ！
RUNTEQ生活もついに折り返し地点まで来てしまった…（泣）
毎度の如く今月やったことを勝手に振り返っていきます。
※注意点
RUNTEQのカリキュラムについては詳しく触れることができませんので、ご了承を。
①バックエンド（Rails）
RUNTEQカリキュラム基礎編終了＋応用編ちょっと
基礎編ついに終了〜〜〜❗️❗️❗️❗️
長かった基礎編がようやく終わりました。いやほんとに長かった…..
全体通してみるとそこまで苦労するようなところはありませんでしたが、「Railsでアプリ開発していく際の基本的な流れ」「Gemの扱い方」「Ajax」「DRY原則」「ログの読み方」など色々と学べて楽しかったです！
応用編に関しては、まだ始めたばかりですが他の受講生がいうようにコードリーディング力が鍛えられるなぁと感じてます。
基礎編と違って既存コードが与えられた状態で課題が始まり、そのコードを読み解きながら実装していくという形になっているため、基礎編の時とはまた違った力が要求されている感じです。
「現場ってこんな感じなのかな🤔」と思ったり。
あと先日ありがたいことにとあるエンジニアさんと話す機会があって、そこでテストの重要性に気づかされたため最近はテスト駆動を意識して実装を進めています。
現場の人から見たらテスト駆動と呼べるのか怪しい？ですが、実際にテストを書いてから開発を進めることで以前よりスムーズに実装できるようになったと感じています。
（実装終わった後のバグ修正みたいなのがほぼなくなった）
今後もしばらく続けていきたいところです。
あとはRails APIモードを使ったSPA開発をしてみたかったので、おなじみのUberEatsの教材をしてみました。
難易度的にいえばRailsとReactのきほんの「き」が分かってたら苦労しなさそうです。
ただこの程度のアプリ作るなら「Rails使う意味って果たしてあるのか….🤔」と思っちゃいました。（Firebaseでいいやんってなってる。）
もうちょい大規模なアプリ作らないとRailsのありがたみとかわからないんだろうなぁ〜年末までには作ってみたいですね。
②フロントエンド
アプリ作る
Reactで簡単なアプリ作成
TypeScript
Udemy：Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版（途中まで）
フロントは一杯やりました。（これ以外もやった気がする）
ちょっと書きたいことが多いので、項目ごとに分けてきます。
●アプリ作る
まずはこんな感じのアプリを作って、RUNTEQ内でリリースしてみました。
好きな漫画のセリフをカード形式にしてシェアできるアプリです。
（使ってくれるか不安だったけど意外とみんな使ってくれた….RUNTEQの皆さん本当にありがとうございました😭）
使用技術は
CRA
React(18.2.0)
JavaScript
Hooks
Axios
Firebase（Hosting）
Chakura-UI
と超シンプルなもの。（Firebaseは神。）
実装自体は計画通り1週間で終わりました。（設計含めるともうちょいいきましたが…）
技術記事ではないのであまり詳しいことは話しませんが、唯一はまったポイントをあげるとすれば「API選定」ですかね。
当初はGoogleBooks APIを使おうと思ってたのですが、画像が取れなかったり網羅性が低かったりというのがあって断念しました。
次に「アニメはAPIが充実してるイメージがあるからアニメのセリフをシェアできるアプリに切り替えよう」と思ってAnnict APIを使ってみるも、こちらも画像がうまくとれず断念。
Annict APIから取得してきたデータの画像を表示させてみたらほぼ画像なくて草。
— ゆー (@yusuke_blog1026) October 12, 2022
映画とか小説でうまくデータ取れてきてる人めちゃ羨ましい...あれほんとどーやってるんだ？？ pic.twitter.com/2HYL2szzr2
どうしようかな〜と思ってたところで「そもそも画像とタイトルさえ取れてくればいいのだから総合検索系のAPIでよくね？」と発想を切り替え、楽天ブックスの総合検索APIを見つけました。
この間にヘッダーロゴをいじったり、エンドポイント書き直したり、API key取得し直したりとだいぶ時間ロスした気がします。（この辺の試行錯誤がなければたぶん3日くらいで終わってた気がする）
外部APIは設計段階でちゃんと決めといた方が良いなぁと痛感しました😅
●TypeScript
次に以前から1番使ってみたいと思っていたTypeScriptの勉強を始めました。（今までフロント周りの勉強してきたのはこのためと言っても過言ではない！）
正直TypeScriptはめちゃくちゃ面白いです…
まず当たり前っちゃ当たり前ですが「型」が定義できることが何より嬉しい。（これだけでもうお腹いっぱい🤣）
自分はRUNTEQに入るまでC言語でいろんな実装をしてた経緯があったので、型がない（というより動的型付けなんですけど）RubyやJavaScriptのコードはちょっとやりづらさを感じていました。
そのため、TypeScriptによる型安全が保証されてるコードを書いてるとまるで実家に帰ってきたような感覚で開発を進められるので、安心感が半端ないです。
あとこれはTypeScriptに触れた人が満場一致で感じることだと思うのですが、VSCodeとの相性が抜群にいい！！
コンパイル前に自動で型チェックをしてくれるため、コーディング中にリアルタイムで問題箇所を指摘してくれたり、Type Guradを用いることでプロパティやメソッドの入力補完もこなしてくれます。
正直VSCode使ってる人はこれだけでもTypeScriptを取り入れる価値があると思いました！
（Railsやってるとよく出くわすNullアクセスの例外、いわゆるNoMethodErrorなんかはTypeScript+VScodeでほぼ防げる気がします。）
これ以外にもまだまだメリットがあるため、正直自分は今後JSを触る機会は少なくなっていく気がしてます。（それくらい便利）
もしTypeScriptに興味がある方がいらっしゃったら。こちらの学習ロードマップが分かりやすかったので1度目を通してみることをおすすめします！
●その他
あとフロント周りでやったことといえば動画や書籍での軽いReactのインプットくらいですかね。
TypeScript+Reactでの開発に入門したくて「りあクト！」を一通り読みましたが、著者の思想が強く反映されてるので好き嫌い分かれるかもなぁと思いました笑
またReactとTypeScript、ES6以上のJavaScriptに触れたことがない人にはなかなかハードだなぁとも。
ある程度の前提知識or実際に自分でReactアプリを作ってみたことがないと入ってこないものが多いです😅
（クロージャー、カリー化、アンビエントモジュール、高階コンポーネント…）
自分は「アンビエントモジュールとモジュール拡張の違いくらいは説明しろよ！」って思いました。
③インフラ
インフラあんまやってません。
強いていうなら前半はSAA（ソリューションアーキテクトアソシエイト）の勉強をしてましたが、教材の分量が多いのと
「なんかつまらん！こちとらアプリ作りたいんや！」
と思ってやめちゃいました😅
（就活フェーズあたりでやれたらなぁと思ってます。せっかくCLFとって半額券ゲットしたので使わなきゃ💦）
あとはTechpitの教材でGitHub Actionsを使ったCI/CDパイプラインの構築やCapistranoを用いた自動デプロイあたりを学びました。
「PFのインフラ基盤はこれ使いまわせばよくね？」と思うくらいいい教材でしたが、「ECS/Fargateでサーバレスにインフラ管理したいんじゃ〜〜」って思ってる人には物足りないかも？（こんな人↓）
④開発環境
一応ちょっとだけVSCodeやChromeの拡張機能を追加してみましたので、そのご報告。（便利そうなやつだけ）
●Quokka
まずはエディタ上でJavaScriptとTypeScriptのPlaygroundを導入できるQuokka.js。
Quokka.js runs JavaScript and TypeScript with instant feedback. Runtime values are updated and displayed in your editor next to your code, as you type.
（Quokka.jsは、JavaScriptとTypeScriptを瞬時にフィードバックしながら実行します。ランタイムの値は、あなたが入力するたびに更新され、エディタ上でコードの横に表示されます。）
↑こちらに書いてある通り、書いたコードを瞬時に読み取ってエラーを出してくれたり、ログを出してくれたりします。
（言葉だけではイメージしづらいと思うので、もし気になる方がいらっしゃったら公式の使用動画などを参考にしてください。）
自分は今まで何か関数を作って試し打ちしたいときなどはいちいち「node ファイル名」とかブラウザのDevToolsを使っていたので、これはかなり便利だなぁと思いました。
●LocatorJS
今月1番やばいなぁと思ったのがLocator JS。
（ライブラリとChrome拡張版があります。自分はChrome拡張の方を使ってます。）
あまりの便利さに最初使ったときは感動しました。
一言でいうと「Click on a component to go to its code」
つまり「コンポーネントをクリックすると該当コードまで移動するやで〜〜」ってツールです。
例えばReactでアプリ開発をしていると「ここのコンポーネントってどこに書いたっけ？」みたいなことがよくあるかと思います。
そういったときに、⌥ Optionを押しながら調べたいコンポーネントをクリックすると一瞬で該当コードの場所まで飛べます。
実演するとこんな感じですね。
フロント開発していく人にはかなり重宝するツールになりそうです。
●what we use
最後は拡張機能ってよりはただの面白いサイトです。
気になるサイトの技術を調べたいときなんかは「Wappalyzer」を使うかと思いますが「what we use」はそれの企業版です。
「あの企業ってどんな技術使ってるんだろう〜？？」って時にめちゃ便利です。
普通にググるだけだとそこまで詳しい情報ってでてこないと思うんですが、「what we use」だとビジネスツール、タスク管理ツール、コード管理ツールなんかも調べられますし、また純粋な技術スタックもかなり細かいところまで調べられる印象です。
現にツール検索画面はこのように上から下までびっしり詰まっています。
またサービスの開発経緯もQiitaにあがってて、こちらもなかなか面白いので、時間がある人はぜひ見ることをおすすめします！
⑤その他
RUNTEQの京都オフラインもくもく会に参加
技術的なこと以外でいうと、RUNTEQの京都オフラインもくもく会に（運営として）参加しました！
思ったよりもたくさんの人が来てくれることになっていたため、企画段階では「これ本当に大丈夫か…？ WiFiとか繋がらなかったらどうしよう….」みたいなことをずっと考えてましたが、いざ始まってみるとそんな不安が一気に消し飛ぶくらい楽しかったです！
いろんな人とオフラインで会うのはいいなぁと改めて思いました。（めっちゃ人見知りなんですがね😅）
参加してくれた皆さん、本当にありがとうございました！
⑥まとめ
以上今月やったことの簡単な振り返りでした。
こうしてみるともくもく会を企画したり、個人アプリを作ってみたりと初めてづくしの月でしたね。
来月も今月以上に色んなことにチャレンジしていきたい！
今回の記事がみなさんの参考になれば幸いです。
最後までご覧いただき、ありがとうございました🙇♂️