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

npmに公開する前に、パッケージの動作確認をする方法

## はじめに

`npm publish` で公開する前にパッケージを確認する方法として、以下の 2 つがありそうです。

– `npm link` で、開発中にパッケージの動作確認を行う
– `npm pack` で、`npm publish`で公開される内容を事前に確認する

それぞれ見ていきます。

## 環境

npm: 6.14.10

## 開発中にパッケージの動作確認を行う

npm-link を使うと、ローカルの別のパッケージから、確認したいパッケージを呼び出すことができます。

> npm link (in package dir)
> npm link [<@scope>/][@]
>
> alias: npm ln

引用: [npm-link](https://docs.npmjs.com/cli/v6/commands/npm-link)

npm-link は次の 2 ステップで行います。

### 1. 参照したいパッケージで、`npm link`を実行する

参照したいパッケージで`npm link`を実行すると、グローバル

instagramのAPIを使ってjavascriptだけでフィードを表示する

– instagramのAPI（v9.0）を使ってjavascriptだけでフィードを表示する
– 諸事情あって、クライアントサイドjsのみでの実装の場合を想定
– 用意するもの
– instagramアカウント（id,password）
– facebookアカウント（id,password）
– htmlページ

1. facebook（以下,FB）にアプリを作成
2. instagramでFBアプリを認証
3. アクセストークンを取得
4. 1回目（１時間有効）
5. 2回目（２ヶ月間有効）
6. 3回目（無期限有効）
4. HTMLにjqueryを導入
5. コードを書く
6. business_idはアクセスでバッカーから確認
7. `me?fields=accounts{instagram_business_account,name}`を使用
8. [x] 「有効期限：受け取らない」になっていることを確認

“`javascript

【React】レンダリング無限ループが発生【Class Component】

# 現象
## 背景
ReactのClassComponentでこのようなコードを書いていました。
※簡略化されています

“`react
export class Header extends React.Component {
static contextType = ThemeContext;

render() {
const { tab, setTab } = this.props;
const [theme, toggleTheme] = this.context;

return (


setTab(‘list’)}>リスト

テーマの変更

)
}
}
“`

## エ

reduxのstoreの値をpropsで受け渡ししない方が良い

## 最初に
react-reduxのパフォーマンスについての記事です。

## 問題となるコード
“`javascript
console.log(store.getState())
//{
// childState1:”hoge”
// childState2:”fuga”
//}

const ParentComponent = () => {
const storeState = useSelector(state=>state);
return (
<>



);
}

const ChildComponent = ({text}) => {
return(

{text}

)
}
“`

## 何が問題なのか
`storeState`は`ChildComponent`のための値なのに、`ParentCom

「これさえ読めば理解できる」Vuexの使い方

##どんな人に読んでほしいか
SPAでアプリを作ってて、ログイン認証とか実装したいけど、Vuexの使い方がよくわからんぞ！って方に読んでいただきたいです。

## Vuexとは
難しい話をすっ飛ばすとVue複数のコンポーネント間使えるグローバル変数を用意するためのライブラリです。(めっちゃ誤解を招く)
一応公式では、「Vue.jsアプリケーションのための状態管理+ライブラリです」だそうです。

## 最初に用語一覧と説明
記事読んでて用語がわけわからなくなったらここに戻ってきてください。

* ステート(State)… Vue.js全体で使えるグローバル変数
* ゲッター(Getters)… どのコンポーネントでも使えるcomputedプロパティ的なやつ
* ミューテーション(Mutations)… ストアの値を変更することを許された唯一の存在(語弊あり、本当はここから以外でも変更できます。でもこのルールに従って書いたほうが、可読性と保守性が上がります。)
* アクション(Actions)…非同期処理を書く場所。ex.外部APIとの通信を行って、ミューテーションを呼び出

Electron で ES Modules を使う。

# 概要

`Node.js`が`ES Modules`(以下`ESM`）をサポートするようになったので、`Electron`のメインプロセスでも`ESM`を使いたいというニーズが[当然のように出てきました。](https://github.com/electron/electron/issues/21457)
そこで[`Electron`のクイックスタートガイド](https://github.com/electron/electron-quick-start)を改変して、メインプロセス(`main.js`) で`ESM`をインポートできるようにやってみましたのでその方法を紹介します。ただし今のところ少し問題があるので、補足2を読んだ上で実際に使うかどうかは判定してください。

# 準備

[Electron Quick Start](https://github.com/electron/electron-quick-start)をクローンしてそのフォルダに入ります。

“`
$ git clonen https://github.com/electron/electron-qu

【GeoGebra】JavaScriptで実行する便利な関数

## はじめに
[こちらのリファレンス](https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_API)の一部を訳したものです。これらの関数の使い道としては

– ボタンが押された時に特別な処理を実行させるアプリ
– [こんな感じ](https://dev.geogebra.org/examples/html/example-api.html)のGeoGebraが埋め込まれたwebページを作成する

だと思います。教材アプリを作る分にはよっぽど使わない機能ですが、少し高度(特別な)処理を使いたい時に活躍するイメージです。つまり何が言いたいかというと「GeoGebraを始めたいけど何から始めれば…」という人向けではないです。
## コマンド

### evalCommand(String cmdString)
与えられた文字列を、GeoGebra の入力バーに入力されたときに評価されるのと同じように評価します。コマンドの評価が成功したかどうかを返します。
GeoGebra 3.2 からは、複数のコマンドを \n で区切ることで、一度

React製の静的サイトジェネレータDocusaurus v2を、GitHub Pagesにデプロイする

自主練習のメモ。

今回つかったのは、React製の静的サイトジェネレータ[Docusaurus v2](https://v2.docusaurus.io/) (2.0.0-alpha.70)です。

GitHub Pagesにデプロイする手順を整理してみました。

## 参考になったページ

– docusaurusのインストール
https://v2.docusaurus.io/docs/installation

– deploying-to-github-pages – Deployment | Docusaurus
https://v2.docusaurus.io/docs/deployment/#deploying-to-github-pages

– GitHub Page を使う – GitHub Docs
https://docs.github.com/ja/github/working-with-github-pages

## 必要なもの

– node => 10.15.1 later
– yarn => 1.5 later

ただWindows10

社会人なら必須スキル！GASを使って業務改善①Googleフォームからメールを自動返信

# 対象

– すべての社会人
– 業務を効率化したい
– 簡単なアンケートフォームを作成したい

## 概要
働いていると何かとアンケートや集計を取りたい、、、、そんなことありますよね。
そんな時に手軽に使えるのってGoogleフォームだと思います！

Googleフォームってリンクでも送れるし、webサイトにも埋め込めるしめちゃめちゃ便利ですよね！！！
けどフォームを送信して何も帰ってこなかったら本当に送信できたのかな？？？
と送信者が不安になります。

ちょちょっとコードを書いて自動化しちゃいましょう！

## Google Apps Script（GAS）って？？
Google Apps ScriptとはGoogleが開発しているプログラミング言語です。
ブラウザ上でかけるJavaScriptベースでかけるので言語経験がある方には非常に使いやすく簡単な言語になっています！

では早速やっていきましょーう！

## 適当にフォームを作成する
今回は簡単なアンケートフォームを作成しましょう！！
![スクリーンショット 2021-02-07 21.44.02.png](https:

javasciptで非同期関数を処理する同期関数のテストをしたい

## はじめに
テストツールはjestです。

## テストしたいコード
“`javascript
export let text = “hoge”;
const asyncFunc = async () => {
await new Promise((resolve) => {
console.log(text);
// hoge
resolve();
});
text = “fuga”;
console.log(text);
// fuga
};

const testFunc = () => {
asyncFunc();
console.log(text);
// hoge
};
export default testFunc;
“`

`testFunc`の中で非同期関数の`asyncFunc`が実行されています。

`testFunc`が実行されると、非同期で`text`の値が`hoge`から`fuga`に変わることをテストしたい。

## テストコード
失敗例

“`javascript

test(“testF

【Svelte + TypeScript + tailwindcss】本検索サイト チュートリアル

# はじめに
この記事でははSvelte + TypeScript + tailwindcssで本検索サイトを作成します。

成果物は以下のようなアプリケーションです。

本の検索ページ


本の詳細ページ


Svelteを使ってアプリケーションを作成1から作成することができます。
以下のことが学べます。

– Svelteの基礎文法
– Svelteのルーティング
– Svelteのストア

HTML・CSS・JavaScriptの基礎

JavaScript（html）でフロー図を作成（Draw2d)

今回は JavaScript、htmlを使用して、フロー図を作成することができる draw2dというライブラリについて書いていきます。
公式のライブラリは下記のリンクにあります。
（二つ目のリンクの examplesの方にgithubのサンプルがあるので、コードの書き方で困った場合はそれを参考にすると解決しやすいです）
http://www.draw2d.org/draw2d_touch/jsdoc_6/#!/api/draw2d.Canvas
https://freegroup.github.io/draw2d/index.html#/examples

##サンプルコード
今回記事を書くにあたって作成したのが下記のコードです。
draw2d、jquery、jquery-uiのライブラリを読み込む必要がありますが、今回はCDNで設定しているため

WebViewの値をAndroid側で取得する

WebViewで表示されているHTMLの内容から、特定の値をAndroid側で取得します。

考え方としてはHTMLページ内にAndroidからJavaScriptを注入して、JavaScriptからAndroidのコードを実行することで値のやり取りをします。

まずメインとなるコードから。

“`kotlin
val webView: WebView = requireActivity().findViewById(R.id.web_view)
webView.webChromeClient = WebChromeClient()
webView.webViewClient = CustomWebViewClient()
webView.settings.javaScriptEnabled = true
webView.addJavascriptInterface(WebAppInterface(requireContext()), “Android”)
webView.loadUrl(url)
“`
– webChromeClientをセットしないとJavaScriptが実行で

【Rails6】JavaScriptによる「入力フォームの内容のリアルタイムチェック機能」の実装例

JavaScriptで以下のような「入力フォームの内容のリアルタイムチェック機能」を実装してみたので、その方法を共有します。

ポイントは、jQueryのようなライブラリは使用せず、そのままのJavaScriptで実装したことです。

ネットで検索してみると、意外とそのままのJavaScriptで実装した例を紹介する記事がヒットしなくて、jQueryを使った例ばかりだったので、今回記事にしてみようと思いました。

##実行環境
Rails 6.0.3.4

##各ファイルの記述
今回のメインである「入力フォームの内容のリアルタイムチェック機能」を実装する記述です。

正規表現の`/^[\A\d+\z]/`について補足します。半角数字にマッチする正規表

手を動かしながら学ぶReact入門 3. 三目並べを関数コンポーネントで実装する

WebフレームワークであるReactについて、実際に手を動かしながら学んでいきたいと思います。

1.　[Create React Appでプロジェクトの雛形を作成](https://qiita.com/basio/items/998cbcb2be16e2f2a084)
2.　[Reactについて学ぶ](https://qiita.com/basio/items/80bdf2c1e59f84777f90)
3.　三目並べを関数コンポーネントで実装する　←　ここ

# 作成するアプリケーション
[React公式のチュートリアルで実装する三目並べ](https://ja.reactjs.org/tutorial/tutorial.html)を実装します。
チュートリアルではクラスコンポーネントで実装されていますが、本稿では関数コンポーネントだけを用いて実装します。
通常の三目並べに加え、特定の手数まで戻るタイムトラベル機能がついています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556

YouTube動画をChromeから手軽にダウンロードする最適解はブックマークレットだと思う

YouTubeダウンロードでお世話になっていた拡張機能が動かなくなった。代替サービスを探すもパッとするものがなかったので、自分でツールを作ることにした。

## 要件
今、Chrome系ブラウザで見ている動画を、`{動画タイトル名}.mp4` で名前を付けて保存したい。[^filename]

## Chrome拡張機能ではYouTubeページの変数にアクセスできないが、ブックマークレットならできるのでクリティカルな情報を直接取得できる
YouTubeのページをよく調べてみると `ytInitialPlayerResponse` という変数に動画の情報（タイトルなど）や、URLなど、欲しい情報が全て詰まってるから、この変数を読み取れば簡単に機能を実現できるのではと思った。

それではじめChrome拡張機能[^google様]で作ろうとしたが、Chrome拡張はウェブページのDOM要素にはアクセスできても変数や関数といったスクリプト要素にはどうしてもアクセスできない（空間が別）[^ex-var]。先人たちはどうしてたのか見ると、どうも自分のサーバーに送って解析して‥みたいなことをしてい

[Slack API] スラックアプリのモーダルでバリデーションエラーを表示する方法

# はじめに
モーダルを使ったスラックbotを作っていると、やはり入力値に対してバリデーションをかけて、期待しない入力値であればエラーを表示したくなりませんか？こんな風に。(画像は[ドキュメント](https://api.slack.com/surfaces/modals/using#displaying_errors)より抜粋)
こうすることで後続する処理に渡す値を制限することができて超助かります。
自分が実装する時に結構調べたのですが、なかなかエラー文言出せずハマったのでまとめてみました！(実はドキュメントをちゃんと読解できてれば難なくできたのですが。。）

# 方法
## 基本的にはこれだけ！
`view_submission` イベントを受け取った時のレスポンスに以下を含める！

このオブジェクトのうち、`block_id` の部分にバ

HTMLのdate型inputは時差でずれる

# HTMLのdate型inputは時差でずれる
## 環境
+ OS: Ubuntu 20.04LTS, Windows10(20H2)
+ ブラウザ: Chrome 88.0.4324.146, Firefox 85.0

## 要約
``を使うときには、UTCとの時差修正が必要。日本にいると気づきにくい。

## 現象
“`html