常連

注目の的

自己紹介

当方Webエンジニアで、スマホアプリ開発は全くの未経験となります。

今PWAでWebアプリとして個人開発のスマホ向けサービスを何個か運営しているのですが、

広告つけたいとか新規で集客させたい的な理由でガワネイティブ化(WebViewにWebを表示させるだけの簡単アプリ)させてAndroidのストアで配信したいと思っています。

この場合ってどの技術、フレームワークを使うのが無難でしょうか？いろいろあって迷ってます……

ちなみにガワネイティブに近いTWAという簡単な手法もあるらしいですがアプリ向けの広告審査が通らないという理由で却下した経緯があります。

求めてるものは『スマホ開発未経験のWebエンジニアが一番勉強/開発コストが低コストで済む方法』で、今更アプリ開発をがっつり１からちゃんと勉強してちゃんとしたネイティブアプリを開発する気はあんまりないです。
あくまでWeb屋がガワネイティブ使ってアプリストアを活用する感じ。



今は予定ないですが今後iOSの方でも配信する可能性はあるのでできればクロスプラットフォーム開発できる奴がいいです。


ちょっと調べたけどやっぱWeb屋ならCSSやJavaScriptが使えるらしいCordovaって奴がいいのでしょうか？(あくまでガワネイティブですけどなんかカスタマイズするってなったときやりやすいかも？)

Githubのスター数的にはFlutterが有名らしいですがDartとか聞いたことないので不安…
実際ガワネイティブレベルなら何選んでもあんまり変わらないですかね？

お手柔らかに教えていただければ幸いです。。。

Webエンジニアがガワネイティブアプリを開発するのに向いてるフレームワークは？

スマホなどタッチデバイスでのJavaScriptやjQueryの処理で
以下のサイトのようにstopPropagationを使っているのをよく見かけますが、
<https://www.atmarkit.co.jp/ait/articles/1210/24/news023.html>
<https://notes.sharesl.net/articles/1620/>
なぜイベントの伝播を中止する必要があるのでしょうか？
タッチデバイスならではの理由があるのでしょうか？

タッチデバイスにおけるstopPropagationの必要性

### 前提・実現したいこと

現在、「Modern JavaScript for the impatient」という本の翻訳版を読んでいます。
その本の第４章の演習問題5問目のJavaScriptの問題がわからず詰まっています。
助言いただければと思い、質問を投稿させて頂きます。

### 分からない演習問題５問目
次の関数は、文字列greetメソッドを追加して「あいさつ」ができるようにする。
```JavaScript
function createGreetable (str) {
  const result = new String(str)
  result.greet = function(greeting) { return `${greeting}, ${this}` }
  return result
}
```
典型的な用例は、
```JavaScript
const g = createGreetable('World')
console.log(g.greet('Hello'))
```
この関数には、１つ難点があって、あいさつができる文字列は、それぞれgreetメソッドの独自のコピーをもつことになる。createGreetableが、プロトタイプにgreetメソッドを含むオブジェクトを作成するように仕様。それでも、すべての文字列メソッドを呼び出せるようにする。

以上が問題になります。

### 考えたソースコード

```JavaScript
const greetPrototype = { 
  greet: function(greeting) {
    let result = ''
    for (const key in this) {
      result += this[key]
    }
    return `${greeting}, ${result}!` 
  }
}

function createGreetable(str) {
  const result = new String(str)
  Object.setPrototypeOf(result, greetPrototype)
  return result
}

const g = createGreetable('World')
console.log(g.greet('Hello'))
```
### 上記のソースコードの出力結果

```
Hello, Worldfunction(greeting) {
    let result = ''
    for (const key in this) {
      result += this[key]
    }
    return `${greeting}, ${result}!` 
  }!
```

### 試したこと

問題の意味がうまく理解できていないのもありますが、
まずは、greetPrototypeを作成し、greetメソッドを追加しました。
greetメソッドでは、thisを使ってStringオブジェクトの内容を表示したかったのですが、うまくできなかったためfor inを使ってresult変数に代入し表示しています。
その値を、Object.setPrototypeメソッドでプロトタイプに追加し、使えるように実装しました。
結果、Hello, Worldの表示後、greet: の次に書いたプロトタイプのgreetメソッドのソースコードが表示されてしまいました。

初歩的な問題だとは思いますが、よろしくお願い致します。

### 補足情報（FW/ツールのバージョンなど）

node: 12.18.3

JavaScriptのプロトタイプにメソッドを追加する方法がわかりません

現在gasを使用してwebアプリを作成しています。

完全独学なのですが、排他制御に関して分からない点がありまして投稿致しました。

構成としては1つのスプレッドシートに1つのindex.htmlを作成して、何ページかデータ入力フォームを作成し、さらに別のスプレッドシートをDB代わりに1つ用意し、入力フォームの内容をDB代わりのスプレッドシートに書き込んで行くという構成になっています。

|スプレッドシート①|スプレッドシート②|スプレッドシート③|
|:--|:--|:--|
|入力フォーム①|入力フォーム②|DB|

この時、gas側でsetvalueするときの関数にLockService.getDocumentLock()にてロックを掛ければいいなと思ったのですが、よく考えたらこのドキュメントロックはあくまでスプレッドシート①もしくはスプレッドシート②にロックがかかるだけで、肝心のDBスプレッドシートにはロックがかからないのではないかと思いました。なので、入力フォーム①と入力フォーム②の登録ボタンが同時に押されてしまった場合はsetuvalueの際に意図しない登録がされてしまう可能性があるので、例えばLockをかけるドキュメントをスプレッドシートIDなどで指定できないもんかと思って調べてたのですがいまいちわからずご質問させて頂きました。

つたない説明で申し訳ありませんが、なにか方法がありましたらアドバイスを頂けるとありがたいです。

なお、サイトの趣旨と合わないご質問でしたらその際は質問を取り下げますんでご指摘頂ければと思います。

宜しくお願い致します。

gasにてLockService.getDocumentLock()でロックをかけるドキュメントを指定できるのか？

### 前提・実現したいこと

javascriptでアラートが一瞬だけ出るが、0.1秒くらいで消えてしまう。
ただ、何度かリロードするときちんと表示してくれる時がある。
常にきちんと表示をさせたい。

下記コードのifの下にあるアラートが出たりでなかったりする部分になります。

### 該当のソースコード

```javascript
document.addEventListener('DOMContentLoaded', function () {
	//URLの?以降を取得
	const mscd = location.search.substring(1);
　　//数字だけ抜粋
	const res = mscd.replace(/[^0-9]/g, '');
	if(res == ''){
		alert("入力無し");
	}else{
		・・・・・・・
	};
});
```
わかりにくいコードで申し訳ないです。

よろしくお願いいたします。

JavaScriptのアラートが勝手に消えてしまう

初めまして。
現在自社ECを運営する中で新たに選択している商品とは別に選択肢に応じた異なる商品も同時にカート入れたいと思っています。
PCでは挙動しているのですが、iPhone・iPadなどのiOS端末では挙動せずに非常に困っています。
同時に挙動できないならuserAgentなどで分岐して処理してもいいかなと思っているのですが、そもそもiOSで意図している通りに挙動してくれないため、その方法についてご教示いただければとおもい、質問させていただきました。

いかんせんあまりJSに詳しくないため伝わりづらい内容かと思いますが何卒アドバイスいただけますようご協力のほどよろしくお願いいたします。


### 前提・実現したいこと
カートシステム（makeshop）にてメインの商品とは別に同時違う商品をカートインさせたい。
PC（WIN）では挙動しているため、iOSで挙動させたい
違う商品とはラッピングの種類でmakeshopの「カゴだけmakeshop」という機能を応用しています。


### 発生している問題・エラーメッセージ
iOSで挙動しない。
挙動内容は下記の通りになります。

WIN・・・メインの商品＋サブの商品（ラッピング）どちらもカートイン
iOS・・・ラッピングしかカートインされない
→preventDefaultが効いてるため？であればPC側の挙動がおかしいということ？


### 該当のソースコード

```HTML
<div id="send">      	
    <input type="text" data-id="makeshop-item-quantity" value="1" class="item-detail-num">
    <div class="makeshop-option-wrap">
		<label class="makeshop-option-select-wrap">
			<select data-id="makeshop-item-option1" class="makeshop-option-select">
				<option value="0" class="makeshop-option-select-item makeshop-option-select-title">--選択してください</option>
				<option value="1" class="makeshop-option-select-item" >BLACK</option>
				～
			</select>
		</label>
	</div>
	<div class="makeshop-option-wrap">
		<label class="makeshop-option-select-wrap">
			<select data-id="makeshop-item-option2" class="makeshop-option-select">
				<option value="0" class="makeshop-option-select-item makeshop-option-select-title">--選択してください</option>
				<option value="1" class="makeshop-option-select-item" >TOP【01】/BOTTOM【00】</option>
					～
			</select>
		</label>
	</div>
          
    <form action="https://###.com/api/basket/add.html" method="post" id="wrappingFlg" name="wrapping" class="makeshop-option-wrap">
		<label class="makeshop-option-select-wrap">
			<select name="brand_info">
				<option selected value="string(0)" class="makeshop-option-select-item">ラッピング不要</option>
				<option value="1,000000000026,1" class="makeshop-option-select-item">ラッピングA</option>
				<option value="1,000000000025,1" class="makeshop-option-select-item">ラッピングB</option>
				<option value="1,000000000024,1" class="makeshop-option-select-item">ラッピングC</option>
			</select>
		</label>
	</form>
	

    <a href="#makeshop-item-cart-entry-url:1" id="add_cart">ADD TO CART</a>
</div>
```
```
JavaScript
<script>
$(document).ready(function ($) {
	var checkIn = document.getElementById('add_cart'); 
	checkIn.addEventListener( 'click', wrappingFlg, { passive: false} );
	
	function wrappingFlg(e) {
		e.preventDefault();
		$('#wrappingFlg').submit();
		return true;
	}
});
</script>
```
### 試したこと


aタグによる遷移が正しくないと仮定して、下記の記述を使って強制的に遷移

```
javaScript
var linkUrl = $('#add_cart').attr('href');
function action() {
	location.href = linkUrl;
}
setTimeout(action,1000);
```


### 補足情報（FW/ツールのバージョンなど）

makeshopの仕様なのかメインの商品のリンクは「#makeshop-item-cart-entry-url:1」となるようです。
またカゴだけmakeshopのほうはformタグで囲ってsubmitさせる方法となり、「https://###.com/api/basket/add.html」にPOSTさせる方法になるようです。

aタグとformタグのサブミットを同時に発火する方法について

##前提

Webpackを使ってJavaScriptファイルをバンドルします。
ディレクトリは以下のような場合です。（関係なさそうなファイルは省略）
例としてlightbox2を使うことにします。

---
resource
  ┗js/main.js

public
 ┗js/bundle.js
 ┗index.html

node_modules
 ┗lightbox2/パッケージファイルいろいろ

package.json

---
index.htmlでbundle.jsを読み込んでいます。
resource内のmain.jsをwebpackでバンドルしてpublic内のbundle.jsを生成しています。

lightbox2をnode_modules内にインストールし、使うときに、
main.jsに

```javascipt
require('lightbox2');
```

と記入すれば、
index.htmlでlightbox2が使えるようになります。

##疑問

この
```javascipt
require('lightbox2');
```
の「lightbox2」の部分はnode_modulesの中のパッケージのフォルダ名かと思うのですが、
「このフォルダ内のこのファイルを参照する」という命令はどこに書いてあるのでしょうか？

require('ファイルパス')で指定した場合はそのファイルが読み込まれるのはわかるのですが、
ただ単にパッケージ名（node_modules内のフォルダ名？）だけを指定するだけで
なぜうまく読み込めるのがなぜなのか不思議に思っています。

lithgbox2フォルダ内の「dist」フォルダを名前変更してみるとバンドルできなくなりました。
「dist」内のファイルを探しにいく・・みたいなルールがあったりするのでしょうか。

よろしくおねがいいたします。

require(’拡張子なし’)はどういう処理をしている？

Javascript初心者です。
google map apiを触りながら、Javascriptの勉強をしております。
こちらに記載されているgoogle map apiのサンプルコードについてわからないことがあります。
[リンク内容](https://developers.google.com/maps/documentation/javascript/overview?hl=ja#maps_map_simple-javascript)
npmでパッケージをインストールして、モジュールを読み込む部分です。

下記ソースコードのうち、※の部分で突然googleというクラスが出てきますが、これは一体どこの誰がいつの間に定義したものなのでしょうか。
Promiseのコールバックには何も引数を与えていないため、怪しいとしたらimportしたパッケージかと思うのですが、importで読み込んだパッケージ内で、モジュールの枠を超えてグローバル変数等を定義することなどできるのでしょうか。（new Loader.googleなら理解できます。）

```ここに言語を入力
npm install @googlemaps/js-api-loader
import { Loader } from "@googlemaps/js-api-loader"

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});
loader.load().then(() => {
  map = new google.maps.Map(document.getElementById("map"), {※
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});

```

基礎的な質問だと存じますが、どうぞ宜しくお願い致します。