【書籍特別編】Jetpack Compose 開発シリーズ | 第１回 プロジェクトの用意
💡 今回の内容
プロジェクトを作成して、Jetpack Compose の基本コードについてみていきましょう。
📚 このシリーズについて
本シリーズでは、書籍『いきなりプログラミング Android アプリ開発』の第１章のアプリを Jetpack Compose で開発していく手順を紹介します。
📎 メニュー
✅ 第0回：イントロダクション
➡️ 第1回：プロジェクトの用意と Jetpack Compose の概要
⬜ 第2回：アプリ画面を作ってみよう
⬜ 第3回：ボタンのクリックイベントを付けよう
プロジェクトの作成
📘 参考：p.12〜（書籍はこちら）
まずは新しいプロジェクトを作成します。
Empty Activity を選択して [Next] を押します。
* Empty Views Activity と間違いやすいので注意！
プロジェクト情報を入力します。
Name に Flower Compose と入力して、その他は変更せずに [Finish] を押します。
プロジェクトが作成されると、以下のような画面になっています。XML を使ったプロジェクトと違って、activity_main.xml が存在しないのが Jetpack Compose の大きな特徴です。
Jetpack Compose の概要
コードを書き始める前に、現在 MainActivity.kt に書いてあるコードについて簡単に紹介します。
ここに書いてあるコードはプロジェクトを作成すると必ず用意されるもので、大きく３つのブロックに分かれています。
① onCreate メソッド
📘 参考：p.44〜（書籍はこちら）
１つ目は onCreate メソッドで、アプリを起動した時に最初に呼ばれるメソッドです。
コードの書き方は変わっていますが XML を使った従来のプロジェクトにも用意されていたメソッドです。
アプリ画面の初期準備をしているメソッドなので、削除や名前を変更しないようにしましょう。
② Greeting コンポーザブル関数
33行目から Greeting という名前の関数があります。
この関数の直前に @Composable というコードが書いてあって、これが Jetpack Compose で欠かすことができないコンポーザブル関数であることの目印です。
この目印をアノテーションと言って、＠Composable が付いている関数（コンポーザブル関数）は「テキストやボタンなどの UI（アプリ画面）を作成する関数であること」を意味します。
現時点では UI を作成する関数には必ず @Composable がつくということを覚えておいてください。
Greeting コンポーザブル関数の中に書いてあるコードについては次回詳しく紹介しますが、 テキストを表示するコードが書いてあります。
③ GreetingPreview コンポーザブル関数
次は43行目あたりにある GreetingPreview コンポーザブル関数です。
この関数にも @Composable がついているので、コンポーザブル関数であることがわかります。
この関数には @Preview アノテーションもついています。
Jetpack Compose では、とても便利なプレビュー機能が用意されていて、これを使うためのアノテーションが @Preview です。
プレビューの表示方法
画面右上に並んでいる３つのアイコンの真ん中 [Split] をクリックします。
[Build & Refresh] をクリックします。
Hello Android! と表示されましたか？
GreetingPreview コンポーザブル関数に書いてあるコードが、画面右側プレビューに表示される仕組みになっています。
ここでは Greeting 関数が呼び出されて、文字列が表示されています。
テキストを変更してみましょう
Hello Android! を Hello World! に変更してみましょう。
45 行目の
Greeting("Android")を
Greeting("World")に変更します。
プレビュー画面に Hello World! と表示されましたか？
このように Jetpack Compose でもプレビュー画面を見ながら開発を進めていくことができます。
XML を使った開発にもプレビュー機能はありましたが、Jetpack Compose では「エミュレータを起動しなくてもアプリ画面を操作できる機能」が用意されています。
これがとても便利な機能なので、次回以降使ってみましょう！
画像と文字列の用意
📘 参考：p.31〜（書籍はこちら）
次にアプリ内で使う画像とテキストを用意しておきましょう。
画像の用意
画像のダウンロード
このアプリでは６枚の画像を使用します。
画像だけダウンロードする方は以下の「ダウンロード」ボタンをクリック、書籍のサンプルコードも一緒にダウンロードしたい方はこちらのページ（付属データ）をご利用ください。
画像をプロジェクトに置く
画面左側のプロジェクト構造 drawable フォルダの上で右クリックして、Mac の方は [Open In] → [Finder] を、Windows の方は [Open In] → [Explorer] をクリックします。
先ほどダウンロードした６枚の画像を drawable フォルダの中に置いてください。
drawable フォルダに画像が追加されていることを確認しましょう。
文字列の用意
画面左側のプロジェクト構造から res → values → strings.xml を開きます。
以下のコードを追加してください。
次に行うこと
以上で準備は完了です！
次回は「テキスト・画像・ボタン」を作成するコードを書いていきましょう。
>> 第２回 アプリ画面をつくってみように進む（準備中）
書籍の紹介
書籍では、フラワーシュミレータを含めた全６種類のアプリの作り方を学ぶことができます。（Jetpack Compose ではなく XML による開発です）
「コードを書く→アプリを動かす→コードを書く…」という手順を繰り返すことで、途中で挫折しにくい構成になっています。
とにかく動作するアプリを作ってみたい方、難しい参考書で挫折しまった方にオススメです！
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！
