初めてアプリを開発してみる ~ その１：expoでHello Worldをしてみる ~

自己紹介

社会人としては6年目です
これまではクラウドを利用してのバックエンドのエンジニアをやっていましたが、何となくアプリにも興味が湧きました

アイコンは我が家のわんこです

記事を書くのは初心者ですので、わかりにくい/アドバイス等ありましたらコメントお願いします

今回の目標

• expoを利用するための環境を構築する
• expoでHello Worldを表示し、expo goで確認する

expoの構築

1. node.jsの導入

公式サイトからのインストール

• JavaScriptの利用においてNode.jsをどうして利用するのか、というところは以下の記事がすごくわかりやすかったです
  Node.jsとはなにか？なぜみんな使っているのか？

インストールしようとすると各OSでの取得と、dockerでの取得が出てきますが、個人開発ではOSでの取得が良いと思います
Dockerでの取得はチーム開発などでバージョンを固定したい時などはおすすめです

2. expo cliの取得 / プロジェクトの作成

expo cliの取得

• たくさんwarningが出てきますが、一旦問題ないです

npm i -g expo-cli

プロジェクトの作成

• test-projectというディレクトリが作成され、その中にappやassetsなどのディレクトリ、package.jsonなどのファイルが作成されます

npx create-expo-app test-project

3. プロジェクトの実行とexpo goでの確認

プロジェクトの実行

• QRコードやpress ~などが出てきます。wを押すとブラウザで閲覧できます

cd test-project
npx expo start

expo goのインストール

• スマホのアプリにも存在しますので、スマホアプリの開発ならそちらからの閲覧が良いでしょう

プロジェクトを実行した際に出てきたQRコードをカメラで読み取ると以下のような初期ページが開きます

4. プロジェクトの編集(Hello Worldの表示)

プロジェクトを作成した際にapp/(tab)/index.tsxというファイルが作成されています
このファイルにホームスクリーンの内容が記載されていますので、以下の個所を変更します(初期状態なら21行目)

   <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Welcome!
+        <ThemedText type="title">Hello World!</ThemedText>
     <HelloWave />
   </ThemedView>
   <ThemedView style={styles.stepContainer}>

expo goを開いておくとリアルタイムで文字が変更されています

終わりに

短時間で簡単に構築できたかと思います。そこも大きな魅力ですね
次回はexpoのパッケージ構成についてなどの紹介をしようかと思います