こんにちは、TakahiRoyteです！前回の宣言通り今回は実際のアプリケーションを作っていきます。今回作成するのはTODOアプリです。いわゆる鉄板テーマですが基本を学んでいく上では良い題材だと思うのでこれで行きましょう。
まずは機能を考えよう
TODOアプリということであれば、下記の5機能があれば大体大丈夫でしょうか。
- 保存されているToDoを表示する
- 新規にToDoを追加でき、リストに表示できる
- ToDoをチェックのオン/オフで完了/未完了に切り替えられる
- すべて/実行中/完了済でフィルターをかけ表示できる
- チェックを付けたToDoを一括して削除できる
何か抜けていたらその都度追加していきましょう。早速これをベースにコーディングと行きたいところかもしれませんが、その前に一つ。ペーパープロトタイピングってご存知でしょうか？普通のプロトタイピングなら聞いたことがある方も多いかもしれませんが、こちらはその名の通り紙でプロトタイプを起こします。下記動画を見てみてください。
これは作り込みすぎていて珍しいくらいの例ですが、イメージはこんな形で紙にアプリの画面を描きます。今回はアプリ規模が小さいので必要性は薄いですがご紹介ついでにやってみました。描く時は鉛筆や消せるボールペンでやるのがおすすめです。
見てみた感じ抜けはなさそうですね。それではHTMLに起こしていきましょう。
構造のHTML
HTML5ではHTMLは構造、CSSはスタイル、JSはロジックと分断することを良しとしています。Vue.jsはこの思想に乗っかってアプリを作れるのでスッキリしたコーディングがしやすいです。それでは早速、先程のペーパープロトを見ながらHTMLに起こしていきます。まずプロジェクト用のルートフォルダを作成し、直下にindex.htmlを作成してください。
todo └index.html ★
このindex.htmlにコーディングしていきましょう。VSCodeをお使いの方はHTMLファイルにhtml:5と入力した後にTABを押してみてください。Emmetというプラグインが働いてhtmlやらheadやらbodyやらのタグをパパッと入力してくれます。Emmetは他にも色々できるので興味ある方は調べてみてください。
イメージにかなり近いですね。ただ見た目、味気なくないですか？先程軽く触れましたが、HTMLは構造だけでしかないので、スタイルはCSSですべて作成します。なのでCSSも適用していきましょう。
スタイルのCSS
HTMLはページごとに千差万別でフレームワークというものはありません（テンプレートはあるかとは思います）。ですがCSSはある程度共通的に利用できるものなのでCSSフレームワークとよばれるものは多数存在します。以下はその一部です。
- Bootstrap: Twitter社製の超有名全部入りFW、有名すぎて避ける人もいる
- Foundation: Bootstrapに並ぶ人気ぷり、部品も多い重量級
- Semantic UI: セマンティック＝わかりやすさを重視した大型FW
- Skeleton: 最低限（骨）だけを提供しシンプルさを追求
- Milligram: ミニマルなフレームワーク
CSSフレームワークは2タイプあります。一つは読み込んでHTMLタグにclass属性を付与するタイプで、もう一つは読み込むだけでスタイルが適用されるタイプです。BootstrapやFoundationなどの比較的大型なフレームワークは前者、SkeletonやMilligramなどのミニマルなフレームワークは後者が多い傾向があります。大型なフレームワークはWebサイトに使える部品やアイコンなど色々入っていてできることは多いのですが、今回はシンプルなアプリなのでCSS単体で動作する超軽量のMilligramを採用しましょう。
ファイルのダウンロードは上記リンクに飛んで、DOWNLOAD MILLIGRAMというボタンがあるのでくりっくするとzipファイルがダウンロードできます。解凍したらdistディレクトリにあるmilligram.cssを新規作成したcssフォルダに格納してください。
todo ├css │└milligram.css ★ └index.html
CSSを利用するにはheaderタグ内でlinkタグを使って読み込むだけです。
読み込んだだけではリスト周りと下のフィルターのAリンク周りが見づらいですね。若干HTMLにも修正を加えましょう。
リストを削除して、All, Working, Completedの間に縦棒を加えました。また、全体をdivタグのcontainerクラスで囲っています。そして最後にheaderタグ内にmetaタグでviewportについて設定をしています。実はこの時点で最近必須のレスポンシブデザインへの対応は完了しました。レスポンシブデザインとはPC、スマホを問わずブラウザに合わせてサイズが対応して切り替わるデザインです。レスポンシブを実感するためにChromeの開発者機能を使ってみましょう。F12を押してください。下記のような開発者画面がでてくると思います。
この時点で既にブラウザ画面は横に追いやられてますが、横スクロールが表示されないよう適切な見た目になってると思います。これがレスポンシブデザインです。ついでに、開発者画面の左上にある、スマホとタブレットが重なっているアイコンをクリックしてみてください。
実際にiPhoneやAndroidスマホの表示に近い形での見た目が確認できます。これはWeb開発においてはスマホ対応が必須な現代においてかなり便利な機能なので、ぜひ使ってみてください。
これで見た目は整った！
見た目はかなりそれっぽくなりましたね！しかもレスポンシブ対応です。さて、残るはVue.jsを使ったアプリ化だけです。そういえば今回はVue.jsに一切触れられなかったですね。首を長くして待っている方はすみません……次回は基本からしっかりお伝えしますのでお楽しみに！
以下は今回のまとめです。
- アプリに必要な機能を考える
- ペーパープロトを作りながら機能の過不足を確認する
- ペーパープロトをもとにHTMLをおこす
- CSSはフレームワークを使って楽にレスポンシブ対応する
ではまた次回お会いしましょう。TakahiRoyteでした。
記事一覧
第1回 JSの歴史とVue.jsを選んだ理由
第2回 開発環境とHello Vue.js
第3回 構造のHTMLとスタイルのCSS
第4回 JSコーディング開始 ★次回★
第5回 保存と読込
第6回 リストのフィルター
Future Hearts 