f@ctor

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

JavaScript関連のことを調べてみた2021年07月20日
目次

MonacaとNCMBで目安箱アプリを作ってみよう

こちらは[目安箱アプリを作ってみよう【その1：画面の説明と匿名認証まで】 – モナカプレス](https://press.monaca.io/atsushi/6208)と[目安箱アプリを作ってみよう【その2：意見の投稿と一覧画面の作成】 – モナカプレス](https://press.monaca.io/atsushi/6222)をハンズオン用に再編集したものです。

## 体験できるもの

– Monacaを使ったアプリ開発
– Onsen UIを使ったネイティブアプリ風UIの作成法
– NCMBの匿名認証
– NCMBのデータストアへのデータ保存

## 利用している技術、ライブラリ

このアプリで利用している技術やライブラリは次の通りです。

– Onsen UI
– ニフクラ mobile backend

## ベースアプリ

ベースアプリは [NCMBMania/Monaca_Survey_App: Monacaの目安箱アプリ開発ハンズオンのベースです。](https://github.com/NCMBMania/Monaca_Survey_App) になります。下記URL

元記事を表示

package.jsonにfilesを書かないあなたは、誰かを少しだけ不幸にしています

## 先に結論だけ

`package.json`に`files`フィールドを指定すると、`node_modules`に保存されるファイルサイズが減ります。

## はじめに

この記事は、[npm](https://www.npmjs.com/)の[package.json](https://docs.npmjs.com/cli/v7/configuring-npm/package-json)に指定するフィールド、[files](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#files)の指定方法と効用を解説、共有するためのものです。

### 想定する読者

この記事は、以下の読者を想定して書かれています。

+ JavaScriptの開発経験がある
+ npmを使ったことがある
+ npmやGitHubでnpmモジュールを公開している

### 想定する環境

この記事は、以下の環境を想定して書かれています。記事を読む前に、お手元の環境をご確認ください。

“`shell
$ npm –version

元記事を表示

Denoで安全にevalしたい (Web Worker)

# なんでそんなことしたいの？

某サイトをスクレイピングするとき必要だった。

evalがアレなのはさんざん言われてるから隔離したい。
[eval() を使わないでください! – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/eval#never_use_eval!)

Web Workerを使えばメイン側とワーカー側でグローバルが違うから隔離できるはず。
Denoのデフォルトではワーカー側がメイン側のパーミッションを引き継ぐ。
メイン側で`–allow-net`してるとワーカー側でネット通信とかできちゃう。
ので、ワーカー側のパーミッションを無効化して使います。

Denoのスクリプト内で使うんじゃなくて実行結果を見たいだけなら
普通に`deno run sample.ts`か`echo “1 + 1” | deno –`でいいと思います。
Denoに権限を与えてないから何もできないはずなので。

# とりあえずWorkerを使ってみ

元記事を表示

Astroとは何者なのか。

# 「Astro」について触れてみる
Astroについての記載が全くなかったので、自分なりに公式のページを見ての内容をまとめる。
今後も何か触れる機会があれば記述していきたい。
詳細については[公式ページへ](https://docs.astro.build/)
※あくまでもベータ版とのこと

# Astroとは
## ●特徴
– Javascriptのフレームワークを組み合わせることやHTML＋Javascriptを組み合わせることができる
– ビルドしたページはhtmlに変換されるためJavascriptを使用しない
– オンデマンドコンポーネントのため、Javascriptが必要なページについてもアクセス時に読み込まれる
– TypescriptやCSS,CSS Modules,Sassなどのnpmパッケージをサポートしている
– SEO対応によりシンジケーションの手間が省ける

## ●個人的にいいなぁと思った点
– ReactやVueにも対応しているため、フレームワークからフレームワークへの技術移行が容易になる
– ポートフォリオを作成する際にReactもVueもかけますとい

元記事を表示

無効化能力clearTimeoutを無効化するsetTimeoutを作る

#序論
“`js
const id = setTimeout(()=>{}, 1000);
clearTimeout(id);
“`
setTimeoutは、clearTimeoutで発動を阻止できます。

#問題点
idは同一コンテキスト内で共通のもので、0から順番にインクリメントされていきます。
setTimeout(()=>{});で最新のidを発行できます。

“`js
for(let i = 0, m = setTimeout(()=>{}); i < m; i++) clearTimeout(i); ``` こういうコードを実行されるとそれ以前のsetTimeoutが全て無効化されます。 これでは困りますね。 #解決策 異なるコンテキスト内であればsetTimeoutで発行されるidは全く別物なので無効化の対象外となります。 新しいコンテキストを生成しsetTimeoutを使う方法にWeb Workerがあります。 これを使っていきます。 ```js const newSetTimeout = new class { constructor(){

元記事を表示

[JS]なぜawaitはasync関数の中にしか書けないのか

#先に結論
– awaitが使われている関数はジェネレータとして内部的に変換され、非同期処理になる。
– その為、async関数である必要がある。
– コンパイラから見ても、asyncが付いていることで効率的にコンパイルできる。

#というわけで本編
awaitはPromiseを返す関数を呼び出す方法として非常に便利ですが、それを使う箇所にはいちいちasyncを付けて回らなければならないのが面倒だと思ったことはないでしょうか。

そもそもawaitを内部で使っている関数が常にasyncである必要性がいまいちピンと来ない方もいるのではないでしょうか（最初にasync/awaitの構文を見た時、私自身がそうでした）。

例えば次のような何も返さない関数の場合に、asyncの指定は何の為に要るのでしょうか？

“`javascript
async function button1Click(){
try {
let data = await doAjax(url);
displayData(data);
}
catch (e){
alert(“ajax error!”);

元記事を表示

Next.js+BULMAでアニメーション付きハンバーガーメニューを作る

## やりたいこと
* [BULMA](https://bulma.io/)は非常に軽量で扱いやすく、拡張性が高いCSSフレームワークです。

https://bulma.io/

* 今回は、Next.jsで作ったサイトに、BULMAを導入し、ハンバーガーメニューを作って、そこにアニメーションを付ける、というのをやってみました?
* 完成したものはこちら?

![animated-hamburger.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1309306/c913692d-d28a-ee55-a1b5-c14a7131a227.gif)

## BULMAの導入
* 今回は、CDNから参照して使っています。
* htmlの““タグ内に、BULMAを使うためのリンクを追加します。
* fontawesomeを使っているのでそのためのリンクも追加しています。

“`html:components/layout.tsx

元記事を表示

PWAでバックグラウンドに回ったことを検知する方法

PWAでバックグラウンドに回ったことを検知する方法になります。

## PWAでバックグラウンドに回ったことを検知する方法

“`javascript
if (window.matchMedia(‘(display-mode: standalone)’).matches) {
document.addEventListener(‘visibilitychange’, () => {
if (document.visibilityState === ‘hidden’) {
console.log(‘PWAでバックグラウンドに回りました’)
/* PWAでバックグラウンドに回った時に実行する処理を記述 */
}
})
}
“`

## 解説

### PWAの判定について
PWAの判定は`matchMedia`でおこなっています。
manifest.jsonで設定したディスプレイモードによって変わります。

“`javascript
window.matchMedia(‘(display-mode: fullscreen)’)
“`

`

元記事を表示

セレクトボックスを選択後、自動でサブミット(送信)する方法

この記事では、
**セレクトボックスを選択後、自動でサブミット(送信)する方法**
について解説していきます。

具体例としては、記事の並び替えなどに使うことができます。

![auto_select_submit.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/833332/2b7c6d29-2def-9710-c7e0-55412769bc90.gif)
https://muscle-meal-recipes.com/

##前提
– HTMLのformでセレクトボックスを作成できる。
– JavaScript(jQuery)の環境が整っている

##実装

“`html

OTHERカテゴリの最新記事