Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Oskra

【Day1】アプリ開発中に詰まった開発用語をぜんぶ整理してみた

Posted at

1. はじめに

事実

今日は、React Native / Expo を使ってアプリ開発を配信しながら進めていました。
その中で、ログやエラー、ドキュメントに出てくる単語が「なんとなく分かるけど、ちゃんとは説明できない」状態でたくさん出てきました。

具体的には、次のようなキーワードです。

  • シェル / .bashrc / alias
  • pnpm
  • cat / sed / head コマンド
  • Maestro（UI テストツール）
  • Metro Bundler（Expo 裏側のバンドラー）
  • スモークテスト
  • app/index.tsx の「ルートコンテナ」

これらをその場で ChatGPT に質問しながら、かみ砕いて理解していきました。

僕の考え

アプリ開発の学習でつまずくポイントは、「技術そのもの」よりも 用語の意味があいまいなまま進めてしまうことだと感じました。
単語のイメージがはっきりすると、エラー文や公式ドキュメントがぐっと読みやすくなります。

この記事では、昨日の配信で出てきたわからなかった言葉たちをまとめます。
同じところで引っかかっている人の、用語辞書・復習ノートになればうれしいです。

2. 今日登場したキーワード一覧

事実

この記事で扱うキーワードを先に一覧にしておきます。

  • シェル：ターミナルの中で動く「コマンドの通訳」
  • .bashrc：bash 用の設定ファイル
  • alias：コマンドに付けるニックネーム
  • pnpm：Node.js のパッケージ管理ツール
  • cat：ファイルをそのまま表示するコマンド
  • sed：テキストを加工しながら流すコマンド
  • head：ファイルの先頭だけを表示するコマンド
  • Maestro：モバイルアプリ向け UI テストフレームワーク
  • Metro Bundler：React Native / Expo 用の JavaScript バンドラー
  • スモークテスト：致命的に壊れていないかを確認する「生存確認テスト」
  • ルートコンテナ：画面全体を包む、一番外側の React コンポーネント

僕の考え

どれも「黒い画面に出てくる単語」「エラー文や設定ファイルに突然出てくる単語」です。
ひとつひとつの意味が分かると、“ただの呪文” が “状況説明” に変わるので、ビビらずに読み進められるようになりました。

3. シェルとは？ターミナルの中の「通訳アプリ」

事実

シェル（shell） とは、ざっくりいうと 「コマンドの通訳アプリ」 です。

  • 私たちはキーボードで ls や cd、pnpm install などを入力します。
  • シェルはその文字列を受け取り、OS に「この命令を実行して」と伝えます。

よく出てくるシェルには次のようなものがあります。

  • bash（バッシュ）：Linux / WSL でよく使われるシェル
  • zsh（ズィーシェル）：macOS で標準になっていることが多いシェル
  • PowerShell：Windows の青い画面のシェル

ターミナル（端末） は「黒い（または青い）画面のアプリ」で、
その中で どのシェルを動かすか を選べるイメージです。

僕の考え

「ターミナル」と「シェル」をごちゃごちゃにすると、.bashrc や alias の説明が分かりづらくなります。
ターミナル＝箱、シェル＝中で動いている頭脳 と分けてイメージすると、設定ファイルの位置づけがスッキリしてきます。

4. .bashrc と alias：長いコマンドに「あだ名」を付ける

事実

bash を使っているとき、設定を書くためのファイルが ~/.bashrc です。

  • ~ は「自分のホームディレクトリ」という意味です。
  • .bashrc は「bash が起動するときに読む設定ファイル」です。

その中に、よくこんな記述を書きます。

alias adb="/mnt/c/Users/あなた/AppData/Local/Android/Sdk/platform-tools/adb.exe"

ここで新しく出てくるポイントは alias です。

  • alias：エイリアス。「別名」「あだ名」という意味の英単語です。

  • alias adb="..."：

    • adb という 短い別名 を
    • 長いコマンド /mnt/c/.../adb.exe の 代わりに使えるようにする という意味です。

この設定を書いてシェルを再読み込みすると（source ~/.bashrc など）、

adb devices

と打つだけで、実際には

/mnt/c/Users/あなた/AppData/Local/Android/Sdk/platform-tools/adb.exe devices

が実行されます。

僕の考え

毎回長いパスを入力したり、コピペしたりするのはつらいですし、タイプミスもしやすいです。
alias を使っておくと、「よく使う長いコマンド」ほどショートカット化できるので、開発がかなり楽になるんじゃないかなー、と期待しています。

また、次のような alias も便利です。

alias ll="ls -alF"
alias gs="git status"
alias rm="rm -i"
  • ll で「詳細な ls」
  • gs で git status
  • rm に -i を付けて「消す前に確認する」ようにする

といったように、自分好みの操作感をシェル側に覚えさせていくイメージです。

5. pnpm とは？npm と何が違うのか

事実

pnpm は、Node.js の世界で使う パッケージ管理ツールのひとつです。
npm や yarn と同じく、「ライブラリをインストール／更新／削除する役割」を持っています。

代表的なコマンドは次のようなものです。

pnpm install
  • install：package.json に書かれた依存パッケージをまとめてインストールします。
pnpm add react
  • add：新しいパッケージを追加します。
  • react：追加したいパッケージ名です。
pnpm add -D typescript
  • -D：devDependencies（開発用の依存）として追加するオプションです。
  • typescript：開発時にだけ必要なパッケージの例です。
pnpm run dev
  • run：package.json の "scripts" に書かれているスクリプトを実行します。
  • dev："dev": "…" というスクリプト名を指定しています。

npm と違う点（ざっくり）

公式サイトや解説記事では、pnpm の特徴として次のような点が挙げられています。

  • 1つの場所に依存パッケージをまとめて保存し、
    各プロジェクトからはリンクで参照する仕組みを持っています。
  • そのおかげで、ディスク容量の節約や、インストールの高速化がしやすい設計です。

僕の考え

実際の使い方は npm とほとんど同じです。
「npm と同じことが、より速く、ディスクを節約しながらできる npm の仲間」くらいにイメージしておくと入りやすいと思います。

React / Expo のプロジェクトでも pnpm が選ばれることが増えているので、
「npm, yarn, pnpm は同じカテゴリのツール。コマンドの形はほぼ共通」だと押さえておくと、ドキュメントを読みやすくなります。

6. cat / sed / head：ログを見る 3 つのコマンドの役割

6-1. cat：中身を「そのまま」出すコピー機

事実

cat は、ファイルの中身をそのまま表示したり、複数ファイルをつなげて出力したりするコマンドです。

cat file.txt
  • cat：concatenate（つなげる）の略です。
  • file.txt：表示したいファイル名です。

このコマンドは、file.txt の中身を全部表示します。

cat a.txt b.txt > all.txt
  • a.txt b.txt：2つのファイルを順番に読みます。
  • >：右側のファイルに書き込む（上書き）リダイレクトです。
  • all.txt：結果を書き込むファイル名です。

僕の考え

cat は 「ただ出すだけ」 のとてもシンプルなコマンドのようです。
編集や抽出の機能はなく、「中身を丸ごと見たい」「別コマンドに丸投げしたい」ときに使っていきたいですね。

6-2. sed：流れてくるテキストを編集しながら流す職人

事実

sed は Stream EDitor の略で、テキストを行ごとに読み込みながら、指定した処理（置換・抽出・削除など）を行うコマンドです。

例1：文字列を置き換える

sed 's/猫/犬/g' animals.txt

  • sed：ストリームエディタ本体です。

  • 's/猫/犬/g'：sed に渡す「編集ルール」です。

    • s：substitute（置き換える）の頭文字です。
    • /猫/犬/：左の「猫」を右の「犬」に置き換えます。
    • g：global。行の中に複数あっても全部置き換える指定です。

  • animals.txt：対象ファイルです。

例2：1〜40行目だけ表示する

sed -n '1,40p' package.json

  • -n：何もしなければ出力しないモードに切り替えるオプションです。

  • '1,40p'：

    • 1,40：1行目〜40行目という範囲指定です。
    • p：print（指定した行を表示せよ）です。

結果として、package.json の 1〜40 行目だけが表示されます。

僕の考え

sed は「編集マシン」でした。
cat と同じように使うこともできますが、本領発揮は 「条件付きで抽出」「部分的な置換」 です。

次のような用途でよく使えそうです。

  • 長いログから、特定の範囲だけ見たい
  • 特定の文字列を一括で書き換えたい
  • 特定の行だけを削除／表示したい

「cat はそのまま出す」「sed は加工しながら出す」と覚えておくと、役割が分かりやすいです。
ぶっちゃけcatはいらないのでは？と思ったりもしました。

6-3. head：先頭だけチラ見するビューア

事実

head は、ファイルの 先頭数行だけ を表示するコマンドです。

head file.txt
  • デフォルトで、先頭 10 行を表示します。
head -n 40 package.json
  • -n 40：表示したい行数を指定します（ここでは 40 行です）。
  • package.json：対象ファイルです。

結果として、package.json の先頭 40 行だけが表示されます。

これは、先ほどの sed -n '1,40p' package.json とほぼ同じ目的で使えます。

僕の考え

ログや JSON ファイルは、サイズが大きくなりがちです。
全部表示するとスクロール地獄になるので、「とりあえず先頭だけ雰囲気を見たい」ときに head はとても便利でした。

  • ざっと構造やフォーマットを確認したいとき
  • 「1〜2行目にエラーが出てないか」だけ見たいとき

には、難しい sed よりも head を使う方が直感的で読みやすいです。

7. Maestro：スマホアプリの操作を自動でやってくれるテストロボット

事実

Maestro は、Android / iOS などのモバイルアプリ向けの UI テストフレームワークです。
YAML で「テストの台本（フロー）」を書いて、その通りに画面操作を自動で行ってくれます。

たとえば、ログイン動作をテストしたい場合のイメージはこんな感じです。

app: /path/to/app.apk

flow:
  - tapOn: "ログイン"
  - inputText:
      text: "test@example.com"
      into: "メールアドレス"
  - inputText:
      text: "password123"
      into: "パスワード"
  - tapOn: "ログイン"
  - assertVisible: "ホーム"
  • app：テスト対象のアプリのパスです。
  • flow：実行したい操作の順番です。
  • tapOn：指定したテキストが書かれたボタンや要素をタップします。
  • inputText：指定した場所にテキストを入力します。
  • assertVisible：「指定した文字が画面に見えているか？」を確認します。

僕の考え

毎回「アプリを起動して、メールアドレスとパスワード入れて、ログインボタンを押して…」と手動で確認するのは大変です。
Maestro を使うと、人間の操作を “YAML の台本” にして、何度でも正確に再生できるようになります。

特に、後で説明する スモークテスト（最低限の生存確認） と相性が良く、

  • アプリが起動するか
  • ログイン〜ホームまでたどり着けるか

といった重要なフローを、ビルドのたびに自動で確認する仕組みを作りやすくなります。
まだひな形ファイルを作っただけなので、今後に生かしたいですね。

8. Metro Bundler：Expo の裏で動く JavaScript バンドラー

事実

Metro Bundler は、React Native / Expo 用の JavaScript バンドラーです。

Expo CLI のドキュメントでは、次のように説明されています。

  • npx expo start や npx expo export を実行したときに、
    JavaScript コードやアセットを束ねるために Metro を利用する、と書かれています。

役割は主に 3 つです。

  1. JavaScript ファイルを 1 つの束（バンドル）にまとめる

    • App.tsx や components/、screens/ などのファイルを読み込んで、アプリが読み込める形にします。

  2. スマホ（Expo Go / エミュレータ）にそのバンドルを配信する

    • QR コードを読んだスマホが、PC 上の Metro にアクセスしてバンドルを取得します。

  3. ファイル保存時に差分だけ素早く反映する（Fast Refresh）

    • コードを保存すると、アプリ側の画面がすぐ更新されます。

僕の考え

普段は npx expo start しか意識していなくても、裏側で Metro が動いています。
エラー文やログに「Metro」と出てきたときは、「バンドルを作るサーバー側で何か問題が起きている」 くらいの意識を持つと状況把握がしやすくなります。

たとえば、

  • 依存パッケージが見つからない（import のパスミス、インストール忘れ）
  • Port が別のプロセスに使われている
  • キャッシュが壊れている

といったときに、Metro のログがヒントをくれます。

9. スモークテスト：アプリが「致命的に壊れていないか」の生存確認

事実

スモークテスト（smoke test） は、もともとハードウェアの世界で生まれた言葉です。
「電源を入れて、煙（smoke）が出ないか確認するテスト」から来ています。

ソフトウェアでは、

  • 新しいビルドを作ったとき
  • 新しいバージョンをデプロイしたとき

に行う 最低限の動作確認 を指します。

モバイルアプリの例だと、こんな項目がスモークテストになります。

  • アプリが起動するか
  • すぐクラッシュしないか
  • ログイン画面が表示されるか
  • ログインしてホーム画面まで到達できるか

僕の考え

スモークテストのポイントは「範囲は狭いけれど、どれも致命的」ということです。
ここで落ちるなら、細かい機能テストをしてもすべて失敗するので、そこで一旦止めるフィルターの役割を持っているとのこと。

Maestro のようなツールで、

  • アプリ起動
  • ログイン
  • ホーム表示確認

といった流れを YAML で書いておくと、「スモークテスト用フロー」として何度も再利用できる、
そんな気概を感じた、今日この頃です。

10. app/index.tsx の「ルートコンテナ」とは？一番外側の箱

事実

まず単語を分解します。

  • ルート（root）：
    木でいう「根っこ」、一番上の親、という意味です。

  • コンテナ（container）：
    「入れ物」「箱」という意味で、React では 子コンポーネントを含む親コンポーネントを指すことが多いです。

React / Expo の画面は、コンポーネントが木のようにつながっています。

[ルートコンテナ]
  ├─ [ヘッダーコンポーネント]
  ├─ [メインコンテンツ]
  └─ [フッター]

app/index.tsx が次のようなコードだとします。

export default function Index() {
  return (
    <View style={{ flex: 1 }}>
      <Text>ホーム画面</Text>
    </View>
  );
}

この場合、

  • Index コンポーネント：この画面の「いちばん上のコンポーネント」
  • その中の <View>：画面全体を包んでいる「見た目上のルートコンテナ」

と考えられます。

僕の考え

ドキュメントや記事で「ルートコンテナにスタイルを指定して…」と書かれているときは、
「その画面の一番外側の <View> につけるスタイルのことだな」 と読むとスムーズです。

  • flex: 1 を設定して余白を埋める
  • 背景色をつける
  • 全体の padding を設定する

といった「画面全体に効かせたい設定」は、このルートコンテナに書くことが多いのかな？

11. まとめ：用語が分かると、エラーが怖くなくなる

事実

この記事では、今日の配信で実際に詰まった用語だけを取り上げました。

  • シェル：ターミナル内の「コマンドの通訳」
  • .bashrc と alias：bash に「長いコマンドのあだ名」を覚えさせる仕組み
  • pnpm：高速でディスク効率の良いパッケージ管理ツール
  • cat / sed / head：ファイルやログを見るための 3 種の便利コマンド
  • Maestro：YAML で台本を書く UI テストロボット
  • Metro Bundler：Expo の裏で動く JavaScript バンドラー
  • スモークテスト：ビルド直後に行う「致命的に壊れていないか」確認するテスト
  • ルートコンテナ：画面全体を包む、一番外側の React コンポーネント

僕の考え

用語を一気に完璧に覚える必要はないと思います。
ただ、「シェルは通訳」「pnpm は npm の仲間」「sed は編集係」 といったイメージを持っておくだけで、エラー文や記事が一段と読みやすくなります。

今後は、この記事を自分の「用語辞書」として使いながら、

  • 実際にターミナルでコマンドを打ってみる
  • Maestro や Metro のログを読んでみる
  • ルートコンテナにスタイルを付けてみる

といった形で、毎日少しずつ手を動かしていきたいと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?