JavaScript関連のことを調べてみた2020年07月24日

ブラウザのconsoleからは要素を取得できるのに、scriptから取得するとnullになるときは、iframeの要素かもしれないというお話

# はじめに

簡単なスクレイピングツールを書いていたら、不可解な現象に遭遇してハマってしまいました。
同じような現象に遭遇した人が無為な時間を過ごさないように共有します。

## スクレイピングツールを書くときのお話

「この部分の内容を取得したい！」と思ったら、該当部分を右クリックして「要素の詳細を表示」（Safariの場合）からHTMLを眺めて、要素のattributeなどをチェックします。

そして、こうやれば取得できるかなというコマンドを、試しにconsoleに入力してみます。

“`javascript
document.querySelector(‘a[href^=”/start_with”]) // => …
“`

無事に結果が返ってきました！

通常はこのような手順でうまくいったコマンドをスクリプトにまとめていくと思います。ところが……

## スクリプトを実行するとnullが返ってくる

？？？

あれ？コピペしたのにおかしいな。このコマンドにたどり着くまでのページ遷移がおかしいのかな？いや、

Javascript 関数の記述例（普通、無名、アロー）

#関数の扱いの備忘録

①result ではどれも「６」が
②result2 ではどれも「35」が
出力されます。


##①resultについて

###普通

“`javascript

//普通の関数
let func = function hoge(a){
return a * 2
};
let result = func(3);
console.log(result)
“`

###無名関数

“`javascript

//無名関数
let func = function(a){
return a * 2
};
let result = func(3);
console.log(result)
“`

###アロー関数

“`javascript

//ア

JavaScriptで画像を格子状に並べて結合する

#前置き
某ソシャゲのキャラ立ち絵を集めてたら、一覧画像を作りたくなった。
手慣れたPythonでアプリ作ってたけどおいおいGUI上での任意の並び替え機能も盛り込むために、HTMLとJavaScriptに移行してみたのが始まり。
#やりたかったこと
任意の枚数の画像を選択し、全体が大体正方形になるように自動で並べる。
画像の解像度が違う場合は最も大きいものに合わせる、必要に応じて縦横比も変える。

#開発環境
Mery(x86) 2.5.6
Firefox 78.0.2(64ビット)

#結果
##コード
“`html:index.html

Preview:

chrome.runtime.onMessageでreturn trueしたけどundefinedが返ってきた

#最初に

タイトルの通り、内部メッセージの送受信でundefinedが返ってきたので記事に残しておきます。

なぜreturn trueが必要か分からない方は下記記事を参照してください。
[Chrome拡張でruntime.sendMessageのコールバックがうまく動作しない理由](https://qiita.com/Tachibana446/items/ab15021099d54d1209c2)

#本題

undefinedが返ってきた記述

“`javascript:background.js
chrome.runtime.onMessage.addListener( async (message, sender, sendResponse) => {
const result = await promisefunc( message );
sendResponse( result );
return true;
});
“`

求める結果が返ってきた記述

“`javascript:background.js
chrome.runtime.onMessage.

Next.jsの使い方（超基本編）

#はじめに
僕の大好きな Next.js について書きます。
まだまだ新しい技術であり、最近やっと本格的に採用されるようになってきた感じがします。

とはいえ、まだまだドキュメントも少なく、初心者が始めるには公式のチュートリアルに沿って進めていくのが、最も効果的な学習方法だと思います。

ですが世の中には

**ゆっくりチュートリアルなんてやってられるか！！！！**
**俺はとりあえず触ってみたいだけなんだ！！！！**

という欲張りな方もいると思います。
今回はそんな方のために、**とりあえずサクッと書き始められる** までの設定をまとめたいと思います。

#前提条件
npm : 6.14.5

#Next.jsアプリの作成
まずはターミナルで以下のコマンドを実行して、Next.jsアプリを作成します。

“`
$ npx create-next-app
“`

しばらくするとプロジェクト名を聞かれるので、任意の名前を入力しましょう。
今回は `sample` と入力します。

“`
? What is your project named? > sample
“`

次にテ

【JavaScript】半角カタカナ⇒全角カタカナの変換

#最初に

タイトル通り、半角カタカナを全角カタカナへ変換します。

今更な内容ですが自分が採用している書き方を載せます。
どちらかといえば長文の文字列向け？

短い文字列でも遅くなりすぎるという事はないと思います。

#１．String.prototypeを拡張

“`javascript
if(!String.prototype.toZenKata) {
String.prototype.toZenKata = function () {
//muddy
var dm = ‘ガギグゲゴザジズゼゾダヂヅデドバビブベボパピプペポヴヷヺ’;
var sm = ‘ｶﾞｷﾞｸﾞｹﾞｺﾞｻﾞｼﾞｽﾞｾﾞｿﾞﾀﾞﾁﾞﾂﾞﾃﾞﾄﾞﾊﾞﾋﾞﾌﾞﾍﾞﾎﾞﾊﾟﾋﾟﾌﾟﾍﾟﾎﾟｳﾞﾜﾞｦﾞ’;
//kiyone
var dk = ‘アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホ’
+’マミムメモヤユヨラリルレロワヲンァィゥェォッャュョ。、ー「」・’;
var sk = ‘ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙ

JS初心者がKintoneカスタマイズ行うために

###どーも「りょうちんです」今回からシリーズものとして、JS初心者がKintoneカスタマイズを行っていく上で感じたことを書いていきますー
業務でKintoneを使用するのですが、カスタマイズはJavaScriptで行います。ただ僕はずっとRubyの学習してたので、JavaScriptはProgateで触ったことと、RailsでjQueryとかをペタペタしてたくらいです。苦笑

[「cybozu developer network」](https://developer.cybozu.io/hc/ja) ← こちらからKintoneカスタマイズのチュートリアルを開始できます。

ProgateのJavaScript(ES6)コースを受講した程度の知識レベルでもとりあえず始めることができると思います。

チュートリアルタグをクリックすると下記のような感じの画面が表示されます。
Parsing error: The keyword ‘import’ is reserved の対処方法

Eslintのエラー`Parsing error: The keyword ‘import’ is reserved`の対処方法です。

## 出力イメージ

“`js
import XXX from “./XXX.js”
^^^^^^
// Parsing error: The keyword ‘import’ is reserved
“`

## 対処方法

“`js:.eslintrc.js
module.exports = {
// ・・・
parserOptions: {
sourceType: “module”,
ecmaVersion: 2015,
},
};
“`

埋め込みURL探し

流石に需要がないか。。。というかこんな記事はありなのか。許してクレメンス。

### 起こったこと
某氏より依頼を受けた。
某氏のお子様が某塾、というか東進だが、のオンライン講義をタブレットで受けている。
で、Androidタブレットでyoutubeとかを見られて困る。と。

Google Family Linkでアプリとchromeアクセスurlを制限すればとアドバイスした。
タブレットは子ども用アカウントととして、大人のスマホでGoogle Family Linkを使ってアクセスを管理する。
で、しばらくはうまく行ったらしい。

だが、今度はchrome君から受講アプリを開けないとのことであった。
どうやらアプリを開くためのurlが、Google Family Linkにアクセス許可依頼で飛んでこないようだ。

そのドメイン名があれば解決するだろうとのことだったが、タブレットではそのアドレスがわからないとのことであった。

## 解決方法

PCのchrome君で動画フレーム近くを右クリック
→フレームのソースを表示

そこに動画のリンクurlが有る。
このドメイン名をGoogle

Reactive Web AppにJavaScriptファイルを取り込むチュートリアル

YouTube上に、Reactive Web AppにJavaScriptファイルを取り込んで利用するチュートリアル動画が公開されたので手順を確認してみます。

この動画には簡単な手順のみが示されていて、JavaScriptをReactive Web Appに組み込むための注意事項等はありません。DOMを扱う際の注意事項などについては後続の情報待ち。

対象動画は以下
[How to Use External JavaScript in Your OutSystems Web Application](https://youtu.be/mcfZeThnvOE)

# 確認環境
Personal Environment(Version 11.8.0 (Build 12006))
Service Studio(Version 11.7.15)

# 組み込むJavaScriptファイル
動画中では10数行の簡単なJavaScriptファイルを組み込む手順が示されています。
せっかくなので、ちょっと違うJavaScriptファイルを作ってみました。
Random.randomInt()で1-

【Vue】一体いつから括弧無しメソッドと括弧有りメソッドが同じだと錯覚していた？

# Vueでメソッドの末尾に`()`をつけた時とつけない時の挙動の違い

以前からVueを使っていて疑問だったことがありました。

それはVueの`methods`で定義したメソッド（関数）をテンプレートで使うとき、
**末尾に`()`をつけたメソッドと`()`のないメソッドの両方を使用可能**であるという事実です。

具体的にどういうことかコードで説明してみます。

下のコードで`method`という名のメソッドがVueの`methods`プロパティで定義されているとします。

このときtemplate内から呼び出すときは、`method()`と`method`の両方が使えてしまいます。
（ちなみに``タグ内では括弧無しの呼び出し`method`は呼び出しになりません）

“`vue