頑張らないように頑張る。

怠惰と努力の狭間

Reactの勉強会に行ってきた話。💻

React触った事も見た事もなかったので、行ってきた。

備忘録的なところと、こういう便利ツールあるんだってーっていう情報共有も兼ねて。

ライブコーディングほんとうしゅごい。

supporterzcolab.com


🔍事前に調べた内容

https://www.sejuku.net/blog/10812 https://www.to-r.net/media/react-tutorial01/ https://employment.en-japan.com/engineerhub/entry/2018/04/13/110000 https://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19 https://qiita.com/naruto/items/fdb61bc743395f8d8faf http://iwasiman.hatenablog.com/entry/2018/04/23/200000

特徴

  • Facebookが開発したのOSSJavaScriptライブラリ
    • PHPを使ってたが、XSSCSRFなどの脆弱性問題から「いっその事仮想DOM(VirtualDOM。以下に説明あり)を自分達で操ればえんじゃね?」ってところから開発された
  • 開発途中からでも使える事が念頭に置かれてるので、既存コードに影響を与えることなく利用可能
  • コンポーネント指向でUI作成に最適
  • SPAに最適

VisualDOM

  • レンダリング機構の一つ。ざっくりとした手順は以下の通り。
    • 1.Virtual DOMに反映
    • 2.Virtual DOMと現在のHTMLの内容の比較
    • 3.差分のみをHTMLに反映させてブラウザの再描画
  • Webページを表示する一連の処理の流れの中で"描画コスト"が非常に高いため、描画コストを最小限に抑えられるReactは、表示のパフォーマンスを向上させることが可能
  • Reactだけでなく、AngularやVue.jsでも採用されている

メリット

  • SPAでの利用には有効に機能する

デメリット

  • jQueryなど、HTMLを直接書き換えるライブラリとは相性が悪い(VisualDOMとの比較に影響が出る)

※これらのメリット・デメリットは、VisualDOMを使っているライブラリでは全て同じ。


⌨️ライブコーディングしながら教えてもらった事

簡単に試すなら『Create React App』

https://github.com/facebook/create-react-app

上記のGithubからcloneで落としてきて、initして、startしたら使える。 後は~/src/App.jsあたりのがちゃがちゃイジっていけばOK。

私見
必要なライブラリをよろしく落としてきてくれるので手間がかからない反面、一から構築するための知見は得られにくい。 一から構築したい場合は、npm init react-app my-appとした後に、リバースエンジニアリングすると良い?

Atom』のおすすめパッケージ

https://atom.io/packages/prettier-atom

『Prettier』というパッケージ。 Ctrl+Cでの保存時に、HTML整形・引用符の統一・セミコロンの強制付与などのフォーマットを自動でしてくれる。

『ServiceWorker』

https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja

オフライン利用のためにキャッシュしたり、プッシュ通知したり、バックグラウンド同期したり、色々してくれる基盤技術。 Reactでも採用されており、~/src/index.jsに以下のコードがある。

...
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
...

『State』と『Props』

https://qiita.com/kyrieleison/items/78b3295ff3f37969ab50

データの扱いの話(State=状態を持つ、Props=親からプロパティを受取る)。 jQueryだと「このDOMのこの要素にはこの値だね」というように、毎回フルで読みに行ってフルで描画する=描画コストがかかる。 それをしないように変数のような領域で持っておく...みたいな感じで、部分的に読み書きする事で描画コストを抑える。(前述したVisualDOMの話の類似)

『スプレッド構文』と『BABEL』

var data = [1,2,3];
var hoge = [...data, 4];  // 三点リーダを置く事で、指定された配列をconcatで繋げてから、新しい配列を追加する

// ちなみに実態はこれ
var data = [1, 2, 3];
var hoge = [].concat(data, [4]);  // 新しい配列に対して、data[]と[4]をconcatしてる事が分かる

こういったコードの実態(展開式)を確認するには『BABEL』が使える。

『LiceCap』

https://www.gigafree.net/media/recording/licecap.html

操作をGIF保存できる便利ツール。

Githubなどでは動画は貼付できないが、GIFなら貼付できる事が多々ある。(hatenaブログでも同じだが) そのため、操作内容を一発でGIFに録画できるのは便利。

APIが簡単に作れる『Google Apps Script』

https://www.casleyconsulting.co.jp/blog/engineer/177/

ExcelやWordなどで使えるVisualBasicGoogle版みたいなもの。 GoogleスプレッドシートをDB代わりにしつつ、GoogleAppsScriptでAPIを作成していける。 もちろん、GoogleドキュメントやGoogleDrive、Gmailに対する操作も可能。

ただし、ドメインが異なるのでCSRFの問題が出てきてPOSTはできない(できるけど弾かれるはず)。 抜け道としては、GETパラメータでデータを与えてぶち込む(設計上良くないけど)。

JavaScriptで非同期でデータ取ってきてくれる『Axios』

https://github.com/axios/axios

Promise based HTTP client for the browser and node.js.

ブラウザやnode.jsで動くPromiseベースのHTTPクライアント。 自分でPromise使って実装するより、こいつ使ってthen()で繋げていった方が楽。

デザイン周りは『MATERIAL-UI』

https://material-ui.com/

MaterialDesign』のReact特化型版。

使いたいコンポーネントを探して、コードを見て、コピペ(import<tag>)してくれば使える。 フォントだとかのアプリ全体を制御する<link ... />~/public/index.htmlに追加する。

git stash

https://qiita.com/chihiro/items/f373873d5c2dfbd03250

一旦待避させられるらしい。初めて知った。 「作業中だったけど別作業が入った。今の作業はコミットしたくないし、かといって消したくもない」といった時に使える。

  • git stashで、待避させる
  • git stash applyで、待避所から取ってくる
  • git stash popで、待避所から取ってくると同時に消す
  • git stash dropで、待避所から消す
  • git stash listで、一覧表示

『式の展開』を応用

...
import CircularProgress from '@material-ui/core/CircularProgress';
...
class App extends Component {
  ...
  render() {
    return (
      <div>
        ...
      </div>
      {flg && <CircularProgress />}
      ...
    );
  }
  ...
}

中括弧{}の中は展開されるが、このような書き方をすると、flgtrueの時だけ、<CircularProgress />を表示してくれる。

プログレスバーなど、処理中にのみ表示させたい時などに便利。

『Firebase』

https://firebase.google.com/?hl=ja

Hostingできて、Firebaseのサブドメインにアプリを公開できる。 npmで入れておくとコマンドベースで動かせる。

作ったものを世の中に公開する事が簡単にできる!!!しゅごい!!!


🙂まとめ

React要素の少ない記事になってしまった。。。まあ、「フロントエンドエンジニアの一日」ってサブタイトル付いてるからね、いいよね(空目)

ライブコーディング見てて改めて思ったんだけど、これだけ出来る人って、地頭がいいのか、周囲の助けが本人をそうさせてるのか、何らかの使命感に駆られて自然と身に付いたのか、何でなのか気になる。

何はともあれ、しゅごい。


🤔そんな事より、

COMPもらった。

f:id:hanakayui:20181115104123j:plain

グミは食べてみたけど、味はウーン。 完全食だからね、そこは仕方ないよね。

開発者の人のインタビュー記事読んでみたけど、ほんとうしゅごい。

月曜日だし『IDLMs.』の曲を聞いてくれ。🌙

IDLMs.

I Don't Like Mondays.

私は月曜日が好きじゃないです。(分かる)


📻きっかけはTOKYO FMの『クロノス』

前職の通勤途中。

「それでは聞いて下さい。今月のレコメンドソング、I Don't Like Mondays.で『FIRE』」

アイドントライクマンデイズ???何だそのちょけた名前は。

「I Don't Like Mondays.は、オシャレな女の子を踊らせるために結成された4人組ロックバンドグループで...」

なんちゅう理由で結成してんだ、今どきかよ。


これが初めて彼らを知ったタイミングであり、同時に惹かれたタイミングである。


🌙通称:「IDLMs.」「アイドラ」

彼らは「IDLMs.」「アイドラ」と呼ばれている。

Wikipediaにも記載はあるが、印象に残るような長い名称かつ文章でありたいという考えによるものであり、ファッション誌の編集長の助言による。「I don't like mondays.」という文章自体は、世界的に有名なブレンダ・アン・スペンサーの言葉から来ている。


🎙とにかく格好良くてお洒落

僕が最初に知ったのは先程書いた通りラジオである。 そこから流れてきた爽快な音楽とお洒落な歌詞。

「どんな人達が歌ってるんだろう」と思って画像検索して出てきたお洒落なイケメン4人組。 (正直昭和臭のするダサ格好良さではあるが、格好良い事には変わりない。)

音楽という面でも外見という面でも格好良い。


📝歌詞が最高

彼らの歌詞は「I」が多用されていると感じる。

「俺はこうしたい」「俺はこうだ」「俺はこれがほしい」という自己主張があるのは、聞いていて楽しい。

特に「お前が好きだ」「お前がほしい」「お前にキスしたい」という、彼女に対する熱い気持ちが主観で描かれているのは最高。


🎶いくつか紹介

彼らの曲は現時点で30曲近くあるが、その中でも好きな楽曲をいくつか紹介する。

FIRE

www.youtube.com

最初に聞いた曲だし、1stアルバムのタイトルにもなってるし、「IDLMs.といえばこの曲!」って感じ。

Perfect Night

www.youtube.com

金曜日の夜に聞きたい曲。

PVも楽しいので、楽曲だけじゃなくて動画もどうぞ。

LAMONADE

www.youtube.com

今年も真夏の日差しがあなたをきれいにしてしまうよ

この一節が好き。

あと、こじるり可愛い。(重要)

Girlfiend

www.youtube.com

冬になると聞きたくなる曲。

彼女のことが本当に好きなんだなと感じれる一曲。

Sorry

www.youtube.com

「彼女好き、めっちゃ好き」みたいな曲が多い中で、浮気して許しを請う一曲。

これもPV面白いから、動画と一緒にどうぞ。


🙂まとめ

IDLMs.は良いぞ。

月曜日は好きじゃないぞ。


🤔そんな事より、

江ノ島行ってきた。

f:id:hanakayui:20181112113439j:plain

f:id:hanakayui:20181112113450j:plain

f:id:hanakayui:20181112113500j:plain

f:id:hanakayui:20181112113508j:plain

潮の香りと、波の音と、生しらす

久しぶりの遠出のデートだったから楽しかったー!

お前のバイブルは何だ。📖

MARVELはいいぞ。

映画ももちろん良いけど、ドラマもしっかり力を入れてやってる感じ。

バイブルとか関係なく、作品として好き。


📖バイブルとは

バイブル(Bible)
キリスト教聖典旧約聖書新約聖書との総称。聖書。
2 その分野で最も重要かつ権威ある書物。「受験生のバイブル」

出典:コトバンク

なんで「書物」なの?関係なくない?

聖書は「書物」だが、その真髄は「教え」にある。

そのため「書物」という箱物に限定する必要はなく、「教え」について捉えるべきである。

かの有名なソクラテスも自身で書籍は残していないし、イエスも同じである。

彼らの「教え」を基に、後世が「書物」にまとめただけであり、権威があるのは「教え」である。


まあ、別にそこまで深い意味で「書物」って言ってないんだろうけど。


🗣世間の声はどうか。

www.ozmall.co.jp

oshiete.goo.ne.jp

ciatr.jp

あれやこれやと出てくる出てくる。

自己啓発本もあれば、小説もあれば、漫画もあれば、学術書もあれば、映画もあれば。

人によって刺さるものが違うというのがよく分かる。


🙁私事ではありますが、

MARVEL

MARVEL作品は僕に様々な感情を与えたし、引き出してくれたし、背中を押してくれた。


まず、様々な正義感を持ったヒーローがいるというところだろう。

アイアンマンは正義のためなら自己犠牲も厭わない。 ナターシャやホークアイは忠誠心で緻密に行動する。 アントマンは目には目をタイプで悪事に対して犯罪を犯してでも解決しようとする。 そんな彼らを見ていると正義感について考えさせられ、自分も同じように行動したいと思えてくる。


次に、そんな超人ヒーローにも人間的に弱い部分や闇があるというところだ。

ブラックパンサーは若くして王位を継承し、様々な葛藤と戦っている。 デッドプールは彼女のためとなると周りが見えなくなる。 スターロードは幼い頃に連れ去られて父親と再会するも...。 そんな彼らの人間味の溢れる部分を見ていると、ヒーローも完璧じゃないんだと思えて安心感が得られる、


そして、作品を通して最新科学や未来について考える事ができるところ。

アイアンマンだとロボット工学や人工知能 アントマンで挙げられる量子学。 そして何より最新作のヴェノムだと地球外生命体。 SFな事はもちろん分かってるが、MARVELは完全なSFというよりも、どこか科学的根拠に基づいた作品のように思える。 その知的探究心を満たしてくれるというのは今まで巡り合った映画や作品の中で初めてである。

武士道

先程MARVELで正義の話をしたが、武士道でもこれが説かれている。

義、勇、仁、礼、誠、名誉、忠義。

仁義や忠誠、名誉や勇気など、必要な要素が日本人らしさと共に詰まっている。


🎓バイブルと行動学

って検索しても別に出てきてはないけど、ただ、確実に関連してるとは感じる。


以前のエントリーでも少し触れたが、バイブルに感化され、理解し、行動する。

行動規範はバイブルから来ていると言っても過言ではないだろう。


ただ、同じ作品であっても感化のされ方や理解のされ方は異なるし、良く働く事もあれば悪く働く事もあるだろう。 (認知の歪みは少なからずあり、その歪みによって過激派が生まれているのがその証拠である。)


🙂まとめ

バイブルを正しく理解し、「論語読みの論語知らず」にならないようにきちんと実践していく。

「認知の歪みは少なからず存在する」という事も認識しながら、歪曲した行動を取らぬよう自身を客観視しながら行動する。

そんなあなたのバイブルは何ですか。


🤔そんな事より、

雑な写真で申し訳ないんだけど、最近朝ごはん食べるようにしてる。

f:id:hanakayui:20181108124050j:plain

夜に酒飲みながら飯食うから太るし、朝に飯食わないから代謝も落ちるし、そういえば実家にいた時は毎日朝食食ってて太ってもなかったから、とりあえず実験的に朝食を食い始めた。どのくらい改善されるかな。。

量は気にしないで。お腹空いててん(デブ)

「当事者」と「関係者」と「第三者」⛪

「第三者」って言葉はあるけど、

「第一者」とか「第二者」とかないよね。

三者の一人歩き。


🤔「あなたには関係ないでしょ」←分かる

妊娠中の飲酒や喫煙、自己都合離婚による子供の取り合いなどが生じる時、「子供が可哀想だと思わないんですか!?」と言う人がいる。

「可哀想だと思ってます」って言わせたい気持ちが見え見えだし、自分が上に立ちたいんだろうなーと思ってしまう。


三者なのに、赤の他人なのに、全く関係ないのに。


まあ、確かに可哀想だけどね。 自分がその立場だったら、いや、その立場になる事の想像すらしたくないから考えるのやめよう。


😐関係あるのは当事者と関係者

一旦、今回のエントリーでの言葉を統一しておく。

第一者=当事者(本人)
第二者=関係者(家族や友人、施設従事者など近い人)
三者=第三者(赤の他人)


死の壁』という本に交通事故を用いた例が紹介されていて、ここでは「一人称の死、二人称の死、三人称の死」として取り上げられている。

「一人称の死」とは自分自身であり、死んでしまっているため"死"そのものを感じる事が出来ない。 「二人称の死」とは家族や友人などであり、"死"そのものを感じ深く悲しむ。 「三人称の死」とは赤の他人であり、交通事故の死亡数など"死"として感じづらい部分。


今回の例であれば「子供が可哀想であるかどうか」

「当事者」はもちろん関係がある。 子供の育児や教育、金銭面や成長面など、あらゆる角度からの支援が必要になってくる。 妊娠中の不摂生により奇形児が産まれても自分の問題だし、離婚によるストレスで子供が歪んだ性格になるのも自分の問題。

そして「関係者」。 当事者にとっては唯一の助け舟であり、当事者のメンタルケアや、時には子供の世話をしてやる事もあるだろう。 当事者自身がここを否定してしまうと苦しむのは自分になるし、関係者自身も追体験により感情を揺さぶられる可能性もある。

最後に「第三者だが、先程言った通り全く関係ない話である。 迷惑を被るわけでもなければ、手間を取る必要もない。 強いて言うなら精神的ストレスにはなるだろうが、それこそ第三者には関係ない話である。

三者が全く関係ないかと言われるとそうでもない

ただ、回り回って迷惑を被る可能性は否定できない。


例えばこのような事例が増えてしまえば福祉を充実せざるを得なくなるだろう。 そうなれば国民の税金から賄われる事になり、増税などにより間接的に迷惑を被る可能性もある。

また、歪んだ性格のまま育った子供が、第三者自身の子供と接触した場合、危害を加えられる可能性も否定できない。


直接的ではないものの、間接的にでも迷惑をかける可能性があるというのは、念頭に置いておかなければならないだろう。


✝️「悔い改めなさい」

だからといって、第三者が「間接的に迷惑かかるかもしれないからやめろ!」とも言いづらい。

特に当事者は、心的・精神的なストレスがかかっている状態であり、そこに更に追い打ちをかける事になり逆効果だ。


三者が助言を下すのであれば、高圧的ではなく紳士的に訴えかける必要がある。

当事者自身に悔い改めたい気持ちがあるのであれば、精神科を受診したり、寺院や神社に足を運ぶ事だろう。


🙂まとめ

よく、自分とは違う人間を晒し上げ「悪だ!クソだ!」と叩く人がいる。

確かに晒される人間はどこか欠落していて、精神科や神仏に助けを求め、休養を取るべきとは思う。

しかし、叩いている人もまた、精神的に不安定な状況であるため、同じように休養を取る事をオススメする。


🤔そんな事より、

『ヴェノム』観てきた!(画像は公式HPからスクショして持ってきました、ごめんなさい)

f:id:hanakayui:20181105110556p:plain

みんな大好き「スパイダーマン」の初期シリーズ3作目では敵役で出てたけど、今回はヒーロー。

しかもダークヒーロー。「ダークなヒーローって何だよ」って思いながら観たけど、めちゃめちゃ面白かった。

まだ公開して間もないから下手な事書けないけど、とにかくみんな観てほしい。

2018年も残り2ヶ月になりました。🗓

外は寒いけど、電車や屋内は暑い。

基本的に暑がりだから、屋内にいると汗かいてくる。

そんな季節。


🎃渋谷ハロウィンで痴漢がどうのの話

フィフィさんのこのツイートに関して、色んな意見が交わされてるけど、僕はフィフィさんに賛同派。

反対派は、ざっくり言えば「自衛のために娯楽(イベント参加や好きな服装)を無くせと言うのか」と言ってる。

いや、誰もそこまで言うてへんやん。

犯罪者の思考

ドラードらは「犯罪者においては、暴力に訴えることなく欲求不満に耐えるという能力が育ってこなかったのである」と述べている。われわれ自身の研究においても、きわめて暴力的な者は欲求不満に耐える能力が欠けていることを見出したのである。欲求不満は犯行を促進する役割を果たすが、犯行は犯罪者に自尊心と支配感を確認させるのに役立つ。

引用元:プロファイリング: 犯罪心理分析入門

自衛の種類

そもそも、自衛にも種類がある。 服装、時間帯、地域、人通りなど。

同じ服装でも時間帯や地域が異なれば状況は変わるし、逆も然り。 人通りが少ない地域であれば犯罪しやすいし、街灯が少ない地域であれば犯罪しやすいし、深夜で寝静まってれば犯罪しやすい。


上記の引用の通り、犯罪者は犯行により欲求不満を解消して自尊心や支配感を得る。

犯罪者の欲求不満の捌け口にならないよう、服装を気にかけ、白昼に行動し、街灯の多い地域を選択し、人通りの多い道を歩くのは当然である。 ここに性別は関係なく、男であれ女であれ注意は必要になる。


もちろん、全てを自衛しろとは到底思っていない。 生活もあるしお洒落も背伸びもしたいだろうから好きにすればよい。

生活レベルか、娯楽レベルか、

今回の話を例に挙げると、舞台は『渋谷ハロウィン』とし、犯罪は『痴漢』とする。

渋谷に勤務している人もいるだろうし、わざわざ電車で渋谷に来る人もいるだろう。


前者が痴漢された場合、生活圏内での話であり、普段とは異なる環境になってしまっている。 そこを通らなければ帰れないため仕方なく横切るが、その最中に痴漢された。 このケースであれば「かわいそう」というのも納得がいくだろう。


後者が痴漢された場合、娯楽のために参加し、参加者の一人となるため仮装をする。 例年の状況を見ていると、人々がごった返し、参加者層の知能も低く、治安が悪い事は分かるはずであり、そんな舞台に足を踏み入れて痴漢をされた。 このケースで「かわいそう」というのは、疑問を抱かざるを得ない。

リスクと欲求の天秤

先程も言ったが、別に「ハロウィンイベントに参加するな」とは思わない。

「参加したい」という欲求と「巻き込まれるかもしれない」というリスクを天秤にかけて、その上で欲求が勝ったから参加したのであろうし、それは好きにすればよい。

ただ、欲求が"勝った"からといって、リスクが"無くなる"わけではない。

リスクへの対応

ITの世界でもリスクについての話はあり、IPAがその話をまとめている。(リスクへの対応 - IPA)

リスクへの対応として「回避」「低減」「保有」「移転」とある。


今回のケースであれば、イベント参加しない事が「回避」、参加した上で対策を講じるのが「低減」、巻き込まれてもいいと思って参加するのが「保有」となる。 (「移転」は思いつかなかった。申し訳ない。)

別のケースであれば、引越しの際に治安の悪い地域を避けるのは「回避」になる。 生命保険に入るのは「移転」になる。 出勤しないといけないため満員電車に乗るのは「保有」になる。


このように、顕在するリスクに対してどう対応するのかが重要になってくる。


🙂まとめ

自衛した上でのそれと、自衛をしない上でのそれは話が違う。

更に言えば生活レベルなのか娯楽レベルなのかにもよって違う。

顕在し続けるリスクに対してどう向き合うのかが重要になり、対応ゼロで巻き込まれたのであれば、それは「かわいそう」とは言えない。


🤔そんな事より、

昨日のアンビリバボー。めちゃめちゃ泣いた。ちゃんと泣いた。テレビで泣いたの初めてかも。

奇跡体験!アンビリバボー:子供達の未来に奇跡を! 少女を支えた家族の絆 - フジテレビ

奇跡体験!アンビリバボー:子供達の未来に奇跡を! カーオークションで起きた奇跡 - フジテレビ

親と子が頑張る系のドキュメンタリーはあかんです。特に父親が死ぬ系はあかんです。

コスモス〜〜〜秋だね〜〜〜〜〜🍁

f:id:hanakayui:20181102105621j:plain