Re:Start

いまはディレクターやってます

そして、ラプンツェルを暗誦する日々目指して・・・

英語のカンファレンスを難なく聞き取れるようになりたいんだぜ! と思って始めた英語のお勉強ですが、結果として良くなったのかわかりません・・・。

もちろん、ね。一般的な日常英語だと別に聞き取れますよ。 聞き続ける体力を養ったほうがいいんじゃないかな?と思うくらいにね。

ただ、ですよ。最近、あるリスニング用のアプリを使い始めたら、自分がいかに内容を適当に聞き取っていたかがわかったし、いわゆるアメリカ英語、イギリス英語、オーストラリア系英語、と独特の3タイプもなんとなく分かったので、こりゃいかんなと、もう何度目かわからんぐらいの英語頑張ろう計画がスタートしたのでした。

ListenUp - The English Challenge

ListenUp - The English Challenge

その間には、奇跡の音を聞く一ヶ月があったり、魔法の英語

魔法の英語 耳づくり (J新書) 機関銃英語が聴き取れる!-リスニングの鍵はシラブルとビート- 8000ヘルツ英語聴覚セラピー 奇跡の音 Ver.2

いろいろ試したなぁ。 機関銃英語は、英語の聞き方が変わった気がするので、個人的には重要な本。 奇跡の音は、確かに耳の革命は起きるんだけど、その、日本人が聞き取りにくい音を聞き取れるようになったところで、英会話自体に影響が出るわけでもないし、逆に本編と関係ないところに気が取られるようになったので、やめた。ちなみに、実際にまじめに聞いたのは1で、海外旅行編。2は割と日常生活に迫って、やや長文になるのは嬉しい。嬉しいけども・・・

現在は、英語耳と、ラプンツェル(映画)を字幕で真似まくるけして人に見られては行けない修行の旅に出ました。何があれって、ミュージカルテイストだから、けっこうな確率で歌ってるという話だ!だ!でも、この他に家にある映画DVDは、カンフーパンダしかないしなw hulu見まくるのもCP的にはありだけどw

Liftやstudyplusで記録しつつがんばるぞ!

塔の上のラプンツェル DVD+ブルーレイセット [Blu-ray]

塔の上のラプンツェル DVD+ブルーレイセット [Blu-ray]

書評『発想をお仕事にする人の発想術―活躍する70年代生まれの11人のクリエーターたち』

各界で活躍する人のインタビュー集。 こういう本は、新しい何かを求めるというよりも、そのヒントになればいいな!と思って割とゆるい気持ちで読むのがいいと思いますです。

書いてあることがそのまま自分にも合うかと言えば、んなわけないですからね。12人目になれるように自分なりの方法を考えるのがいいんじゃないでしょかね。(適当に書いたけどこれはいいかも!)

北京のCCTVなど作った建築家の重松象平さん

自分がどうしたいか、ということをシュミレーションすること。自分の主観的な立ち位置を常に持つということ。なんでもかんでも、漠然とで良いんです。思うがままに、好きだと思うものや興味をそそられるものを意識する。そして何でこれが好きなんだろう、なんでこうしたいと思うんだろうって自己表現の奥底にある理由みたいなものを気軽に追ってみる。そうすると発想力も決断力も上がるような気がします。自分の感性を形成しているバッググラウンドを理解しようとすることでしょうか。でも、気をつけなくちゃいけないのは、ある固定したイデオロギーに則ってそうするわけじゃなくて、ケース・バイ・ケースだということです。ある意味信念もビジョンも無いくらい自分をオープンな状態にすることによって、逆に各状況が持っている特殊性に目をつける感性みたいなものが研ぎ澄まされるからです。

主に、仕事で人と話している時に、口で言っていることと実際に思っているんだろうなってことの乖離を見たり、その間にはきっとこれがあるんだろうということで、「つまり○○したいんですよね?」とまとめてしまう癖があります。目の前の何か事象をとらえると、いい方向に向くとは限らないので、否定する訳でもなく、正しい方向を見せた上で次の方針を考える作業ともいえるかもしれません。

そういった意味合いでも、深堀りして、なんでこう考えるんだろー?って追求していくことが自分の個性であったり、唯一感を演出するための道筋なんじゃないかなと思う訳です。

ちなみにやりすぎると『Think Simple』の逆行でやたらと意味を考えてしまって、真実からずれることもあるのでほどほどがいいと思います。最近は、上司になんでこんなにスキルや人格を求めてしまうんだろう?と考えたら、ビジネス書の読み過ぎと最低経験年数分はそれができる!と言えるようになりたい!と思う私の信念?を自然と相手に照らして考えてしまうのかもな、と思い当たりました。ああ、ほんと辛い。(以下、自粛)

落語家の柳家花縁さん

人からいわれたことですけど、思ったこと、いったこと、やったこと、この3つがひとつになったら、次のステージに上がれるっていうんですよ。それにはまず、自分の思いに注目することです。自分がほんとに幸せなのか、楽しいのか、ワクワクしているのか、つまらないなら、何をつまらないと思っているのか、腹立たしいのは何を怒っているのか、原因を探る。自分の思っていることを内観する、ということですね。

あら、特に意識してなかったんですが、重松さんと似た方向ですね。

attic の 五味美貴子さん

http://www.atticroom.jp/arm/

この人のカフェ、一度は行ってみたいなーと思ってたら、この前行ってたことが判明しましたw ちなみに系列店は店名が全てaで始まるのは五十音順対応なんでしょうねぇ。昔、結婚式場が某結婚情報誌が五十音順だったこともあり、こぞってaで始まる会場にしたという話がありますが、それになぞらえているのかもしれませんね。

f:id:musicala:20130618135540j:plain

いわゆるオシャレかふぇ飯なわけですが、味付けも優しくてちょうど良かったです。

f:id:musicala:20130618142009j:plain

店内もオシャレなので、ランチに行くにはいい気分転換ですね。 ただ、このお店は2階にあるんですが、立て付けが甘いのか、結構揺れる・・・地震起きたらここにはいたくないなぁ。

この本だよ

はてなブログ1本にします。

いろいろと内容によってブログを分けてたのですが、WordPressで書くコストを考えるととても面倒くさいーので、今後は全てココに書こうと思います、まる。

わたし、以前に「読書や音楽、映画は教養だから趣味とは言わない」と書いた人にあやかって、本読んでますみたいな話はさしてしてこなかったわけですが、普通の人?に比べたら確実に読んでる方なので、趣味を読書と言っていいのではないか、と方向転換しました。今年は半年で80冊読みました。

f:id:musicala:20130713103035p:plain

http://booklog.jp/users/cheria/chart

どうも、読書が趣味です。

読書メーターを使ってましたが、もうブクログ1本です。前も書いた気がしますが、アプリの性能が良くなって登録しやすくなったのと、ウェブで管理するのが楽だからです。「ずっと使ってた」はこういうレコードアプリにとっては離れられない要因の一つになるので、たいがい、アウトプット機能なんてものはないわけで、読書メーターをいやいや使ってたわけですが、どうにもこうにも我慢ならなくなり、ブクログを使い始めて・・・読書メーターはそれ以来ほとんど見てません。

http://book.akahoshitakuya.com/u/24744

ぬぬ。620冊も登録してるのにもったいないw

書評をつけたいのだけども

本の醍醐味は、自分の知らないことを教えてくれること、つまり気付きだと思うんですよね。 ついのめり込んでしまうあの感覚をどうしたらうまく表現できるのか。

考えてみたんですが、引用ばかりすると疲れるし、タイピストになりたいのか?って感じだし、んなわきゃないし。苦労の割に誰の為だか全然分からない気がして。

つまり、その全てメモする部分は自分にしか価値がないことが多い気がするので、公開はしてもしなくてもOK。ただ、ちゃんと書評をつけるのであれば、全ての本に対して同様に付けるのではなくて、この本のここぞー!ってのをいくつかピックアップして、それに付随する想いを誰も傷つけることなく書き留めておくことこそが、自分にとっても大事だし、誰かにとっても面白いんじゃないかなと思った訳です。

これからはそういう気持ちで書きたいなと思います。

5/26は #eventfes に参加してました 1/2

Event Festival Tokyo 2013に参加してました(といっても、お昼からですけど...えへへ)

一言でいうと、作り込まれた会場で文化祭気分を満喫できました!あと、普段は聞けないようなセッションに参加するほうが面白いんだなぁという印象です。
ただ、運営面はあんまりいけてなくて、イベンターのためのイベントなのに、あれあれ?というところが多くて残念でしたね。なんていうか、詰めが甘いといいますか...(まぁ、私もそこは得意じゃないんですが、イベンターのためという名目である以上、どうしても期待してしまったわけで)

それ以外でも、
とにかく、たくさんのグッズや仕掛けが用意されているように感じ...はしたのですが、それが効果的に活かされていたかと言えば謎でした。

もらったもの

  • 参加者同士がコミュニケーションを取るためのワークショップに使うシート
  • タイムテーブルと会場地図が描かれた手ぬぐい
  • 来場者判断のための紙のブレスレット
  • 首から下げるパス
  • つながるための自己紹介カード(会場のチェキで撮影してもらって、そこに既に置いてあるカードを取る仕組み)
  • きれいになるらしいミネラルウォーター

あとは、会場の風景として、スポンサー自体が、グッズ作成の会社も多かったからでしょうか、その日しか使えないような垂れ幕(日付入り)やポスターがやたらと展示されていたのも印象的でした。でも、それが効果的に活かされていたかと言えば、NGだったと思うのですよね。会場の設計って難しいですね...、ついおろそかになってしまったり、そこに注力使用という人は少ないのかもしれません。

客層は、年齢も服装もすごくバラバラの印象を受けました。意外と女性・・・というか「精力のあふれるオバさま」や「学生風の人」が多かった気がします。

さて、能書きはこれくらいにして、参加したセッションについて、紹介していきますよ。

13:00-13:30 アイスブレイク

f:id:musicala:20130526125703j:plain

やりかた

  • 参加者は、ファシリテーターに合わせて拍手します。
  • 3~4回やって、慣れて来たところで、次のお題。1の応用バージョンで、ファシリテーターは、拍手を1から順に増やして行きます。その途中で「STOP」と号令がかかり、その時点で叩いた拍手の数で近くの人とグループを作ります。
  • グループができたら座っていいのですが、あぶれた人にはファシリテーターはインタビューをします。名前とテーマ(初恋の人など誰でも答えられるけどちょっと感情を引き起こせるようなもの)
  • 同じく3~4回行って(2回目以降は極力1回目とは同じじゃない人と組むように指示します/12という数字は3でも4でも割り切れるのでオススメらしいです)慣れて来たところで、今度は6人グループを作ります。(拍手なし)
  • グループにて、[質問カード]を使って自己紹介します(全5分)
    ※質問カード:会場でも販売していたのですが、会話が膨らみそうな話題がトランプサイズのカードに書かれていました。
  • 12人グループ作り、ペンを使って、みんなでワークします!隣の人とペンで輪を作って、その裏表を入れ替えるゲームです。文字で起こしても伝わるか不安ですが…ペンの上を左手の人差し指、ペンの下を右手の人差し指で、それぞれ支えて輪になります。たとえば、私の左のペンは上側を私が支え、下側を左隣の人が支えます。輪は向かい合う形になります。その状態をスタートとして、ゴール地点は、逆にペンの上を右手の人差し指、ペンの下を左手の人差し指で、それぞれ支えて外側を向いた輪になります。

私のチームは、結果的に失敗してしまいましたが、短期的にすごく盛り上がりました。でも、別に交流は生まれてない、かなぁ?周りをみかけても、自己紹介をしあった時の方がいい雰囲気だったので、ボールペンのワークの意味合いが分からなかった。この後に、さらにワークショップをやるのであれば別でしょうけど、セッションだったので…

ちなみに、途中で退出する人もチラホラいました。その気持ち、すごくわかります…

結果的に何がほぐれたんだろう??(´・ω・`)

13:30-14:15 イベントから生まれる新しい文化

by afromance/BURNING JAPAN, 泡フェス by 内沼晋太郎/numabooks/B&B

先攻:アフロマンス

f:id:musicala:20130613210846j:plain

  • I am パーティークリエータ
  • 電車を貸し切ってみたり、7日間ノンンストップでDJイベントしたりしました。
泡パーティー、泡フェスを開催しました。
  • これは、上から泡を降らせて泡まみれになるイベントです。海外が本家で、日本では去年僕がやりました。原宿で開催したところ、300名定員に対して、3000名の応募が!
  • どうしてこうなったかといえば、ソーシャルで個人ポストが2万いいね!&650シェアが大きいと思います。

    インサイト:死ぬ迄に一度は体験してみたい

というキャッチに心が動いた人が多かったのだと思っています。

ソーシャルポイント:3%の認知。3%のファン
  • 世の中の人口の3%ぐらいが知っている知識だからこそ、逆に広がった。結果的にはみんなものすごい泡好きなんだなってw
  • 豊洲WILD MAGICで第二回を開催しました。これは、テレビにも出たので、人がたくさん…来るはずだったのですが、来たのは台風だったので大赤字!になりました。。。
  • 今年は、6月より渋谷で毎月開催します。7月には野外の泡フェスを実施し、全国展開したいなぁって。
  • 詳細は、awapa.jp をチェックしてください。
BURNING MAN
10のモットー
  • Radical Inclusion
  • Gifting
  • Decommodification
  • Radical Self-reliance
  • Radical Self-expression
  • Communal Effort
  • Civic Responsibility
  • Leaving No Trace
  • Participation
  • Immediacy

後攻:B&B

  • 本屋が厳しい時代です。
  • B&Bを始めたとき、久しぶりに都内に新規の本屋ができると(役所に?)言われたそうです。「新規がない業界って終わってる…」
  • 2Fにあると入りにくいけど、家賃を下げるためには仕方が無かった。敷居を少しでも下げるために、どこにでもあるような雑誌を置いています。
  • 奥のコーナーでは、ほぼ毎日イベントを開催しています。
「これからの街の本屋」
素人だから考えた3つの計画
1) ビールが飲める ALL 500円
ビール飲みながら選べたら最高だよね?ということで始めました
2) 家具も売り物
実は本棚は全て売り物です。アンティーク家具屋と提携しているため、什器のコストがかかりません
アンティークだから売った後は別の新しい本棚が来ます
3)毎日イベント開催
  • あくまで本屋をやりたいのだけど、新刊ビジネスを成り立たせるのは難しいので、本屋を続けるために他で利益を出すようにしています。
  • ビールで気が大きくなって、買ってくれたりするんじゃないか?という思惑もあります。
  • また、普通の家具屋さんでは、「本棚に本があるイメージ」で買うことはできないので、わかりやすいんじゃないか?と思います。実際売れてます。
  • イベントをやることで、著書の関連本が売れることもあります。
イベント運営の考え方とわかったこと
  • 基本は20時~22時開催、1500+1ドリンクで2000円ぐらいでやってます。土日はダブルヘッダー、トリプルヘッダーすることも。新刊発売イベントが多い。出版社からはお金をもらわずに、集客ができなければ赤字の体制。
  • 雑誌の編集をする感覚でひたすら企画。
  • 毎日開催することで、非日常であるはずのイベントが店にとっては当たり前の日常になる。店員にとっても、日々のルーティーンならば苦しさを感じにくいのです。非日常、たとえば月1度のほうが精神的にきつい感じがします。「あ、20時になる、そろそろイベントだな」という心づもりができます。
  • 著者にとっては、毎日開催していることを知ってもらうことで、持ち込みのハードルが下がります。店にとっては、毎日、多岐にわたる話者を御呼びすることで、まったく違う客層のお客様を呼び込めます。

ほむほむ

  • 正直、持ち込まれるようになる迄、半年は覚悟していたけれど、結果的に2ヶ月目から持ち込みの企画が入り始めました。運営面では企画そのものよりも、お客様からのメール問い合せへの対応や振込確認など、事務作業のほうが大変でした。
  • 集客:その場に参加して面白いというようなエンターテインメント性の高いものよりも、自分の今後の人生の為になりそうというようなまじめで、お勉強っぽい企画の方が集客できる傾向にあります。 また、話者の純粋な知名度よりも、同じ話者による他店でのイベント開催の頻度、告知期間の長さ、ソーシャルメディアでの告知の話者本人の協力体制、企画のタイトルと告知分の内容などのほうが、ずっと重要なことも分かりました。

二人のトークセッション

あ:アフロマンス び:B&B

あ その知識に深くないからこそできたことがいっぱいある

び 「本にビールこぼされたらどうするの?」という危惧をもらう
でも、実際は月に1回ぐらいしか起こらないので、それ以上に得られる利益が大きい

経験があればあるほど、逆に固定観念に縛られて飛び込みづらくなることがあるのかなぁと思いました。

あ 主催者として、イベント当日は忙しすぎたから、最後のDJできなくて、かなりの虚無感に襲われた
目立ちたがりだからこそできたし、やりたい!のあとにお金や人がついてきた間隔

全然関係ないですけど、2人はいい感じにお互いをフォローしていたので、お互い興味ありそうな人を用意すれば、逆にパネリストなんて必要ないんだなぁと思って見てました。正直、トークセッションってあんまり面白くないことが多いと思うんですけど、今回は引き込まれたので

あ イベンターと話してて思いつきでやってみる

あ 出発は面白いことをやりたいと想うだけで、文化を作ろうだなんて狙ってないし、あまり決まっていない形がムーブメントを起こして行く上ではいいのかなと。周りが巻き込まれて広がって行く。細かいことは考えずにまずはやってみる。

び ソーシャルメディアが発達したことは利益が大きい

あ 言われてみればそうかも?
フォローしておくとこの人面白いなとか何かつながれそうだなと思ったりしますし

び 他には、過程を見せたり、その途中が見えることで、みんな参加しやすくなったのかもしれない。

ぬーん、それはブログでもできてたことだと思うけど、波及率とか、欲しい人の元にちゃんと情報が届くような仕組みをSNSがフォローできたということでしょうかね?類は友を呼ぶ、じゃないですが、やっぱり自分一人でフォローできる情報には限界があって、そこを補う為にフォロー・フォロワー、または友達が影響しているんじゃないかなって。

あ ソーシャルバズを意識して、どのワードが効くとかシェアされるとかやってるのに、実際流行るのは、予想外のところ。
あ 泡パでの失敗、つまり昼間はきれいに晴れてたのに、夜は台風が来た。結果、集客がひどかった。だから、バーニングマンを開催する時はイベント保険に入ってみました。

ちょっと調べたら、いろんな会社が提供してるのが分かってビックリしました。もちろん電通さんもありましたし。

び 比較すると僕は文科系だと思うw エンタメ系はうちは集まらないのはなんでだと思いますか?
あ 結果は、やりたいことが本屋だからだと思う。自分はエンタメをやりたい。でも、参加したお客さんが「救われた」と言った。普段のいろいろを忘れさせてくれてありがとう、と。
「いけすは、四角いと、4つの隅でさぼる魚が必ず現れるそうです。だから、さぼるのを無くそうとして、いけすを丸くする。結果、魚が全滅したそうです…」僕の仕事は、この隅を作ることなのかもしれない。
普段生きている上では使えないけど、人を救う仕事はあるんだなと思った
び 僕は、いけすで早く走ることをやっているのかもしれない
あ 世の中のニーズとしては、すぐに使えるようなことのほうがビジネス的には、いけると思うし、自分の仕事はビジネスとは直結していないように感じるw

もちろんビジネスには直結はしないし、費用に換算されると簡単には計れない。でも、今の世の中はサービス業がどんどん増えていて、サービス業こそ、個々のモチベーションが反映されてるんじゃないかなと思ってます。プロじゃないうんぬんとかそういう話はすっ飛ばして、気持ちよく楽しく仕事できたらいいじゃないですか。少なくとも私にとってはそういうイベント?って大事なんですよね。

び 最近話題になった「すごいアーティストがでかい箱で閑散」とするのはなぜ起きるんだろう、今迄もあったのかな
あ 昔はテレビが強かったし、そこで出るアーティストは神様だった。今はソーシャルで目立っている人が有名だったり、と、行動自体が変わって来ているのでは? その中で試行錯誤してれば、有名人呼ばなくても人が集まる

うーん、電気グルーブのことだったら、そうツイートしてもらっただけで実際は人が入ってたと思うけど…、とはいえ、他にもあるんだろうなぁ。金銭ともかくとして、自分の好きなアーティストだったら儲けものだと思うけどなぁww SNSとか活用してるアーティスト好きになってたら相当楽しいと思うんだけど。(いかん、妄想してたら話が脱線...)

び 3%の認知っていいですよね。50%だったら、シェアはしない
あ その場合、いいね!は押すけどシェアはしない。本家のメディアの人がたまたまそれを知っていて、紹介してくれたり!

別件ですが、この人も、3%の認知的なことを言ってました。 http://www.advertimes.com/20130107/article98100/

泡パのことは全然知らなかったのですが、思いの外、興味深くて楽しゅうございました。B&Bも今度行かなくちゃ。こういうイベント並列系の誠品書房的な本屋は、都内で増えてる気がするので、片っ端から生きたいし、代官山の蔦屋書店のそばに住みたいものです。

「勉強しててえらいね」とか「本たくさん読んでるよね」とか言われることもありますが、イベントも勉強会も本も私に取っては、仕事をやる気にさせてくれる導線なんですよねぇ。何事も楽しまないと!

メンテナブルJavaScript 第III部 自動化より

さてさて、どんどん面白くなってきております、この本。
ついに自動化の章までやってきました。

正直、JSに自動化なんぞやー?というレベルの私にはもってこいの内容でした。
生まれて初めて図書館で2時間集中してしまいました。珍しい…

というのも、返却日だったんですよね。返却日駆動おすすめですが、途中でタイムアップという残念な結果になりました。だだんッ!
さて、今回も覚え書きを残しておきます。

13章 ファイルとディレクトリの構成

13.1 best practice

  • 1オブジェクト1ファイル
  • 関連するファイルをディレクトリに集める
  • サードパーティのコード分離
    チェックインせずにCDNから直接ロードするほうが理想的な設定
    できない場合は、サードパーティのファイルをソースコントロール内の別ディレクトリに保持するのがベストなアプローチ
  • ビルドの位置を決める
  • テストコードを密に対応つける

リントかわいいよ、リント http://csslint.net/

14章 Ant

ant

  • macの場合標準搭載
    お、おう
  • 起動には、 build.xml が必須
    お、おう

サンプル

<?xml version="1.0" encoding="UTF-8"?>
<project name="maintainablejs" default="hello">

    <target name="hello">
        <echo>Hello world!</echo>
    </target>

    <target name="goodby" depends="hello">
        <echo>Goodbye!</echo>
    </target>

</project>

実行 $ ant goodby

Javaのプロパティファイルで定義しておき、Antに直接ロードさせることもできる

そうだね、よく見るね。

14.6 Buildr

https://github.com/nzakas/buildr

<import file="/path/to/buildr/buildr.xml" />

これを定義しておけば、antタスクを簡単な構文で集められるようになる

15章 バリデーション

  • JSHintを開発システムに取り入れて、JSコードを自動的に分析検証する方法
  • JSソースを読み込む方法

// 除外したいファイルパターンを指定することもできる

<fileset dir="./src" includes="**/*.js" excludes="**/*-test.js" />

filelistもあるが、実際はfilesetのほうが使うようになるとのことです。

15.2 タスク

これを定義しておけば、antタスクを簡単な構文で集められるようになる

必要なツール

Rhinoをダウンロードする

jsHintをダウンロードする

https://github.com/jshint/jshint

16章 ファイルの連結

antだったら簡単に複数のjsファイルをまとめて一つにすることも可能
ただし、何も指定しなければABC順なので、変えたい場合は明示する必要あり

 <target name="concatenate">

        <concat destfile="${build.dir}/build.js">
            <fileset dir="${src.dir}" includes="**/*.js" />
        </concat>

    </target>

可能な限り、filesetで指定することをお勧めする

16.2 行末

  • 連結の時に最終行に改行がないと、うまく結合されない。
  • そんなときにはオプションを指定すれば一発!
  • オプション eolで改行記号を変えることも
<concat destfile="${build.dir}/build.js" fixlastline="yes" eol="lf">
    <fileset dir="${src.dir}" includes="**/*.js" />
</concat>

TIME UP

続きはまたどこかで行いますです。
ぬーん、ごめんなさいごめんなさい。

関連エントリ

この本

メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法

メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法

メンテナブルJavaScript 第II部 プログラミング実践より

この本はどんどん進めるにつれて内容が難しくなって行くのが特徴的でした。
こういう場合はやっぱり一度はちゃんと書きたいということで、ブログに起こしました。

メモ書き程度になってしまってすみませんが、特に見覚えのないものや、こういう風に書けたらなぁというところをピックアップしているので、全てではありません。

9章 設定データをコードから切り離す

9.3 設定データを格納するには

var config = {"MSG_INVALID_VALUE": "Invalid value"};
myFunc({"MSG_INVALID_VALUE": "Invalid value"});
// 呼び出しは、 config.MSG_INVALID_VALUE

10章 エラー処理

10.6 エラーの型

MyError(message) {
    this.message = message;
}
MyError.prototype = new Error();

自分でErrorを継承した型を定義しておけば、 typeof などで判定できるようになる

11章 所有していないオブジェクトを変更しない

パラメータを delete で消したり、メソッドを null で上書きするのは御法度

-> 静的プロパティでアラート出すか、docで回避するようにしよう

11.3.1 オブジェクトベース継承

/*
 Object.create(OBJECT) で、引数に対象のオブジェクトを渡す
 第二引数には、パラメータやオブジェクトを渡すことができる: 機能の追加など
*/

var person = {
    name: "Nicholas",
    sayName: function() {
        alert(this.name);
    }
}

var myPerson = Object.create(person);

myPerson.sayName(); // "Nicolas" が表示される

11.3.2 型ベースの継承

/*
 開発者が定義したコンストラクタ関数を使う時に最適
 instansof での比較もできるようになる
*/

function MyError(message) {
    this.message = message;
}
MyError.prototype = new Error();

// コンストラクタ継承
function Person(name) {
    this.name = name;
}
function Author(name) {
    Person.call(this, name); // コンストラクタを継承
}
Author.prototype = new Person();

11.3.3 Facadeパターン

/*
渡すのは、DOM要素で、
あらかじめ、使用方法を指定しておくインターフェースのような使い方ができる
 -> でも、すごく無理矢理に見えるんだけど、気のせいだろうか...
   最初作った人は想定していない使い方に見えなくもない??
*/

function DOMWrapper(element) {
    this.element = element;
}

DOMWrapper.prototype.addClass = function(className) {
    element.className += " " + className;
};

DOMWrapper.prototype.remove = function() {
    this.element.parentNode.removeChild(this.element);
};

// 使い方
var wrapper = new DOMWrapper(document.getElementById("my-div"));

// CSSクラスを追加
wrapper.addClass("selected");

// 要素を削除
wrapper.remove();

11.4 ポリフィル Polyfill

その他のオブジェクト変更と比べると、わずかばかり安全です。
すでにネイティブ実装が存在し、その実装を使えるからです。

利点:ネイティブ機能を持つブラウザだけをサポートする場合には、
ポリフィルの機能を用意に削除できる点です。
ポリフィルを使う選択をする場合、さまざまな観点から詳細に検討しましょう。
ある機能がネイティブのバージョンと可能なかぎり合致しているか確認し、
さらにその機能を検証するユニットテストがライブラリにあるかどうか、ダブルチェックしましょう。
ポリフィルの欠点は、不足機能が正確に実装されていないかもしれない点です。
メンテナンス生を改善するには、ポリフィルは避け、代わりに
既存のネイティブ機能の上にファサードを作りましょう。最高に柔軟になります。
柔軟性が特に重要になるのは、ネイティブ実装にバグがある場合です。

この場合、実装のバグと無縁ではいられないので、そのネイティブAPIを直接使いたくないはずです。

11.5 変更を妨げる

/*
PreventExtension
 :オブジェクトへのプロパティやメソッドの新規追加 禁止
 :既存の変更や削除 可能
seal
 :オブジェクトへのプロパティやメソッドの新規追加 禁止
 :既存の削除 禁止
freeze
 :オブジェクトへのプロパティやメソッドの新規追加 禁止
 :既存の変更や削除 禁止

isExtensible() 拡張できるかチェックする
*/
ver person = {
    name: "Nicholas"
};
// オブジェクトに鍵をかける
Object.preventExtension(person);
console.log(Object.isExtensible(person)); // false
person.age = 25; // strictモードでなければ落ちる

続いて、シールの場合

// オブジェクトに鍵をかける
Object.seal(person);

console.log(Object.isExtensible(person)); // false
console.log(Object.isSealed(person)); // true

delete person.name; // strictモードでなければ落ちる
person.age = 25; // strictモードでなければ落ちる

最後にフリーズの場合

// オブジェクトに鍵をかける
Object.freeze(person);

console.log(Object.isExtensible(person)); // false
console.log(Object.isSealed(person)); // true
console.log(Object.isFrozen(person)); // true

person.name = "Greg"; // strictモードでなければ落ちる
person.age = 25;      // strictモードでなければ落ちる
delete person.name;   // strictモードでなければ落ちる

12章 ブラウザ判定

12.1 ユーザエージェント判定

  • 必ずしも正確な値を返すわけではないので、極力使わない、頼らないことが望ましい。
  • 使う場合は、IE8よりも前とかそういうレベル
if(isInternetExplorer80rEarlier) {
    // IE8とそれ以前を処理
} else {
    // その他のブラウザを処理
}

12.2 特徴検出

/*
あるメソッドが使えるかどうか = 特徴 で判断する
*/

// Good
if(document.getElementById) {
    // 何か実行
}

// Good getElementById が出たばかりのころによく書かれたコード
function getById(id) {

    var element = null;

    if(document.getElementById) { // DOM
        element = document.getElementById(id);
    } else if (document.all) {    // IE
        element = document.all[id];
    } else if (document.layers) { // Netscape 4以下
        element = document.layers[id];
    }
}

12.3.4 特徴推定&ブラウザ推定

特徴検出で検証したメソッドで勝手にブラウザを判断して、よしとしないこと。
ブラウザは違っても、そのメソッドを持っている可能性はあるし、変更が必要なソースになってしまう!!

これらは極力避ける!最悪のプラクティス
  • 特定のブラウザの古いバージョンをターゲットにする場合のみ有効
  • 最新のブラウザや将来のバージョンをターゲットにしては行けない
  • 可能な限り、特徴検出を使う
    それが不可能なとき、ユーザエージェント判定を代替として使う
    ブラウザ推定はけして使わない

関連エントリ

この本

メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法

メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法

メンテナブルJavaScript 第I部スタイルガイドライン より

1.1 インテント:半角スペース4つ

各エディタや環境で異なる結果を引き起こさない為に
各規約を参照した結果、間を取って4つ

いずれにせよ、自分の慣れたパターンでない場合はとても読みにくいですよね...

1.2 文の終端:ASI(自動セミコロン挿入)機能があるので、改行には気をつけること

書き方によっては、動かなくなる原因になるそうです。

1.3.4 1行の長さ:80文字

長い場合は、演算子(カンマや&&など)の後で改行し、2レベル下げる
ただし、変数に代入する場合は、イコールの位置に合わせる

1.6 命名規約:キャメルケース

  • 名詞で始める、関数の場合は動詞で始める
  • データ型を示唆する名前、短め、無意味な名前は避ける
    (ex. count,name,setName,...)
  • 定数:すべて大文字、単語の間はアンダースコア
    ※ただし簡単に上書きできてしまうので気をつけること
    コンストラクタPascalケースで定義する
    (ex. Person)

1.7 リテラル

  • 文字列:長文の場合は、途中で区切って、連結する
  • 数値:8進数は禁止
  • undefined:typeofを使うときは注意,基本はnullを代入しておこう
  • オブジェクトリテラル
// Good
var book = {
    title: "Maintainable JavaScript",
    author: "Nicholas C. Zakas"
};
// Good
var colors = [ "red", "green", "blue" ];
var numbers = [ 1, 2, 3, 4 ];

2.0 コメント

  • 意味のある文章を
    -> 意識しないと変な文章を付けがちなので、反省・・・
  • エラーになりそうな箇所にコメントする
    ※ 特に意味があって一般的でないやり方をしていて、容易に修正されたら困る場合など
  • ドキュメントコメント
    YUIライブラリ, JSDoc Toolkitを使ってJSDocを作る予定のときは特に注意しよう!

関連エントリ

この本

メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法

メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法