福岡は今日も雨

福岡のひよっこ学生プログラマのブログ。web系の言語を勉強中です。

GMOペパボのPeparty福岡が最高だった話

 

pepabo.connpass.com

 

GMOペパボのPepartyに参加してきました。

前回、はてなペパボインフラ技術大会に参加した時にペパボのエンジニアの方と話をして、それから「よかったらまた」とのことだったので行ってきました。

内容としては、勉強会~というよりもペパボの話を楽しく質問に答えたり、って感じでminneの作家さんや、デザイナー、エンジニア、などなど色んな方が来てました。

 

その後懇親会という形で、ペパボの社員の方と主に話しました。特にminneのプリンシパルエンジニアの三宅さんには緊張してしまって割と変な質問もたくさんしてしまったな、と思ったのですが全部丁寧に答えていただきました、本当にありがたいです。最近、勉強することが目標、みたいになってるんじゃないか、と思ってたりしていたところなのでそこを喝を入れていただいたのは少し耳が痛いですが、その通りだと思っています。頑張ってつくろうと思います。

 

IT系の勉強会は、なんだか常連の人たちが輪を作ってしまって新規で中々声をかけづらい雰囲気があったのですが(学生歓迎、とは言うものの社会人の中に中々入りこみづらい...)、僕がぼっちでいる時もすぐにペパボの社員の方が話しかけてくれて居心地はすごく良かったです。バンドの話も出来ましたし、Number GirlSupercarで盛り上がれて嬉しかったです。

 

また参加したいなと思いました。

その時はまた、今よりも一段と大きくなって戻って来れるよう、精進していこうと思います。

 

 

 

イベントリスナについて(2)【JavaScript】

(1)に続き。

さっそく具体的なイベントリスナの使用例について見ていく。

eventListener

 

イベントリスナを使う上で注意しなければならないのは、クロスブラウザを意識してプログラムをくんでいかなくてはならないということである。IEと、IE以外のブラウザでメソッドが異なる。上の例では、addListener関数の定義部分(上の方)がそれに該当する。

  1. 要素ノード.attachEvent(イベント名,イベントハンドラ)
  2. 要素ノード.addEventListener(イベント名,イベントハンドラ,イベントの伝達方向)

IEの時は1、それ以外の時は2である。ブラウザに応じて対応させるために、if文を使って分岐させていく。 ここで注意点として、attachEventの時はonが付いた名前、addEventListenerの時はonがない名前とする。そして、addEventListenerはfalseで固定である。

 

ユーザ定義の関数addListener関数をつかって、listen関数とload,clickを結びつけるのである。

 

今回、僕が良いなと思ったのは(1)で言ったようなイベントリスナ自体の性質もあるのだが、他にもあって、それは<input>タグにイベントハンドラが直接入っていないということである。分離されていて管理もしやすいと感じた。ちなみに、document.getElementByIdは、該当の要素がロードされていなければ使えないので、イベントリスナを使わない場合は該当の要素の後にスクリプトを書かなくてはならないが、今回の例はイベントリスナによってそれを回避している。

 

 

 

イベントリスナについて(1)【JavaScript】

自分用のメモとして勉強したことを残していくことにしました。

初心者なのでまだまだ至らぬ点はありますが指摘していただければと思います。

 

イベントリスナとイベントハンドラの問題点

 

イベントリスナを話すうえで、まずはイベントハンドラについて知っておかなくてはならない。イベントハンドラとは、マウス操作を検出してそれに応じてイベント処理を行う命令のことであり、クライアントサイドJSではよくこの手法が使われてきた。しかし、イベントハンドラには問題点が二つあった。

  1. 同一の要素に複数の同じイベントハンドラをつけることはできない
  2. イベントハンドラを消すことはできない

どういうこと?というと

JS_listener

これで帰ってくるのは上の関数のsample1のみである。二つ目のイベントハンドラは動作しないようになっている。これくらい単純なウェブサイトならば簡単な話なのであるが、複雑になればなるほど、同一イベントがひとつのDOM要素につき一つというのは問題になってくる。そこでこれを解決してくれるのがイベントリスナである。

 

続く。(2)へ