はじめに
アイスタイル Advent Calendar2025の24日目の記事です。
24卒のエンジニア職として入社して現在2年目の髙橋です。
時間が経つのは早いもので、2024年の8月にアプリチームへ配属され、気づけば1年以上が経過していました。
2年目は1年目に比べて多くの案件や難易度の高い案件、メンター業務など多くの業務に携わることができました。
今回はその中でも、お問い合わせフォーム導線設置案件の中にあった
「Swiftで持っている値を WebView に渡す」
という実装を通して、学んだことや感じたことをまとめていきます。
案件の概要
今回対応したのは、以下のような要件でした。
(Swiftで持っている値をWebViewに渡す部分を抜粋して記載)
- アプリ内に「お問い合わせはこちら」というボタンがある
- 押下すると WebView でお問い合わせページを表示する
- アプリ側で保持している ポイントカード番号 をWebページのお問い合わせフォームに 最初から入力した状態で表示する
WebViewとWKWebViewの違いとは
WebViewとは
→ アプリの中でWebページを表示するための仕組みの総称です。
iOSアプリ開発では、その中でも WKWebView1
というクラスが一般的に使われています。
WKWebView は Safari と同じ仕組み（WebKit）で動作しており、
JavaScriptとの連携もしやすいという特徴があります。
SafariのようにWebページを表示できますが、
あくまで アプリの一部としてWebページを表示している という点が特徴です。
本記事でも、この WKWebView を使ってWebページを表示し、読み込み完了のタイミングでJavaScriptを実行する処理を行っています。
実装の流れ（ざっくり）
実装の流れを簡単にまとめると、以下のようになります。
- ユーザーが「お問い合わせはこちら」を押す
- WebView を表示する
- Webページが読み込まれる
- 読み込み完了後に JavaScript を実行
- フォームにポイントカード番号を自動入力
この中で一番重要なのが 4番 です。
Webページが読み込み終わったタイミングを知る
WebView には、
「Webページの読み込みが完了したときに呼ばれるメソッド」
が用意されています。
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)
このメソッドは
- Webページの表示が完了した直後
- ページ遷移が完了した直後
などに呼ばれます。
このタイミングで JavaScript を実行する
というのがポイントでした。
実際にやっている処理
コードは以下のようになっています。
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
if webView.url == {問い合わせページのURL} {
let script =
"""
document.getElementsByClassName('textarea')[0].value =
"・お客様のポイントカード番号\\n\(number)";
"""
webView.evaluateJavaScript(script)
}
}
ここでやっていることは
- Webページが「お問い合わせページ」のときだけ、JavaScriptを使ってフォームの入力欄（textarea）に文字を入れる
という処理です。
人が手で入力する代わりに、
アプリが自動で入力している というイメージです。
webView.evaluateJavaScript(script) で何をしているのか
webView.evaluateJavaScript(script)
webView.evaluateJavaScript(script) は、
WebViewで表示しているWebページ上で JavaScript を実行するためのメソッドです。
今回の実装では、このメソッドを使って「お問い合わせページのフォームに文字を自動入力する」という処理を行っています。
実装してみて気づいたこと
WebViewの処理は「タイミング」がとても大事
viewDidLoad などで JavaScript を実行しても、
Webページがまだ存在していないため何も起きません。
「Webページが表示されたあとに処理する」
という考え方がとても重要だと感じました。
didFinishは何度も呼ばれる
didFinish は1回だけ呼ばれるわけではなく
- ページ遷移
- 戻る / 進む
などでも呼ばれます。
didFinish とはつまりページの読み込みが完了したときというイベントです。
そのため
webView.url == お問い合わせページ
のように
処理を実行する条件をしっかり絞る必要がある
という点も学びでした。
おわりに
今回は、Swiftで保持している値をWebViewに表示したWebページへ渡すという実装を通して、SwiftとWebは別物である ということを強く意識するようになりました。
また、WebViewの仕組みJavaScriptを使った値の受け渡しライフサイクル（タイミング）を少しずつ理解できるようになりました。
ここまで読んでいただき、ありがとうございました。
2年目も残りわずかですがこれからも成長できるように頑張ります。