<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p data-line="1" class="code-line">こんにちは、masaです。9/2〜9/13の2週間、LayerX初のサマーインターンという記念すべき回に参加してきました！！今回はその振り返りを書いていこうと思います。</p>
<h1 id="layerx%E3%81%AE%E3%82%B5%E3%83%9E%E3%83%BC%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%B3%E3%81%AE%E6%A6%82%E8%A6%81" data-line="3" class="code-line">
<a class="header-anchor-link" href="#layerx%E3%81%AE%E3%82%B5%E3%83%9E%E3%83%BC%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%B3%E3%81%AE%E6%A6%82%E8%A6%81" aria-hidden="true"></a> LayerXのサマーインターンの概要</h1>
<p data-line="4" class="code-line">最初の3日間は講義があり、それ以降はチーム開発という流れでした。どのパートもLayerXが掲げる爆速開発のエッセンスが詰まっており、とても濃密な時間を過ごすことができました！<br>
LayerXについては以下の記事をご覧いただけるとよいかと思います！<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__9be4d498eeec7" src="https://embed.zenn.studio/card#zenn-embedded__9be4d498eeec7" data-content="https%3A%2F%2Ftech.layerx.co.jp%2Fentry%2F2024%2F05%2F09%2F182525" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://tech.layerx.co.jp/entry/2024/05/09/182525" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://tech.layerx.co.jp/entry/2024/05/09/182525</a></p>
<h1 id="%E8%AC%9B%E7%BE%A9%E3%83%91%E3%83%BC%E3%83%88" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E8%AC%9B%E7%BE%A9%E3%83%91%E3%83%BC%E3%83%88" aria-hidden="true"></a> 講義パート</h1>
<p data-line="9" class="code-line">講義パートでは主にハンズオン形式でフルスタック開発を行いました。使用技術はNext.jsとGoで、GraphQLでAPIを実装し、通信を行います。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/0d858df374d2-20240914.png" loading="lazy" class="md-img"></p>
<h2 id="%E3%83%90%E3%83%83%E3%82%AF%E3%82%A8%E3%83%B3%E3%83%89" data-line="12" class="code-line">
<a class="header-anchor-link" href="#%E3%83%90%E3%83%83%E3%82%AF%E3%82%A8%E3%83%B3%E3%83%89" aria-hidden="true"></a> バックエンド</h2>
<p data-line="13" class="code-line">RESTばかり触っていたので、GraphQLについてピンときていませんでしたが、</p>
<ul data-line="14" class="code-line">
<li data-line="14" class="code-line">オーバーフェッチ、アンダーフェッチを防げる(必要なもののみリクエストできる)</li>
<li data-line="15" class="code-line">単一エンドポイントで柔軟なクエリ</li>
<li data-line="16" class="code-line">gqlgenによるスキーマ駆動開発</li>
<li data-line="17" class="code-line">DataLoaderによるN+1の解決</li>
</ul>
<p data-line="19" class="code-line">などを学びました。実際に与えられたアプリケーションで機能追加を通して開発を行い、GraphQLのメリットを肌で感じることができました。講義を受け終わる頃には「RESTじゃなくて全部GraphQLでよくね？」と思ってました笑(もちろんRESTにもメリットがあります)<br>
また、与えられたアプリケーションはGraphQL、DDLからのコード自動生成やレイヤーごとの依存関係が整備されて設計されており、コードリーディングだけでもかなり勉強になりました...！</p>
<h2 id="%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" data-line="22" class="code-line">
<a class="header-anchor-link" href="#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" aria-hidden="true"></a> フロントエンド</h2>
<p data-line="23" class="code-line">普段はバックエンドばかり開発してるので、個人的にフロントエンドの講義はかなり勉強になりました。<br>
フロントエンドもGraphQLから自動生成でスキーマ駆動を行います。</p>
<ul data-line="25" class="code-line">
<li data-line="25" class="code-line">ディレクトリ構造と設計思想</li>
<li data-line="26" class="code-line">Suspenseと部分ローディング</li>
<li data-line="27" class="code-line">Apollo Clientとキャッシュ管理</li>
<li data-line="28" class="code-line">エラーハンドリング</li>
<li data-line="29" class="code-line">自動テスト</li>
</ul>
<p data-line="31" class="code-line">など、さまざまな内容の講義を受け、フロントエンドへの知見を深めることができました！ありがとうございます！</p>
<h2 id="%E3%81%9D%E3%81%AE%E4%BB%96" data-line="33" class="code-line">
<a class="header-anchor-link" href="#%E3%81%9D%E3%81%AE%E4%BB%96" aria-hidden="true"></a> その他</h2>
<p data-line="34" class="code-line">講義パートでは、フルスタック開発の他にもCTOのymatsuさんやCEOのfukkyyさんの講話を聞く機会があり、エンジニアリングだけでなく、自分のキャリアを考える良い機会となりました！！</p>
<h1 id="%E3%83%81%E3%83%BC%E3%83%A0%E9%96%8B%E7%99%BA%E3%83%91%E3%83%BC%E3%83%88" data-line="36" class="code-line">
<a class="header-anchor-link" href="#%E3%83%81%E3%83%BC%E3%83%A0%E9%96%8B%E7%99%BA%E3%83%91%E3%83%BC%E3%83%88" aria-hidden="true"></a> チーム開発パート</h1>
<p data-line="37" class="code-line">チーム開発パートでは、4人1チームとなり、法人ビジネスカードを題材とした実装を行いました。余談ですが、チームにサウナ好きが多いという理由で、チーム名は「SaunerX」にしました。サウナ→水風呂→整う、にちなんで熱意→休息→優勝という意味も込められています(？)</p>
<p data-line="39" class="code-line">基本的には、架空の企業さんからの要望一覧が与えられるので、その中で優先度をつけて実装し、最終日にプレゼンを行うという流れでした。ただ単に機能を実装すれば良いのではなく、定期的に行われるヒアリングを通してユースケースを理解し、UXを意識する開発が求められました。<br>
また、毎日デモ会という、チームメンターに1日で作ったものを実際に動かしてデモをする時間が設けられていました。毎日必ず進捗を生まないといけないという思いから、爆速で開発を進めることができました！</p>
<h2 id="%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" data-line="42" class="code-line">
<a class="header-anchor-link" href="#%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" aria-hidden="true"></a> やったこと</h2>
<p data-line="43" class="code-line">チームでは機能ごとにタスクを分担し、それぞれがフルスタックで開発することにしました。これによりバックエンド・フロントエンドの要件の食い違いが起きづらく、効率的に開発を進めることができます。<br>
自分は主にカスタム権限周りの実装を行いました。具体的には、アプリケーションを使う人を管理したいというユースケースに答えるために、ユーザーにロールを与え、1つのロールに具体的な操作権限を与えることができるようにしました。アイデア自体はAWSのIAMのロール・ポリシーを参考にしました！</p>
<h3 id="%E3%83%90%E3%83%83%E3%82%AF%E3%82%A8%E3%83%B3%E3%83%89-1" data-line="46" class="code-line">
<a class="header-anchor-link" href="#%E3%83%90%E3%83%83%E3%82%AF%E3%82%A8%E3%83%B3%E3%83%89-1" aria-hidden="true"></a> バックエンド</h3>
<p data-line="47" class="code-line">データベースにrolesとpoliciesテーブルを追加し、中間テーブルを持たせることで多対多でデータを持たせました。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/22d5f23a06a3-20240914.png" loading="lazy" class="md-img"><br>
ユーザーに紐づくポリシーはDataloaderを活用することでN+1問題を解消して効率的なデータフェッチを実現しています。<br>
フロントエンド側からのリクエスト内容から、必要なポリシーが含まれているかを判別することで権限制御を行います。</p>
<h3 id="%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89-1" data-line="52" class="code-line">
<a class="header-anchor-link" href="#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89-1" aria-hidden="true"></a> フロントエンド</h3>
<p data-line="53" class="code-line">今回のアプリケーションではログイン処理までは実装しなかったので、session情報から権限を取得するなどはできなかったのですが、モックでログインユーザーを選択し、バックエンドからそのユーザーのロール・ポリシー情報を取得する様にしました。<img src="https://storage.googleapis.com/zenn-user-upload/b99f842da062-20240914.png" loading="lazy" class="md-img"><br>
このポリシー情報をもとに、カード発行権限がないユーザーはカード発行ボタンが表示されないようにしたり、閲覧権限がないユーザーはurlを指定してもNot Foundを返す様にフロント側でも制御しました。</p>
<h2 id="%E5%AE%9F%E9%9A%9B%E3%81%AE%E7%94%BB%E9%9D%A2" data-line="56" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E7%94%BB%E9%9D%A2" aria-hidden="true"></a> 実際の画面</h2>
<p data-line="57" class="code-line">実際の画面がこちらになります！(ポリシーという名前はわかりづらいという意見があったのでアクションとして表示してます笑)<br>
<img src="https://storage.googleapis.com/zenn-user-upload/d525e3bf74b1-20240914.png" loading="lazy" class="md-img"><br>
アクションはこの画面外にもたくさんあり、ロールに紐づくアクションをカスタマイズすることで、さまざまな企業のニーズに合った設定を行うことができます。<br>
フロントエンド初心者ながらUIもそこそこ良い出来だと思ってます...！！</p>
<h2 id="%E6%9C%80%E7%B5%82%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E3%83%86%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" data-line="62" class="code-line">
<a class="header-anchor-link" href="#%E6%9C%80%E7%B5%82%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E3%83%86%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" aria-hidden="true"></a> 最終プレゼンテーション</h2>
<p data-line="63" class="code-line">最終プレゼンテーションで実際にデモをしながら発表しました。チームとして最優秀賞を取ることはできず悔しい結果になってしまったものの、毎日議論を重ね、お互いに助け合って走り切った結果、自分たちのチームが作ったプロダクトにメンバー全員が自信を持って発表を迎えることができたと思います！！<br>
メンターからのフィードバックでもチームワークではNo.1と評価していただきとても嬉しかったです！</p>
<h1 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" data-line="66" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h1>
<p data-line="67" class="code-line">総じてとても濃密で楽しい2週間でした！<br>
素敵なノベルティや、パートの各所に散りばめられたLayerXの開発エッセンスを肌で感じることができました。<br>
来年以降も本当にお勧めできるインターンなので、参加を検討してみてください！<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__fccb99d75ade3" src="https://embed.zenn.studio/tweet#zenn-embedded__fccb99d75ade3" data-content="https%3A%2F%2Fx.com%2Fms_eng__%2Fstatus%2F1834243693479674254" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://x.com/ms_eng__/status/1834243693479674254" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://x.com/ms_eng__/status/1834243693479674254</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__fc612d369ca7a" src="https://embed.zenn.studio/tweet#zenn-embedded__fc612d369ca7a" data-content="https%3A%2F%2Fx.com%2Fms_eng__%2Fstatus%2F1834590019912425715" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://x.com/ms_eng__/status/1834590019912425715" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://x.com/ms_eng__/status/1834590019912425715</a></p>


LayerXのサマーインターンに参加しました

LayerXのサマーインターンの概要

zenn-content

Discussion