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

motsunav’s diary

IT技術(Java, JavaScript)と音楽(ピアノ, 編曲)のことを書きます。

クロージャの説明とActivation Objectについて

JavaScriptにおけるクロージャの説明記事を見ると、スコープチェーンや高階関数には触れているのにActivation Object(Call Object)の説明が省かれていることが多いような気がする。


「入れ子関数を呼び出すことで保持されている変数を参照することができます」

ん?呼び出し終わったのにどこに保持されてるの?
staticな領域に格納されて参照できるようになるってこと?


「別変数としてもう一つカウンタを作ってみると、それぞれ独立した値を持つカウンタが~」

えっ同じ変数参照されるんじゃないの?
staticじゃないの?


たぶん僕の理解力が低いのと、カッチカチのJava脳のため躓いてるんだと思うんですが、
ある書籍にてActivation Objectの説明を見た時にすんなり理解できたのでメモしておきます。

Activation Object

Activation Object(以下AO)というのは、"定義された変数や関数の管理を行う目的を持った、関数が呼び出される度に内部で生成されている便宜的なオブジェクト"のことで、Call Objectとも言われます。「よくわからんけど、内部で変数管理してるんでしょ」という感じだけど、重要なのは「関数が呼び出される度に生成される」という部分。


クロージャの説明で多用されるカウンタを例にとってみます。

function counter(init) {
    var num = init;

    return function() {
        return ++num;
    };
};

var c1 = counter(10);
c1(); // ->11
c1(); // ->12

var c2 = counter(100);
c2(); // ->101
c2(); // ->102

numはAOに格納されている

counter関数の呼び出しを行うと内部的に"入れ子関数内の管理を行うAO""counter関数内の管理を行うAO"が生成され、変数numは後者のAOに保持されることになります。入れ子関数内ではスコープチェーンによってnumが参照され、インクリメントされた後に返されます。

(スコープチェーンって、Global Object(グローバルスコープに定義された変数や関数を管理する便宜的なオブジェクト)とAOが生成された順に連結されたものを意味するらしいので、Activation Objectチェーンと呼んだ方がしっくりくるのでは)

AOは関数が呼び出される度に内部で生成され、参照が生きている間は破棄されない

counter関数を再度呼び出して別変数に代入してみると、それぞれが独立した挙動をすることが確認できます。
これは変数c1に代入された関数に紐付くAOと、c2に代入された関数に紐付くAOが別物であるということを意味し、かつ入れ子関数の呼び出しによってそれぞれのAOを参照できている状態にあるためです。
AOへの参照が生きている限りAOは破棄されないため、変数numは保持され続けることになります。

まとめ

JavaScriptクロージャが理解されにくいのは、クロージャをなにかデザインパターンのような特殊なものと位置づけてしまっているからで、「関数に穴をあけてActivation Objectを参照し続けるようにすることで、擬似的なプライベート空間として使うことができる。クロージャはそのための手法にすぎない」と軽く捉えてしまえば、モジュールパターンや実際の活用場面についても難なく入っていくことができるのでは、と思います。

カービィ25周年記念オーケストラコンサートに行ってきた

f:id:motsunav:20170421021827j:plain

先日、友人と「星のカービィ25周年記念オーケストラコンサート」に行ってきました。

指揮は竹本泰蔵氏。TOUR de JAPONの映像でしか見たことがなかったので、今回、新日本フィルの演奏ともに生で聴けてよかったです。


スクリーン映像とオケが脅威の一致

今回のコンサートでは巨大スクリーンが前方(オケの後ろ側)にあり、そこにゲームの映像が映し出されるという演出でした。

何がすごいって、登場シーン・終わり方・細かなヒットまで、オケとスクリーンのゲームの映像が見事に合っていること。

メドレーとして一貫性を強く感じられるし、ゲームをやったことない人でも映画を見ているようで満足度が高いような気がします。おかげでスクリーンばっか見てしまった。。


オケ編曲すごいなって

初期のカービィポップからロボボプラネットまで、全てオケ編曲での演奏でした。

テンポを変え、調を変え、弾きにくいパッセージは楽器を変え、エコロジーかつ綺麗にまとまっている印象。アマによる打ちこみの「原曲重視系全力オケ」とも違った、まさに「カービィが生オケになるとこうなるんだ」という感想が自然に出るような面白い編曲でした。


開発秘話

これは本当に面白かった。でもROMの話とかみんなわかったんだろうか・・・?

追加公演もあるらしいので内容は行ってみてのお楽しみ。


買ったもの

ちょっと前のカービィカフェで結構使ってしまったので今回はセーブして、パンフレットと記念グラスだけにしました。

f:id:motsunav:20170421021846j:plain

f:id:motsunav:20170421021848j:plain



こういうアニバーサリーイベント、どんどんやってほしいなー。
やるとしてもメジャーどころになってしまうと思うけど、合同でよいからマイナー作のもぜひやってほしいです。。


f:id:motsunav:20170421023016j:plain

和音のイメージについて考える 3度と6度の使い分け

作編曲者によって、主旋律における3度と6度の選択は特に違いが出る部分かなと思っていて、
これについても個人的なイメージのようなものがあるので、実際の進行例と併せてメモしてみます。

3度:「体験」のイメージ

dur(長調)ならば話に参加している主体のイメージ。
体験している喜びを当事者、または当事者を含む集団が伝えようとする。

moll(短調)ならば直接的に悲しみの感情を伝える主体のイメージ
体験している悲しみを当事者、または当事者を含む集団が訴えかけている。

6度:「伝聞」のイメージ

dur(長調)ならば主体は離れたところにいて、俯瞰するイメージ。
良い雰囲気に包まれている集合体を見て、その様子を伝えようとする。

moll(短調)ならばもの悲しさ、他所の不幸へ目を向けるイメージ。
悲劇的な出来事が起きた集合体を見て、その様子を語り継ごうとする。


声部分けや響きの関係で2音間の音程に条件が発生してしまうこともあるけど、使い分ける時は意識してみるのもありかなと思います。

このイメージも「ロマン派=優雅」のイメージを刷り込まれた結果なんだろうか。。

和音のイメージについて考える 3度,4度,5度

和音のイメージ

作編曲において、ここは3度でここは6度で進行させる、みたいな選択を迫られることがあります。
声部分けによって自然に決まる部分はもちろんあるんですが、僕の場合は、和音それぞれに漠然としたイメージを持っていてそれに従う形で決めることがあります。
 

「イメージに従う」とは


「イメージに従う」 = 和音とイメージを結びつけることで、感覚的に和音の配置を決める

例えば、 「○○の音色を表現したい」 とか 「○○が鳴っている雰囲気を出したい」 という時に、自分の考えている音を瞬時に正確に音に落としこむことができると、より和音を自由に扱うことができると思っています。

具体的には以下のような感じ。

・原曲で単音しか鳴っていないけど、実は1オクターブ下に4度で重ねた方が雰囲気が出る
ピアノ曲を作っているが、ここはオルガンの様な音を想起させたい
 

個人的な和音のイメージ

中央ド(C4)のあたりで一定の音程を持つ2音を鳴らし、そのイメージを言葉と図にしてみます。

3度のイメージ

f:id:motsunav:20170321021812j:plain
 ● 各所に隙間がある区切られた格子のようなイメージ
 ● 低音になるほど格子の密度は低く、高音になるほど高い
 ● やわらかい、統一性、モノラル、狭いところで完結する

4度のイメージ

f:id:motsunav:20170321021846j:plain
 ● 硬い、規則に沿ったようなイメージ、密度が濃い
 ● 小さな隙間はほぼない、ミルクレープのような細かさ

5度のイメージ

f:id:motsunav:20170321021850j:plain
 ● ステンレスの箱、一斗缶のようなイメージ
 ● 低音になるほど格子の一辺が太くなって繋ぎ目が曖昧になっていく
 ● 硬く、細い、打ち消し合って細くなってしまっている
 ● 鋭利で金属的、中身が空 (空虚五度ってこういうこと?)


もちろん人によってイメージや内容は様々で、どれが正解というものはなく、また、その日の気分によって多少違いがあると思います。和音を配置してみて、どうもしっくりこないな、、ということが多い方は上に挙げた方法を試してみると面白いかも。

HTML5プロフェッショナル認定資格 レベル1 体験記

先月中旬に「HTML5プロフェッショナル認定資格 レベル1」を受験して、合格しました。
この試験は2017年3月1日より、出題範囲改定版のVer2.0が発表されているけど、個人的な都合上2月中に取得する必要があったため今回はVer1.0 の方を受験。
 

試験概要

 ○ 試験時間 : 80分
 ○ 問題数  : 65問
 

取得理由

 ○ 年度目標の一つに挙げていた
 ○ そろそろちゃんとHTMLマークアップを勉強したいと思った
 

勉強方法

各単元ごとに僕が感じたポイントのようなものを書いてみます。
全体としては基本的に暗記作業で、手を動かす必要は特になし。(CSS3のアニメーションくらい?)
 

WEBの基礎知識

僕はIPA試験の経験があったのでここは得点源にしようと思って臨みました。
問題によっては基本情報と同程度、またはそれより若干難しい問題もいくつか出題されるという感じ。デザイナーの方などはおそらくここが一番ネックになりそうです。
(※Ver2.0ではサーバ周りの出題が減っているらしいので点数取りやすいかも)
 

CSS3

テキストの内容を網羅すれば楽に取れるはず。
余白関連(相殺、box-sizingのmarginの扱い等含む)は頻出で、計算や指定方法など形を変えて多く出題されます。CSS初学者がつまづきやすいpositionプロパティの出題(親の絶対指定と子の相対指定など)はほとんど出ないです。
 

要素

b、em、strongなど似た意味を持つタグが多くなったので、出力結果で覚えようとすると混乱します。
マークアップした内容の意味を正確にクローラーに伝える」という原則を常に思い出して、検索エンジンのためにわざわざ覚えてやってんだぞ、くらいに構えておくとよいかもしれないです。
 

レスポンシブWEBデザイン

タグに比べ比較的感覚で理解しやすいです。
でもメディアクエリとCSSプロパティを混同して覚えないこと。(font-○○系など)
この単元から記述問題も出題されやすいので綴りもしっかり覚えておく必要があります。
 

オフラインアプリケーション

manifestファイルを使ったアプリケーションキャッシュの単元。
内容も薄く、得点源となるので正答率100%を目指せます。レスポンシブWEBデザイン同様、記述問題も出題されやすいので書いて覚えましょう。適当に覚えるとHTTPメソッドなのか、manifestファイルのセクションなのかわからなくなるので注意が必要です。

 

使用した参考書

この試験の特性上、ワンパターンな暗記作業になりがちです。
何十個もタグを覚えたり、CSSの細かなプロパティを理解しなければならないので、
参考書は無味乾燥なものではなくしっかりモチベーションの保てるものを買った方が良いです。

僕はこの本を使いました。誤記は多いけど白本よりも内容が比較的充実してました。

HTML教科書 HTML5 レベル1

HTML教科書 HTML5 レベル1

 

試験を受けてみて

もともとHTML、CSSの基礎は理解しているつもりだったので、
勉強時間については 15時間 ほどで合格することができました。点数は 82点 でした。
僕の同僚が受けた時は(2年前)90分60問と聞いていたので時間が足りるか心配でしたが、模擬試験、本試験ともに20分程度余りました。
それでも最後は手汗びっしょり。次マウス使った人ごめんなさい。

あと、最後のアンケートでなぜか全角切り替えができず全部ローマ字で記述しました。
会社名が英字でよかった・・・
 

今後

レベル2の受験はまだ悩み中です。
JavaScriptが出題される資格ということで少し興味はあるんですが、なんかあんまり実用的でないという噂も。。

自己紹介

はじめまして、motsunavと申します。はてなブログ初投稿になります。
仕事(技術関連)と、趣味(音楽関連)の話を書いていきます。

仕事の方

都内で常駐している、いわゆる文系プログラマです。JavaJavaScriptを触っています。仕事上ちょこっとSwiftを読んだりもします。サーバよりはフロントが好き。最近はElectronで業務効率化アプリ作ったりしています。

趣味の方

ピアノを5歳から、趣味で作曲・編曲したりしています。学生時代に、テレビ局やローカルCMのBGM提供などをやっていました。ピアノ編曲ものはYoutubeにアップしたりしています。 

www.youtube.com

 

アウトプットの練習も兼ねてるので3日坊主にならないようにするのが目標です。
よろしくお願いします。