Kotlinでテキスト表示・編集！初心者でもわかるTextViewとEditTextの使い方

Kotlinでテキスト表示・編集！TextViewとEditTextの使い方

先生と生徒の会話形式で理解しよう

生徒

「Kotlinでスマホアプリを作ってみたいんですが、画面に文字を表示したり入力できる機能ってどうやって使うんですか？」

先生

「それにはTextViewとEditTextという部品を使います。これはAndroidアプリ開発でとてもよく使われる要素ですよ。」

生徒

「なんだか難しそう……。パソコンとかあまり詳しくなくても理解できますか？」

先生

「もちろん大丈夫です！Kotlinでのアプリ開発を、初心者向けにわかりやすく解説していきますね！」

1. TextViewとは？

TextView（テキストビュー）とは、画面に文字（テキスト）を表示するための部品（ウィジェット）のことです。

たとえば、「こんにちは！」という文字をユーザーに見せたいときに使います。入力はできませんが、メッセージやラベルなどの表示に最適です。

2. EditTextとは？

EditText（エディットテキスト）は、ユーザーが文字を入力できる部品です。

例えば、名前を入力する欄や検索する文字を入れるフォームなどで使われます。TextViewが「読むだけの本」なら、EditTextは「書き込めるノート」のようなものです。

3. 実際に使ってみよう！基本の画面レイアウト

まずは、画面の見た目を定義するレイアウトファイル（XML）を作成します。ここではTextViewとEditText、そしてButtonを配置します。


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="ここに名前を入力" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="表示する" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="入力された名前がここに出ます" />

</LinearLayout>

4. Kotlinコードで表示内容を変えてみよう

次に、Kotlinファイルで「ボタンを押すとEditTextの文字がTextViewに表示される」処理を実装します。


import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val editText = findViewById<EditText>(R.id.editText)
        val button = findViewById<Button>(R.id.button)
        val textView = findViewById<TextView>(R.id.textView)

        button.setOnClickListener {
            val inputText = editText.text.toString()
            textView.text = "こんにちは、$inputText さん！"
        }
    }
}

5. 解説：このコードの仕組み

findViewById：XMLで定義した各部品をKotlinで使えるようにします。
editText.text.toString()：ユーザーが入力した文字を取り出します。
textView.text = ...：TextViewの表示内容を変更します。

つまり、ユーザーが名前を入力し、ボタンを押すと「こんにちは、〇〇さん！」と表示される仕組みです。

6. 実行結果を見てみよう

たとえば「さくら」と入力してボタンを押すと、以下のように表示されます。


こんにちは、さくら さん！

7. hintとは？初心者がつまずきやすいポイント

android:hintは、入力欄に文字がまだ入っていないときに、薄く表示されるガイドです。たとえば「名前を入力してください」と書かれていれば、どんな内容を入れればよいかが分かります。

これは実際のテキストではなく、入力が始まると消えます。

8. TextViewやEditTextはどう使い分けるの？

簡単に整理すると、次のように使い分けます。

TextView：アプリが「見せる」文字（固定の案内文やボタンのラベル）
EditText：ユーザーが「入力する」文字（名前・メール・検索など）

この違いを覚えておくと、Androidアプリ開発がぐっと楽になります。

9. アプリ開発の基礎を固めよう

TextViewとEditTextは、Androidアプリを作るうえでとても基本的な要素です。Kotlinを使って自分だけのアプリを作る第一歩として、しっかり覚えておきましょう。

とくに初心者は、どの部品が「表示用」で、どれが「入力用」かを混同しやすいので、何度も試しながら覚えることが大切です。

Kotlinを基礎からしっかり学びたい人や、 Java経験を活かしてモダンな言語にステップアップしたい人には、定番の入門書がこちらです。

基礎からわかるKotlinをAmazonで見る

※ Amazon広告リンク

まとめ

TextViewとEditTextの基本とKotlinでの使い方の振り返り

KotlinによるAndroidアプリ開発において、TextViewとEditTextは最も基本となる重要な部品です。TextViewは画面に文字を表示するための部品であり、ユーザーに情報を伝える役割を担います。一方でEditTextはユーザーが文字を入力するための部品であり、入力フォームや検索機能などに欠かせない存在です。

本記事では、TextViewとEditTextの違いや使い分け、さらにButtonと組み合わせた基本的な処理の流れを学びました。特に、ユーザーが入力した文字を取得し、それを画面に反映させるという一連の流れは、KotlinによるAndroidアプリ開発の基礎として非常に重要です。

ユーザー入力と表示処理の流れを理解する

Androidアプリでは、ユーザーの操作に応じて画面の内容を変化させることが求められます。今回のサンプルでは、EditTextに入力された文字列を取得し、ButtonのクリックイベントをきっかけにTextViewへ表示する処理を実装しました。この一連の流れを理解することで、より実用的なアプリ開発へと発展させることができます。

findViewByIdを使って画面部品を取得し、setOnClickListenerでボタン操作を検知し、textプロパティを使って表示内容を変更するという基本構造は、さまざまなアプリで応用されます。これらの基本操作を確実に身につけることが、Android開発のスキル向上につながります。


val inputText = editText.text.toString()
textView.text = "こんにちは、$inputText さん！"

入力補助とユーザビリティの向上

androidhint属性を使うことで、ユーザーに対して入力内容のヒントを表示することができます。この機能はユーザビリティの向上に直結し、アプリの使いやすさを大きく左右します。特に初心者向けのアプリや入力項目が多い画面では、適切なヒント表示が重要になります。

また、TextViewのテキストサイズや色、EditTextの入力形式などを工夫することで、より見やすく使いやすい画面を作ることができます。こうした細かい調整も、Androidアプリ開発において大切なポイントです。

よくあるミスと対処方法の整理

Kotlin初心者がよくつまずくポイントとして、findViewByIdの指定ミス、idの不一致、textの取得方法の誤りなどがあります。特にeditTexttextのような書き間違いや、toStringを付け忘れるケースはよく見られます。

エラーが発生した場合は、コードとレイアウトXMLの対応関係を確認し、idが一致しているか、正しい部品を参照しているかを丁寧に見直すことが重要です。基本的な確認作業を習慣化することで、効率よく問題を解決できるようになります。

サンプルコードで最終チェック

最後に、今回学んだ基本的な処理の流れをもう一度確認しておきましょう。入力と表示を組み合わせたシンプルな処理ですが、Androidアプリ開発の基礎として非常に重要な内容です。


button.setOnClickListener {
    val inputText = editText.text.toString()
    textView.text = "入力内容は、$inputText です"
}

このように、Kotlinを使ったTextViewとEditTextの操作を理解することで、ユーザーとのやり取りが可能なアプリを作成できるようになります。基本をしっかり押さえておくことで、ログイン画面や検索機能、フォーム入力などさまざまな機能へ応用することができます。

Androidアプリ開発において、TextViewとEditTextは繰り返し使う重要な要素です。今回の内容を何度も復習しながら、自分の手でコードを書いて動かすことで、確実に理解を深めていきましょう。

先生と生徒の振り返り会話

生徒

TextViewとEditTextの違いがよく分かりました。表示するものと入力するものをしっかり分けて考えるのが大事なんですね。

先生

その通りです。役割を理解して使い分けることで、分かりやすいアプリを作ることができます。

生徒

ボタンを押したら文字が変わる仕組みも理解できました。意外とシンプルで驚きました。

先生

Kotlinのコードはシンプルですが、とても強力です。基本を覚えると応用がどんどん広がりますよ。

生徒

hintの使い方も便利ですね。ユーザーに優しい画面を作るのが大事だと分かりました。

先生

ユーザビリティはとても重要です。使いやすいアプリはそれだけで価値があります。

生徒

もっといろんな入力や表示を組み合わせてみたくなりました。

先生

ぜひ挑戦してみてください。繰り返し実践することで、確実にスキルが身につきます。

【未経験OK】Kotlinで始めるプログラミング入門｜ゼロから「動く喜び」を体験する60分

「プログラミングを始めたい」を形にする。最新言語Kotlinで楽しむ、ものづくりの第一歩。

本講座は、プログラミング経験が全くない方のためのエントリー講座です。「コードを書くってどういうこと？」という基本から、世界中で使われている最新言語Kotlin（コトリン）を使って、実際にプログラムを動かすまでを体験します。難しい理屈よりも、まずは「自分の手で動かす楽しさ」を最短距離で実感していただきます。