読者です 読者をやめる 読者になる 読者になる

A-SKが綴る国境を超えたSTORY

エンジニア兼インタラクティブデザイナーが綴る縦横無尽 - 雑記インタラクションブログ

【Note】仕事を選ぶのか、仕事に選ばれるのか

Note 仕事

f:id:eisukenakanishi:20170322201657j:plain

はじめに

僕は仕事を選びたい。できることなら、場所も自分で選びたいです。
ただ、最初からそういうことができるとは思っていないし、それができるのであればとっくにそうしています。
人生は短い、そして楽しい時間ほどあっという間に過ぎてしまう。だからこそ、急いでいる自分がいるし、そのせいでというのかそのおかげでという表現どちらが正しいのかは未だにわかってはいないが自分の人生が尚更短く感じています。

なにがライトでなにがロングなのか。What is right, and what is wrong.
これはいつも自分に問うています。人生短いなら、楽しく生きたいし、後世に何か残るモノを生み出したいし刻みたい。

そんな思いから今回は仕事を選ぶのか、仕事に選ばれるのかについて書きたいと思います。

仕事に選ばれる人

これはもう運命と言われるパターンだと思います。その仕事があなたを選ぶ。そして、あなた自信もその仕事が大好きです。
そのような運命的で、素敵な仕事に出会いたい!と人々は思っているでしょう。そして、その仕事を見つけている人もいるかもしれません。

このようなパターンの人は、天性の仕事運を持っていると感じています。
ただ、その仕事がなくなったとき、またはその仕事場がなくなったときにどうすればいいのかわからなくなってしまったり、お先真っ暗になってしまうパターンを何度か見てきています。
どちらもポジティブであり、かつネガティブであると思われます。

僕の場合天性の仕事を見つけられていないのは、優先順位であったり、自分が本当に何が好きなのかを見いだせていなかったり、発見・出会えていなからだと考えています。
そして、そう考えることによって、気が楽になったりそれを探す旅に出る理由が出来たりと、そちらもそちらでメリットはあると考えています。

仕事を選ぶ人

このようなパターンの人は偉そう、若いくせに。と言われることが多いでしょう。そして、僕もそう思われていますし、そういう発言を受けることもあります。
ただ、人間なんだし人は人なのだからそんなことを言われてへこたれるほど雑魚ではありません。

そして、このような発言であったり考えを持っている人こそ、仕事を選べず、仕事にも選ばれず、目の前にある仕事に打ちひしがれているパターンを多く見かけています。
日々起きることが精一杯位で、職場に行ってもなんだかやる気が起きず、スイッチをいちいち入れ直しては、遂行している人が多くいるような印象を受けます。

僕自身はこのパターンになりたくない!以前に、なれない。もしくはなってしまった場合自分が自分でなくなってしまうと感じています。
もちろんそういうことこそが仕事である!という考えも持っている方もいると思います。そして、それを否定する気もありません。
ただ、”僕は”そういう働き方や仕事は向いていないです、というだけのことです。

結局どっちになりたいか

最終的なところで論点を上げるとすると、自分はどちらの働き方、どちらになりたいのかという点が大きく占めていると考えられます。
自分が仕事に選ばれたいのであれば、なにか1つ好きなものを見つけて、それを伸ばしていく。
後者の仕事を選びたいのであれば、嫌な時期であったり、つらい時期もその先に想像している世界、時間を獲得するために耐える時間も増えてくると思います。

僕は後者であると考えると同時に、遅咲きなタイプなので耐える時間、耐えている時間が多いです。
そして、そのせいで自分自身が苦しみ、周りの人々に迷惑であったり、苦労をかけてきています。

どちらがRightで、どちらがWrongなのか

答えはどちらでもありません。自分が正しいと思うことこそが、正しいことであり、間違いだと思ったらそう考えればいいと思います。
ただ、1つだけ気をつけなくてはいけないことは、正しいor間違っていると自分が捉えている事項が実は国を1つ超えると違ったりします。
それどころか、山を1つ超えただけで変わったりする場合もあります。一概にどちらが、正しく間違いであるということは言えませんが、周りの意見であったり、情報収集は怠らないようにしましょう。

Right things to doは僕の場合自分を信じることだと思います。
自分さえ信じられていられれば、どんな困難にぶつかってもまっすぐに進めると信じています。
それと同じくらい自分を大切にしてくれる人の意見は取り入れるようにしています。

周りの人、大切にしてくれる人まで不幸にしては、意味がないし、何も良い方向には進みません。
それ故に、自分が何のために仕事をしているのか、そして仕事でどうしたいのかを考える必要があるなと感じています。

冒頭に述べましたとおり、人生は短いです。社会人になるまでに22年最短でかかります。(学業をすべて終えての話ですが)
そして、その最短コースで就職した場合、そこから引退まで38年。桜を38回見たら、あなたは引退です。

そう考えると人生は儚いし、後世に何か残したいならそれこそ急がなくてはいけないなと感じます。

そして、そのスタートを最速で切るためにも学業を怠ってはいけないなと感じています。
僕の場合25歳で新卒で入社しました。それまでに25年間、何か学業(国語・数学・英語・理科・社会など)をきちんと終えたか??と聞かれたら、皆無に等しいです。
そのような状況で今周りにいるのは高学歴で、頭の切れる、学業をきっちりと納めて、進化し続けている化物ばかりです。

それと比較したら、僕は子鹿のようにか弱いかもしれません。
けれども、僕には僕なりのアイデンティティがあります。そしてそのジャンルでは負ける気がしないし、負けたくもないです。
だからこそ、そこを伸ばしながらその先にある自分が選んだ仕事と場所で働きたいという願望が強くあります。

さいごに

人生は短いです。その大部分を占めるのが、社会人生活だと思います。
だからこそ、社会人生活楽しみたいし、それと同じくらい自分の時間、大切な人との時間も楽しく過ごしたいと思っています。

それを実現するためにも今は耐え時でもあるし、頑張りどきであり踏ん張りどきだと考えています。

世界を変えたいなら、遠回りするのもありだと思います。
ショートカットは実は遠回りだったり・・・急がば回れのようなことわざがあるように、急ぐなら回れ。
そのような言葉もあります。

ぜひこれは僕自身への戒めでもあり、志しておきたいことでもあります。

人生は短いけど、楽しければあっという間。けど、年数で言えば60年あるかもしれない、もしくは40年かも知れない。

今日自分が世界から消えても誰かの記憶に残るような人生を送りたいですね。

【Note】自分の環境と、相手の環境を考察する

Note 環境

f:id:eisukenakanishi:20170322201617j:plain

はじめに

環境はすごく人に影響を与えると思います。
その人が育った環境であったり、その人が暮らした気候などによって、人間は大きく変化します。
時代もそうだと思います。

そして、この世界は相手がいての自分であり、相手がいなかったら自分はどうにでもなれますし、どうでも良くなると思います。
自分が生きるために手段は選ばないと思いますし、選んでいる暇もなくなると思います。

今回は相手がいるが故の環境のことについて書きたいと思います。

環境とは??

人間または生物を取り巻く、まわりの状況。そのものと何らかの関係を持ち、影響を与えるものとして見た外界。


状況であると思います。引用にもある通り、まわりの状況というものが非常に大きく関係してきます。
状況は経済なども含まれると思いますし、自分が置かれている状況なども影響してくると思います。

状況が良ければ、自分が良いかと思えば実は違ったりする場合もありますよね。
それが関係を持った場合の影響であり、世界のことだと思います。

僕自身も思いますが、自分の状況はたいてい人の影響が大きいです。
そのせいで、相手を敬ったり、恨んだり、妬んだりすることもあると思います。けれども、それも1つの感情であり、大切なことだと思います。

結局、環境をどう使えばいいのか

環境は自分がいる現実です。
なので、それを受け入れるところから入ると思います。

環境のせいにするのは、自分が大人になった以上どうにでも出来るのだから、それを原因のルーツにしてはいけないなと思います。
環境はすべて、自分次第で変えられると思います。どうにも出来ないのは、気候であったり、気温、風土だけでしょう。

あとは時間の進む速度ですね。けれども、それは自分の感じ方次第で変えたり、変わったりすることも多くあります。

相手の環境を考えてみる

相手を見て、相手を観察して、相手がどういう人生を歩んできたのかを考察するときにまず判断材料として使われるのが、喋り方、動き方、歩き方という外的要因が大きく影響します。
そして、その外的要因が大きく自分と相容れない場合、その人を受けることは出来ないと思います、最初は。

ただ、喋り方についてはその人の内的要因です。内的要因はその人が考えていること、気持ち、感情がそのまま言葉になって出てくることが多いです。
僕は相手を見るときにまずは話を聞くように心がけてはいます。けれども、それも時と場合によって逆転することもあります。

相手を打ち負かさなくてはいけない時、相手に自分の弱みを見せられない時、そしてなにより相手に何かを伝えなくてはいけない時。
そのようなときは喋るウェイトが大きく占めます。

ただ、相手の状況、環境を考えた上で話しはしないとだめですよね。

さいごに

環境は人を変えます。そして、それに適応できるかによってまた変わってきます。
ぜひ、環境のせいにせず、自分らしく生きてみてください。

【Note】新卒が終わる1ヶ月前に思うこと

Note Design 振り返り

f:id:eisukenakanishi:20170317002629j:plain

はじめに

今月は3月。そして、来月は4月になります。
4月といえば新年度です。4月に新しい環境に身を置き始める人は多いはずです。

そんな中僕は今年度と同じ場所で働きます。つまり、特に転職もなく、現状維持で向上していこうと決めました。

石の上にも三年


という言葉はあまり好きではないですが、たまにはこの言葉を意識してもいいんではないだろうか?という気持ちになるぐらい今モチベーションが高いです。
しかし、ただ同じように働くのもあまり気が乗らない、というよりも向上出来ないことに気づいたので、もっともっと休日も活用していこうと決意いたしました。

具体的に何をするのか??2ヶ月間土日を使ってガリガリと作っていこうと決めたのは良いものの、何を作ろう??
というポイントで今止まっています。

1週間どれだけの時間を割けるか、そしてどれだけ効率的に学べるかがキーになってくるなと感じました。
最終的に何を作りたいか、何を作るかによってその時間の母数も決まってくると思うので、まずは何を作るか、というところから始めたいと思います。

何を作ろう?

考えたのはやはり、ウェブサービス。そりゃそうなります。
ただ、なんのために・・・という点でいつも僕は倒れていました。なので、今回は作りたいものを作ろうと決めました。

まずはプログラムの仕組みを知ることが大事だと感じたので、そこから始めます。

そう考え始めたら作りたいものって結構出てきます。
まずは、1ヶ月で作り上げられるものor2ヶ月という縛りを作って、始めようと思いました。

具体的に作り始めたら・・・

具体的に作り始めたら、またこちらで近況報告したいと思います。

その前に、この1年間社会人になってどう感じたかを書きたいと思います。

1年目の苦痛

1年目、本当に荒波に飲まれました。そして、良くも悪くも社会に揉まれ、メンタル的には少し強くなれました。
しんどい時期が多かった年末。心が折れそうになりながらも、支えてくださった方々がいてくれたおかげで、今の僕がいます。

そこで感じたのは余計な弱い優しさはいらない、肝心な時に出せる強い優しさが本当は必要なんだと感じました。
これは学生でも社会人でも変わらないと思います。単純に自分がどうなりたいのか、と考えた時にそのゴールに辿り着くためにはどう考えても前者の弱い優しさはいらないです。

僕は学生時代勘違い野郎でした。そんな中入社できた現在の会社にて、何をしようかも全く決まっていませんでした。
目的はあったものの、それも漠然としたもので、何も役に立たないものでした。けれども、そこで何をするかというパスが見えてきました。

エンジニアとして、成長したい。モノづくりをもっと極めたい。と思うようになり、それを目標に掲げられるようになりました。
なぜ??と問うようにもなり、皮肉ばっかり言う、と言われるかもしれませんが、なんでそれやるの?なんでこれ必要なの?と。

それと同時に自宅にあるいらないものまで、これいるの?そもそもなんで買ったの?というところから突き詰めて、断捨離にも成功しました。
おかげで、財布は潤うし、ものはきれいに片付くし、一石二鳥です。

苦痛とともにあるのが成長

凹むから突出する。という言葉を僕はいつもマインドにおいています。落ちるから上昇する。落ちたことがない人は、上を知らない。
そのレベルで僕は信じています。どん底を見た人間だけが見ることの出来る空があるということを信じているし、存在していると思っています。

苦痛がなければ、喜びも薄れると思いますし、それを1年目に感じることが出来たから、今僕はこうやって目標を持つことが出きて、前へ進めているんだなと思っています。
もし、1年目順調に行っていたら、それはそれで良かったかもしれません。2年目から給料が上がって、ボーナスも「うほー!」みたいな状況で楽しかったかもしれません。
新人成果発表で、優勝して、「さらにいけいけー!」とか思っていたかもしれません。

けれども、今の僕はそう思いません。思いたくもありません。
なぜなら、どん底を見て、まだ落ちていこうと思っているレベルです。落ちて落ちて、こんちくしょうと思えば思うほど意欲は上がるし、見返したい、悔しいという気持が芽生えます。
ここで、何も感じないでイケイケで行っていたら、今頃、それか1年後にもっと痛い目にあっていたでしょう。そして、そのときには取り返しのつかない状況になっていたと思います。

この先に期待していること

それはどん底の共有です。他人と共有するのではなく、自分自身と共有して、そして次につなげていきたいと思います。
どん底を知っているから、失敗しているから、成功する気しかしませんよ。

エンジニアとして成長して、その先に何になるか、どうなるか、なんて考えたって仕方がない。
今を必死に生きる、1つのゴールに向かって。そのゴールにたどり着いたら、次のゴールを作って。

そうやって成長していきたいなと思います。

1年目、間もなく終わります、けど、これは始まりのための終わりです。
1年目が終わって2年目もっと成長したいと思います。

2年目もどうぞ宜しくお願いします!

【Note】まだ電車で消耗してるの?

Note まだ電車で消耗してるの? Design Car

f:id:eisukenakanishi:20170301122802j:plain

はじめに

まだ電車で消耗してるの?

現代の日本では若者の車離れが進んでいますだとか、車は維持費が高い、などネガティヴな部分が多くフィーチャリングされております。
最近私は自分用に車を中古で購入したのですが、そのキッカケとなったことやその後どうなのかを検証しながら、執筆していきたいと思います。

てか、コアな部分にあるのは今の時代にまだ電車で消耗してるの?です。

”みんな”が言う車を持たない理由

大抵の人が言うことが、

  • 無くても生活出来る
  • 自転車乗るだけでも世界が変わる
  • 車の稼働率低くて無駄
  • タクシーでデートでいいじゃん!

とか言いますけど・・・そもそも最後のタクシーでデート、は腰抜けましたがそういう方もいらっしゃるんだなと、世界はまだまだ広いんだなと。
ただ、レンタカーだから、レンタカーのせいでプロポーズ延期という事象もあります。今後家族を持った時に、レンタカー!?みたいな。
維持費が高いからレンタカー!とかおっしゃりますけど、という話は後ほど致します。

車の稼働率はたったの4.2%

クルマの「売り切り型」ビジネスは終わる?クルマの稼働率たったの4.2%という現実という記事にも書いてありますが、車の稼働率って実は4.2%とかなのです。
毎日1時間トイレに篭ったら、稼働率4.2%、そして、こちらも面白いのが毎日2時間スマホ触り続けたら稼働率8.4%という、実は4.2%って結構稼働している方なのだということが伺えます。
じゃあ、稼働率100%のものってなに??と考えた時に・・・冷蔵庫ぐらいじゃないですか??というのが回答の一例だったりします。

え??じゃあ、あなたは冷蔵庫並みに稼働するものしか買わないの??という質問を投げかけたいですね。

維持費高い問題

実は、日本での維持費は欧州より安いのが事実です。ただ、アメリカよりは高いです。 日本のクルマの税金は高いと言われていますが、海外ではどうなの?という記事を見て分かる通り、意外とというより日本って維持費安いんです。
アメリカと比べたら〜云々問題は比較し続けたらキリがないのと同じです。そして、なによりアメリカは盗難も多いです。それ故に買い替えであったり、そもそもアメリカでは車がないと活動、行動が安全にできないなどという事象も実際アメリカに住んでいる友人から聞いたりしたこともあります。

日本で車を持つべき理由

まず、前提として日本の自動車登録台数は7700万台。
携帯電話の台数1億5千万台
スマホ1億台(2016年)、5700万台(2014年)という面白いデータもあります。

また、日本国内は海外と比べ自動車を維持しやすい環境でもあります。
前述したとおり、盗難であったり、強盗が少ないです。また、高速道路なども整備されているので、車の傷みも軽減されます。
これだけのメリット、環境が整っているのに・・・まだ電車で消耗するの?

労働人口の10%が自動車産業

  • 自動車メーカー
  • 部品メーカー
  • 販売
  • 整備工場

これらが日本の労働人口の10%を占めているのです。
また、部品の流通量などに関しても、日本はこれだけあるのです。
日本製の部品のクオリティの高さが伺えますね。

日本の交通事情

日本には譲り合いの精神というものが根強く存在しています。
事故は少なからず起きるものの、この譲り合いの精神が欠落した時に起きているパターンがほとんどだと最近走っていて感じます。

こちらの例をご覧になれば一発でわかると思いますが、ロシアやばい・・・というより、譲り合いの精神がないってこんなにカオスな状況を生み出すのですね。
ということが一目瞭然です。

また、日本車は安全で非常に性能が良く、故障なかなかしません。
少なくとも、ドアが外れたとか、ハンドルが取れた、路肩に故障車がたくさん止まっている、のような光景はなかなか見ませんよね。

道路事情

日本はどんなにカントリーサイドに行っても、道路が舗装されていて、凸凹な走れない道路など殆ど見かけません。
そもそも道路に穴がないというのは、欧米の人から見たら衝撃的、感激的ことだということを覚えておいてください。

もちろんそんなにしょっちゅう穴がそこらじゅうに空いているというわけではありません。
しかし、ドイツのアウトバーンなどを例に上げても、外灯の付いている高速道路、これがどれだけありがたいことかを実感できます。

高速道路の整備などもこのように体制がカッチリとしております。
安心感はドイツの無料のアウトバーンと比べても一目瞭然、とても安心して走れそうですよね。

駐車場事情

駐車場事情画像検索するとわかるのですが、これだけきれいに並んで、整備されている駐車場他国にありますでしょうか。
というぐらい、安心感があります。フランスではトイザらスの駐車場で殺傷事件があったりしました。あのトイザらスでそのようなことがあるのです。おちおち駐車場で車から乗降するときも気を抜けませんね。

ただ、日本国内の駐車場は土地の関係などもあり、比較的高いという印象です。ただ、それはやはり都心から離れればどこの国に行っても同じです。
しかしながら、安全性は非常に高いです。いたずらされたりなどということも比較的少ないかと思われます。

日本の駐車場って長居したくなりますよね。

世界有数の自動車大国

世界有数の自動車大国である日本、実は世界で見ても米国に次ぐ3位なのです。
ドイツは、

  • メルセデス・ベンツ
  • アウディ
  • フォルクスワーゲン
  • BMW

などが有名所ですね。ドイツの車に対するプライオリティは質実剛健だと感じます。
アメリカだと、

  • GM
  • フォード
  • クライスラー

などが有名です。 また、アメリカだとデカい方が偉いしかっこいい、加速が良いほうが偉いしかっこいい、という謎のプライオリティがついています。

そして、ここで我らが日本を見てみましょう。

  • トヨタ
  • 日産
  • ホンダ
  • マツダ
  • スバル

ハイコストパフォーマンス、壊れない、顧客要望の詰め合わせ
などがプライオリティとして出てきていると感じます。

外車にはない?日産GT-Rが世界に誇る3つの魅力などの記事を見てもひしひしと感じます。
ハイコストパフォーマンス、壊れない、顧客要望の詰め合わせの部分であったり、おもてなしの精神、ハードにこだわる精神。

良質格安な中古車の流通

日本だと、良質格安な中古車の流通がとても豊かです。実際僕自身も中古車を買いましたが、ほぼ新古車でそれがこの価格で買えるのか!というレベルで衝撃を受けました。
10年で10万キロの神話であったり、新車神話があったりしますよね。また、13年間同じ車に乗り続けると税率が上がり、逆に損します。

ただ、良質な車が格安で買える国であるのは間違いないと思います。

SUV、2010年式以降、5万キロ以下、修理歴なし

という条件で調べると、大量に出てきます。
それだけ豊富に中古車が流通しているということは、免許取りたての学生でも、社会人一年目でも買えないことはない!ということです。
壊れない日本車その1であったり、壊れない日本車その2を読んでもわかるように、本当になかなか壊れないですよね。相当荒いことしない限り壊れないです。

また、意外なことに輸入車も比較的日本国内だと格安だったりするのです。
参考リンクその1と、参考リンクその2を見てもわかるように、比較的安いのです。夢の外車も夢ではない。ただ、修理とかメンテナンスは少しかかりそうです。

やはり国産車を買ったほうがコストパフォーマンスは抜群ですね。

しかし、冒頭でも述べたとおり、日本国内で購入、所有する人口が少ないため、日本人が買わないから輸出しているというのが現状です。
ぜひ日本の素晴らしい技術でもある、自動車産業をこれからも守るため、そしてなにより車乗れたほうが便利ですよ。楽しいし、時間気にしなくていいですし。

さいごに

安全な日本車に乗って、安全運転をして、ぜひ素敵なドライビングライフを手に入れてください。
デートでも、家族とでも、友達とでも、ドライブ楽しんでください。

僕自身は車を買って行動範囲は広がりましたし、活動も活発になりました。
ぜひ皆さんも車にもっと興味を持つと良いと思います。

だからといって電車に乗るなとか電車はダサいと言っているのではありません。
僕は電車も大好きです。ゆらりゆらりとゆられるのも好きです。新幹線も鈍行も電車もです。

車にも車でメリットはたくさんあるので、ぜひ。

てか、そもそも車持たないでかっこつけてるのって・・・こう言われちゃうよ?

まだ電車で消耗してるの?って。

【JavaScript】MutationObserverを使って、DOMのリアルタイム監視実装

Web Code JavaScript Note

f:id:eisukenakanishi:20170228122148j:plain

はじめに

このブログにて初めてエンジニアらしい記事を書きます。
今回個人的にコードを実装していく中で、DOMをリアルタイムで監視したいという要件が出てきました。
その際にsetTimeoutなどで、一定時間ごとに繰り返し監視するなどの方法もありますが、そちらは効率が悪かったり、負荷がかかるので・・・。
その代わりに今回紹介するObserverを使ってみたいと思います。

初期段階から詰まっていたのが、言葉の壁だったりします。英語はできても、カタカナになるとわからなくなることが多かったので、いちいちそちらも調べながら実装していました。
最初にオブジェクトというものに対して「ん??」となっておりました。
モノという意味であることはわかっていたのですが、モノ・・・ん??という状況でした。 実際にサンプルを見たらわかりやすくなってきました。

物理的あるいは抽象的な実体を、属性(データ)と操作(メソッド)の集合としてモデル化し、コンピュータ上に再現したもの。

こちらの文章を読んで、なるほど!となりました。
データは多分わかると思います、メソッドも下記で記述しておりますが操作するための命令文とでも思っておけばいいと思います。
それらをモデル化したモノがオブジェクト、という認識でいます。

コンストラクタ

コンストラクタとは、クラスからオブジェクトを作成した際に、自動的に実行されるメソッドのことで、メンバ変数の初期化などの主に行います。

MutationObserverというこちらのドキュメントが一番わかりやすいと思います。
ただ、残念ながら僕はここで何度かずっぷりとハマったので、そちらも併せて解説していきたいと思います。

まず冒頭に記載されている、

MutationObserver(
    function callback
);


こちらが基本的なObserverを生成するものになります。
上記がDOMの変更を検知するObserverを生成するものになります。

DOM の変更時に呼び出される関数です。この関数は第 1 引数に MutationRecord の配列を、第 2 引数に MutationObserver インスタンス自身を受け取ります。


しかし、これだけ見てもよくわからないので、細かく見ていきましょう。

インスタンスメソッド

インスタンスメソッドという言葉自体よくわからなかったのですが、いわゆるインスタンス(クラスを元にした実際の値としてのデータ)に対してメソッド(操作)を行うための型なのかな、と認識しました。
インスタンスとクラスについて、なかなか良くわからなかった自分がいたのですが、クラスが[名前、身長、体重]とある場合、インスタンスは[A-SK、178cm、79kg]のように捉えるとわかりやすいと思います。

今回のObserverというコンストラクタ(自動的に実行されるメソッド)に対しての命令文として、下記のものがあります。

observe(Node target, MutationObserverInit options);

disconnect();

takeRecords();

上記がMutationObserverの中に定義されているインスタンスメソッドと呼ばれるものです。

observe();

DOMの変更と検知したいNode(ノードとは、DOMでアクセス・変更できるブロック単位)を指定して、MutationObserverインスタンスと紐付けます。
なので、Node(HTML全文がNodeで作られています)の一部が変更された際に、この処理を走らせたい!という場合にこのMutationObserverが役に立つということですね。

observe(
  Node target,
  MutationObserverInit options
  );


ここで記述しているtargetという引数はDOMの変更を検知したいNodeを定義して入れてあげたりします。
optionsの部分には、オプションを指定して上げる必要があります。その中でも必須で入れなければいけないものがいくつかあります。

childList / attributes / characterDataに対してtrueを指定してあげる必要があります。
実際に記述すると、こんな感じです。

var config = { attributes: true, childList: true, characterData: true };


変数configに対して、上記のoptions群をtrueで指定してあげます。

disconnect();

このインスタンスメソッドは、インスタンス対象ノードから解除します。なので、基本的にずっと監視させたい場合これをtrueにしてしまうと、どっかで走らなくなります。
僕は上記のリンクのドキュメント通りに進めていたら、ここで詰まりました。つまり走らなくなったので、「なぜだ!?」というところから、このインスタンスメソッドをtrueにしているからだ!ということに気づく・・・。

対処方法としては、同じインスタンスでもう一度observe();メソッドを呼び出してあげないと、ObserverのCallback関数は実行されないので、ちょっと最初にやるにはややこしかったので、以下で紹介するサンプルコードのdisconnect();の一文は削除しました。

ただ、どこかで処理を止めたい時、または一度だけ走らせたいときなどはこれを指定してあげる必要があります。

takeRecords();

これはCallback関数へ渡されるMutationRecordのキューを空っぽにして、キューに入っていた値を返してくれます。

僕はあまり使わなかったですね。基本的な実装をする場合は使わないのかなーというイメージです。

使用例

では、実際にサンプルを見てみましょう。

// 対象とするノードを取得
const target = document.getElementById('some-id');

// オブザーバインスタンスを作成
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(mutation.type);
    });    
});

// オブザーバの設定
const config = { attributes: true, childList: true, characterData: true };

// 対象ノードとオブザーバの設定を渡す
observer.observe(target, config);

// 後ほど、監視を中止
observer.disconnect();


こちらのサンプルはES6に基づいて構築されています。ES6でなければ、

// 監視して変更があった場合に実行される
var hoge = function() {
//変更があった際に実行されるコード
};
// fugaの中身を監視
var fuga = document.querySelector('監視したいパーツを入れる');
// 必須パラメーター
var config = { attributes: true, childList: true, characterData: true };
// observerインスタンスを生成
var observers = new MutationObserver(home);
// fugaの処理とoptionsを渡す
observers.observe(fuga, config);


上記のように実装すると、動くと思われます。
ちなみに、この状況だとdisconnect();がないので、監視されているfugaが変わるたびに処理が走ります。

まとめ

プログラミングとか訳わからなーい!状況がしばらく続いていましたが、だいぶわかってきたので、一度ドキュメント化しました。
しかしながら、一度わかって実装すると、使い回しが出来る部分もたくさん出てくるので、ストックするといいですね。

以上になります。
間違っている、こここうした方がもっといいよ!とあったら、コメントお願い致します。

この書籍はかなり刺激になります。

パーフェクトJavaScript (PERFECT SERIES 4)

パーフェクトJavaScript (PERFECT SERIES 4)