SPAのバックエンドとなるREST APIの作り方を学ぶハンズオン(Zoom開催)

スキルアップAI

2021.2.20 13:00 2021.2.20 17:00

Googleカレンダーに登録

「TechPlay」で掲載されています

サービス/プロダクトの開発に欠かせないアプリ開発を体験してみませんか?
全3回にわたってサービス/プロダクトの開発に欠かせないアプリ開発を体験するハンズオンを開催します!
初心者向けではなく、ある程度開発経験がある方を対象にしたハンズオンになります。 Webアプリケーションやハンズオンで扱わない他のフレームワークを使ったSPA、REST API、モバイルアプリの開発経験があり、日頃からプログラミングしている方が理解を深めやすい内容になっています。
開催時期
ハンズオン
説明
1/9(土)

開催済み
SPA
SPAの作り方を学びます。

Reactを使ってプログラミングを行い、フロントエンド開発への理解を深めます。

キーワード:React、TypeScript
2/20 (土)
REST API
SPAのバックエンドとなるREST APIの作り方を学びます。
Nablarchを使ってプログラミングを行い、REST API開発への理解を深めます。
キーワード:Nablarch
3月
モバイルアプリ
モバイルアプリの作り方を学びます。
React Nativeを使ってプログラミングを行い、クロスプラットフォーム開発への理解を深めます。
キーワード:React Native、Expo
今回は第2回目となるAPIハンズオンの参加者を募集します。
各ハンズオンは独立しているため、ご興味のあるハンズオンのみにご参加頂いて大丈夫です。
過去に開催したサービス開発エンジニア体験(全4回)の追加開催分になります。
過去の開催時のアンケート結果等から、ハンズオンで使用する言語とフレームワークの基礎知識があるとハンズオンを通した学びが多くなる傾向にあります。開催日までにハンズオンで使用する言語とフレームワークの基礎知識を習得してから参加するようにお願いします。
内容
Nablarchを使ってREST APIを作成します。
スタッフが実演⇔参加者が作業といったかたちでステップバイステップで進めます。
次のような内容を学びます。
API入門(REST)
Nablarch入門(Nablarchのアーキテクチャ、ハンドラ)
REST APIの作り方(ルーティング、DIコンテナ、リクエスト/レスポンスの変換)
ToDo管理のアーキテクチャ(レイヤードアーキテクチャ、依存関係逆転の原則、値オブジェクト、イミュータブル)
ToDo一覧表示の作り方(ユニットテスト、DBアクセス)
ユーザ認証の作り方(ログイン/ログアウト、バリデーション、セッションストア)
このハンズオンはFintanで公開しているSPA + REST API構成のサービス開発リファレンスをベースに作成しています。ベースにしたハンズオンは個人で学習できるようになっていますので、ハンズオンの事前学習や復習にご活用ください。
FintanはTISがこれまでの開発で培ったノウハウを公開しているサイトになります。 公開しているコンテンツはどなたでも無償でご利用頂けますのでぜひ一度アクセスしてみてください。
開催方法
Zoomで開催します。
Zoomのアクセス先は当日までに参加者の方に連絡します。
タイムスケジュール
時間
内容
12:50~13:00
参加受付@Zoom
13:00~16:00
ハンズオン@Zoom
16:00~17:00
懇親会@Zoom(自由参加)
※懇親会は各自で飲み物(アルコール可)や食べ物をご用意ください。
参加条件
Javaの基本的な文法が分かり、Webアプリの開発経験があること。
RESTの基本的な内容が分かること。
翻訳: WebAPI 設計のベストプラクティスの内容が何となく分かるようなレベルです。
PCでZoomに繋げる環境があること。
ZoomのカメラをONにして顔出しできること。
相手の顔が見えない状態での進行が辛いためご理解をお願いします。
ハンズオン終了後の改善目的のアンケート(10問程度)に回答できること。
ハンズオンの当日までに事前準備(下に記載)ができること。
ご連絡
下記についてご理解頂いた上で参加申し込みをお願いします。
当日の内容およびスケジュールは変更する場合があります。
オンライン開催のため、ネットワークの状況等により進行が中断する可能性があります。
本イベントや参加レポートをSNSやブログ等で発信頂いても大丈夫です。
ハラスメントにつながらないようにお願いしますm(__)m
事前準備
開発環境のインストール
JDK
バックエンドの開発ではJavaを使用するため、JDKをインストールします。Javaのバージョンには11を使用します。
JDKはいくつかありますが、ここでは、OpenJDKの1つであるAdoptOpenJDKをインストールします。公式サイトの案内に沿って、インストールしてください。
使用する環境が既に整っている場合は、この手順をスキップしてください。
Maven
バックエンドの開発では構成管理にMavenを利用するため、Mavenをインストールします。バージョンは制限していませんが、現時点で最新である3.6.3でよいです。
公式サイトの案内に沿って、ダウンロードおよび配置してください。
使用する環境が既に整っている場合は、この手順をスキップしてください。
IntelliJ IDEA
開発時に使用するエディタをインストールします。
エディタは使い慣れたものなら何でもよいですが、何もインストールしていなければ、今回のハンズオンで使用するコードに対応できるIntelliJ IDEAをインストールします。公式サイトの案内に沿って、コミュニティ版をインストールしてください。
エディタが既に整っている場合は、この手順をスキップしてください。
Docker(Docker Compose)のインストール
開発時にコンテナを使用するため、DockerとDocker Composeをインストールします。
公式サイトの案内に沿って、使用しているOSに対応するDockerとDocker Composeをインストールしてください。 Docker Engineは18.06.0以上をインストールしてください。
WindowsとMacでのDocker利用方法はいくつかありますが、本ハンズオンではDocker Desktopをインストールしてください。(参考:Install Docker Desktop on Windows、Install Docker Desktop on Mac)
使用する環境が既に整っている場合は、この手順をスキップしてください。
本ハンズオンでは、Dockerコンテナ起動時にローカルディレクトリをマウントします。Docker Desktop for WindowsやDocker Desktop for Macでローカルディレクトリをマウントするためには事前にファイル共有を許可しておく必要があります。Docker DesktopのSettings→Resources→FILE SHARINGから、本ハンズオンのプロジェクトを配置するドライブやディレクトリを共有可能に設定しておいてください。(参考:Docker Desktop for Windows user manual、Docker Desktop for Mac user manual)
開発環境の動作確認
JDK & Maven
任意のディレクトリで以下のコマンドを実行し、helloディレクトリが作成されればJDK及びMavenの環境構築に成功しています。
$ mvn archetype:generate -DarchetypeGroupId=org.apache.maven.archetypes -DarchetypeArtifactId=maven-archetype-quickstart -DarchetypeVersion=1.4 -DinteractiveMode=false -DgroupId=com.sample -DartifactId=hello
JDK & IntelliJ IDEA
以下のサイトの「プロジェクトを作る」~「ソースを作成する」の手順を実行できれば、JDK & IntelliJ IDEAのインストールに成功しています。
IntelliJ IDEA 入門
Docker(Docker Compose) & マウントの確認
以下の手順で確認します。
Windowsを前提として手順を記載しておりますので、他のOSの方は適宜読み替えてください。
勉強会当日に使用する作業用フォルダを作成します。 ここでは c:work を作成したとします。
以下の内容で、 c:workdocker-compose.yml ファイルを作成します。
(書式の都合上versionの前に空白文字が存在するようにみえますが無視してください。)
version: ‘3.7’ services: mounttest: image: ubuntu:18.04 volumes: – ../work/testdir:/testdir command: cat /testdir/testfile.txt
以下の内容で、 c:worktestdirtestfile.txt ファイルを作成します。
Mount is successful.
以下のコマンドを実行します。
$ cd C:work $ docker-compose up
実行結果に以下のように Mount is successful. という文字列が含まれていることを確認してください。
Creating network “mounttest_default” with the default driver Pulling mounttest (ubuntu:18.04)… 18.04: Pulling from library/ubuntu 171857c49d0f: Pull complete 419640447d26: Pull complete 61e52f862619: Pull complete Digest: sha256:646942475da61b4ce9cc5b3fadb42642ea90e5d0de46111458e100ff2c7031e6 Status: Downloaded newer image for ubuntu:18.04 Creating mounttest_mounttest_1 … done Attaching to mounttest_mounttest_1 mounttest_1 | Mount is successful. ※このように「Mount is successful.」が含まれるログが出力されたら成功 mounttest_mounttest_1 exited with code 0
以下のコマンドを実行し、動作確認に使用したコンテナを削除してください。
$ docker-compose down
お問い合わせ
事前準備等で困った場合はconnpassの「イベントへのお問い合わせ」からご連絡ください。

2021.2.20 13:00 2021.2.20 17:00

Googleカレンダーに登録

「TechPlay」で掲載されています

関連するウェビナー