サービス/プロダクトの開発に欠かせないアプリ開発とDevOpsを体験してみませんか？

全4回にわたってサービス/プロダクトの開発に欠かせないアプリ開発とDevOpsを体験するハンズオンを開催します！

今回は第3回目となるモバイルハンズオンの参加者を募集します。
サービス開発に興味があり、モバイルアプリの作り方を知りたい人はぜひご参加ください。
各ハンズオンは独立しているため、ご興味のあるハンズオンのみにご参加頂いて大丈夫です。

開催方法

Zoomで開催します。
Zoomのアクセス先は当日までに参加者の方に連絡します。

タイムスケジュール

※懇親会は各自で飲み物(アルコール可)、おつまみを用意してください。

参加条件

• PCでZoomに繋げる環境があること。
• ZoomのカメラをONにして顔出しできること。相手の顔が見えない状態での進行が辛いためご理解をお願いします。
• ハンズオンの事前準備（開発環境など）ができること。1週間前までに参加者の方に連絡します。
• HTML、CSS、JavaScriptのの基本文法が分かり、書籍のサンプルコードを理解でき、動かすことができること。
• ハンズオン終了後の改善目的の簡単なアンケート（10問程度）に回答できること。

ご連絡

下記についてご理解頂いた上で参加申し込みをお願いします。

• 当日の内容およびスケジュールは変更する場合があります。
• オンライン開催のため、ネットワークの状況等により進行が中断する可能性があります。
• 本イベントや参加レポートをSNSやブログ等で発信頂いても大丈夫です。
  ハラスメントにつながらないようにお願いしますm(__)m

事前準備

React Nativeの環境構築

React Nativeでモバイルアプリを開発するための環境を構築します。

公式サイトの案内に沿って構築してください。 必ず「React Native CLI Quickstart」というタブをクリックして、手順を実施してください。 「Development OS」は、開発に利用している OS を選択してください。 「Target OS」は「Android」で実施してください。

「Running your React Native application」まで実施して動作確認をしてください。

Visual Studio Codeのインストール

開発時に使用するエディタをインストールします。

エディタは使い慣れたものなら何でもよいですが、何もインストールしていなければ、今回のハンズオンで使用するコードに対応できるVisual Studio Codeをインストールします。公式サイトの案内に沿って、インストールしてください。

エディタが既に整っている場合は、この手順をスキップしてください。

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）

Docker(Docker Compose) & マウントの確認

以下の手順で確認します。
Windowsを前提として手順を記載しておりますので、他のOSの方は適宜読み替えてください。

• 勉強会当日に使用する作業用フォルダを作成します。 ここでは c:\work を作成したとします。
• 以下の内容で、 c:\work\docker-compose.yml ファイルを作成します。
  (書式の都合上versionの前に空白文字が存在するようにみえますが無視してください。)

version: '3.7'

services:
  mounttest:
    image: ubuntu:18.04
    volumes:
      - ../work/testdir:/testdir
    command: cat /testdir/testfile.txt

• 以下の内容で、 c:\work\testdir\testfile.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