<p>今年も振り返りしておきます！</p><h2 id="hb52e6bbc10">仕事</h2><p><span style="color:#24292e">2019年7月から </span><a style="color:#24292e" href="https://www.kepple.co.jp/" target="_blank" rel="noopener noreferrer">株式会社ケップル</a><span style="color:#24292e">に所属し、あっという間に2年半くらいが経ちました。</span><br><br>前半は、主に要求仕様が複雑な機能の開発をしていました。<br>複雑な仕様を理解し、それを実装に落とし込むことは難しいことですが、脳を使いまくっている感があって楽しかったかなと思います。あまり頻繁にはやりたくないけどw<br><br>後半は、以前から希望していた 0-&gt;1 の開発を行うこととなりました 🎉<br>ただ、まさかのフロント 〜 インフラまで全て1人で開発することとなってしまったので、怒涛の日々を送っていました。その分、開発の立ち上げや認証まわり(OAuth)など 0-&gt;1 ならでは経験が出来ており、とても有意義でした。<br>今のところ予定位通り開発出来ているので、このままリリース出来るように頑張りたいと思います！！！<br></p><h2 id="h24a4d124d1">プライベート</h2><h3 id="hd033fd2d27">引っ越し</h3><p>この世に生まれてからずっと都内に住んでいたのですが、ほぼ会社に出社することもないので少し郊外へ引っ越しました。部屋も広くなったので、より仕事に集中出来そうです。<br></p><h3 id="h18f67c3fee">OSS活動</h3><p>後半から<a href="https://github.com/frouriojs/create-frourio-app" target="_blank" rel="noopener noreferrer">create-frourio-app</a>の開発を少しお手伝いしていました。普段の書いているコードとは全く異なり、とても勉強になることが多かったです。（めっちゃむずいけど）<br>今年はあまりコミット出来ませんでしが、来年は出来そうなので、もう少し貢献していきたいなと思います。<br></p><h3 id="h715aa40308">英語</h3><p>11月くらいから英語弱者なので、英語をまた学び直しています。ドキュメントなどを読む際に苦労しないくらいの英語力は最低限身につけていきたいです。<br></p><h3 id="h6cfaa47bdb">ブログ</h3><p>毎月は書けてはいないですが、今年は12記事書けました。頻繁に書けてないですが、継続出来たのは良かったなと思います。来年も最低限このペースをキープしていきたいです。<br></p><h2 id="h1afe451c43">さいごに</h2><p>今年は初めてやることが仕事とプライベートの共にあり、あっという間の1年でした。<br>来年はラスト20代なので、悔いがないように積極的に色々なことに挑戦していきたいと思います！！！<br><span style="color:#222222">それでは、みなさま、どうぞ良いお年をお迎えください！</span></p>

2021年の振り返り

<h2 id="h8d027c8ed3">はじめに</h2><p>おはこんばんは。英単語の品詞をクイズ形式で学べる「<a href="https://part-of-speech-quiz.com/" target="_blank" rel="noopener noreferrer">品詞クイズ 📝</a>」を作ってみました！<br><span style="color:#0d0d0d">英語弱者な私が英単語の品詞を判別することが苦手で、他の似たようなサイトを利用していたのですが、</span>単語の意味が無かったり、読み方を音声で再生出来なかったりして、少し不便に感じたので作ってみました。<span style="color:#0d0d0d">はい、ただそれだけです。</span><br></p><h2 id="h5a9df7cbfb">品詞クイズとは？</h2><p>英単語の品詞判別をクイズ形式で学べることが出来ます。単語の最後を見ると品詞を推測する事が可能な接尾辞のパターン網羅しています。またその単語の意味や読み方も音声で確認することが可能です。<br><br>まず出題方法は問題順かランダムかを選択し、「Start」を押します。<br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/46f3b6db7cef4b87ab7ef72d41c5ea30/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-29%201.50.58.png" alt=""><br><br>すると問題が出題されます。音声を確認したい場合は音声マークを押すと再生されます。<br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/9fa6c317aed84888ae9827c65c7825a9/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-29%2018.35.33.png" alt=""><br><br>選択肢を選び、「解答」を押すと結果が表示されます。<br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/338f54114fcf477e92604335d5ec61a9/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-29%2018.18.43.png" alt=""><br><br>全問解答すると以下のように解答結果が表示されます！<br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/552b460cf2ae448d855b3627ab651ec0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-29%2018.21.15.png" alt=""><br></p><h2 id="h80c274ebdd">使用したライブラリ・インフラ・ツールなど</h2><p>主に以下になります。<br></p><ul><li><a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a></li><li><a href="https://chakra-ui.com/" target="_blank" rel="noopener noreferrer">Chakra UI</a></li><li><a href="https://cloud.google.com/text-to-speech" target="_blank" rel="noopener noreferrer">Text-to-Speech(google)</a></li><li><a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">Vercel</a></li><li><a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a></li><li><a href="https://www.figma.com/" target="_blank" rel="noopener noreferrer">Figma</a></li></ul><p>機能は多くないので、色々とは使っていません。よく利用する <a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a>,  <a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">Vercel</a>,  <a href="https://chakra-ui.com/" target="_blank" rel="noopener noreferrer">Chakra UI</a> でフロントは構築しています。テキストの音声再生のために <a href="https://cloud.google.com/text-to-speech" target="_blank" rel="noopener noreferrer">Text-to-Speech(google)</a> で音声情報を生成しています。<a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a> では英単語のコンテンツ管理をしています。最後にデザインを作るのに <a href="https://www.figma.com/" target="_blank" rel="noopener noreferrer">Figma</a> を利用しています。<br></p><h2 id="hff0a69ee28">工夫したこと</h2><h3 id="haf78e85f56">音声再生</h3><p>英単語の音声再生は以下のように実装しました。</p><ol><li>音声再生には400 万文字までで毎月無料の <a style="background-color:#ffffff" href="https://cloud.google.com/text-to-speech" target="_blank" rel="noopener noreferrer">Text-to-Speech(google)</a>を利用</li><li>ビルド時に登録されているを全ての英単語を1.で音声情報を取得し、MP3にして保存</li><li>2. を利用して再生</li></ol><p><br>音声再生毎に <a style="background-color:#ffffff" href="https://cloud.google.com/text-to-speech" target="_blank" rel="noopener noreferrer">Text-to-Speech(google)</a> を叩かれてしまうと無料の範囲を超えてしまう可能性があるので、ビルド時のみ音声情報を取得するようにしています。<br></p><h3 id="hb570a6676d">デザイン</h3><p>普段、デザインは一切しないのですが、デザイナーの方の気持ちを理解するために <a style="background-color:#ffffff" href="https://www.figma.com/" target="_blank" rel="noopener noreferrer">Figma</a> でデザインを作ってみました。デザインで意識したことは以下になります。<br></p><ul><li>暗記に良い？と言われる青色をメインカラーにした</li><li>実装の手間を無くすために<a href="https://chakra-ui.com/" target="_blank" rel="noopener noreferrer">Chakra UI</a> のデザインシステムを準拠する</li><li>暗記の妨げにならないよう表示内容はシンプルで簡潔にする</li></ul><p><br>感想としては、デザインセンスが無い私がこの分野を磨くためにはかなりの労力が必要だな再認識できました... デザイナーの方は本当に凄い！！！また <a style="background-color:#ffffff" href="https://www.figma.com/" target="_blank" rel="noopener noreferrer">Figma</a> は普段閲覧のみの利用なので使い方に苦戦しましたw この辺フォローしてくれた <a style="color:inherit" href="https://twitter.com/MykiiTech" target="_blank" rel="noopener noreferrer">@MykiiTech</a><span style="color:inherit"> さんありがとうございました！！！</span><br><br><span style="color:inherit">雑魚なのでデザインはスクショだけw</span><br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/f0ba1a895864467eb19ede95eca0ed20/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-29%2020.23.55.png" alt=""><br></p><h3 id="ha4f9001402">コスト</h3><p>今回はドメイン代だけです！基本的に自分が勉強するためだけに実装したので、無料で実装できるようにしました。世の中、無料で扱えるものが多くて最高ですね！<br></p><h2 id="h1afe451c43">さいごに</h2><p>簡単なものでも作ってみると結構学びがあって良いですね！ただ、これ作る時間あるなら英単語覚えた方がよかったかもですw<br><br>サイト：<a href="https://part-of-speech-quiz.com/" target="_blank" rel="noopener noreferrer">https://part-of-speech-quiz.com/</a><br>ソース：<a href="https://github.com/IshinoJun/part-of-speech-quiz" target="_blank" rel="noopener noreferrer">https://github.com/IshinoJun/part-of-speech-quiz</a><br></p>

英単語の品詞をクイズ形式で学べる「品詞クイズ 」を作ってみた

<p>最近、自分のコードレビューがイケてないなーっと思うことがあったので、今後気をつけることをメモがてらにまとめようと思います。<br></p><h2 id="h411400a885">コードレビューを依頼するときに気をつけること</h2><p>単純にレビューを依頼しただけではスムーズに終わらないケースもあるので、以下のポイントを気をつけていきます。<br></p><h3 id="h0f0da1c3d8">最終的なコードと動作のチェックを2度する</h3><p>ケアレスミスや動作確認をしていれば気づける不具合の指摘は、レビュワーの負荷にもなるので、減らせるように気をつけていたいと思います。<br>特に私は1度ミスするタイプの生き物なので、時間を置いて2度確認することで見落としを減らしていきたいです。<br></p><h3 id="hfda16f269d">相手の立場に立ったPRの説明をする</h3><p>最近、「〇〇だから△△した理解で合っているよね？」っと聞かれるケースが何度かあったのですが、これは「どのように解決したのか」という観点の説明が浅いせいだなっと最近思うこの頃です。<br>相手の立場に立って、疑問を持たれない説明になっているか考えながら説明を書くように気をつけたいと思います。<br></p><h3 id="h25f6a3cea7">より見てほしいところはコメントをする</h3><p>コード量が多かったりするとレビュワーも見切れないケースがあるので、</p><ol><li>動作に不安がある箇所</li><li>もうちょっと上手く書けないか相談したい箇所</li></ol><p>など、より見て欲しいところはコメントで主張していきたいと思います。<br></p><h2 id="h2b1f87d3db">コードレビューをするときに気をつけること</h2><p>自分が思っていることと相手の受け取り方が全然違ったりするので、以下のポイントを気をつけていきます。<br></p><h3 id="h4758d631db">自分の意見を伝えた上で質問する</h3><p>「これは必要ですか？」のように質問だけで終わらせるのはちょっと冷たい印象で捉えられるのと、議論が進みにくいコメントだなっと最近思うこの頃です。<br>「自分だったらこうするけど、これは必要ですかね？」のように自分の意見を伝えた上で質問した方が議論が進みやすそうなので、気をつけていきます。<br></p><h3 id="hc57e36d66d">優先順位を伝える</h3><p>コメントの数が多いと、どのコメントから対応したらいいか困るケースが自身でありました。<br>なのでコメントは、修正が必須か推奨か、それともただ質問なのか明確に伝えることを気をつけていきます。<br></p><h3 id="h31d4b6e301">否定的な伝え方をしない</h3><p>「〇〇にしてください」のような伝え方は否定的に捉えられやすいです。「〇〇のようにすると良いかもですね」のように否定的な伝え方にならないように気をつけていきます。<br></p><h2 id="ha214098e44">まとめ</h2><p>レビューする側・される側に共通することは「相手の立場で考える」だと思います。この辺りを十二分に意識して、相手を敬いながら生きていきます！！！</p>

コードレビューで今後気をつけること

<p><span style="color:#24292e">おはこんにちばんは。</span><span style="color:#222222">もうすぐ2020年が終わりますねー！</span><br><span style="color:#222222">今回は今年の振り返りと来年に向けた話を書きます。</span><br></p><h2 id="hb34093dbec">2020年の振り返り</h2><p><br>良かったこと・悪かったこと<br></p><h3 id="hb52e6bbc10">仕事</h3><p>2020年も株式会社ケップルの開発部に所属し、FUNDBOARD というWEBサービスの新規機能の開発及び既存機能のエンハンスをフロントエンドとバックエンド問わず行っていました。<br><br>新規機能の開発に関しては、ライブラリ選定・設計・開発まで一通り行い、大きめの機能をリリース出来たのは良い経験でした。この辺りから設計の重要性を理解し、実装速度を落とさずにバグの頻度を減らせたことも良かったです。（「バグが減った」とCTOにドヤ顔で言ったその日にバグを仕込んだことはここだけの話）<br><br>2020年7月頃からは、本番環境の権限を持つこととなり障害対応や本番デプロイも行うようになりました。障害対応はフロントエンドとバックエンド（時々インフラ）の両面で知識が求められるので、学びが多くこちらも良い経験だったと思います。（眠れぬ日々になった気がするけど）<br><br>ただ、後半は余裕が出てきたのか80%くらいのパワーで仕事をこなしていた気がしたので、それは良くなかったなーっと考えています。<br></p><h3 id="h24a4d124d1">プライベート</h3><p>業務で扱わないライブラリやフレームワークを実際に手元で色々動かしたりしてました。特に Next.js に関しては、このブログ兼ポートフォリオを作るなどして多くのことを学べたなと思っています。やはり <strong>手を動かすこと</strong> が知識の執着には重要だと、改めて認識しました。<br><br>ブログも頻度は多くはないですが、定期的に投稿が出来ているので良かったです。<br><br>あ、でも勉強会などあまり参加出来なかったのは良くなかった気がします。（コロナとかあったのもあるけど）<br><br>筋トレに関しては、全くダメでした。（唐突）<br>まず健康のためにやっているのに腰を故障するという本末転倒なことをしてしまいました。今後は低重量でどれだけ効かせられるかを意識して生きていこうと思います。</p><h2 id="h717b42fb41"><br>2021年に向けて</h2><p><br>目標など<br></p><h3 id="hb52e6bbc10">仕事</h3><p>初心に戻り、命を削りながら120%のパワーで120%以上の結果を出せるよう開発していたいです。セルフマネジメントは大事なのでこれに尽きるかなっと思います。方法はやるしか無い状況を作って自分を追い込むだけ。（精神論）<br><br>あと、0 ⇨ 1の開発が出来ればしたい。（願望）<br></p><h3 id="h24a4d124d1">プライベート</h3><p>引き続き、ライブラリやフレームワークを実際に手元で色々動かしたりして、そこで培った知見などをブログなどで外部に発信していきたいと思います。<br><br>勉強会などにも参加して、出来れば外部との繋がりも増やしていきたいです。<br><br>あと、副業してみたかったけどNGの決まりになってしまったので、個人開発で1つアプリをリリースできるよう頑張ろうかなーっと考えています。（多分）<br></p><h2 id="h1afe451c43">さいごに</h2><p><span style="color:#000000">定性的な内容になってしまいましたが、実際に書き出すことで今後意識すべきことが明確になったので良かったです。</span><br><br><span style="color:#000000">今年も楽しい一年でした！来年もたくさん楽しみながら結果出せるように頑張りますー！</span></p>

2020年の振り返りと2021年の向けた話

<h2 id="h8d027c8ed3">はじめに</h2><p>おはこんにちばんは。<br>Webのエンジニアに転身してそろそろ1年になるので、ポートフォリオ 兼ブログを作ってみた。<br>主にWeb周りの技術で色々と触った結果などをゆる〜く書こうかな。<br></p><h2 id="h696e98ee0a">自己紹介</h2><p>スタートアップで働く27歳。フロントとバック共に触っている。<br>詳しくは以下を見てもらえると。<br><a href="/profile" target="_blank" rel="noopener noreferrer">https://ji23-dev.com/profile</a></p>

その他

2021年の振り返り

英単語の品詞をクイズ形式で学べる「品詞クイズ」を作ってみた

コードレビューで今後気をつけること

2020年の振り返りと2021年の向けた話

エンジニアかもなので、技術ブログはじめてみた

その他

2021年の振り返り

英単語の品詞をクイズ形式で学べる「品詞クイズ 」を作ってみた

コードレビューで今後気をつけること

2020年の振り返りと2021年の向けた話

エンジニアかもなので、技術ブログはじめてみた

英単語の品詞をクイズ形式で学べる「品詞クイズ」を作ってみた