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

JapaScript の dateObj.toISOString() が便利だった。

日付を`YYYY/MM/DD`形式などにフォーマットして出力したい場合に、年月日をそれぞれ求めてから文字列に加工していました。

インターネットを検索しても同様の記述が多く、もっと簡単な方法がないかなとMDNをみていたら常に`YYYY-MM-DDTHH:mm:ss.sssZ`の文字列を返す`toISOString()`があり、使ってみたら便利でした。

Qiitaでもすでに投稿されている方がいますので、その一部のリンクを記述します。

* [ECMAScript 2017 に準拠した方法で Date オブジェクトをシリアライズ(文字列化)する](https://qiita.com/think49/items/b314eb874a66e9fe9e19)
* [toISOStringから時間を整形する。](https://qiita.com/HadaGunjyo/items/ff98f02b53ad175474e9)

JavaScript map()で上手く新しい配列が作れなかった話

JSに慣れていなくて、配列に対して処理を行う“map()“で上手く配列が作成できなかった話。

# mapでの配列新規作成
numを要素に持つ“`objArray1“`配列を定義し、mapを使ってnumを２倍にした“`objArray２“`を新しく作成しようとした。

“`JS
const objArray1 = [{num:1}, {num:3}, {num:5}];

const objArray2 = objArray1.map(obj => {
obj.num = obj.num *2;
return obj;
});

console.log(objArray1); // {num:2}, {num:6}, {num:10}
console.log(objArray2); // {num:2}, {num:6}, {num:10}
“`

すると“objArray1“と“objArray2“が同じになってしまった。

“map()“は新しく配列を生成するメソッドと聞いていたが、各要素に対しては参照渡しするだけなのねーと思い、以下の

【Rails】 DataTables 検索結果の保持方法

# はじめに
これまでに Rails + DataTable 関連の記事を書いてきましたが、別のページから戻ってきた時に検索結果を保持していて欲しいなどのユーザーの要望があるかと思いますので、そのような細かい設定の変更方法について今回はまとめさせていただきます。

#### 関連リンク
関連リンクを下記に載せておくので、必要であれば参考にしてください。。

* 【Rails】 DataTables 実装方法
* https://qiita.com/syukan3/items/5ac9f0d1b43334b5eb13
* 【Rails】 DataTables 動的にカラムを変更する方法
* https://qiita.com/syukan3/items/83c4ecd351db57911943

# 検索結果の保持方法
次の２つを設定するだけで、検索結果を保持してくれるようになります。

* stateSave
* stateDuration

“`coffeescript:app/assets/javascripts/concern/datatables.cof

Chart.js【javascriptで簡単にグラフが描ける！】

#1.Chart.jsを読み込む

CDNサーバからスクリプト「Chart.js」を読み込みます。
具体的には、グラフを描きたいWebページのHTMLソース中に以下の1行を加えるだけです。

“`html

“`

#2.canvas要素を記述

グラフを掲載したい場所に、canvas要素を使って下記のように1行を記述するだけです。
idは他と重複しない名前をつけます。

“`html

“`

#3.グラフの描画内容をscript要素内に記述

“`html

“`
描画内容の指示（以下のようなグラフの例）
・折れ線グラフです。
・X軸には、Item1～Item7の項目があります。

[JavaScript] if文の条件で代入をしてはいけない

ifの条件には **truthy** または **falsy** と認識される式が書けます。[^1]
そして条件の中で代入も行うことができます。

[^1]: [if…else – JavaScript \| MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/if…else)

“`js:代入の例
if (a = ‘a’) { // 結果、’a'(truthy)が評価される
console.log(a); // a
}

if (a = ”) { // 結果、空文字(falsy)が評価される
} else {
console.log(a); // ”
}
“`

さらに、こんなこともできます。

“`js:複数代入の例
if (a = ‘a’, b = ‘b’, a === ‘b’) {
console.log(‘true’);
} else {
console.log(‘false’); // こっちに入る
}

// 複数の代入もできている

Reactで行数可変なtextareaを作った話

#TL;DR

**中身に応じて高さが変わるtextareaが出来た**
コピペ、複数行まとめて削除しても大丈夫

軽く検索しても出てこなかったので
似たようなことをしたくなった人や未来の自分のために書いてみました

#環境
react:15.6.2
redux-form:6.8.0
lodash.isempty:4.4.0

正直reactだけでもOKなはず
廃止されるライフサイクルメソッドなども使っていないので最新版のreactでも動くと思います

他２つは細かいところ書くのが面倒なので使ってます
無くても本質には関係ないので大丈夫です

chromeとIEで動作確認済み（バージョンはわからないですが2020/01付近です）

#参考
[textareaの大きさを自動調整](https://qiita.com/SoundRabbit/it

HTML＋Javascriptでデスクトップ版Cytoscape用の拡張GUIを手軽に作る方法

日頃からQiitaにはお世話になっているので、ブログに書いた内容のうち、過去の自分が欲しかった情報（動かすのに必要な部分）を要約してご紹介します。

元のブログ記事はこちらです。
[ネットワーク可視化ツール「Cytoscape」の拡張GUIを、htmlファイル1つでお手軽に作る話](https://www.creativity-ape.com/entry/2020/01/21/070000)

Cytoscape自体の使い方についても書いているので、よかったら参考にしてみてください。
[ネットワーク可視化ツール「Cytoscape」に雑に入門して手っ取り早く使う話](https://www.creativity-ape.com/entry/2019/02/16/080000)

## 概要

HTML＋Javascriptから、XMLHttpRequest（xhr）を使ってCyREST APIを叩く方法です。
デスクトップ版のCytoscapeに、お手軽に外付けのGUIを生やすことができます。

![](https://cdn-ak.f.st-hatena.com/images/fot

JavaScriptの関数のかきかた！

#はじめに
やっと初投稿。1ヶ月前くらいにアカウントを作ってみたものの書くこともなく放置状態だった（正確には最初にこれから頑張る！的な投稿をしたが「それ技術系の記事じゃねーだろ」と運営に言われ非公開になっております）。今の状況としては、Web系エンジニアに必要なスキルの修得を目指してとりあえずProgateの各コースを進めているところ。その中で自分が慣れ親しんだCやJava（長くやってるだけでスキルが高いわけではない）とJavaScriptでは関数の定義の仕方が結構違う感じがしたのでメモ的な感じで投稿してみる。初投稿だしいいよねこんな感じで。
#Cの関数
例えば、2つの整数を引数にもち、和を戻り値として返すadd関数を宣言してみる。

“`
int add(int x,int y){
　return x + y;
}
“`

#JavaScriptの関数
対して、JavaSciprtでこのadd関数を書くとこうなる。

“`
const add = (x,y) => {
　return x + y;
};
“`

#まとめ
こうして並べてみるとやはりかなり違うことがわかる。引数

Vue.js の基本的な機能を使ったサンプルを書く

## 概要

– Mustache 構文、条件付きレンダリング、メソッド、算出プロパティ、フォーム入力バインディング、リストレンダリング、コンポーネントの機能を使ったサンプルコードを示す
– 環境: Vue.js 2.6.11

## Mustache 構文で Hello World

– 画面に Hello, world! と表示するサンプルコード

“`html

{{ message }}