未経験エンジニア「WebViewってなんですか？」

はじめに

株式会社プロットハブの新人エンジニアです！

未経験エンジニアとして、2023年中旬から弊社で働き始めました。日々の実務を通じて初めて知る言葉や、悩んだエラーについての記事を執筆しています。これらの経験が、同じような悩みを持つ方々の助けになれば嬉しいです。

ぜひ、お暇なときに他の記事もご覧ください😎

執筆にあたって

入社当初の実務では保守運用しているアプリケーションの改修や機能追加をタスクとしてもらい、そのアプリについて簡単に概要説明を受けてコードを追っかけていってどのような処理をしているのか、DB(データベース)はどうなっているのかなどを理解してからタスクに取り掛かりました。

その際に「このアプリはWebView(ウェブビュー)使っていてー…」と言われました。

早速わからん。なんだよWebViewって。。。

当時はポートフォリオとして大きく分けてフロントエンドがReact・バックエンドがRuby on Rails使用したWebアプリを作成したことがあったので、聞いたこともない単語はないかなーと思っていたのですが、いきなりわけわからんから始まりました。さすが実務。

弊社みんな優しいので「それなんですか？」って聞いたら丁寧に教えてくれますが、いきなりフルリモートしている未経験の方は、この拙い記事を一つの武器にしてしていただければ幸いです！

WebViewの基本概念

基本概念：WebViewとはアプリ内にWebブラウザを埋め込む技術である！

以下にまとめます。

Webブラウザとは？

ブラウザはインターネット上のWebページを閲覧するためのソフトウェアのことで、いま現在見ていただいているものがWebページになります。
代表的なブラウザとしてGoogle Chrome、Firefox、Microsoft Edge、Safariがあります。

アプリとは

ここで使用するアプリの定義は大きく3つに分けて使用します。

Webアプリ
- Webブラウザから検索し使用するアプリ。おそらく未経験エンジニアがポートフォリオで作成するURLで検索して使えるようにしているもの全般ウェブアプリになります。
ネイティブアプリ(モバイルアプリ)
- iPhoneやAndroidなどの携帯端末にAppStoreやGooglePlayStoreなどからインストールしたアプリのことです。LINEやinstagramなどを携帯端末から見ているときはモバイルアプリを見ていることになります。
ハイブリッドアプリ
- ネイティブアプリにWebViewの技術を使いウェブアプリと両方の面を兼ね備えたアプリケーションのことです。

基本概念のまとめ

改めてまとめるとWebViewはモバイルアプリの中にモバイルアプリのように振る舞う、Webページを表示する技術のことになります。

WebViewの利用シーン

WebViewの利用シーンとして複数ありますが下記抜粋で紹介します。

ネイティブアプリ開発言語の知識、理解がない
- ネイティブアプリ開発言語の知識などがないが、ネイティブアプリを作成したい場合はWebViewを使用してVueやReactなどで作成したWebページを埋め込むことでネイティブアプリとして開発することができます。
開発コスト削減
- 既にWebアプリケーションとして実装しているものをネイティブアプリとして使用したい場合などはこの技術を使用することで、同じコードベースを流用できるので開発コストの削減に繋がります。
コンテンツの表示
- ニュースアプリやブログアプリでは、外部のウェブページや記事をアプリ内で表示するためにWebViewを使用します。ユーザーはアプリを離れることなく、外部コンテンツを閲覧できます。

ハイブリッドアプリ(WebView使用)のメリット・デメリット

簡単にですが、メリット・デメリットまとめました！！

特徴	メリット	デメリット
開発コスト	既存のWebアプリを利用できるため、開発コストを削減	ネイティブの機能をフルに活用できない場合がある
開発スピード	一度の開発で複数のプラットフォームに対応できる	パフォーマンスがネイティブアプリに劣ることがある
メンテナンス	コードベースが一つなのでメンテナンスが容易	デバッグが複雑になる場合がある

まとめ

ご一読いただきありがとうございました🙇

WebViewについてなんとなく理解いただけていれば幸いです！

また、実務で実際にこの技術を使用しての開発を行うタイミングがあり、その際に使用した開発ツールでMonacaという非常に便利なものがあるのでそちらについての記事もよければご確認ください！