LoginSignup
4
2

※⚠kotlin初心者必見⚠※アプリ開発完全未経美少女エンジニアが最強のToDoアプリを怒りに任せて自作するまでの話#3(2/6~2/12)

Posted at

※※※今回は初心者なりにkotlinのJetpackComposを解説しているので、見てあげてください( ;∀;)※※※
(ChatGPTをふんだんに使いました!)

自己紹介

🌻著者プロフィール🌻
名前:おじょち(25歳)
技術領域:ねっとわーく(よわ)、さーば(よわよわ)、ことりん(げきよわ)
趣味:おさんぽ、くりーむそーだ
X:@ojochi_510510

🌻前回までのあらすじ🌻

🌵前回記事🌵:https://qiita.com/OJOCHI/items/d1b7e66ead1b0c1a014e

  • 更新するっていったのに一週間ほったらかしにしていた。。。😭
  • 初めてのアプリをみんなに披露した🌸
  • ハンズオンでやるだけだと身につかないので、しっかりコードを解析してみていく

🌻最近のおじょち🌻

Udemyで英語のkotlinコースを黙々とやっています。おじょちです🤗

最近は、Udemyで学んだことを私の言葉で解析しなおしてみる!!
という勉強の仕方をしてみています!🤗
(この方針で合っているかどうかわからないけど。。。楽しいからよし!!)

と、いうわけで、この期間私がやっていたことのご紹介です!🎵


  • kotlinのJetpackComposについて調査👮‍♀️
  • 英語のUdemyのKotlinコース🚘
    • 四則演算から条件分岐などの基本的なところを勉強中!!

こんな感じです!💮

ここからは、それぞれを紹介していきます!!

🌻kotlin JetpackComposについて🌻

JetpackComposってなに??

AndroidのUIをめっちゃ簡単に作れるよ~っていうUIライブラリ(機能)のこと!!

使い方

  • @Composable アノテーションを使って、関数を定義!
  • この関数の中で、UIの要素(例えばボタンやテキスト)の設定をするよ!
  • @Composable1@Composable2 のように番号をつけるわけではなく、@Composable は各関数に対して使われる!

例.(@composableの下にfunで定義した関数が来るようにする!)

@Composable
fun Greeting(name: String) {
    Text("Hello, $name!")
}

簡単なUI作成

  • コードを使って、簡単にUIを作成できる!
  • 色は赤色で、丸いボタン!のようにコード上で指定してあげるだけで、その通りのUIが作成される!!

要素の切り分け

  • それぞれの @Composable 関数は独立しているから、一つの関数を変更しても他の関数に影響はナシ!
  • UIの各部分を個別に管理できるよ!

再利用性

  • @Composable で作成したUIコンポーネントは、アプリ内のどこでも再利用可能!
  • UIに一貫性を持たせられるし、コードの重複も避けられて超便利!

動的なUI

  • アプリの状態やデータの変更に応じて、UIを動的に更新することができるよ!
  • こんな風に動いてほしいな~っていうことをコード上で指定してあげれば、それだけでその通りの動作に!簡単!

まとめ

  • JetpackComposeは**@Composable** を使って、UIは超簡単に作成できる!
  • コード上でいろいろ指定できるから、超便利!

いかがだったでしょうか!!!!!
導入自体は結構わかりやすくできたんじゃないかなって思ってます!!🤗🤗🤗
※間違ってたり、もっといい解釈があったら積極的にコメントくださいね!!!※


🌻英語版Udemy:kotlinコース🌻


私は英語がほぼできないのですが、海外のほうが優良なコースが多いということを耳にしましたので。。。

字幕で頑張っております!!!!!!!

そゆわけです!!!🤗
(これも修行のうち、、、、)

ほいで、現在は「じゃんけんゲーム」なるものを作成しているので、一部ご紹介です!

package com.example.janken

fun main(){
    var computerChoice = ""
    var playerChoice = ""
    println("ぱそくんとじゃんけんをしよう!" +
            "\n"+"何を出すか決めてください" +
            "\n" + "グー , チョキ , パー")
    playerChoice = readln()

    val randomNumber = (1..3).random()
    when (randomNumber){
        1 -> {
            computerChoice = "グー"
        }
        2 -> {
            computerChoice = "チョキ"
        }
        3 -> {
            computerChoice = "パー"
        }
    }
    println(computerChoice)

    val winner = when {
        playerChoice == computerChoice -> "引き分け"
        playerChoice == "グー" && computerChoice == "チョキ" -> "おいら"
        playerChoice == "チョキ" && computerChoice == "パー" -> "おいら"
        playerChoice == "パー" && computerChoice == "グー" -> "おいら"
        else -> "ぱそくん"
    }
    if (winner == "引き分け"){
        println("今回は引き分け")
    }else if (winner == "おいら"){
        println("$winner のかち!!!!!")
    }else{
        println("$winner の勝ち( ;∀;)")
    }
}

どうですか!!!

ifとかwhenとか使っちゃってますよ!!!

実行するとこんな感じです!
Untitled (3).png

負け率が以上に高いのは癪ですが、じゃんけんを新たに生み出したわけです!

さいごに

ここまでご覧いただきありがとうございました!🤗

来週は条件分岐の自己解釈やUI作成に踏み込んでいく予定です!
また見にに来てくださいね!🤗

次回:🌻02/20更新🌻
→ 2/13~2/20までの進捗を書きます!

4
2
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
4
2