はじめてのアプリ開発!Ionicで作るToDoリスト ②要素ありすぎてワケ分からないよ 編
今日もお疲れ様です。前回に引き続き、初めてのアプリ開発に向けたドタバタを書いていこうと思います。いよいよ取り掛かります!
(目安:2分)
前回は、Ionicでアプリ開発を進めるための開発環境を構築していました。もしよろしければそちらもご覧ください。
【目次】
Ionic Start !
初見殺しの「ファイル呼び出し」
コマンドプロンプトからチュートリアル用のフォルダを作成して、いざ突入!
してみると、一気にいろんな見たことも無いファイルやらなにやらが作成されております。
こんな感じで。
(GOMプレーヤーは…絶対関係ないよな…。笑)
TypeScriptという、JavaScriptの親戚のような言語で書かれているそうですね。本書で扱っているチュートリアルの中でも一番最初の章なので、このファイルはこういう目的で~といった解説がいろいろ書かれています。もう見たこと無い単語だらけでパニック状態でしたが、
src/app内のファイルを触ることが9割ほどを占めるので、すべてのフォルダの役割を覚える必要はありません。
という筆者の優しいお言葉に安堵。
htmlから順にファイルの呼び出しを追っていきましょう、ということで読み進めますが、これがもう
初見殺し。
index.html が app/main.ts を呼び出し、
app/main.ts が app/app.module.ts を呼び出し、
app/app.module.ts が app/app/component.ts を呼び出し…
ダメだ、、フランス語を読んでいるみたいだ、、
(読めないけど)
実務経験のある方からしたら、掛け算九九的なレベルなんでしょうね。ど初心者からしたらさっぱり分かりませんが、それでも触っているうちに分かるようになるだろう!ということでひるまず進んでいきます!
はじめての文法「import」
分からないなりに、まずはどんなことが書かれているのかじーっと観察してみます。すると、いくつかのファイルでは
import { ○○○ } from △△△
みたいなコードが共通して書かれているのが分かってきました。
import {enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';
みたいな。
本書でもしっかり解説してくださっています。要はオブジェクトを一つ一つ自分で組み立てるのは面倒だから、出来合いのものを配っているところから取り寄せて、全体的に適応しますよ、ということなんですね!厳密には違うのかもしれませんが、僕はそう理解しました。
イメージで言ったら、パワーポイントの見栄えをよくするために、自分で色を塗ったりするのは面倒だから、スマートアートとかデザインレイアウトを使っちゃえ、的なことなんでしょうか。まあ動かしていくうちにまた理解できるようになるかな。
画面が出ただけで感動
ひとまず、画像で解説してくださっている通りに、コードを完全複写して進めていきます。htmlにはこう、それと関連したtsにはこう。分からないけど突き進む。
ion-inputとion-listというテンプレートを組み合わせて、タスクの「追加」と「一覧化」をするということですね。ふむふむ。IonicFrameWorkのサイトにひな形が張られているので、そちらを拝借。テキストの通り微調整して適応。そういった流れを繰り返していきます。
(この辺、夢中になっていたので画像撮ってなかった、、、)
こうしてイチから作っていくと、「タスクリストってすごいなあ」ってしみじみ思いました。入力した文字データを保存して、ファイル上に上書きしてって、プログラム単位で分解していくとものすごい工程を経ているんですよね。体感的には2,3秒で終わることが。作った人頭いいなあ~なんて思いながらサクサク進めていくと、、、
おおおお!!!タスクリストっぽい!!!
感動だ~、、、
まだ追加押しても何も反応しないですが、今まで書いてきてたのがこんな風に表示されるのかと、急に理解でき始めた感じがしてきました。この開発ツール、コードを書き直すとすぐに反映して確認できるのですごく便利ですね。「ここの文字を変えたらどこが変わるんだろう」なんて感じで、しばらく遊んでいました。笑
次回「なんちゃってToDoリスト、完成!」
テキストを複写しただけですので、何がどう絡み合っているのか、ほとんど理解していません。それでも「特にこのtsファイルとhtmlファイルが連携して表示してくれているんだな!それにはこのコードが重要なんだな!」ていうレベルには分かってきました。
ホント楽しいですね、こういうの。時間を忘れてしまいます。