こんにちは、エリックです。前回はKotlinについての記事でしたが、今回はウェブアプリについて書いていきたいと思います。
1.フロントエンドとはなんでしょうか?
フロントエンドって何でしょう? 簡単に説明すると、ウェブサイトで「ユーザが見える側」のことです。もうちょっと細かく説明すると、ブラウザ(クライアント)で動いているコードです、この「見える側」はJavascript、CSS、HTMLで記述されています。HTMLは土台を作るためのコード、CSSはその土台を美しくするコード、そしてJavascriptはウェブサイトをダイナミックに動かせるようにするコードですね。
僕が初めてウェブサイトと触れた時は「ウェブアプリ」と言うものはありませんでした。その時、僕にとってJavascriptはアラートを発生させるためだけのプログラミング言語でした(笑)。もちろんこれはもう10年前の話。現在では全く違います。これまでの10年間、たくさんのフレームワークが開発されてきました。また、ウェブの開発の方法も、かなり進化してきました。この進化に関して、引き続きお話ししていきたいと思います。
2.ウェブアプリとはなんでしょうか?
ウェブアプリとはなんなのでしょう。簡単に言うと、スマホアプリやPCプログラムのような機能を、ブラウザ上で実現してしまうこと。つまり、インタラクティブなウェブサイトですね。例があれば理解しやすいかもしれません。Gmailはウェブアプリ。Facebookもウェブアプリです。そしてTwitterもウェブアプリです。そう、ウェブアプリってかなり身近なものなんですね。
3.Single Page Application
数年前からウェブアプリの機能を、より面白く、さらに深くしてきた技術が多々あります。自分の好きな技術のひとつは、Single Page Application(以下SPA)です。
簡単に言うと、SPAはブラウザでウェブページが一度ロードされれば、そのままそのウェブページで動作するものです。通常のウェブページであれば、遷移ごとにサーバから全てのHTMLをロードする必要がありますが、SPAでは遷移ごとに「DOM」(HTMLの要素)を変更しています。
動作としては、一瞬でページがロードされるため、ユーザにとってはスマホのアプリを使っているような気分になることができます。ですが、サーバから情報を取得する必要がありますね。SPAの基本は非同期(AJAX)でサーバから情報を取得して、そのデータをページに反映することです。こうすると遷移ごとに全ての情報をもう一度取得するのではなく、必要なデータだけをサーバから取得することができます。便利ですね。
4.ウェブアプリの利点と悩み
様々な機能を持ったウェブアプリを制作するにあたり、自分にとって悩みになる点、そして利点を挙げたいと思います。
悩み
ウェブアプリを使う上でエンドユーザとしての悩みはほとんどありません。悩みやデメリットの多くは主に開発側で発生します。
一つは、フレームワークを使ってしまうとデフォルトの環境ではなくなるので、3rd Partyライブラリでコンフリクトが発生する可能性がある、ということです。いい開発者であれば最終的にエンドユーザに影響は出ません。ここは開発者として頑張らなくてはいけない点だと思います。
もう一つは、ウェブアプリはネイティブアプリよりパフォーマンスが低いので、高いパフォーマンスを発揮しなければならないアプリを作成する時には注意する必要があるということ。また、ブラウザによって制御される動作がありますので、ネイティブアプリよりもできることが少ない場合もあるかもしれません。
また、ブラウザによってCSSとJavascriptの使い方が異なりますので、全てのブラウザが同じ結果になるように開発者は頑張らなければなりません。開発が始まった瞬間から、Internet Explorerや携帯版のブラウザではコードによる実装結果が異なる、という現状を意識しながら開発すべきです。プログラミングというものは、最終的にできないことはありませんが、各OSと各ブラウザの長所と短所を知ることは、非常に大事だと思います。
利点
ウェブアプリはユーザにとって非常にメリットのある、便利な存在だと思っています。
- ロード時間が少なくなります。遷移ごと必要なデータだけはサーバとやりとりする必要があります。
- 良いUXであれば、スマホアプリのような便利な操作感になります。操作しやすくて、満足度も上がります。
- スマホアプリやPCプログラムなどに比べるとアップデートが不要。インストールする必要も不要です。
自分は開発者でもありますが、エンドユーザでもあります。遅かったり使いにくかったりするウェブサイトには入りたくないと思ってしまいます。ウェブアプリの利点が発揮されるためには、優秀なデザイナーも必要なんですね。
一つのウェブアプリはどこでも使うことができます。スマホ、PC、タブレットなどの端末にはブラウザがありますので、一つのウェブアプリで誰でもどの端末でも利用できるということになります。これはエンドユーザと開発者双方にメリットがあるはずです。
ユーザは端末ごとでUIやUXを限りなく似せたウェブアプリに慣れると、端末ごとでの操作の違和感がありません。例えば、こういう問題は結構発生しがちなのですが、同じアプリなのにスマホでできることがウェブ版ではできないという状況があります。スマホアプリに追加済みの機能があっても、ウェブにまだ実装されてない場合、ユーザにストレスをかけてしまいます。一つのウェブアプリでは必ず全ての端末で同じ動作ができるようにならなければいけません。なんてったって、同じアプリですからね。
開発者にとっては、一つのウェブアプリに力を入れれば、より良いアプリが作れます。翻ると、同じ期間で、二つ、三つのOSの為にアプリを作る必要があると品質に影響が及ぶかもしれません。一つのウェブアプリを作るとしても、対応する環境の多さに合わせて開発期間などのプランニングを念入りに行うべきと言えるでしょう。
ウェブアプリをはじめとするフロントエンドの分野はどんどん進化していますので、今後ももっとスマホやPCなどのネイティブアプリに、ウェブアプリの能力は近づいていくことでしょう。
ウェブアプリ、ネイティブアプリはそれぞれのいい所と悪い所があります。「ウェブアプリの方が良い」「ネイティブアプリが絶対に良い!」とは言えません。一番大切なのは、ユーザーのニーズを把握すること。可能であれば、そしてニーズがあるのであれば、ウェブアプリもネイティブアプリも両方を開発し、最高の品質を実現するのがベストですね。
読んでもらってありがとうございます!また次回を楽しみにしてください
