JavaScript

こんにちは、しきゆらです。

今回は、DOMの変化により発火するイベントを知ったので、使い方をメモしておきます。

 

やりたいこと

DOMの数を数えて、数を表示したい。

というのも、最近のライブラリとかならば出来るんだろうけど素のJSでなんとかできないのか、と思って調べてみるとうっかりありました。

その名も、Mutation events!!

Mutation events – ウェブデベロッパーガイド | MDN

しかし、どうもこれは推奨されておらず代わりに使うものを教えてくれていますね。

 

MutationObserver

今回の本題。

これをつかうと、DOMの変更を検知して特定の関数を実行する事ができます。

といっても、基本的なものはMDNさんに使い方があるのでそっちもどうぞ。

MutationObserver – Web API インターフェイス | MDN

 

使い方

基本的には、newでインスタンスを作るだけですね。

// 監視するObserverを作る
let mutation = new MutationObserver(function(){
  console.log("dom change!!");
});
// 監視対象
let target = document.getElementById("hoge");
// 監視するものを指定
let config = {
  children: true,
  subtree: true,
};

// 監視開始
mutation.observer(target, config);

これにより、監視対象に変化があればnewした時に渡したイベントを実行してくれます。

 

変化の監視というのは、属性・文言・子要素等指定ができます。

必要なところを監視できますよ。

[table id=9 /]

 

基本的に、これらを連想配列で渡してあげればいけます。

childList、attribute、characterDataにはtrue/falseを指定するだけ。

簡単ですね。

 

これで、監視対象に変化があれば特定の関数を実行できるようになりました。

Reactさんの真似事が出来るかもしれませんね。

 

今回は、ここまで。

おわり

プログラミング,日記

こんにちは、しきゆらです。

 

先日、とある用事があり北の大地から東京へ遠征に行っていました。

ただ行くだけではもったいないと思い、日程の中で参加できそうな勉強会がないかと探していたら、

ちょうど興味があったけど、あまり触れていないElixirに関する勉強会「tokyo.ex #8」と言うものが開催されていたので参加してきました。

ちなみに、Elixirに関する私の知識とは、このブログに書いてある事程度なので、どんなレベルかはお分かりいただけるかと思います・・・。

 

しかし、参加するのは勉強会。

勉強できればいいな、という軽い気持ちで参加してきました。

スライド等は上記リンクやハッシュタグから見れるため、各セッションタイトルとそれぞれのメモを少しまとめておきます。

 

 

Hot code upgrade in ACCESS

Erlangの仕組みであるhot code upgradeを仕事で使ってみました、というもの。

個人的にはErlangやElixirと他の言語との大きな違いであり、積極的に利用されているのかと思いきや

偉い人曰く、「使わない方が良い」機能なんだとか。

しかし、サーバをいちいち止めずに入れ替えができることや、何度もデプロイする時のコスト等を考えると使えたほうが良いかも。

そこで実際にコードを見たり、書いたりしながら仕組みを解読してみました、という話でした。

 

正直、内部構造やコードをろくに読めない状態でしたが

わかりやすい解説とデモのお陰で、使わない方がいいという理由、使うための工夫を知ることができました。

わからない言葉やコードが出ていても、デモと説明で雰囲気をつかめました。

 

 

AlchemistのためのCrystal

ElixirはErlangの文法にRubyっぽいアクセントを加えた言語です。

というような導入から入るようなサイトがいくつかある。

Crystalも同じようにRubyっぽい構文で書けて、型があって、速い言語らしいです。

 

・・・名前は知っていましたが、トップページにあるクリスタルの画像をギュン!ってやって遊んだ記憶しかない。

まさかElixirの勉強会でCrystalの話が聞けるとは思いませんでした。

 

内容としては、Elixirの得意不得意な部分とCrystalのそれはお互いに補えるはず。

そして、これらの言語を触れている人は、たいていRubyもかけるだろうし学習コスト低いかも。

だからどうでしょうか、という感じ。

CrystalがいかにRubyっぽく振る舞うように工夫しているのか、まだ正式リリース前なのでバグを踏むことがあって楽しいらしいです。

 

 

ここまでが、メインとなる2つのセッションでした。

これからはLTで数名の方たちが話をしてくれました。

Elixirのテストフレームワークっぽいものを作ってみた話

https://hex.pm/packages/struct_assert

Elixirの場合「=」は代入ではなくパターンマッチ。

その為書き方が少し面倒になってしまう。

もう少しなんとかならないかな、と思い勉強がてら作ってみました、というお話。

 

この中で少し出ていた、CPAN Testerの話が印象に残っています。

# 本編じゃないん・・・?

これは、Perlの世界のお話で、Perlの各バージョンでライブラリが動くのかどうかを有志の人たちがテストして共有してくれるシステムのようです。

ライブラリを使おうとしてうまくいかない場合、Perlが悪いのか・自分の環境が悪いのかわからないことが多い。

そのためにこういう仕組みができたんだそうな。

Perlから影響を受けた言語はあるが、この仕組は引き継がれていないようで、もっと広まってほしいそうです。

# 実際、何度か困ったことがありました。ほしいですね。

 

Elixir(erlangVM)のメトリクスを監視したお話

この話は、内部構造を監視したい。

そこで便利なライブラリがありますよ、というお話。

 

正直、この辺のお話は全くわからず、スライドに出てきた画像をみて「へぇ」と思った程度しかありませんでした。

知識がないと、面白い話も面白くならないのは悲しいです・・・。

 

このお話の中でPromQLと言うものが出てきました。

フローチャート的なサムシングを書くための言語なのでしょうか。

柔軟なグラフを書くことが出来るので、おすすめ、とのこと。

 

ライブラリ作って♡

外部に公開するライブラリと、自分たちが作るためのライブラリ。

それぞれをどう作るか、というお話。

 

実際にライブラリを作ろうと思ったら、おそらくみんなが使えるような一般的な機能を持つものを作成し公開すべきだろう。

そして、公開したライブラリを自分たちてまとめたり手を加えたりするのがいい流れなのではないか、というお話でした。

 

あと、Elixirはまだまだライブラリが少なく、みんなで作って盛り上げようね、というメッセージで締めくくられました。

ヾ(〃l _ l)ノ゙

 

Elixirを使った繊細なチャットを作ってみる

Elixirさんは安定したサービスを作る事ができる。

そして、アンチパターンというかやらないほうが良いこと・やってはいけないことが存在する。

でも、それらは実際にやってしまった場合どうなるんだろう・・・?

ということで、アンチパターンを盛り込んだアプリを作ってみました、というお話。

 

この発表は、面白い発想だな、と思いました。

やってはいけないことをあえてやってみることで得られることがある、たしかにそうですね。

このアプリ、Githubで公開されているので自分で触ってみることもできます。

 

まさに、Elixirでアプリ開発を行う際の避難訓練や〜(彦麻呂風)

とか思いながら聞いていました。

 

自作ライブラリの紹介

Elixir書き始めて、色々ライブラリ作っていました。

Elixirでお仕事したい、いいねこれ。というお話。

 

私も幾つか言語は触ってきましたが、ライブラリって雲の上の人たちが作っているイメージでしたが

自分が便利と思った機能だったり書き方だったりを共有するようなイメージなんでしょうか。

Github等のお陰でこのような共有が簡単になったので、いろんなコードを読めるようになった、と言うのはよく聞くお話です。

自分の書き方や作り方を共有して意見をもらったり、賛同してもらったりしながら開発を進めていく、と言うのは面白そうだな、と思った次第でした。

 

 

発表はここまで。

この後、プレゼント争奪じゃんけん大会が開催され勉強会は終了しました。

惜しくも、得られるものはありませんでした・・・、残念。

 

しかし、やはり勉強会に来る人や発表者の方たちはモチベーションが高いというか、楽しんでいるような印象を受けました。

あのような場でワイワイ学び合うと言うのはとても楽しいですね。

自分のやる気ももらえたような、そんな勉強会でした。

それと、

ということにつきますね。

こういうイベントが多いのはやはり東京、いい環境だなと思いました。

また参加したいですね。

 

今回は、単なる感想でした。

地元でもないのかしら、調べてみましょう。

おわり

フリーソフト

こんにちは、しきゆらです。

タイトル通り、VivaldiさんにSync機能が実装されました。

 

以前、この機能に関するライブ配信もされていましたしね。

いつ来るのかと思ってましたが、v1.14から本実装されるようですね。

現在、絶賛使ってバグ・改善などの声を求めているようなのでぜひフォーラムへ投稿してみてくださいな。

フォーラムはVivaldiさんの公式ページのトップに有るリンクから飛べますよ。

Vivaldiさんのフォーラムトップ

 

英語だけでなく、日本語でやり取りされているところもあるので

そのへんへ投稿すれば良いのではないかと思います。

 

 

Sync機能を使うには?

この機能を使うためには、Vivaldiコミュニティーのアカウントを作る必要があります。

Vivaldi Community – Register

作ると言っても、ユーザ名・メールアドレスなどを登録するだけ。

数分でおわります。

 

アカウント作成後、Vivaldiさんの設定ページに新しく追加された「同期」の中に

ユーザ名、パスワードを入力してログインすればOKです。

 

実際に使ってみて

私はWindows、MacともにVivaldiを使っています。

両方でブックマークをやり取りするために一旦エクスポートし、もう片方でインポートする、という方法で環境を合わせていました。

しかし、Sync機能によりお互いのブックマークが同期されるため煩わしいことをしなくても良くなりました。

きちんとニックネームも引き継げるようで、クイックコマンドもはかどります。

 

強いていてば、テーマも共有してほしいですね。

両方で幾つかのテーマを作っているわけですが、片方の色をもう片方で書き直すのが面倒でしょうがない。

片方で作ったテーマを、もう一方でも適応したい!

Vivaldiさん、なんとかしてださい。

 

 

さて、VivaldiさんにはSyncがないから使いません、ということを言っていた人がいるかもしれません。

しかし、Vivaldiさんは凄まじい速度で進化しています。

その流れに乗りませんか?

 

今回は、内容がないお話でした。

おわり

Ruby,環境構築

こんにちは、しきゆらです。

今回は、Web開発中によく行うであろう、ローカルサーバに編集したコードをコピーする部分を自動化してみます。

 

おそらく、すべてGuardさんだけで行けるかもしれませんがRakeも使ってみたいので療法を使っていきます。

Ruby,プログラミング

こんにちは、しきゆらです。

タイトル通り、Railsさんを少し触ってみたメモを残しておきます。

 

はじめまして、Railsさん。

これまで、Rubyを約5年ほど触っていますが、Railsさんとは触れ合ってきませんでした。

しかし、やはりRubyを書いているものとしてRailsくらいは触っておきたい。

ということで、インストールからしていきます。

 

なお、Macで行っていきますよ。

Electron,HTML/CSS,JavaScript,プログラミング

こんにちは、しきゆらです。

今回は、ElectronでHello Worldを作って遊びたいと思います。

 

前回Electronのことを書いてからすでに半年以上経っていますね。

どうしても、環境構築するだけで満足してしまう部分があります・・・。

環境構築が一番楽しいと思うのですがどうでしょうか。

 

さて、では作っていきます。

Mac,Ruby,プログラミング

こんにちは、しきゆらです。

今回はタスクランナーの一つであるGuardと言うものを触ってみます。

 

最近、gulpというものを知りました。

というか、名前は聞いたことがあるけど何をするためのものか知りませんでした。

 

特定のタイミングで何らかの処理をさせるタスクランナーと言うものに触れるきっかけとなりました。

インターンシップ先ではJenkinsと言うものを使っているようでしたが、実際にそれを見たわけではないのでよくわかりません。

 

その点、gulpというものはJSでタスクを設定することが出来るということで便利そうだな、という感じ。

でも、どうせならRubyさんで書けるものはないのかと思い調べてみたら見つけました。

Guardと言うものです。

どうも最近は、上記のgulpがメインとなっているようですが、今回はGuardを触っていきます。

 

以下のサイトを参考に、触っていきます。

参考
rubyのGuardとRSpecをRailsを使わない環境でつかう | 大石制作ブログ
Ruby | Guard gem を利用してファイルの変更を検出し、任意のタスクを自動実行する – Qiita

 

Mac,Ruby,プログラミング

こんにちは、しきゆらです。

今回は、Webブラウザの自動テストツールであるSeleniumのセットアップとかんたんな使い方をメモしておきます。

 

タイトル通り、Rubyで操作します。

他言語での使い方は、以下の本がわかりやすいかと思います。

Selenium実践入門 ―― 自動化による継続的なブラウザテスト (WEB+DB PRESS plus)

 

JavaScript,プログラミング

こんにちは、しきゆらです。

今回は、よくお世話になるであろうsetIntervalの関数に引数を渡す方法を知ったのでメモしておきます。

 

 

といっても、リファレンスをよく読めば書いてありました。

WindowOrWorkerGlobalScope.setTimeout() – MDN

https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout

 

MDNさんによると、setIntervalの引数は「関数オブジェクト」、「遅延させる時間」の2つだけではないようです。

ver timeoutID = scope.setTimeout(function[, delay, param1, param2,...]);

1つめのものですね。

3つ目以降の引数には、関数オブジェクトの引数として渡すものを書けばいいようです。

function hoge(arg1, arg2){
  console.log(arg1, arg2);
}

setInterval(hoge, delay, "hoge", "fuga");

上記のようにすれば、delayミリ秒ごとにconsoleにはhoge, fugaの2つが表示されるはずです。

 

これは知りませんでした。

パっと見ただけでは何をやっているのかわかりませんけど、必要な時はこれで乗り切れそうですね。

 

わかりやすさで言えば、無名関数を作って上げたほうが読みやすいかもしれません。

function hoge(args1){
    console.log(args1);
}

setInterval(function(){
    hoge("hoge");
}, 1000);

 

 

どちらにしても、こうすればsetIntervalの関数に引数を渡せるようです。

知らないことがいっぱいありますね。

 

今回はこのへんで。

おわり。

SQL,プログラミング

こんにちは、しきゆらです。

今回は、タイトルに有るようにSQLのJOINに対する個人的な誤解が解けたのでそれをメモしておきます。

前半は事の経緯なので、無視しても大丈夫です。

 

そして、先人である巨人のURLはこちら。

SELECT構文:JOINを使ってテーブルを結合する – SMART

http://rfs.jp/sb/sql/s03/03_3.html#JOIN

また、SQLだけ見せろ!という方向け

今回のSQLサンプル

http://sqlfiddle.com/#!9/0a510a/2/0

 

ことのはじめ

そもそも、私はこれまでSQLでテーブルを作るとき、それぞれのテーブルをどう関連付けて取得すればいいのかわからず1つのテーブルにすべてのデータをぶち込んでいました。

いわゆる非正規の状態。

 

しかし、それではいかん、ということで表を分けるようにしました。

(なお、この段階ではまだJOINと言うものを知りません。)

必要なデータの取得は、Ruby等のプログラムで各テーブルからデータを取得し、結合・ソート等をしていました。

 

しかし、表を結合して必要なデータを表現するためにJOINを用いればいいということを(最近)知り、

何でもかんでもJOINしていたわけです。

 

そんななか、本日ぶつかった壁のお話をしましょう。

 

ほんだい

何でもかんでもテーブルをJOINしてデータを取得していた私。

ぶつかった壁というのは、「JOINすると特定のデータが取得できない」という問題です。

 

例えば、以下のような何かのメモを表すデータベースを考えます。

メモを表現するitemテーブル

[table id=5 /]

 

メモのタグを表現するtagテーブル

[table id=6 /]

 

メモとタグを紐付けるtag_mapテーブル

[table id=7 /]

 

これらをもとに、考えてみます。

 

やりたいこと

3つの表をまとめて、メモの内容とタグ名を一覧で取得したい。

もしタグが付いていなくても、ないことも知りたい。

 

解決案

こんな感じのSQLを書いてみる。

SELECT content, GROUP_CONCAT(tag.name separator ',') as tags FROM item JOIN (tag JOIN tag_map USING(tag_id)) USING(item_id) GROUP BY item_id;

なお、GROUP_CONCATは引数のものをセパレータで区切って結合してくれる関数です。

12.19.1 GROUP BY (集約) 関数 – MySQLリファレンス

https://dev.mysql.com/doc/refman/5.6/ja/group-by-functions.html#function_group-concat

こうすると、「content」と「tags」をいっぺんに取ってこれます。

やったね!!

 

もんだい

全てにタグが設定されていれば問題なく取得できます。

しかし、新しく以下のようなデータが入ってくると話は変わってきます。

[table id=8 /]

 

上記レコートが追加された状態で同じようにSQLを実行します。

 

変化がない!?Why!?!?!?!!?!?

 

かいせつ

単なるJOINや「from hoge, fuga, …」としてテーブルを結合するものを内部結合(INNER JOIN)と言います。

これは、条件にあったもののみを列挙する結合。

今回であれば、「item_idとtag_idが紐づけされているもの」が条件となります。

 

しかし、itemテーブルに追加したものはまだタグと紐づけされていません。

そうなると、内部結合では条件にマッチしていないため取得されません。

 

 

 

解決方法

この問題を解決するには、外部結合(OUTER JOIN)を使います。

これは、条件にあっていないものも含めて取得するもの。

 

上記SQLを外部結合に書き換えて、実行してみます。

SELECT content, GROUP_CONCAT(tag.name separator ',') as tags FROM item LEFT OUTER JOIN (tag JOIN tag_map USING(tag_id)) USING(item_id) GROUP BY item_id

SQL的には、「JOIN」の前に「LEFT OUTER」をつけただけ。

これだけで外部結合になります。

※LEFT OUTER JOINの他に、RIGHT OUTER JOINと言うものもあるらしいです。

つなげる方向が違うようですが、基本的にはどっちか片方に合わせておけば問題ないかと思います。

LEFTとRIGHTで動作上の違いとか取得時の違いとかがあれば教えてください・・・

 

結果は以下の通り。

きちんと、取得できていることがわかります。

タグがあるものは、タグ名も一緒に取得し、タグがないものはnullとして取得しています。

 

 

参考 SELECT構文:JOINを使ってテーブルを結合する – SMART

http://rfs.jp/sb/sql/s03/03_3.html#JOIN

 

今回のSQLサンプル

http://sqlfiddle.com/#!9/0a510a/2/0

 

まとめ

今回はSQLの内部結合と外部結合の違いを知りました。

条件に合うものだけが必要なのか、そうでないのかによって使い分ける必要が有ることを知りました。

 

まだまだSQLとは仲良くなれていないので、もっとSQLと戯れていきたいです。

 

今回はこのへんで。

おわり