このエントリーをはてなブックマークに追加

Mar

6

React Nativeを使ったモバイルアプリの作り方を学ぶハンズオン(Zoom開催)

サービス開発エンジニア体験2nd(全3回)

Organizing : TIS株式会社

Hashtag :#aizurage
Registration info

社会人 or 学生

Free

FCFS
14/20

Description

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

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

初心者向けではなく、ある程度開発経験がある方を対象にしたハンズオンになります。 Webアプリケーションやハンズオンで扱わない他のフレームワークを使ったSPA、REST API、モバイルアプリの開発経験があり、日頃からプログラミングしている方が理解を深めやすい内容になっています。

開催時期 ハンズオン 説明
1/9(土)
開催済み
SPA SPAの作り方を学びます。
Reactを使ってプログラミングを行い、フロントエンド開発への理解を深めます。
キーワード:React、TypeScript
2/20 (土)
開催予定
REST API SPAのバックエンドとなるREST APIの作り方を学びます。
Nablarchを使ってプログラミングを行い、REST API開発への理解を深めます。
キーワード:Nablarch
3/6(土) モバイルアプリ モバイルアプリの作り方を学びます。
React Nativeを使ってプログラミングを行い、クロスプラットフォーム開発への理解を深めます。
キーワード:React Native、Expo

今回は第3回目となるモバイルハンズオンの参加者を募集します。
各ハンズオンは独立しているため、ご興味のあるハンズオンのみにご参加頂いて大丈夫です。

過去に開催したサービス開発エンジニア体験(全4回)の追加開催分になります。

過去の開催時のアンケート結果等から、ハンズオンで使用する言語とフレームワークの基礎知識があるとハンズオンを通した学びが多くなる傾向にあります。開催日までにハンズオンで使用する言語とフレームワークの基礎知識を習得してから参加するようにお願いします。

内容

React Nativeを使ってモバイルアプリを作成します。
スタッフが実演⇔参加者が作業といったかたちでステップバイステップで進めます。

次のような内容を学びます。

  • Open APIの活用 (クライアントコードの生成、モックサーバの起動)
  • 画面遷移とナビゲーション(React Navigationライブラリ)
  • ログイン、ログアウト、一覧画面(GET/POSTを使用したAPIアクセス、イベントハンドラの使用、コンテクストの使用)
  • カメラの制御(ImagePickerライブラリ)

Fintanではモバイルアプリのノウハウとしてモバイルアプリケーションのセキュリティと認証を公開しています。ハンズオンの内容を発展させて実務でアプリを作成する際にご活用ください。

FintanはTISがこれまでの開発で培ったノウハウを公開しているサイトになります。 公開しているコンテンツはどなたでも無償でご利用頂けますのでぜひ一度アクセスしてみてください。

開催方法

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

タイムスケジュール

時間 内容
12:50~13:00 参加受付@Zoom
13:00~16:00 ハンズオン@Zoom
16:00~17:00 懇親会@Zoom(自由参加)

※懇親会は各自で飲み物(アルコール可)や食べ物をご用意ください。

参加条件

  • TypeScriptの基本的な文法が分かること。
  • Reactの基本的な文法が分かること。
    • 1. Hello Worldから始まるMAIN CONCEPTSの内容が何となく分かるようなレベルです。
  • PCでZoomに繋げる環境があること。
  • ZoomのカメラをONにして顔出しできること。
    • 相手の顔が見えない状態での進行が辛いためご理解をお願いします。
  • ハンズオン終了後の改善目的のアンケート(10問程度)に回答できること。
  • ハンズオンの当日までに事前準備(下に記載)ができること。

ご連絡

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

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

事前準備

React Nativeの環境構築

React Nativeの開発環境を準備します。

次の記事を見てExpoを使ってスマホでアプリを動かす方法を確認してください。 スマホで動かして開発しなくてもよい場合はブラウザで動かすところまで実施してください。

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 WindowsInstall Docker Desktop on Mac

使用する環境が既に整っている場合は、この手順をスキップしてください。

本ハンズオンでは、Dockerコンテナ起動時にローカルディレクトリをマウントします。Docker Desktop for WindowsやDocker Desktop for Macでローカルディレクトリをマウントするためには事前にファイル共有を許可しておく必要があります。Docker DesktopのSettings→Resources→FILE SHARINGから、本ハンズオンのプロジェクトを配置するドライブやディレクトリを共有可能に設定しておいてください。(参考:Docker Desktop for Windows user manualDocker 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 

お問い合わせ

事前準備等で困った場合はconnpassの「イベントへのお問い合わせ」からご連絡ください。

Media View all Media

If you add event media, up to 3 items will be shown here.

Feed

tenkawa

tenkawa wrote a comment.

2021/02/25 21:29

質問内容記入中に間違って送信してしまったので、こちらに投稿します。「コンポーネント設計をどのようにしているか紹介していただけるうれしいです。」

m_seko

m_seko published React Nativeを使ったモバイルアプリの作り方を学ぶハンズオン(Zoom開催).

02/16/2021 15:16

React Nativeを使ったモバイルアプリの作り方を学ぶハンズオン(Zoom開催) を公開しました!

Group

Aizurage

Number of events 8

Members 118

Ended

2021/03/06(Sat)

13:00
17:00

You cannot RSVP if you are already participating in another event at the same date.

Registration Period
2021/02/16(Tue) 15:15 〜
2021/03/05(Fri) 23:59

Location

オンライン

オンライン

オンライン

Organizer

Attendees(14)

Takashi_Hirota

Takashi_Hirota

React Nativeを使ったモバイルアプリの作り方を学ぶハンズオン(Zoom開催) に参加を申し込みました!

nnp

nnp

React Nativeを使ったモバイルアプリの作り方を学ぶハンズオン(Zoom開催) に参加を申し込みました!

米良太

米良太

React Nativeを使ったモバイルアプリの作り方を学ぶハンズオン(Zoom開催) に参加を申し込みました!

demisan

demisan

React Nativeを使ったモバイルアプリの作り方を学ぶハンズオン(Zoom開催) に参加を申し込みました!

pchan

pchan

React Nativeを使ったモバイルアプリの作り方を学ぶハンズオン(Zoom開催)に参加を申し込みました!

AkiraAbe

AkiraAbe

React Nativeを使ったモバイルアプリの作り方を学ぶハンズオン(Zoom開催)に参加を申し込みました!

MinamiYamaguchi

MinamiYamaguchi

React Nativeを使ったモバイルアプリの作り方を学ぶハンズオン(Zoom開催)に参加を申し込みました!

tenkawa

tenkawa

React Nativeを使ったモバイルアプリの作り方を学ぶハンズオン(Zoom開催) に参加を申し込みました!

AkiUnleash

AkiUnleash

React Nativeを使ったモバイルアプリの作り方を学ぶハンズオン(Zoom開催) に参加を申し込みました!

sm.haaaam

sm.haaaam

React Nativeを使ったモバイルアプリの作り方を学ぶハンズオン(Zoom開催)に参加を申し込みました!

Attendees (14)

Canceled (2)