HTML
CSS
UX
ionic

WebはHTML/CSSから学びはじめるべきか|HTMLも知らない人にIonic本をさせた知見

10年以上前からWebの勉強は「まずHTMLを覚えて、フォントサイズをかえて『すごーい』」という学習がメジャーですが、それって本当に正しいのかなという記事です。

前置き ー Ionic Frameworkとは

「Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉」が発売されます。

IonicはHTML5でモバイルアプリをつくるためのプラットフォームです。
1ソースでWeb/iOS/Androidアプリがつくれることから、ドワンゴ、pixiv、Exciteといった有名企業も採用しており、「Webアプリをつくって人気がでたら、そのままiOSアプリもリリース!」ができることから、Webの価値を押し上げると言われています。モバイルネイティブなUIデザインすてきですよ。

スクリーンショット 2018-01-18 9.20.30.png

本題

で、本書を執筆した動機は「HTML書けたらアプリつくることができるのに、それを知らない方が多くてもったいない」だったわけですが、ふと頭をよぎったわけです。

HTMLも知らない人に、Ionicをつかわせてみたらどうなるのかと。

「まずHTML/CSSを学ばせてあげようよ」という指摘は不要です。わかってる、わかってます。でも興味を持ってしまったのです。そこで、友人(30歳/女性/事務職)にIonic本を渡してチュートリアルも含めて進めてもらいました。

観察経過

1. 明記してても、コマンドラインとエディタの違いがわからない

まずつまづくのは、開発するのにコマンドライン(ターミナル)とエディタ(VSCode)の二種類を使いわけるところでした。つまりは ionic startコマンドをエディタで入力し、HTMLをコマンドラインに書く。まぁすぐ覚えました。

2. VSCodeの開き方がわからない

さすがにすぐ覚えた。

3. 意外とできる

コマンドラインとエディタの違い、VSCodeの開き方を覚えたら意外と進めることができました。 すっかりすぐ心折れると思ってた。

ionic serveコマンドで、デフォルトテンプレートから立ち上げてモニタに表示できた時は歓声あげてました。

スクリーンショット 2018-01-18 9.48.48.png

4. 躓きはtypo

チュートリアルを進めていくに当たって、「どうしても動かないー!!」ということが度々あったのですが、ほぼ90%はtypoでした。例えば、 title と入力したはずのものが tittle になってたとか。
<ion-input type="text">と入力する時に <ion-inputtype="text">(空白忘れ)になってたとか。あと、(tap)はよく(top)になってる。

5. 進めることができてた

ちょいちょい質問されたのですが、大枠ではHTMLの知識がなくてもIonic本は進めることができてました。先入観がない真っ白な状態なので「タスクランナーを使う」みたいなことも当たり前として捉えてるのはよかったなぁという気持ちです。

6. スマホのネイティブ開発は難関

HTMLが、というよりもPC自体が苦手な方だったので、XcodeAndroid Studioの設定についてはめちゃくちゃ戸惑ってました。デバイスエミュレーターを使うためにデバイスデータをDLするとか、よくわからないよね(書籍情報ちょっと足りないので、後日、加筆記事ネットで公開します)

7. スマホのネイティブ開発が一番感動してた

つくったものが、自分のスマホで起動するところは再び歓声があがってました。「そうかこれがスマホ世代か」という気持ち。

追記: serve の意味がわからなかった

ionic serveコマンドを何といったらいいかわからずに「開けゴマコマンド」といってた。いや、間違ってはないけどさ・・・。

思ったこと

Ionic本を進める様子をみていたのですが(大体3人日ぐらいかかってました)、ふと思ったのは「これってUXめちゃくちゃ高いよな」ということでした。

Webの勉強は「まずHTMLを覚えて、フォントサイズをかえて『すごーい』」というところからはじめるのが一般的ですし、それが教えやすいのもよくわかります。よくいう「小さな成功体験を積み重ねる」教え方ですよね。
けれど、Webの勉強意欲が一番高いのは、当然ながら学びはじめる前なわけです。そのステージにいる人に提供する課題は、果たしてフォントサイズを変えることなのかなと。少なくても歓声をあげるようなUXは提供できないように思います。

それよりは、Ionicのような「タスクランナー入り、UIコンポーネント入り、モバイルでも動かせる」を体験させた方がUXは高いのではないでしょうか。少なくても<Font size="3">を教えたり、簡単にネットにアップロードしよう!FTPだ!!のような、現場で使わない知識を「教えやすいから」と学ばすのは何か違うなーとIonic本を進めてる様子をみて思いました。

10年前と違って、ページネーションつけてたら「Twitterみたいにスクロールしたらコンテンツでてこないの?」とか言われる世の中ですので、「今のWebの教え方」って再考する余地はあるのではないでしょうか。

それでは、また。

追記

HTMLも知らない彼女がチャレンジした書籍はこちらです。「いやいや、こちらの書籍の方が初心者に相応しい」「もっと高度なところからはじめた方がいいのでは」という意見ありましたらぜひコメントくださいませー。
スクリーンショット 2018-01-18 9.20.30.png