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

なんとなく、簡単に入門できそうなReact

タイトルが強弁すぎますね、ごめんなさい?

[すすさんの記事](https://qiita.com/susu_susu__/items/da94e751d2db784ad0ee)のリリースツイートを見て「おっこれはワイもReact記事書くムーブかな？？？」となったので書いてみます。

# 本項のゴール
+ Reactのコンポーネントの作り方を理解する
+ propsを渡して動的にUIを作ってみる(Stateは気力があれば別記事で書こうと思います)

# 諸注意
間違ってる箇所とかバッドプラクティスがあるかもしれません
コメントで指摘していただければと思います。

# そもそもReactってなに？
フロントのUIライブラリの話になるとVueと比較される事が多いので高機能なのを想像しがちですが
React自体、及びReact-DOMは **HTMLのレンダリングをするだけのライブラリです。**

そもそもReact自体はHTML周りの機能すら持ってません。その辺りは色々あってReact-DOMに分割されました。

この話についてはGoogleで検索するといくらでも出てくるので本稿では省略し

addEventListenerにアロー関数で値を渡すとremoveEventのとき困る

mountedでイベントリスナーを動かし、destroyedで削除するパターンでうまくイベント削除が行えなかったのでメモ。

下記はVueを使っていますが、別にVueに限らず問題起こるみたい。

“`js
mounted () {
window.addEventListener(‘mousedown’, (e) => {
this.hoge(e)
})
},
destroyed () {
window.removeEventListener(‘mousedown’,this.hoge)
},
methods: {
hoge (e) {
console.log(e.clientX)
}
}
“`

下記のように書き換えました。

“`js
mounted () {
window.addEventListener(‘mousedown’, this.hoge)
},
destroyed () {
window.removeEventListener(‘mousedown’,this.hoge)

JavaScriptで連想配列から特定のキーだけ抽出

PHPの`array_column($array, ‘column’)`みたいなことをJavaScriptでやりたいなぁと思ったときのやつ

“`javascript

const fruits = [
{
id: 1,
name: “Apple”,
},
{
id: 2,
name: “Banana”,
},
{
id: 3,
name: “Grape”,
},
]

fruits.map(item => item[“name”]) // [“Apple”, “Banana”, “Grape”]
“`

普通じゃ満足できない脱 webpack マニアのあなたに贈る Snowpack

[Snowpack](https://www.snowpack.dev) を使い React + TypeScript な環境構築をする具体的な設定を紹介します。

# Snowpack is 何

npm パッケージを、ブラウザーから読み込めるよう ES modules 形式[^esmodules]に変換してくれるバンドラーです。

[^esmodules]: [Webpack を使わずに import 文を使う – Qiita](https://qiita.com/kazuma1989/items/1b1a4443925005034f7e)

次のように使います：

1. `npm install` 後に `snowpack` コマンドを実行し、node_modules 内のパッケージをブラウザーから読み込めるようバンドルする。たとえば `node_modules/react` を `web_modules/react.js` のようなファイルにまとめる。
2. アプリケーションコードは ES modules の作法に則って記述し、必要であれば `web_modules/rea

JavascriptのDate型の注意

月計算で何度も出くわしたので、注意書きとしてメモしておく。

## 月取得

getMonthで月を取得できるが返り値は0からはじまっている。
つまり、1月の場合は0、10月の場合は9が出力される。

“`javascript:月の取得
> var today = new Date();
// Tue Mar 17 2020 14:00:11 GMT+0900 (日本標準時)
> var month = today.getMonth() + 1; // 現在の月を表すために +1 する
// 3
“`

ちなみにgetDateの返り値は1から始まる。

“`javascript:日の取得
> var tosay = new Date();
// Tue Mar 17 2020 14:00:11 GMT+0900 (日本標準時)
> var date = today.getDate();
// 17
“`

## おまけ

実際に試してみると違いを体感できます。

“`javascript
> var testDate1 = new Date(“202

JavaScript 基礎文法入門

## JavaScript基礎文法入門

JavaScriptの基礎文法を学びます。

参考資料

– [詳解JavaScript 基礎文法編 (全26回) – プログラミングならドットインストール](https://dotinstall.com/lessons/basic_javascript_grammer_v2)
– [JavaScript Primer #jsprimer](https://jsprimer.net/)

### はじめてのJavaScript

console.logでデバッグメッセージが出力される

“`js
console.log(‘Hello World’);
“`

`HTML`内で呼び出す場合は``タグの閉じカッコの直前で宣言する。

“`js

*
*

“`

別ファイルから呼び出す場合は以下のように宣言する

“`js

Reactでマークダウンエディタ作成とマークダウンからHTMLに変換（ハイライト付き）

Reactでマークダウンエディタの作成と、マークダウン表記をHTMLに変換（ハイライト付き）してみました。
ライブラリを組み合わせることで、楽に実装することができます。

## 環境

– OS : macOS Catalina 10.15.3
– node.js : 12.13.1
– React : 16.12.0

Reactのライブラリは以下を使用します。

– react-simplemde-editor(EasyMDE) : 4.1.0
– marked : 0.8.0
– highitjs : 9.16.2

参考までに、紹介するコードはGitHubにあります。

[https://github.com/txkxyx/react-mde](https://github.com/txkxyx/react-mde)

## マークダウンエディタを作成する

Webの画面にマークダウンエディタを埋め込む場合、元々`SimpleMDE`というライブラリが使用されていましたが、今は`EasyMDE`という`SimpleMDE`をフォークして作られたライブラリが使用されています。

[payjp]tokenは発行できているのに呼び出せるはずのデータがテーブルに入らないエラーの解決方法

#1.どのような状態だったか

javascriptで`payjp-token`取得はコンソールで確認すると全て成功しており、ページ遷移の部分でもエラーは出ず、validationに関するエラーも出ないのに、コントローラーで`payjp-token`の値が取り出せないという状態でした。（エラー文が出ず、正常にnewアクションに戻るという症状でした。）

下記の二つの記事を参考にpay.jp機能を実装をしていました。（大元が上の方で、それの詳細まで記述されていたのが下記の方でした。）

https://qiita.com/takachan_coding/items/f7e70794b9ca03b559dd
https://qiita.com/emincoring/items/ce29dbbd182aa3c49c6b

なのでとりあえず動作を見るべく細部まで記述のあった下記のブログを参考に下記のようにviewを作成しました

※今回はviewの記述によるエラーだったので、その部分についてのみ記述します

“`haml:app/view/cards/new.html.haml
.cont

JavaScriptでタイムゾーン付きの文字列（ISO8601）をJSTの”yyyy/mm/dd HH24:mi:ss”で表示する

## 概要

タイムゾーン付きの文字列（ISO8601）をJSTで表示する。

## 実装

“`javascript
a = new Date(‘2020-03-09T19:21:13+09:00’)
// Mon Mar 09 2020 19:21:13 GMT+0900 (日本標準時)
a.toLocaleDateString(“ja-JP”, {timeZone: “Asia/Tokyo”})
// “2020/3/9”
a.toLocaleString(“ja-JP”, {timeZone: “Asia/Tokyo”})
// “2020/3/9 19:21:13”
a.toLocaleString(“ja-JP”, {timeZone: “America/New_York”})
// “2020/3/9 6:21:13”
“`

## おまけ

月日を0パディングしたい場合は、

“`javascript
a = new Date(‘2020-03-09T19:21:13+09:00’)
a.toLocaleDateString(“ja-JP”, {timeZone:

Node.jsのworker_threadsに何を渡すべきか

久々にScalaの世界からJSの世界に帰ってきました。

#1. 本日の課題
本来Node.jsは非同期処理をストイックに突き詰めることでマルチスレッドやマルチプロセスのようなオーバーヘッドを伴う方法よりも高効率に並列処理を実現しているわけです。
ただし、それが有効なのは頻繁に「待ち」≒「I/O処理」が発生する場合に限られます。
ひたすらI/OなしでCPUをぶん回す処理、を複数同時にやれって言われたらシングルスレッドなNodeはマルチスレッドに勝てません。

ですがですが、Nodeにだってマルチスレッド/マルチプロセスの仕組みはあります。

さて今回は、

– 数百MB～数GB程度のデータ構造(変数として持っている)に対して
– 秒オーダーの時間をかけておこなう検索処理を
– 複数回おこなう
– 元のデータ構造は更新しない(Read Only)

という要件で、この「複数回おこなう」というところをマルチスレッドかマルチプロセスで並列化して時間を短縮したい、というお題になります。[^heavy]

# 2.候補
## child_process/cluster
どちらもマルチプロセスなア

Trelloの完了したタスクをGASで自動アーカイブする

#はじめに

仕事のタスク整理にTrelloを使いますが、完了したタスクを手動でアーカイブすると判断に迷ったり、手間を感じることがあるので、完了してから一定期間経過したものをGoogleAppsScript(GAS)で自動アーカイブするようにしました。

#準備
TrelloのAPIをGASで使用するにはAPIキーやトークンの取得が必要になります。
方法は[こちらの記事](https://qiita.com/RYOSUKE310/items/016549922a17376efdf8)を参考にしてください。

#処理の流れ

1. 完了のリストにあるカードを取得する
2. 取得したカードの最終更新日が7日経過していれば、アーカイブする
3. アーカイブしたカードの情報をスプレッドシートに出力（追記）する

#コード

###①カードの取得とアーカイブ対象の選定

“`javascript:cardArchived.gs
// カードのアーカイブ
function cardArchived() {

// スクリプトプロパティのオブジェクト取得
var scriptProper

Fullcalendarでイベント作成するも、なぜか月表示した時に、9時以降にならないとその日に表示されない問題

カレンダー界のパケットモンスター、きゃりーぱみゅぱみゅこと、FullCalendarには、イベント作成機能がある。
しかし、こいつはなぜか、9時を一日の終わりとみなしているらしく、２０日8時30分とかにイベント作成しても、１９日に表示されて困った。

これを解決する方法は、optionsにnextDayThreshold: ’00:00:00’を明記することだったが、[公式ドキュメント](https://fullcalendar.io/docs/nextDayThreshold)には、defaultが’00:00:00’であると書いてある
ところで、ご存知の通り、日本時間９時は世界標準時で0時なのである。
だから当然タイムゾーン設定が悪いのだと思う人がいるだろうが、timezoneを東京にしても結果は同じなのである。
この問題、わかる人はコメントをください。

[参考サイト](https://kaede.jp/2014/08/30175019.html)

ES2015以降をお勉強するのに、Svelte REPLが楽しかったので紹介しておく

# Svelte？
HTML+JavascriptをJavascriptにコンパイルしてくれるsvelte。ナンノコッチャという人は、意識高めで解説してくださっている[ReactとVueを改善したSvelteというライブラリーについて](https://qiita.com/so99ynoodles/items/a8144ced1a21467c6300)を斜めすると良いかと。

要するに、素のjavascriptへの回帰を可能とするのがSvelte（日本語読みするならば、「滑る手」？）というわけ。実行速度的には素のjavascriptがvueやreactよりも速い。が、普通に素のjsを書くとある程度の規模で破綻する。私の理解としては、Svelteによる『簡潔なjs->素のjs』のコンパイルにより、普通のエンジニアでもそこそこの規模感までは破綻せずに、素のjavascriptで行けるようにすることがメリット。

これにより、Svelte経由で生成された素のjavascriptは、軽量なことで有名なelmやvueよりなども、よりファイルサイズが小さく高速に動作する、ものらしい。
[](htt

iCheckを使用したチェックボックスでチェックの数を制限する方法

iCheck.jsを使用したチェックボックスでチェックの数を制限したいと思ったのですが、
iCheckだと普通のclickやchangeイベントなどは使えないんですよね。

そこでiCheckの場合のチェックボックスのチェックの数を制限する方法をご紹介します。

前提として、jQueryとiCheck.jsは既に読み込んでいるものとします。

“`index.html

その1
その2
その3

エンジニア向けオープンプロジェクトトレース

https://www.reiwarss.com/OpenProject

Top tags
python
swift
javascript
go
C
C++
C#
Ruby
TypeScript
PHP

Chrome Ver.80系でJavaScriptを無効化する方法

##はじめに
JavaScriptのテスト時にChromeのJavaScriptを無効化したかったが、前のChromeのバージョンでの紹介記事は多かったがChrome Ver.80系での記事が少なかったため、Chrome Ver.80系でJavaScriptを無効化する方法をご紹介します。

##JavaScriptを無効化する方法

1. Chromeの右上にあるメニューボタンを押す。
2. メニューバー中の `設定` を押下する。
3. 検索窓で `JavaScript` と入力する。

4. `サイトの設定` を押下する。
5. `JavaScript` を押下する。
6. ステータスバーを `許可（推奨）` を　`ブロック中` に変更する。

JavascriptのPromiseを解説します

“`javascript
User.query({where: {name:nm}, andWhere: {password: pw}}).fetch()
“`
これの戻り値が Promise オブジェクトが返ります。

“`javascript
(new Promise()).then(成功時の関数).catch(失敗時の関数)
“`
みたいな

HTMLのリアルタイムプレビュー環境を雑に整える

#はじめに
HTMLファイルを書くとき、以前は一回一回VSCodeをターミナルで起動し、ファイルを編集してからChromeで確認するという面倒な方法を取っていました。しかも、普段はVimを使ってるのでVSCodeを使う機会はそうありません。しかし先日、N予備校のプログラミング学習コースが無料で提供されているということで、Webを一回しっかりと触ってみたいと思うようになりました。そういうわけで、快適にHTMLファイルのブラウザ表示の確認をするためにVSCodeの設定をしたいと思います。

#HTML Previewのインストール
といっても、やることは至極簡単です。VSCode左側のマークを選択して、「html preview」と検索すれば簡単にVSCodeの拡張機能がヒットします
![Sc

【Nuxt.js】Vue Router基礎編：params, queryを使おう

# 前置き

とっても便利なparams, queryについてご紹介?
**・同じコンポーネントを見せたいけど、
　カテゴリごとにURLだけを変えたい…
・一覧ページからソートして表示させたい**
そんな時に便利です♪

params, queryについて
いくつかに分けて書きます✍️
router-linkが分かれば簡単です?
まだ不安な方のためにも
複数の書き方で記載しました?

・params, queryの違い
・使うメリット
・クエリパラメーターとは？
・router-link色々

# params, queryの違い

まずはURLを見るのが
分かりやすいと思います?

**localhost:3000/param/param?query=123**

・パスパラメーター(param)
　?より前の部分、省略できない
・クエリパラメーター(query)
　?以降の部分、省略できる

**?例えば**

**localhost:3000/project123**

projectごとにURLを変更
表示ページは同じでコンポーネントで表示分け

“`bash:file

GoogleDriveにアップロードした画像から、外部参照可能なURLを生成しimgタグ化するコードを書いてみた

#概要

Codepenを最近よく使うようになって、画像使いたいなーでも有料会員になるほどでもないなーって思って、
コードペン上で画像を扱う方法をググってみたら、ゆんつ様の下記記事に遭遇！

▼こんぷれ / ゆんつ様
[CodePenの無料会員で画像を使うには](https://konpure.com/2019/04/07/post-10384/)
※詳細はゆんつ様の記事をご参照ください！

要約すると、GoogleDriveやDropBoxにアップロードされた画像から共有リンクを生成し、
共有リンクの一部を書き換えて画像参照できるようにするといった内容です。

この記事はゆんつ様の記事を参考に、JavaScriptを使って、
GoogleDriveにアップロードした画像リンクを1回の作業で終わるようコードを書いてみたという話です。

#作ろうと思ったきっかけ

私はGoogleDriveでアイコンや画像とかをまとめてるので、
GoogleDirveでの手順を参照して、さっそくやってみたわけですが

使ってみたい画像の共有を押して、
共有リンクコピーして、
imgタグの

元記事を表示