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

超多機能なGatsbyJS Themeを作成してテーマを公開した話

# はじめに

> 本記事は https://tech-blog.yoshikiohashi.dev/posts/publish-npm-gatsbyjs-theme のクロスポスト記事になります。

このブログのThemeにも使用しているGatsbyJSですが、Themeを別途作成してnpm公開してみました。

使用してみたい方はこちらからどうぞ。

https://www.npmjs.com/package/gatsby-all-pack-theme-starter

“`
npm install -g gatsby-cli
gatsby new hoge-blog https://github.com/yoshiki-0428/gatsby-all-pack-theme-starter.git
“`

# なぜつくったか

**GatsbyJ

ララベルで削除確認機能

###今回は削除するときに確認がはいるようにしたいと思います！
・削除ボタンを押したときに確認動作がはいる
・間違って削除ボタンを押してしまってもキャンセルできるように
・削除すると完全に消えてしまうので念のため確認がはいるように

“`app.blade.php



“`
まずは共通となるapp.bl

React MaterialUIでのスタイルの当て方3選 簡単に特徴とメリデメ

##はじめに
私は今年からインターンをしていた会社に入社し、フロントエンドエンジニアとしてReact Reduxを使い開発を行っているものです。
HTML CSSは3ヶ月ほどかけて自社のランディングページを作成した時に触りました。初めてqiita書きます！

## styled-components
#### 特徴
– 各コンポーネントごとに必要なcssを記載し適応させる
– cssをコンポーネント毎に書くため、useStyles同様1ページのコード量は増えてしまう
– 要素の命名を自由に変えられるためコンポーネント内での責任による命名ができる。
– useStylesほどmaterialUIと密ではない

#### メリット
– 1ファイルでコードとcssが完結する。
– 要素内に`style={}`でcssを適応させるよりすっきりしてわかりやすい
– 要素名が``とか``とかじゃなくて、``とか``とかにできるのでかっこいい！！！　＋　見ただけで何をしているか理解することができる
– inte

OpenCC で中国語変換だけしたい！

# OpenCC とは？

npm の漢字変換もづーる。

https://github.com/BYVoid/OpenCC

# インストール

パッケージに入れたいわけじゃない、そもそもパッケージがない、リソースに追加したいだけなので、グローバルインストール。
`npm i opencc -g`

そして、 node.js でさっさとオブジェクトをいい具合にしたいだけなので、 require に必要なフルパスを探す。

`find $HOME/.nvm/ -name opencc`

以下、
`$userdir` は `$HOME`
`$version` は `node -v` の結果
で読み替えてください。

“`OpenCC-sample.js

const OpenCC = require( ‘/home/$userdir/.nvm/versions/node/$version/lib/node_modules/opencc’ );
const t2s = new OpenCC( ‘t2s.json’ );

/*
* 英語,日本語,繁体字中国語 でリソース組んだけど O

Self-XSS防止 [Chrome Developer Tools]

まず、Googleのあるサイトが実施しているSelf-XSS防止の実例を示します。

そうです。Consoleに警告を表示する！です。
以上です。
# 簡単な説明
Developer ToolsのConsoleではJavaScriptを直接実行できるため、もし被害者が攻撃者に誘導され悪意あるコードを直接実行した場合はCSRF TokenやSession IDなどが攻撃者に盗まれ最終的にアカウントが乗っ取られる可能性があったりします。他にもJavaScriptが実行できるのでいろいろとできるかもしれません。

これを防止するために…
Consoleに警告を表示する！です。

Self-XSSに関しては他にもアドレスバーにjavascript:alert(1);などを入力するやExtensionsなどで実行することができます

スプレッド構文とRestパラメータを理解する

ES6で加わったSpread Operatorと Rest parametersがとても便利だと思ったので、記事にします。

日本語だと、
Spread Operatorはスプレッド構文
Rest parametersは残余引数（？）だそうです。
ちょっと後者は英語で覚えた方がなんかしっくりきます。

では書き方と機能について見ていきます。

##Spread Operator（スプレッド構文）

まずES５では、関数を呼び出して配列を引数に渡す際は、apply()メソッドを使ってました。

apply(thisの参照先, 渡したい配列)

“`Javascript
function expenses (a, b, c, d) {
return a + b + c + d;
}

var cost = [1000, 2500, 500, 3000];
var totalCost = expenses.apply(null, cost);
console.log(totalCost + ‘円’); //結果:7000円
“`

これをES６のスプレッド構文で書くとシンプルです↓

Node.jsをバックエンドに使うべきユースケース

> こちらの記事は、Max Savonin 氏により2020年6月に公開された『 When To Use Node.js as a Back-End 』の和訳です。
> 本記事は原著者から許可を得た上で記事を公開しています。

# Node.jsをバックエンドに使うべきユースケース


JavaScriptは、世界で最も人気のあるプログラミング言語の1つだ。 現在の状況ではライバルになれるのはPythonとJavaだけであり、コンピューティング市場で約8％のシェアを保持している。

Webに関しては、JavaScriptの地位はさらに一つ突き抜けている。 JavaScriptは、事実上、Chrome（またはその派生物）またはFirefoxブラウザーで使用可能な大部分のWebアプリケーションを強化している。 結局の

Rails6 以降 Javascriptファイル読み込み方

# Javascriptファイルを読み込む
Rails6以降のverでは、デフォルトでwebpackを使用してJavaScriptを管理するようになりました。(Rails5.1からwebpackでJavascriptの管理ができます)

Rails5verでは,デフォルトがsprocketsになっており、Javascriptを管理していました。

もし、app/assets/javascriptsの配下にJavaScriptが置いてある場合は、Sprocketsです。作成したjsファイルを読み込ませたい場合は

“`javascript
//= require …
//= require_tree .
“`

もし、app/javascriptの配下にJavaScriptが置いてある場合は、webpackerですので、require(…)やimport …を使って下さい。この場合は、webpackerが利用するwebpackのドキュメントを参考にして下さい。import文はES2015+の構文ですので、MDNのJavaScriptのドキュメントも参考になります。以下参考

Chrome拡張機能で参考文献を生成する

# 制作物
訪問したページのURLとtitleタグの記述を元にMarkdown,BibTexの参考文献を生成し、クリップボードにコピーする拡張機能を作った

[https://github.com/Omochice/reference-generator](https://github.com/Omochice/reference-generator)

最低限のものしか書いていないので環境ごとの問題とかが発生するかもしれない

## 躓いたところ

1. `document.getElementsByTagName`を使おうとして詰まった

`background.js`は仮想的に裏でページを作って動作しているのでdocumentはその仮想ページのものになる(よくわかってない)ので`document.getElementsByTagName`は`undefined`になる

-> `tag.title`で取得できた

jsを全く書かないで生きてきたのでどこのリファレンスを見たらいいかわからなかった(ググり力の不足)

## 使い方
右クリックメニューから取りたい形式を選べばクリップ

Rails6のフロントエンド開発:javascriptの管理がSprocketsからWebpackerへ

rails3.1からrails5.2までは、Sprocketsで行っていたが、
rails6からWebpackerが標準に。
webpackerについてまとめ増田。

## Webpackerとは
webpackのラッパー。
webpackは、jsなどの様々な形式のファイルをまとめるモジュールパンドラー。
webpackは、複数のjsモジュールを1つのファイルにまとめたりすることができる。
まとめる段階で、jsのコンパイルや圧縮などの様々な処理を実行可能。

### Webpackerの使い方
app/javascript/packs/配下に、最終的にモジュールをバンドルしてまとめられるファイルを置き、それ以外ディレクトリにモジュールを置く。

rails newを行うと、app/javascript/packs/application.jsが生成されて、デフォルトに入っているjsライブラリは読み込まれている。

#### Webpackerが用意している設定方法
rails newで以下のファイルが自動的に生成される。

– config/webpacker.yml
– confi

Javascript 勉強

# Javascriptを勉強しよう！
**Javascript**は、動的にコンテンツを更新したり、マルチメディアを管理したり、その他多くのことができるスクリプト言語

## 変数と定数
変数とは基本的には値 (数字や文字など) の入れ物です。
**let** に続いて変数の名前を書くことで、変数を作成。

定数は変更しない値を保持するのに使用する。
**const** に続いて定数の名前を書くことで、定数を作成。

**※ ES5以前は、「var」というletとconstがまとめられていたキーワードが使用されていたが、エラーが出る為ES6以降では、分けられた。**

“`javascript
let number = 1 //変数
const absolute_number = 10 //定数
“`

## 関数
関数とは再利用可能なコードのかたまりです。
何度も実行することができ、同じコードを書く手間を省けます。
関数の書き方はいくつもありますが、今回は１つの簡単な書き方を使用する。

**function**に続いて関数の名前、括弧 ( () )、中括弧 ( { } )が続

BFE.dev解答記録 #1 implement curry()

> https://bfe.dev はFrontEnd版のLeetCode、GAFAの面接を受けるなら練習した方がいいかなと。
> 以下は自分の練習記録です。


第一問 [#1 implement curry()](https://bigfrontend.dev/problem/implement-curry)

まずサンプルコードからinput/outputを決めていきます

“`js
const join = (a, b, c) => {
return `${a}_${b}_${c}`
}

const curriedJoin = curry(join)

curriedJoin(1, 2, 3) // ‘1_2_3’

curriedJoin(1)(2, 3) // ‘1_2_3’

curriedJoin(1, 2)(3) // ‘1_2_3’
“`

上から見ると`curry()`はfunctionを返し

Chrome拡張でURLを取得する

## TL;DR

“`javascript
chrome.tabs.query({ active: true, currentWindow: true }, (e) => {
const url = e[0].url;
console.log(url);
});
“`

## location.hrefじゃだめなのか

*background page*や*popup view*は通常のタブとは違うコンテキストで動作しているので、`location.href`では取得できません。`location.href`で取得できるのは、`chrome-extension://`から始まるURLのみです。

また、`chrome.tabs.getCurrent(function callback)`で取得できそうな気もしますが、無理です。なぜなら対象とするtabが特定できないからです。

なので、`chrome.tabs.query(object queryInfo, function callback)`の第一引数でタブを特定し、コールバック関数でtabの情

Vue 3.0で導入されるcomposition apiを使って簡単なアプリケーションを作ってみる

##はじめに
vue3.0ではtypescriptとの互換性の向上やslotの扱いの変更、suspenseの追加など様々な変更点や機能追加がありますが、今回はその中でも`composition api`について触れたいと思います。細かい仕様についてお話するというより、同じアプリケーションを従来の`vue2.x`(options api)での書き方と、`vue3.x`（composition api）でどう変わるのか簡単に見ていきたいと思います。
##composition api って？
「コンポーネントロジックオン柔軟なコンポジションを可能にする機能ベースのAPIのセット」（ほぼ公式の直訳ですが）とのことです。
また、公式では以下の特徴が挙げられています。

– 保守性の向上
– 再利用性の向上

実際に簡単なアプリケーションの実装を通してこれらの変化を確認してみたいと思います！

##実際にアプリケーションを作る
無料の為替APIを使用して、inputに入力した数字をリアルタイムでドルに変換するという簡単なもの作成します。

![スクリーンショット 2020-08-27 18.3

JavaScriptのObjectの要素をキーにしてソートしたい時の話

# はじめに
JavaScriptでObjectのキーをその要素でソートしたいときに詰まったことのまとめです．
特に，Objectの要素に`NaN`が含まれていたり，要素が存在しない場合の対処法です．

# 問題

“`javascript:
const data = {
“1”: {“p1”: 0.2, “p2”: 1, “p3”: 0},
“2”: {“p1”: 0.7, “p2”: “-“, “p3”: 5},
“3”: {“p1”: 0.3, “p2”: -1},
“4”: {“p1”: 0.1, “p2”: 3, “p3”: 1}
};
“`
こんなObjectがあったときに`Object.keys(x)`を要素（すなわち`p1, p2, p3`）の値をキーとしてソートしたい．
[Array.prototype.sort](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)

## 特に問題のないケース
上の例で`p1`でソート

E2Eテストの始め方 TestCafe⑤ – .testcaferc.json –

[E2Eテストの始め方 TestCafe① -導入編-](https://qiita.com/natsu_mikan/items/8f623ce3b0f518432bbf)
[E2Eテストの始め方 TestCafe② -セレクタについて-](https://qiita.com/natsu_mikan/items/c02ad4761670f7e61856)
[E2Eテストの始め方 TestCafe③ -スクリーンショット編-]
(https://qiita.com/natsu_mikan/items/60b51a0d87dcc98e7e9b)
[E2Eテストの始め方 TestCafe④ -formテストについて-]
(https://qiita.com/natsu_mikan/items/b9b5a2f504af1ee1c4f1)

これまでの記事でスクリーンショットの撮り方やCVテストの方法を書いてきましたが、
`fullPage: true`など同じ設定をテストケース一つ一つに書いており、コード量が増えるしよろしくないので共通設定は`.testcaferc.json`にまとめることに

JavaScriptで指定した文字列が正規表現とマッチするか調べる

## testメソッドを使用する
“`javascript
var exp = /^https:\/.*yahoo.*\.jp/
var str = ‘https://shopping.yahoo.co.jp/?sc_e=ytc’
console.log(exp.test(str)) // => true
“`

引数の文字列にマッチするものがあるかをtrue/falseで返す

Django+Ajaxでいいねボタンの実装

# 1. はじめに
記念すべきQiita初投稿です。

Twitter大好き人間なのですが、業務中にTwitterは触れない。ということで、思考やメモを書き殴るためのTwitter風アプリを作り始めたのですが、いいねボタンの実装がなかなか難しく。。。
formでやるとページの遷移を伴い、Twitter感が薄くなってしまうので他の方法を模索。
そんな時、Ajaxというものを知り、なんとか実装することが出来たので投稿してみようと思った次第です。

　

WebフレームワークやDBについて勉強し始めたばかりです

storybookでスペースを消す。

# storybookのスペースを消す
## TL;DR
storybookで開発していたら、横幅いっぱいに表示するコンポーネントを作成中、どうしてもpaddingが入ってしまった。
iframeのbodyにmarginとpaddingが設定されていたのでこれを0にした。
しかし、他のサイトだと!importantが設定されていないのでできなかった。
環境はreact+storybook です。

## 解決策
1. `.storyboook/preview-head.html`を追加
2. 下記の通り追記。

“`html:.storyboook/preview-head.html

“`

## 環境
環境はreact+storybook です。
バージョンは以下

“`json:pacage.json
//省略

“dependencies”: {

VScode カスタマイズ 【色】

##こういう人向けの記事

– プログラミング初学者で、VScodeのデフォルト設定に少し飽きてきた人

– ファイル毎に色分けして作業・管理したい人

– 変数や関数・文字列・コメントアウトの色を個別にカスタマイズしたい人

##【手順】
– 色の設定は、基本“`”editor.tokenColorCustomizations”“`で行う

– 設定画面から検索 →　setting.jsonで編集

– 全体の設定は「ユーザー」、ファイル個別の設定は“`「ワークスペース」で行う

##タイトルバー（上）とステータスバー（下）の色を変更

“`java

“titl