はじめてのアプリ開発！Ionicで作るToDoリスト ③なんちゃってToDoリスト、完成！ 編
今日もお疲れ様です。前回に引き続き、ToDoリストに取り掛かっています。手探りではありますが、ようやく完成しそうです！
(目安：2分)
前回は、いよいよIonicの世界に突入した回でした。もしよろしければそちらの奮闘も観察してみて下さい。
【目次】
追加・削除を実装するために
タスク一覧を別ページに追加する
前回までの進捗で、
・タスクの追加ボタンを実装
・タスクのinput欄のアニメーションを実装
といったところまで出来ていました。しかしながら、まだ追加ボタンは機能しておらず、そのほか変更や削除といった機能ももちろんついていませんでしたので、今回はそちらを実装してToDoリストとして完成させたいと思います。
テキストに沿って進めていきます。僕のイメージでは、ToDoリストに追加されたタスクは、消そうと思えばすぐ消せるようになっているのですが、今回はチュートリアルなので、「別ページで変更・削除を管理する」仕様のようです。いずれにしても、作り方はよく分からない。笑
> ionic g
このコマンドによって新しいフォルダを作ります。コマンド一つで関連したtsとhtmlを一気に作成してくれるので便利ですねー！新しいTaskListというページを作るにあたり、ページごとのアイコンを選べるとのこと。
こんな感じの中から選べるんですね。地味ですけど、こういうのものすごく時間かけて選んじゃうタイプなんですよねー。デスクトップのアイコンも、気分転換にちょこちょこ変えちゃうこともあります。笑 今回はLISTっぽいやつをチョイス。
単にリストって言っても、色とか丸みとか選べるみたいで。細かいなー。素晴らしい！
よっしゃ！シンプルだけどアイコン変更完了！
ただ、肝心のページ内が上手く実装出来ない…。
ionVierWillEnter() メソッドと、ngOnInIt() メソッドが出てきたぞ？テキストを何度も読み込んで、なんとか自分の中でかみ砕く。こういうアプリはいろんなページを行ったり来たりするから、そのたびに関数的なものを動かしたりする必要があるっていうことですね。それぞれの細かい違いとか、WillとDidとで見てくれがどう変わるのかは分からないですが、けどひとまずリストページ完成！
この辺もテキスト読み込み→テキスト入力→画面確認→テキスト読み込み→…の繰り返しで、画像撮り忘れ。汗
アクションシート実装、フレームワークに感謝！
ひとまずリストが完成。そして追加も出来るようになり、少しずつ実用的になってきました。しかし今は追加出来るだけなので、タスク完了しても永続的に残り続けます。笑
お次は変更と削除を実装！
アクションシートなるものを適応するんだそう。こちらに関しては外部から取り込んで実装できるということで早速外部サイトへ見に行きます。
ふむふむ。ion-action-sheetというタグで設定すると。テンプレートをコピーしてtsファイルにぺたり。
新しくasync/await構文が出てきたぞー？非同期処理に関する構文だそうなのですが、JavaScriptにもあるみたいですね。JavaScriptの知識の甘さが露呈している、、、
これもまあ、アプリならではのUIを高める工夫の一つなんでしょう（←？）
出来たあ、、、！
ion-action-sheetらくちん！ありがとう！！
HTML、CSSでは四隅の丸みとか文字の配置とかを一つ一つ設定していかないといけないですが、これはもうパッケージで提供してくれるのでありがたすぎます。
完成！
一応、形にはなりました。
ただ、細かい構文や記載方法に謎が多いです。
data => {とか
JSON.stringify(this.tasks) JSON.parse(localStorage.tasks)
とか。
テキストには載せきれない解説もあるかと思うので、こういったところは個別に勉強していく必要がありますね。
作り終えて
変更・削除は別ページでないと出来ない仕様ですが、何とか完成しました。しかも完成といっても仮想上でのものなので、ここからスマホ実機に移して動作確認とかって考えると、まだまだ道は長いんでしょうね～。それでも1週間前の自分よりは確実に前に進んでる！力尽いてる！はず！笑
作り終えてから、触ったページは「home.module.ts」と「home.page.html」がほとんどだったなーなんて気づきました。最初は欲張らず、この2ファイルの関連や機能に注目して勉強していこうかなって思います。このテキストによると、次はWordpressの記事をまとめサイトみたいに収集できるアプリだそうです。
