ポートフォリオサイトをNext.js + Goでリプレイスしました！

ポートフォリオサイトをリニューアル・ブログを開設しました！

<h1 id="h8d027c8ed3">はじめに</h1><p>8月9日～8月27日にかけての3週間、VOYAGEのTreasure 2021に参加してきました。非常に濃い3週間だったので、参加するまでの経緯もあわせてこのエントリで振り返っていきたいと思います。</p><h1 id="h2ae2dc0e4e">参加するまでの話</h1><p>一緒に参加したぴしこくんも<a href="https://p4ko.com/posts/treasure21/" target="_blank" rel="noopener noreferrer">レポート</a>に書いていたのですが、僕も彼と同じ早期選考枠で3月に応募・面接し、4月に参加が決まっていました。参加する前の想いとしては、</p><ul><li>どちらかというとフロントエンドが得意で、サーバサイド・インフラに苦手意識があったので克服したい！</li><li>普段出会えない方々と出会って交流したい！</li><li>学生でのチーム開発をしてみたい！</li></ul><p>を目的としていました。<br>1つ目を具体的に言うと、サーバサイド・インフラをやるときもなぜこのようなコードを書いたのか、なんとなくではなく明確な理由をもって説明できるようになりたいということです。またGoを書けるようになりたいと思っていたので、ちょうどいい機会でした。<br>2つ目に関しては、僕は経済学部に所属しており周りにエンジニア志望の学生がほとんどいなかったので、全国から集まってくる学生と交流できるいい機会だと思っていました。<br>3つ目に関しては、大学1年の後半からずっと長期インターンをしているのでチームでサービス開発をすることには慣れているものの、全員学生のチームでアイデア出しから行って短期間で開発をする、というのはやったことがなかったので経験してみたいなと思っていました。</p><h1 id="h6613de0b45">講義期間</h1><p>Treasureの前半では、各技術領域に関する講義が行われます。1日目はバックエンド（Go）講義、2日目はフロントエンド講義、3日目はインフラ講義でした。どの講義も聞くだけではなく、じゃあ今聞いた内容を実践してみよう！という感じで課題が与えられます。<br>実装する前に4、5人のグループに分かれてどのように実装するかを話し合うのですが、これが新鮮でした。はじめに実装したい機能の理想形を考えつつも、講義課題の制限時間はとても短いので制限時間内で実装しきれるようにコアな部分だけにそぎ落としていく過程で様々な意見が飛び交い、面白かったです。また課題が終わった後は講師の方々にPRをレビューしていただけます。同じ課題でも実装方法やコードの書き方が人それぞれだったので学びが多く良かったです。</p><h1 id="h1bfd792a1e">中間課題</h1><p>講義終了後、学んだ内容をもとにしてベースアプリに機能を追加する、という中間課題が与えられました。僕は苦手なバックエンドを後回しにしてそのままやらない危険性があったので、いいね機能だけは絶対実装する！と決めてAPI（Go側）から書き始めました。（いいね機能の実装が完了した後は<code>react-markdown</code>入れたり、UI整えたりなど案の定フロントに寄っちゃっていました笑）<br>中間課題期間終了後、クルーの方からフィードバックをいただけたり、みんなのPRを覗くことができたりして勉強になりました。</p><h1 id="h9d68fdacad">講義期間②</h1><p>Treasure2週目はDB講義とアイデア講義からはじまりました。<br>DB講義はあの<a href="https://twitter.com/t_wada" target="_blank" rel="noopener noreferrer">t-wadaさん</a>からデータモデリングについて講義していただきました。これまで何度かDB設計はしたことがあるのですが、なんとなくでやってしまっていたなぁと反省しました。これも聞くだけではなく、実際にグループに分かれてデータモデリングを実践していったのですが、前の講義のとき以上に議論が白熱していい経験でした。<br>アイデア講義では、時流をもとにUNS（User, Needs, Solution）を考えていくという手法を学んだあと、これまで同様グループに分かれてそれを実際に体験することができました。</p><h1 id="hd2917bb42a">チーム開発</h1><p>すべての講義が終了した後はいよいよチームに分かれての開発がはじまります。テーマはほぼなにも決められていないに等しいので、アイデア講義の内容をもとにそれぞれのチームで1から開発するプロダクトのアイデアを考えなければなりません。僕たちのチーム「energy-drinkは一日2本まで」では、まずはじめに開発期間から逆算し、どの日にどこまで進んでいる必要があるかを考え全体の開発計画を立てました。実際にこの計画通り順調に開発を進めることは難しく、なかなか思うようにいかないところもありましたが、この計画があったからこそ現在の状況や今何をいつまでにしなければならないのかが明確化され、とても良かったです。<br>その後さっそくアイデア出しを行ったのですが、アイデアはどんどん出てくるけどそれをまとめる（収束）ことがなかなかできなかったり、考えが思うようにメンバーに伝わっていなかったり、僕だけですが大学にワクチン接種に行って半日ダウンしてしまったりと、様々な困難がありました。僕たちのチームはとことん話し合っていたので、アイデア提出期限までに決まるのかなとちょっと不安でしたが、何とか間に合わせることができました。<br>いざ、設計・開発のフェーズに移ります。DBやAPIは全員で設計し、その後各々で実装という流れを取りました。この設計フェーズでもかなり細かいところまで議論してしまうというシーンがちょくちょくあり、そのたびにサポーターさん（クルー）から助けられていたなぁと感じます。しかし、この設計の段階で最低限プロダクトとして成り立つためのコア機能のみにそぎ落とすことができたため、それ以降は比較的余裕をもって開発できたように思います。コードフリーズの2、30分前には開発が完了できていたのも良かったです。<br>結果的に、僕たちのチームが開発した「俺でも自炊できるくん」はグランプリ・UI/UX賞をいただくことができました。</p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">グランプリ&amp;UI/UX賞！！！🎉<br>オンラインなのもあってまだあまり実感がわかない、、<a href="https://twitter.com/hashtag/voyage_intern?src=hash&amp;ref_src=twsrc%5Etfw">#voyage_intern</a></p>&mdash; ほり (@horri1520) <a href="https://twitter.com/horri1520/status/1431185551424585731?ref_src=twsrc%5Etfw">August 27, 2021</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br>実装が終わってやり切った感に満ち溢れていたのと、オンラインということもあって最初はあまり実感が湧いていませんでしたが、チームに分かれてから何度かあったサポーターさんたちとの面談で「やるからにはグランプリを獲りたい」と言っていたのでとてもうれしかったです。</p><h1 id="h362f81c859">Ajiting</h1><p>今回のTreasureは講義から開発まですべて定時（10時～6時）内で行われたのですが、VOYAGEには定時後に雑談したい人が集まりわいわいする「Ajiting」という文化があります。僕はオンラインでのコミュニケーションが苦手なところがあり、Treasureの序盤は講義の中でもAjitingでもあまり積極的に話せていなかったのですが、だんだん慣れてきた＆みんなのことがわかってきたころからこのAjitingでかなりみんなとの仲を深めることができました。他チームがどのように開発を進めているのか聞いてみたり、クルーの方に普段どんなことをしているのか聞いてみたり、<a href="https://task4233.hatenablog.com/entry/2021/08/30/020506" target="_blank" rel="noopener noreferrer">たすくくんのエントリ</a>にもありましたが深夜にゴリゴリの技術トークをしてみたりと、開発の時間が制限されていたからこそしっかりとコミュニケーションを取れる時間が生まれてとても良かったです。なんならTreasure終了後でも時々集まることがあるので、このようなコミュニケーションの機会を作っていただけて感謝しかないです。</p><h1 id="h1afe451c43">さいごに</h1><p>様々なことがありとても密度の濃い3週間でした。一言でまとめると「めっちゃ楽しかった！」です。先輩からTreasureを勧められたことがきっかけだったのですが、参加して本当によかったなと思っています。3週間の間に起こったことをこのエントリに全然書き切れていない！という感じですが、すべてをまとめていてはとんでもない文章量になってしまうのでこのくらいにしておきます。<br>途中ちょくちょく出てきましたが、一緒に参加したTreasure生たちも記事を書いているのでよかったら見てみてください！</p><ul><li>たすくくんの記事<a href="https://task4233.hatenablog.com/entry/2021/08/30/020506" target="_blank" rel="noopener noreferrer">『VOYAGE GROUPのTreasureに参加して圧倒的成長をしてきた』</a></li><li>ntkくんの記事<a href="https://ntk-ta01.hatenablog.com/entry/2021/08/30/173513" target="_blank" rel="noopener noreferrer">『VOYAGE GROUPのインターン、Treasure 2021に参加した</a><a style="background-color:#ffffff" href="https://ntk-ta01.hatenablog.com/entry/2021/08/30/173513" target="_blank" rel="noopener noreferrer">』</a></li><li>ぴしこくんの記事<a href="https://p4ko.com/posts/treasure21/" target="_blank" rel="noopener noreferrer">『🚀VOYAGEのインターン「Treasure」に参加しました2021』</a></li></ul>

VOYAGE GROUPのTreasure 2021が最高だった

<h1 id="h8d027c8ed3">はじめに</h1><p>今年3月の27日～28日にかけて、株式会社サイバーエージェントさん主催の「CA Tech Challenge 2days Webフロント向け 開発型インターンシップ ONLINE」に参加してきました！社員さんたちが「ブログ書いてね！」とおっしゃっていたのですが、僕はブログをやっていなかったため<a href="https://k-hori.com/blog/posts/csuho40r7wt" target="_blank" rel="noopener noreferrer">Nuxtでこのブログを開発</a>するところからはじまり、1ヶ月近く経ってしまいました（汗<br>それでは、1ヶ月越しになりますが時系列で振り返ってみたいと思います！</p><h1 id="hcb8433d3da">1日目</h1><h2 id="hc315754485">開幕</h2><p>zoomではじめて参加者・メンターさんたちと顔合わせして、いろいろ説明などがあったあと、今回のテーマが発表されました。その内容は「用意されたAPIを使って<strong>ECサイト</strong>を開発する」というものでした。このインターンは2日間、ハッカソン形式でそれぞれ個人開発し、最後に成果発表をするという流れになっています。かなり時間が限られているので、使ったことのある技術をベースにちょっと新しいことにも挑戦してみたいなぁ、などと思っていました。</p><h2 id="haf8fa22f8c">チームに分かれ、開発</h2><p>個人開発ではあるものの、あらかじめ参加者3人+メンターさん1人のグループが決められており、zoomを繋ぎながら作業してわからないことが出てきたらいつでも質問できる（手厚すぎる、、）というスタイルでした。それぞれ自己紹介し軽く雑談したあと、いよいよ開発がスタートしました。</p><h2 id="h6c86d31640">技術選定</h2><p>参加当時、React系のフレームワーク（主にReactとGatsby）は1年近く経験があって、Vue系のフレームワーク（Vue.jsとNuxt.js）を2ヶ月ほど前から使い始めたという状況だったので、技術的挑戦の意も込めてNuxt.jsを使うことに決定。UIライブラリはVuetify.js、デプロイ先はVercelを採用しました。Vuetifyは使ったことがありませんでした。VercelはSSGでのみ使用していましたが、今回はAPIから商品情報をフェッチしてくる必要があるので初めてSSRをすることにしました。（VercelでSSRができるとは思っていなかった）</p><h2 id="hec09f702c0">ひたすら型定義</h2><p>TypeScriptを導入していたので、始まってすぐはUIや設計を考える前にひたすら型定義や環境の整備（lint, huskyなどの導入）をしていました。（APIのレスポンスにも型を付けていました。型は人権。）<br>しかし、チームメイトはコンセプト・設計思想（なんならターゲットユーザーまで！）を先に考えており、ビューの実装に取り掛かっていたため（すごい）、進捗共有の際に自分だけ見せられるものがなく正直めちゃくちゃ焦っていました。</p><h2 id="hbdf7ae28a6">夜は長い</h2><p>夜の方が生産性が上がり集中してコードを書けるタイプ（よくない）なので、zoomが終わってコンセプトやUIを決めてしまった後は夜の3時くらいまでひたすら実装していました。</p><h1 id="hc9b75b8591">2日目</h1><h2 id="h57c887254d">方向転換</h2><p>1日目夜の成果で最低限のレギュレーション（商品一覧と個々の商品詳細が見れる状態）は満たすことができました。作り込みたい人のためにカートAPIが用意されていて、ユーザーやカートといった機能も実装できたので本当はしたかったのですが、発表の時間までに実装しきれる自信がなかったためUI・UXを整えていったりレスポンシブ対応したりという方向に切り替えることにしました。具体的には、APIを叩いている間SkeletonやCircularを表示する・画像周りのパフォーマンス向上・メタデータ・OGPあたりをやりました。</p><h1 id="h6a434dc9d3">成果</h1><p>実際に開発したECサイトがこちらです。<br><img src="https://images.microcms-assets.io/assets/da85014d1c1e441f9602d537a0361842/522e545416df47b19568886e96aa5431/2021-03-28%20(11).png" alt=""><br>（↑ アイテム一覧画面）<br><img src="https://images.microcms-assets.io/assets/da85014d1c1e441f9602d537a0361842/0ee76e0251844f61be3d48003c383acd/2021-03-28%20(12).png" alt=""><br>（↑ アイテム詳細画面）<br><br><strong>ユーザーが目的のアイテムを見つけやすいストア</strong>というコンセプトのもと開発しました。カテゴリでアイテムを絞り込めたり、新着順・価格の安い順でソートすることができたりします。機能実装というよりはUIやUX、使っている中での心地よさに重点を置きました。<br>さらに、ユーザー目線の使い心地だけでなく、開発者目線の開発しやすさ（Developer Experience）にも力を入れました。<code>ESLint</code>, <code>Prettier</code>, <code>husky(lint-staged)</code>, <code>stylelint</code>, <code>commitlint</code>を導入し、コミットメッセージにはprefixも入れました（個人開発ですが！笑）。ほかにもAtomic DesignやSCSSなど、開発体験向上のために知っている要素は全て取り入れました。</p><h2 id="h2673c9779e">成果発表</h2><p>zoomで参加者全員の成果発表をしました。みんなすごかったです。決済機能や音声認識からの形態素解析で音声制御などインパクトある機能を実装してきた方もいましたし、何より全員目の付け所が違うので同じAPIを使っていてもいろいろな方向性・コンセプト・機能が生まれてきていていいなと思いました。<br>成果発表の後、メンターさんからのフィードバックや表彰などがありました。メンターさん、はじめてのVercel SSRデプロイで詰まっていた時に解決策を見つけてきてくださったり、方向転換の際にも相談に乗ってくださったり、すごく手厚いなと思っていたのにさらにフィードバックもあり驚きでした。フィードバックの内容も的確だったので、今後いいところは伸ばしつつ、頑張らなきゃいけない点はどんどん改善していきたいと思います。表彰の方は、チームメイトと共に3位をいただくことができました！自分の作ったものを評価していただけて、モチベーションになりました。</p><h1 id="ha214098e44">まとめ</h1><p>自分の良かったところや課題が把握できたり、他の参加者からの刺激やモチベーションが得られたりと、2日間ながら充実したインターンでした。学生エンジニアの知り合いも増えたので、負けないように・もっとつよつよになれるように今後も頑張りたいです。<br>読んでくださってありがとうございました！</p>

CA Tech Challenge 2days Webフロント向け 開発型インターンシップ ONLINEを振り返る

<h1 id="h8d027c8ed3">はじめに</h1><p>Webフロントエンドに手を出し始めたころからずっと、自分のポートフォリオサイトを作りたい！と思ってドメインまで取得していたのですが、なかなか時間がなく作れずにいました。しかし、現在長期インターンしているnoteのフロントエンドがNuxt.jsであったことがきっかけとなり、これまでReact系のフレームワークでしか開発してこなかったので勉強もかねて開発をはじめよう！と思い立ちました。</p><h1 id="h0f3fa95800">このサイトの技術面</h1><h2 id="h03726fb0df">技術スタック</h2><p>まずはこのポートフォリオサイト（+ブログ）の技術面について紹介していきます。</p><ul><li>言語: TypeScript</li><li>フレームワーク: Nuxt.js</li><li>UIライブラリ: Vuetify.js</li><li>ホスティング: Vercel(SSG)</li><li>CMS: microCMS</li><li>シンタックスハイライト: highlight.js</li></ul><p>基本的に全ページSSG(Static Site Generation)で統一しており、Vercelでのビルド時にのみAPIへのデータフェッチが走り、静的なHTMLが生成されるようになっています。APIとはmicroCMSのことで、TOPページのお知らせやブログ記事の管理に使用しています。</p><h2 id="h0f12ce8a89">リポジトリ環境</h2><h3 id="hf43cd0b9ed">linter類</h3><ul><li>ESLint</li><li>Prettier</li><li>husky(lint-staged)</li><li>StyleLint</li><li>CommitLint</li></ul><p>詳しくは後述しますが、これらは<code>create-nuxt-app</code>で一括導入しました。</p><h3 id="hb704ab42a8">SCSS</h3><ul><li><code>sass-loader</code> (^10.1.1)</li><li><code>node-sass</code></li><li><code>@nuxtjs/style-resources</code></li></ul><p>あたりをインストール後、<code>@/assets/styles</code>内にGlobalなSCSSを書きました。これにより、各コンポーネントから<strong>import不要</strong>で<code>mixins</code>, <code>variables</code>を使えます。Reactを書いていたころはそもそもCSSしか書いていなかったのですが、Global SCSSの便利さには驚愕しました。もう元には戻れません。<br>さらに、各コンポーネントで</p><pre><code>&lt;template&gt;
  &lt;div class="o-hogeComponent"&gt;
    &lt;p class="o-hogeComponent__paragraph"&gt;hoge&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre><p>上のような<code>template</code>を書いたうえで</p><pre><code>&lt;style lang="scss" scoped&gt;
$block: ".o-hogeComponent";
#{$block} {
  display: inline-block;
  width: 100%;
  &amp;__paragraph {
    font-size: 16px;
  }
}
&lt;/style&gt;</code></pre><p>このように<code>&amp;__</code>で<code>class</code>を書き分けることでSCSSのスコープと実際にスタイルを当てるタグを対応させることができます。<br>この書き方をすると、条件に応じてスタイルを変えたい（<code>active</code>なタブ、非同期処理実行中のボタン…など）場合に<code>string</code>なクラス名を変化させてあげるだけで容易にスタイルを動的に変化させることができる（しかもピュアなSCSS！）のがとてもうれしいです。<br>ちなみに、クラス名についている<code>o-</code>はAtomic Designでの粒度を指しています。</p><blockquote>p- =&gt; pages<br>t- =&gt; templates<br>o- =&gt; organisms<br>m- =&gt; molecules<br>a- =&gt; atoms</blockquote><h3 id="h9ff89bd48f">ディレクトリ構成</h3><p>基本的にNuxt本来のディレクトリ構成を崩さないようにしています。</p><ul><li>assets　Global SCSSとアイコン画像（<code>@/assets/images</code>に配置した画像は<code>webpack</code>のモジュールとして扱われる）</li><li>components　各種コンポーネントをAtomic Design式のディレクトリ構造で格納</li><li>config　APIやドメインなど環境変数周りを格納</li><li>constants　様々な定数を格納（Vuetifyの<code>snackbar</code> typesとか）</li><li>contents　CMSで管理はしていないけど<code>v-for</code>で吐き出したいコンテンツを格納</li><li>pages　その名の通り各ページの<code>.vue</code>ファイルを格納</li><li>static　画像や<code>favicon</code>などの静的ファイルを格納</li><li>types　TypeScriptなので型定義をここに格納</li><li>utils　Date型データを<code>toLocaleDateString()</code>するものなどちょっとした関数を格納</li><li>view-models　APIからフェッチしてきたデータを必要なものだけに成形するための関数と型定義を格納</li></ul><p>本当は<code>api-clients</code>なんかも切り出したかったのですが、状態管理を入れておらず、<code>pages</code>上の<code>asyncData()</code>でしかAPIを叩かないので今回はしていません。</p><h1 id="hd92ad419bf">Nuxt.jsを使ってみて</h1><h2 id="h122191327b"><code>create-nuxt-app</code>がすごい！！</h2><p>プロジェクト作成時に叩くこちらのコマンドですが、他のどのフレームワークよりもすごいです。<br>なぜなら、<br><img src="https://images.microcms-assets.io/assets/da85014d1c1e441f9602d537a0361842/02064343d6834901930feed8b6308999/create-nuxt-app.jpg?w=1088&amp;h=367" alt="create-nuxt-app コンソール画面"><br>各種ライブラリ・linter類を一括導入できます。<br>自力で全部導入してテンプレート的なリポジトリを作ってしまうのもかなり勉強になりますが、コマンド一発で導入できるとサクッと何かを作りたいときにめちゃくちゃ良いです。</p><h2 id="h640edd6a91">SCSS環境がすごい！！</h2><p>これは一見NuxtというよりSCSSがすごいのでは？となりますが、ちゃんとNuxtがすごいです。<br>現在WebフロントエンドといえばNext.js一強感がありますが、NextはCSS Modulesがビルトインされているため、<strong><code>pages</code></strong><strong>以外でのCSS/SCSSファイルのimportができません。</strong>やろうと思えば<code>variables</code>, <code>mixins</code>をCSS Modulesで使うこともできますが、その都度importが必要になってしまいます。またCSS in JSの<code>styled-components</code>を入れるとなるとちょっと荒業を使ってやらないといけないみたいで、ビルトインのCSS Modules以外を導入しにくいという状況になっています。GlobalなSCSS・import不要な<code>variables</code>, <code>mixins</code>を快適に実現できるフレームワーク（かつモダンで実用可能なもの）は今のところNuxtのみじゃないかなと思っています。</p><h1 id="ha214098e44">まとめ</h1><p>今回はリポジトリ環境やSCSSの話などかなりDX(Developer Experience)を意識した内容になりました。最後にちょこっとだけNuxtで不満を抱えている点を挙げるとすると、全てがJavaScriptオブジェクトであるReactに対してVueはそうではない点や、Vueで定義したメソッドなどを再利用しにくい点がありますが、React・Vueそれぞれにメリットとデメリットがありますし、Vue 3 Composition APIが出たことによる改善も期待できるので、開発するものに応じて適切な選択ができればいいかなと思います。僕は結構Nuxt好きなので、当分は浸りたいと思います。お読みいただきありがとうございました！</p><h1 id="h3bcda3e6b0">最後に</h1><p>このサイトの全ソースコードは<a href="https://github.com/horri1520/portfolio-site-v2" target="_blank" rel="noopener noreferrer">GitHubのリポジトリ</a>で公開しているので、ぜひ覗いてみてください。プルリク大歓迎です！</p>

What's New新着情報

What's New
新着情報