はじめに

42Tokyo でコンピュータサイエンスを学ぶ yimamori です。

先日、42Tokyo のパートナーである GENEROSITY 様とのハンズオンイベントが実施されました。42 の生徒として参加し、得られた学びやイベント内容について紹介させていただきます。

パートナー企業様との共同イベント

普段の 42 の基礎・専門カリキュラムとは別に、42Tokyo 校独自のイベントが定期的に開催されています。これらのイベントでは、興味深いテーマに触れることや、その楽しさを体感できるだけでなく、パートナー企業様のエンジニアや経営層の方々と直接コミュニケーションを取ることができる、貴重な機会でもあります。

これまでの取り組み事例については下記のページをご参照ください。

カレンダーアプリの開発ハンズオン

今回のハンズオンでは、Web アプリケーションに関する基礎知識の習得から、カレンダーアプリの構築までを 2 日間で学ぶという、非常に充実した内容のイベントでした。

本イベントで使用した主な技術スタックおよびツールは以下の通りです。

フロントエンド: Vue.js
- ビルドツールとして Vite を使いました
バックエンド: Express.js
- API の動作確認に Postman を活用しました
データベース: MySQL

事前準備と当日のトラブルシュート (別投稿)

WSL2 + Dev Container で Node.js + MySQL 環境を準備し、ハンズオンに参加しました。

~~開発環境固有の話題は別記事にしましたので後ほど投稿したいと思います。~~

WSL2 + Dev Containers で Node.js + MySQL の開発環境を構築する - Qiita

ハンズオンの流れ

基礎知識の講義後、講師役の方のライブコーディングに合わせ、各自で実装に進みました。その際、デバッグ出力や検証ツールを用いた確認や、練習課題といった理解度チェックを経て段階的に取り組みました。また、初学者でも安心して取り組めるように、生徒側からも専任役を設けるなど、サポート体制も充実していました。

Web アプリケーションに関する基礎知識
- REST API や CRUD といった基礎から JavaScript の歴史的経緯なども
バックエンド分野 (API 開発)
- Node.js を使用して最低限の HTTP サーバー (http モジュール) を実装し、その後 Express.js を導入することで、その違いを体感・理解できる流れでした
データベース
- MySQL のコマンドインタプリタを使ってデータベースの各種操作を行いました
フロントエンド分野 (UI 開発)
- まずは Vanilla JS で実装を行い基礎を確認しつつ、Vue.js を導入することで、そのメリットを理解しやすい流れでした
- UI に関しては reset.css などにも触れました

その後、完成したカレンダーアプリを基に、自由課題へと進みました。

目標は、Google Calendar のような高機能なカレンダーアプリに近づけることです。

複数の機能アイデアがタスクとして提示され、それぞれが興味を持ったものや、自身のスキルアップにつながりそうなものを選択して取り組みました。

印象に残った点や学びとなった内容

Postman

バックエンドサービスのテストやデバッグに利用される GUI アプリケーションです。API リクエストの作成やレスポンスの解析を直感的に実施できます。

初めて使用しましたが、確かに基本的な操作はすぐに実践できました。

jsonplaceholder

ダミーデータを提供する API (Web サービス) です。登録不要ですぐに利用できるため、試行錯誤が必要な作業にモックとして使用できて便利です。

Express.js

シンプルで明瞭なコードを保ちやすいのでとても好みです。

また、今回はお話で少しだけ触れる程度でしたが、ミドルウェアによる拡張性も気になりました。ひとまず、認証やロギングといった任意の処理をモジュール的に追加できる、と覚えておきます。

JavaScript や TypeScript では未使用の引数に `_` を用いる慣習

未使用引数を意図的に無視するための方法として活用されています。これはあくまで慣習であり、言語仕様として定められているものではありませんが、静的解析ツールでもサポートされているようです。

データベース

データベース操作においても、基本となるのは CRUD 操作
テーブルの設計
インタプリタでの試行錯誤において、作成や変更系の SQL クエリ実行後の確認を怠らないこと

-- テーブルの構造表示や
describe <table_name>;
-- テーブルに含まれる全てのカラムおよびレコードの表示など
select * from <table_name>;

SQL プレースホルダー (?) を使用することで、インジェクション対策を講じることができる

これまでデータベースに触れる機会が少なく、SQL 操作に対して苦手意識を持っていましたが、今回、トライ・アンド・エラーを繰り返すことで、だいぶ解消されました。意外な収穫でした。

また、自由課題でタイムゾーンの扱いに苦戦したのですが、MySQL 自体はシステムのタイムゾーンに依存するようです。

インタプリタにて下記のクエリで確認しました。

show variables like '%time_zone%';

Vue.js

メリットは多数ありますが、やはりコンポーネント単位で分割できる点が魅力的だと思います。

React を少しだけ触った経験があったため、共通するワードや似ている部分にかえって戸惑いを感じました。中途半端な知識では混乱を招きやすい事を痛感しました。

糖衣構文の v-model や省略記法にも、最初は戸惑いましたが、慣れてくると意外と気持ちが良く、見通しも向上するように感じました。

Vue.js に関しては、まずは公式のチュートリアルを勧められました。

チュートリアルは簡易実行環境となっており、ステップバイステップで課題を問いていく形式です。すぐに試せて、長さも短く、解説等は日本語化されているので取り組みやすいです。

個人的には何回か繰り返して確認しました。

終わりに

今回のハンズオンでは、バックエンドからフロントエンドまでを一貫して実装するプロセスを経験しました。トラブル発生時の原因究明や設計に関する悩みに直面する場面もありましたが、試行錯誤を重ねる中で多くの学びを得ることができました。

本イベントを通じて貴重な経験を積む機会をいただき、関係者の皆様には心より感謝申し上げます。

ここまでお読みいただき、ありがとうございました。42Tokyo にご興味をお持ちいただいた方は、ぜひパンフレット (PDF) もご覧ください。