神戸市内のインターン生で Web サイトを作成しました！

はじめに

こんにちは、神戸エンジニアラボ（Kobe x Engineer's Lab）です！

本年度も Kobe × Engineer's Lab では、「インターンへ参加したいけど、企業が見つけられない」という学生や、「インターンを募集しているが、なかなか見つけられない」というテック企業のサポートを実施しております！

本記事では、GAOGAO ゲート株式会社のインターン生 2 名が 担当した Web サイト制作案件の体験談をご紹介します！「インターンに挑戦したいプログラミグ学習者」や「エンジニアインターンをお探しの企業様」は、ぜひご一読ください！

Web サイト 概要

神戸ワカモノ起業コミュニティ さんからのご依頼で、コミュニティ Slack で実際に投稿されている情報をまとめた Web サイト を作成いたしました！

神戸ワカモノ起業情報まとめ

利用者は Slack へ参加する前に、コミュニティで共有されている神戸市内の多様なワークショップやインターンに関する情報を一部閲覧することができます！

神戸ワカモノ起業コミュニティ さんに関する詳細は、以下 HP をご確認ください！

KOBEワカモノ起業コミュニティ

技術スタック

技術スタックに関しては、主に実装を担当したインターン生が普段使用している技術を採用しました！

• Next.js

• Tailwind CSS

• Slack API

• Figma

• Netlify

  • フリープランで商用利用可能なため採用

機能・仕様

- 機能 -

• トップページでは 各チャンネルの直近 1 週間の投稿を表示

• 詳細ページでは、Slack フリープランの範囲で各チャンネルの全投稿を取得

- 仕様 -

基本的には Slack API のドキュメントを参照しつつ仕様を固めていきました。一部ドキュメントだけでは不明瞭な点は、テスト用の Slack チャンネルを別途準備し、ドキュメントの各メソッドページにある tester を活用する形で検証し、仕様を固めていきました。
また、Next.js での実装した事例があまり多くないこともあり、実際に仮プロジェクトを立ち上げて、ソースコードでの検証も適宜行いました。

デザイン 実装

既存の HP のデザインを踏襲する形だったので、Figma で既存 Web ページをインポートしたものをベースに、Slack のスレッドを表示する部分や各セクションを作成しました。
Figma は初めて触ったのですが、所要時間は約 2 時間ほどで比較的スムーズに実装できました。

機能実装

工数としては諸々合わせて 1 週間ほどで実装できました。
大部分は Next.js の基礎的な知識でカバーでき、ページネーションの実装に関しても、Slack API のドキュメントが整備されていたため、戸惑うことなく実装できました。

Paginating through collections

その他、絵文字やテキスト表示に関する処理や、取得期間を指定するための UnixTimestamp を生成する処理などは、ChatGPT で生成したコードを改修する形でスムーズに実装できました。

最後に

今回は GAOGAO ゲート株式会社のインターン生 2 名が 担当した Web サイト制作案件の体験談をご紹介いたしました。

Kobe × Engineer's Lab note では、神戸市のエンジニアインターン体験談を随時発信していますので、ご興味のある方は過去記事も併せてご一読ください！

今後も Kobe x Engineer's Lab では、神戸市内の「インターンに挑戦したいプログラミグ学習者」と「インターン受け入れを実施されている企業」を繋ぐ活動を続けて参ります。

- お役立ちリンク -

- 運営会社：GAOGAOゲート株式会社 HP：

GAOGAOゲート - 東南アジア発のスタートアップ・スタジオ GAOGAO (ガオガオ)

- 神戸市内インターン受け入れ企業リスト：

INTERNS

- Udemy アカウント無償提供制度：

- Kobe x Engineer's Lab 𝕏 ( 旧Twitter ) ：
https://twitter.com/kobe_engr_lab