はじめに
今回はコンポーネント化について学んだことを書いていきたいと思います。flutterのviewを書く機会がこれまでに何度かありましたが、コンポーネント化ができるようになってその便利さとコードに見やすさが大きく変わり、すばらしいいってなりました。
そんなコンポーネント化がどうして便利なのか、flutterではどのように活用すればいいのか、今後生かしていけるように調べてことをまとめてみようと思います。
コンポーネント化とは
コンポーネント化とは英単語のcomponentの意味、「成分・構成要素」のいう通りシステムやアプリケーションの部品のように小さく分割してまとめることです。コード上では同じ部分を使いまわす際やコードを見やすくするために利用することがあります。
メリット
コンポーネント化のメリットには以下のようなものがあげられます。
可読性の向上
まずあげられるのはコードが見やすくなるということです。たとえば、アプリ開発の際にテキストやボタンが多く含まれたページを作成する際にはどこからどこまでがボタンの詳細を書いているのか探すのに時間がかかったり読みにくかったりします。そのような場合にそれぞれをコンポーネント化して、ページ作成の部分では呼び出すようにすればより見やすく、修正の場合も修正箇所を見つけやすくなります。
再利用のしやすさ
コンポーネント化をする理由として再利用ができるという点も大きいです。Listtileのように一部分、例えばテキストやアイコンは変わるけど、テキストサイズやその他の条件は同じという場合に変えたい部分のみを変数化するだけで同じコードを何度も何度も書かなくてよくなります。
共通部分を一括に修正できる
たとえば同じサイズ、色、太さが同じのテキストをたくさん縦にならべるページを作成する際などに、作成途中でサイズを変更することになったとします。しかし、10個必要なら10個同じコードをそれぞれ書いていたらすべて変えていかなければなりません。そんなときにコンポーネント化は役に立ちます。
共通部分を一つにまとめていれば一か所変更するだけですべてを変更することができます。
これはテーマカラーがまだ決まっていない、いざコードを書いてみたら思っていたより文字が大きく感じた際にあとからの変更で手間が省けて便利だと感じました。
使用例
flutterでviewを作成する際に役に立つ例をいくつかあげておきます。
もうこれはほとんど今後の自分のためのメモのようなものかもしれませんが...
- ボタン
- テキスト
- アイコン
- ListTile
- カード
- ダイアログ
- AppBar
- BottomNavigationBar
- Drawer
書き出してみましたがあまり意味はなかったように感じます。
しかし、同じコードを使いまわす場合と1つのWidgetでコードが長くなる場合という点を意識すればよいと改めて再確認することができました。
最後に
今回はコンポーネント化について書いてみました。利用すればするほどその便利さを実感しているので、今後はどこまでするべきなのかよく考えながら開発していきたいと思っています。今回メリットや使用例を書いて改めてコンポーネント化ってすばらしいと感じました。
現在自分がかかわっているアプリ開発のviewでもListTileで都道府県等を列挙する場合などで大きく役に立ちました。47回も同じコードを書くにはコピペといえどあまりにも効率が悪いと感じました。実際は都道府県のページを作る際に非効率な方法でコードを書いてしまったので、そのときの反省やどうすればよかったのかはまた改めて記事にしてみようと思います。
Discussion