社会人としては6年目です

Posted at 2026-02-04

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

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

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

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

expoの構築

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

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

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

expo cliの取得

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

npm i -g expo-cli

プロジェクトの作成

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

npx create-expo-app test-project

プロジェクトの実行

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

cd test-project
npx expo start

expo goのインストール

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

プロジェクトを実行した際に出てきたQRコードをカメラで読み取ると以下のような初期ページが開きます。
4. プロジェクトの編集(Hello Worldの表示)

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

- Welcome! + Hello World!

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

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