f@ctor

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

JavaScript関連のことを調べてみた2020年06月29日
目次

「ElectronJSベースのプロジェクト」ElectronJSの機能に沿ったユーザーインターフェース（UI）の作成

高性能なキーバリューデータベースであるRedisは、ビッグデータアプリケーションに欠かせない要素となっています。

*本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/invoice-application-front-end-using-electronjs_582438)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。*

###電子テンプレートの作成
まずはElectronテンプレートの基本的なバージョンから始めてみましょう。これは、Official Electron RepositoryからフォークされたテンプレートのGitHubリンクです。試してみたい方は、以下のリンクにアクセスしてコードをクローンしてみてください: [https://github.com/saichandu415/electron-quick-start](https://github.com/saichandu415/electron-quick-start?spm=a

元記事を表示

Power Apps component framework で使用できる CDS データ型と、対応する JavaScript/TypeScript の型

# 目的

CDS の TwoOptions などのフィールドタイプに対応する JS/TS の型をまとめたかった。

# Power App component framework で使用できる CDS データ型

https://docs.microsoft.com/ja-jp/powerapps/developer/component-framework/manifest-schema-reference/property

# マニフェスト定義と生成される JS/TS データ型

## 前提

“`bash
$ npm list –depth=0
pcf-project@1.0.0 C:\Users\…
+– @types/node@10.17.6
+– @types/powerapps-component-framework@1.2.1
+– pcf-scripts@1.0.6
`– pcf-start@1.0.6
“`

## 挙動

“`xml:ControlManifest.Input.xml
… ElectronJSの入門編

**ElectronJS**は、クロスプラットフォームのアプリケーション開発を支援します。アプリ開発に特別なスキルは必要ありません。

*本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/what-is-electronjs-and-why-should-you-use-it_581971)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。*

ElectronJSの話をする前に、Desktopアプリケーションがどのように作られているのかを見てみましょう。また、現在のDesktopアプリケーションの開発方法の問題点を分析します。その上で、ElectronJSを使ってフル機能の請求書アプリケーションのバックエンドを作る方法を探っていきます。

###デスクトップでのアプリ開発
**Windows**
ウィンドウズベースのアプリはどのように作られているのか、という話をしてみましょう。ほとんどの人はC++、C# (C Sharp)、VB (Visual Ba

元記事を表示

Nuxt.js のライフサイクルを踏まえてトラッキングタグ埋め込みを実装する

Web サイトのエンハンスやマーケティングといった目的でユーザー分析や広告表示用のトラッキングタグを埋め込むことは開発の現場でよくあると思います。
Google Tag Manager などのツールを利用すれば比較的簡単に設定できますが、ユーザー ID など Web アプリケーション固有のデータをタグと併せて設定したい場合など、アプリケーション側にタグ埋め込み用のコードを書かなければならない場面もあります。

Nuxt.js のユニバーサルモードにおけるライフサイクル処理には幾つか種類があり、実行タイミングおよび SSR/CSR の実行有無がそれぞれ異なります。

– [Vue\.js と Nuxt\.js のライフサイクル早引きメモ \- Qiita](https://qiita.com/japboy/items/b67bae0bac1aeefb2680)
– [【Vue\.js】middlewareやplugins, fetchなどの実行順序 \| HAFILOG](https://hafilog.com/execution-order)

これらを踏まえ、タグやカスタム変数を設定

元記事を表示

React hooksを基礎から理解する (useCallback編) と React.memo

#React hooksとは

React 16.8 で追加された新機能です。
クラスを書かなくても、 `state`などのReactの機能を、関数コンポーネントでシンプルに扱えるようになりました。

– [React hooksを基礎から理解する (useState編)](https://qiita.com/seira/items/f063e262b1d57d7e78b4)
– [React hooksを基礎から理解する (useEffect編)](https://qiita.com/seira/items/e62890f11e91f6b9653f)
– [React hooksを基礎から理解する (useContext編)](https://qiita.com/seira/items/fccdf4e73c59c491558d)
– [React hooksを基礎から理解する (useReducer編)](https://qiita.com/seira/items/2fbad56e84bda885c84c)
– React hooksを基礎から理解する (useCallback編)　

元記事を表示

sortをいれるとUnexpected side effect in computed propertyってエラー

Vue.jsで
`Unexpected side effect in “xxx” computed property`
というエラーがでたのでメモ

computedで配列をsortして返そうとしたらエラー

“`js
computed: {
members() {
return this.xxx.sort((a, b) => {
if (a < b) return -1 if (a > b) return 1
return 0
})
}
}
“`

↓

“`js
computed: {
members() {
return this.xxx.slice().sort((a, b) => {
if (a < b) return -1 if (a > b) return 1
return 0
})
}
}
“`

これでエラー回避できた。

元記事を表示

Vscode使用時にVueの整形ルールがごっちゃになるのをどうにかしたい

# はじめに

vscodeでvueの開発をしているときに、しばしばコード整形ルールが競合を起こしておかしな形で整形されエラーや警告だらけになってしまう。

自分の場合、慣例的に[Google JavaScript Style](https://google.github.io/styleguide/jsguide.html)を採用しているので更にややこしいことになってしまっている。

特に困るのが以下の問題である：

* シングルクオートにならない
* 配列の末尾にカンマが入らない
* 行の終わりのセミコロンが消える
* `