著者アーカイブ asaba

著者:asaba

【javascript】クロージャは即時関数で囲むとより効果的

今回はクロージャを使っている中で少し躓いたことを綴ります。

クロージャとは、関数の中に関数が入っている状態のことを指し、スコープ内の変数を関数に渡したい時によく使われます。

javascripterにとっては基本中の基本ですが、恥ずかしいことに下のような間違いを犯してしまい手こずる羽目に・・・。

</pre>
document.body.onload = addElement;
var json = {
ハンバーグ: {
分類: '今日はハンバーグを食べました。ボリューム満点！',
主成分: 'タンパク質'
},
カレー: {
分類: '暑い夏には激辛カレーが一番！',
主成分: '炭水化物'
},
親子丼: {
分類: 'ふわふわトロトロ懐かしの味！',
主成分: 'タンパク質'
}
};
function addElement () {
for (var item in json) {
// 新しい div 要素を作成します
var newDiv = document.createElement("div");
// いくつかの内容を与えます
var newContent = document.createTextNode(json[item]['分類']);

newDiv.addEventListener('click', function() {
sample (json[item]['主成分']);
}, false);

// テキストノードを新規作成した div に追加します
newDiv.appendChild(newContent);

// DOM に新しく作られた要素とその内容を追加します
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}
}
function sample (e) {
var component = e;
console.log(component);
}
<pre>

addEventListenerの中の関数にjsonの要素を指定しています。本来ならば順に「タンパク質」「炭水化物」「タンパク質」と

出したかったのですが、生成されたdivの中身をクリックすると全ての要素に一番最後の「主成分」要素である「タンパク質」

が格納されてしまっています。

これは、格納しようとした値が保持できないために起きる事故です。

この場合は即時関数で実引数にjson要素を持たせればちゃんと値を保持したまま回ってくれます。

もっと沼るかと思いましたが即時関数のことを知っていたのでさくっと直すことが出来ました。

正しくはこんな感じです↓

</pre>
(function(n) {
newDiv.addEventListener('click', function() {
sample (n);
}, false);
})(json[item]['主成分']);
<pre>

reactをやっている限りはまあ使うことはないと思いますが（mapがありますしね）生のjavascriptを触るうえで覚えておくと

クロージャと即時関数まとめて理解できるので損はないと思います～。

著者:asaba

wi-fiを再接続したらslackが真っ白になり何も表示されなくなった時の話

今回はslackの話です。

自分はwi-fiを自動接続する設定のままノートpcを色々な場所に連れまわしていたのですが、ある日その状態で

slackを開くと一番最初のチャンネルのみなぜか真っ白になって何も表示されなくなってしまいました。

他のチャンネルを試してみたのですが、こちらは至って普通（返信もレスポンスも正常に返ってくる）に

機能します。しかも、普通のブラウザで見るとこちらは正常に動いていることが分かりました。

ますます分からない・・・。

実はこれ自体の解決策簡単で、ただpcを再起動するだけでチャンネルを復活させることができます。

後は、wi-fiの自動接続をoffにしてその都度繋げることでこれを防ぐことができます。がまだ具体的な原因が

わかっていません・・・。移動先で仕事をする場合に絡まれたら厄介なので具体的な解決策が見つかりましたら

随時載せていきたいと思います。

wi-fiの自動接続をoffにする方法については、設定ページにてアダプターのオプションを変更する->指定のpcを右クリックで「状態」を

クリック->ワイヤレスのプロパティをクリック->このネットワークが接続範囲内に入ると自動的に接続するのレ点を外す。

著者:asaba

【node】nodistを使ってもnode.jsのバージョンが変わらない時の対処法

前回は、nodistでnode.jsのバージョンの変更する方法を書いていましたが、これを使ってもバージョンが

変わらないよ～という方向け（というか自分向け）に対処法を書いていきます。

nodistインストール後にnode.jsをインストールした場合は、この「nodist 8.0.0」というおなじみの

インストール方法でサクッとバージョン変更できるのですが逆の場合つまりnode.jsが先にある若しくは

node.jsをインストールした後にnodistをインストールした場合はnodistのコマンドが効かず、先に存在してい

たnode.jsのコマンドが優先して働いてしまうみたいです。なので、実際に違うバージョンのnode.jsをインスト

ールできてもそれ以降はnodistコマンドが邪魔されたままでnode.jsのコマンドを入力している状態となって

いる訳です。

自分の場合は、windows左下のスタート画面内の設定（歯車のアイコン）を押してwindowsの設定という

ページに移動します。真ん中の検索欄で、システム環境変数の編集と検索をしてください。

すると、予測ワードにシステム環境変数の編集というワードが出てくるのでこれをクリック。

すると、次のようなページに移り変わります。ここで右下の環境変数というボタンをクリックします。

すると、下記のようなページがでてくるので下の欄からpath変数を探して編集を押してください。

ここで各アプリのパスが列挙されますが、その中でnodistとnode.jsのパスに着目します。この時に

node.jsのパスがnodistのパスより上にあればビンゴです。nodistのパスを「前へ」コマンドでnode.jsより

上にくるようにしてok若しくは適用を押してコマンドを再起動してnodist 8.0.0を実行してみましょう。

その後にnode -vで確認すると正常にバージョンが変更できていることがわかると思います。

この方法を知るまではバージョンの変更方法がわからなくて詰みかけていたので本当に助かりました。

同じような症状で困っていたら参考にしてみてください。

著者:asaba

【Excel】縦列のセルを一括で横列に張り付ける方法

今回は、縦一列に並んでいるセルを横一列に一挙にペーストする方法を載せていきたいと思います。

方法はとっても簡単。ペーストしたいセルをコピーした後に形式を選択して貼り付け->形式を選択して貼り

付けを選択。

excel2010ならば上記のような画面がでてくると思います。

形式を選択して貼り付け後、以下のようなダイアログがでてくると思います。

この中の、右下にある行列を入れ替えるのチェックボックスにレ点をつけてokを押すだけで縦横を

変化させてコピペすることができます。

※コピー前

※コピー後

忘れないうちにメモしましょう。

著者:asaba

【Excel】ヘッダーの編集方法と戻り方※自分用

Excelでドキュメントを作る時に見出しとしてヘッダーを設けることでどのページが先頭なのか識別することができます。

今まではあまり意識していなかったのですが、ページ数が多かったりするときはこのヘッダーを使うことでかなり見やすい資料に

アレンジすることができます。

さて、方法ですがExcel2007では挿入リボンの中のヘッダーとフッターをクリックします。

すると、今まで作っていたエクセルが分割されて再出力されているのが分かります。左端にヘッダーという文字が書かれているので

無事にヘッダー編集画面に移動出来たことが分かります。

ここの右端に何か適当にヘッダーにしたい文字を入力するだけで印刷画面時にヘッダーとして組み込まれていれば成功です。

また。ヘッダーを編集した後はどうやって戻ればいいのと思ったのですが、Ctrl + zで何事もなく元のエクセルの画面に戻れます。

このコマンドは基本作業を戻したい時に使うのですが、ヘッダーを編集した作業はなぜか元に戻らず編集したままになっています。

自分の中では一番簡単な戻り方だ捉えているのでそこはお好みでお願いします。

ヘッダーを上手く使って綺麗なExcelドキュメントを作れるように心がけたいですね～。それでは。