2018-04-15

■

React.js javascript redux

redux、そびえ立つ難しさよ。

https://redux.js.org

なんとなく何が難しいのかわからない、本当にヤバイ状態なので今自分にわかっていることをまとめる

React

reactjs.org

言わずとしれたすっごいフレームワーク。何でも出来る。ただしやってることはprops渡してcomponent描画してるだけ。

propsには何でも渡せる。functionだって渡せる！！

<header />
<main />
<title />
<footer />

みたいに（最終的には）すっごく単純に見せれる。

Redux

https://redux.js.org/redux.js.org

端的に言うとprops管理するためのフレームワーク。なぜこれが必要かと言うと

componentに子componentをもたせるとどこまでprops渡したのか複雑なアプリになってくるとわからなくなってくるため、storeで一元管理する。

これをデータの流れを作ることでシンプルに利用しよう、というわけらしい。

2018-04-06

create-react-native-app → npm start できなかった。

React.js javascript

centOS7でreact-native-app作ろうと思ったらできなかった。

github.com

watchmanがないらしい。

てことでソースからインストール。

facebook.github.io

$ git clone https://github.com/facebook/watchman.git
$ cd watchman
$ git checkout v4.9.0  # the latest stable release
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install

npm startでバーコード表示されたから行けたかと思ったけど無理だった。

経過わかったら書きます。

2018-03-30

車で～時間圏内がどこからどこまでか

雑記

f:id:devilmakelie:20180330172236j:plain

Google Mapを使用したサービスのIsochrone and Isodistance Map Demoというサービス

を利用する。Githubページはコチラ。

これでどこまでかが一目瞭然。

使い方はマップ内にフラッグを立ててその後

f:id:devilmakelie:20180330172213j:plain

duration(距離)とdriving(車)にチェックしてCompute Polygonボタンを押してしばらく待てばOKです。

これは便利。

2018-03-09

連想配列にforループを適用する

javascript

連想配列を色々とまとめて処理したい。

①for ~in ループを使う

これが一番簡単でわかりやすい。メインで使う

var IDs = {
  "name1":"hoge1",
  "name2":"hoge2",
  "name3":"hoge3",
  "name4":"hoge4",
};

for(var key in IDs){
  console.log(IDs[key]);
}

②forEachを使う

Object.keys(array)を使うと連想配列のキーのみ配列として取り出せることを利用する

var IDs = {
  "name1":"hoge1",
  "name2":"hoge2",
  "name3":"hoge3",
  "name4":"hoge4",
};

Object.keys(IDs).forEach(value => {
  console.log(IDs[value])
},IDs);

ちょっと無理やり感がある。

③mapを使う

mapを使うと配列の処理がいらなくなるみたい

var IDs = {
  "name1":"hoge1",
  "name2":"hoge2",
  "name3":"hoge3",
  "name4":"hoge4",
};

Object.keys(IDs).map(value => console.log(IDs[value]));

これだとmapとforEachの違いがイマイチつかない。

ついでにはなるが、

www.sejuku.net

をみて書いたのでが、forEach文をアロー関数になおそうとするとエラーになった。

var IDs = {
  "name1":"hoge1",
  "name2":"hoge2",
  "name3":"hoge3",
  "name4":"hoge4",
};

Object.keys(IDs).forEach(value => {
  console.log(this[value])
},IDs);

という書き方だとエラーが出る。アロー関数内のスコープは基本外側に向けて開かれているため、という理解。この場合thisが何のオブジェクトなのか定義されていないため、みたい。ちょっとした違いだけど心に留めておく。

qiita.com

2018-03-07

javascriptでダブルクリックをエミュレーションする

javascript

【やりたいこと】

DOMをダブルクリックしたときのイベントを発火させたい

<html>
<head></head>
<body>
<div id = "ex_event" ondblclick = click_event></div>
</body>
</html>

click_eventを発火させたい

MouseEventメソッドを使う。

developer.mozilla.org

var evt = new MouseEvent("dblclick", {
  bubbles: true,
  cancelable: true,
  view: window
});

elm = document.getElementById("ex_event");

elm.dispatchEvent(evt);

これでダブルクリックをエミュレーション出来る。

2018-03-06

WebExtensionsことはじめ

WebExtension javascript

以前仕事で必要があって

WebUIとFlask,Seleniumを使ってPC内にサーバーを立ててブラウザ操作を自動化するアプリを作ったんですがこれがちょっと使いづらかったらしい

使いづらい理由：

起動の仕方がわからない：起動はパワーシェルでFlaskでHTTPサーバー立てる→ブラウザでアクセス→そっからWebUIで呼び出し、というふうな感じで作ってたのですが、なんでそんなメンドイことするの？て風な感じで誰も起動しようとしなかった。
たまにSeleniumがブラウザオブジェクトを見失ってしまう：そんなときは最初からやり直して下さいと言っていたのですが、見失うのが若干多かったりしたのでわからんとの指摘があった。

フッざけんな！とも思ったのですが、まぁ確かに使いづらいのかな、とも思ったのでWebExtensionsで書き直すことにしました。

てことで以下を手習いに写経しました

developer.mozilla.org

色々とタイポが多くて苦労はしたのですが、ようやくチュートリアルがうまく行ったのでこれから作っていきます。

作りたいのはクライアントのページを操作するWebExtensions

f:id:devilmakelie:20180306200348j:plain

【サーバー側】

・WebExtensionsからクエリがあったらそれを返すAPIを作成する

【WebExtensions側】

・UIを作成する

・元となるページからDOMを取得し、取得したDOMに応じてクエリを作成し、サーバー側へPOSTかGETする

・帰って来たレスポンスを成形してUIに流し込む

・流しこまれたUIを元にユーザーが色々と成形する。

・元のページに成形されたデータを流し込む

この辺ができれば、と思う。

2018-03-03

独学でプログラミング言語を学ぶ

python 雑記

かれこれpythonを学び始めて1年半になります。

javascriptは半年くらいです。

どうやって学んだかをこちらに書きます。

第1段階：

どんな言語かわからんかったからとりあえずサイト1個まるごと写経しました。

www.python-izm.com

写経したのはこちらのサイト。

こちらにそって言語のインストールと写経を行いました。

第2段階：

なんとなく書き方が手に馴染んできた気がしてきたので今度は体系的に学びたくなりました。ということで一冊本を買いました。

www.oreilly.co.jp

色々本は買ってみたのですが一旦手になじませた後に理論を身につけていくとうまく書けるようになった気がしました。

第3段階：

次に色々と作りたくなったこともあり、実際にアプリケーションを作ってみようと思いました。

最初はtkinterを使ってGUIアプリを作ろうと試みていたのですが、なんとなく難しくて挫折しました。

そこでWebUIの存在に気づき、flaskを使ったWebアプリケーションを学びはじめました。

第4段階：

ついにFlaskで簡単なwebアプリ（連絡帳）を作ることが出来、そこで燃え尽きてしまいなんとなく何がやりたいのかがわからないようになってきました。

そこでProcessingやKotlin、はたまたtouchdesigner等違う言語に手をつけたのですが、色々と手を動かしたものの、どれもしっくりときませんでした。

第5段階：

ローカルにflaskでサーバーを作り、そこを起点としてSeleniumでブラウザを操作するようなアプリを作りました。

ここで気づいたのがJSならDOM操作できるんじゃないか？ということでした。

ですのでJSの勉強を始めることにしました。

こんな感じで現在に至ります。

総括：

プログラミング言語を学ぶのではなく『何をやりたいか』を明確にし、そのために必要なものを考え、それをひとつづつ学んだほうがモチベーションを維持しやすく、またスキルアップにも結びつけたと思います。

社会人になると時間が限られるのでそこが重要な気もしました。

とりとめのない話で申し訳ありませんが、今後プログラミング言語を学んでみたいという皆様のお役に立てばと思っています。

Yado_tech

旅館＋ITとはなんぞ

■