We Are JavaScripters! @31th【初心者歓迎・ショートセション大会】に行ってきました

wajs.connpass.com

というわけで最近 JS 界隈の勉強会によく出没しています。

TDD & 登壇のハードルを下げたい

WeJS の基本的なコンセプトはこんな感じです。

• 初心者歓迎
• マサカリ遠慮
• 緊張するのでお酒飲んでやりましょう

今回はLT5分の枠だけではなく、15分の枠も登場しました。

スポンサー

ありがとうございます。

• 会場: retty
• ドリンク: forkwell, Sony

会場を探しているそうです

運営する人たち毎回開催場所の確保に困っているみたいです。

• 飲食可能
• 30-100人
• マイク・プロジェクター

ショートセッション(15分)

Gatsby.js で導入事例をバシバシ読めるSPAなLPを作った話 @kikunantoka

https://speakerdeck.com/kikunantoka/gatsby-js-for-biz-lp-a5b9dafd-e9ea-453a-8989-6e3792ec7962

giftee というサービスで法人向けのランディングページが WordPress で重いんだけどほとんど静的サイトだったから Gatsby にしたというお話。Gatsby は Static Generator なんだけど生成したページがそれ自体で SPA のように振る舞うので高速に動作するので用途としてはバッチリだと思います。

【SS】CG in Web最前線 @kyasbal

https://speakerdeck.com/kyasbal1994/cg-in-web-zui-qian-xian-jin-sokodehe-gaqi-kiteirufalseka

CPU と　GPU の違いがとてもわかりやすかったです。その後は難しくてよくわからなかったです。でも glTF は少し気になりました。これは以下のようにタグを書くだけでそこにアバだーの3Dモデルを表示できるとか、そんな事ができたりするのかな？

<body-model-vierwer src="xxx">
  <head-model-vierwer src="xxx" />
  <face-model-vierwer src="xxx" />
  <hand-model-vierwer src="xxx" />
  <foot-model-vierwer src="xxx" />
</body-model-viewre>

【SS】javascriptはどのように動くのか？ @brn0227

https://speakerdeck.com/brn/how-javascript-works

あんまり内容わかってないのですが、たぶん javascript のように抽象化されている High-Lebel な言語が実際に具体的に命令しないといけない Low-legel な機械語に翻訳される過程のお話なのかな?

普段このような知識を要する場面に出会わないのですが、そういった情報に触れることができるのが勉強会のいいところだと思います。

【SS】Google I/Oに備える Polymer Project最新動向 @takanorip

わたしは lit-html も LitElement も初耳でした。世の中には色々なライブラリがあるんですね。Polymer の思想は良かったと思いますが、React.js や Vue.js が色々と流行しているので若干役目果たし終えた気がするんですが、まだまだこれからなのかも。というわけで動向に注目したいと思います。

【LT】スポンサーLT @Forkwell

今までビデオでしか見た事がなかった本人が登壇されていました。去年までインターンでしたが無事新入社員へなれたそうです。おめでとうございます。Forkwellエンジニアのプロフィールサイトを運営していて Sony もスポンサーになってくれたそうです。

LT

【LT】Web Components時代に備える Aureliaのすすめ @panchan9

私、実は Aurelia 知らないんですけど新しいフレームワークが次々出てくるなあ... Web Components の思想は便利だと思うんですが、理想がちょっと高いので使いやすいツールを作るほうがいいんだるなあ。と思っています。たぶんそれで lit-html, LitElement の流れなんだと思います。

でもいろんなフレームワークが登場して、みんながそれぞれいろんな選択する事ができるのはとても良い事だと思います。

【LT】やさしい仮想DOM @RyoNkmr_

https://speakerdeck.com/ryonkmr/yasasiijia-xiang-dom

そういえば仮想DOMっという言葉ができてから時間がたってしまい仮想DOMってなんですかっいまさら聞き辛いような気がします。そんなわけでとっても良いトークだったと思います。

【LT】TypeScriptを書いてみよう @yamatatsu

TypeScript のライブコーディング。今回のLTは時間配分について厳守するように*1言われていた事もある時間が迫る中 TypeScript の型について説明してくれました。

monaco-editor を使っているので資料の中で JS 使えて便利。今度真似しようと思いました。

【LT】redux と unstated @okamuuu

私のターン。本当は unsated について話そうと思ったのですが、資料を作成している最中に、すでに詳しい事かいてある記事を発見してしまいました。

https://qiita.com/kaba/items/b05f680f850dd46548f3

実は以前 Redux は敷居が高すぎて導入するのになかなか踏み切れないで悩んでいた時期があったのですが、今はもう大丈夫、unstated という選択肢がありますよ。というお話をしたつもりです。

ちなみに redux をやめて unstated にしましょう、という話ではなくて選択肢が増えた、という話です。念の為。

LT資料: https://okamuuu.com/talks/2019/2019-04-24.we-are-javascript@31.htmlokamuuu.com

【SS】バイナリの話?

写真データをごにょごにょしようとして EXIF 情報調べる時に文字でなくてバイナリが保存されているからデバッグするときに「おお、JSだとこうなるのか」といった内容を共有してくださいました。たぶん。

シフト演算子の話を聞いていたら昔 MySQL の整数型に保存してあるユーザーの持ち物を0以下にして 16777215 みたいなそんな数値にしてしまうバグを生み出した苦い記憶が蘇りました。

懇親会は

とても寝不足だったので参加せずにまっすぐ帰宅しました。

今回の勉強会で得た知見とまとめ

今回得た知見

• glTF は要チェック
• monaco-editor 使ってみたい

そして最近資料書いているうちに「あーこれ5分以内に話きるの難しいな」みたいなのが時間を計測しなくても感覚値で把握できるようになってきました。たぶん大勢の人たちの前で登壇している人たちはみんなそうやって経験を積んでいくのかな、と思うのでまだ登壇した事ない人も徐々に上達すると思うので思いってチャレンジしたらいいんじゃなかと思います。

こちらからは以上です。

*1:撤収する時間を破ると会場貸してくれた人たちに対して不義となる

台北駅から徒歩5分のスターホステルに一週間滞在して明るくオシャレな空間でノマドしてきた

あらすじ

というわけで台湾も花粉が飛ばないはずなのでノマドしてきました。スターホステルっていうお洒落なドミトリー式のホテルに宿泊しました。一泊だいたい¥5000(1400元)ぐらいから。ドミトリーだともっと安くて2300円(620元)から。

今回は Booking.com から6日間連続でシングルルームが空いていたのでそちらを予約。宿泊費は6日間で¥33,592でした。ただし、後述しますが実際に支払った金額は¥37215です。

ということで以下のことをこの記事では書いています。

• 台湾旅行でクレジットカードを使うときの注意点
• Star Hostel
• 桃園国際空港
• 誠品書店(エスリテ)
• 中正紀念堂(ヅョンヅェンジーネンタン)
• 迪化街(ディーホアジエ)
• ごはんとビール
• まとめ

ちなみに一週間滞在したのですがそのうち3日間は風邪をひいてしまったのであまり観光地に行けなかったので観光地の情報はあんまりないです。

台湾旅行でクレジットカードを使うときの注意点

さて、冒頭で宿泊料金が¥33,592ではなくて¥37215となってしまった件ですが、ホテルで支払いを JPY か TWD のどちらかを選択する際に何気なく JPY で支払いました。実は海外でクレジットカードの支払い方法を選択する時には注意が必要です。

1ニュー台湾ドル は3.63円とするならば9265TWDは33653.75JPYです

どうしてこうなったんでしょう？以下の記事が詳しいので読むと良いでしょう。また一つ賢くなりました。

https://note.mu/suzukyuin/n/n48c6602adf99

Star Hostel Taipei main station

www.starhostel.com.tw

古い建物をリノベーションしてある建物なのですがかなり清潔な状態を保たれているようです。というのもスタッフがかなり掃除に気を使っているらしく、こまめに掃除をしていました。受付スタッフは基本的に英語を話せるので*1やりとりは基本的に英語です。

私はそんなに英語得意ではないのですが鍵を部屋の中に閉じ込めてしまったとか、ランドリースペースはどこですか？程度の英語だったんで不自由はしませんでした。まあ英語できなくても一部のスタッフが日本語を話していたので困らないと思います。最後の手段として漢字を使う、という方法もあります。漢字は偉大。

洗濯機が2台、乾燥機が1台ありました。それぞれ40元です。長期滞在も可能です。朝ごはんは宿泊費に含まれていて、毎朝少しずつ違ったメニューです。オレンジジュースが美味しかったです。お昼ごはん、夜ごはんは後述しますが歩いてすぐの場所に京站時尚廣場(Qスクエア)というファッションビルがあって、そこの地下3階にフードコートがあります。フードコートでの食事は癖がほとんどなく学食程度の金額でおいしいごはんがたくさん食べられますので長期滞在するのに不便ありませんでした。

朝食は無料サービス

夜は照明が効いてお洒落な空間

ノマドに最適な空間

お気に入りの場所

奥の椅子でノマドしてました

ホテルの窓から。左側のビルがQスクエア。奥の建物が台北駅

あと週末にはコーヒー屋さんがいます。一杯100元なので少々お値段しますが*2。ちなみに私にコーヒーを淹れてくれた青年は平日はWEB デザイナーをしているそうです。日本語が上手でした。

ノマドの拠点として最高だったんですが、問題なのは室内の温度が寒すぎる事です。私は風邪を引いてしまいました。ヒートテックを持ってきた方が良いと思います。ちなみに台湾ではユニクロ製品ちょっと高いです。ヒートテックが790元でした。

桃園国際空港(terminal 1)

Terminal1 と Terminal2 があります。私は今回入国も出国も Terminal1 だったので Terminal2 に関しては書くことがありません。

Terminal1には地下1Fにコンビニとフードコートがあります。ただし、地下が2箇所あってそこを行き来するには1Fのロビーから移動する必要があります。地下に下がってからそこにコンビニがあった場合はフードコートに行くには1度1Fに戻る必要があります。逆もしかりです。

ちなみに3Fにも飲食店、お土産屋さん、お手洗いがあります。この3Fへの行き方が少しわかりづらいのですがチェックインカウンターの奥側にエスカレーターがあります。出国する際はそこに行かなければならないので急ぎでなければ入国の時点で立ち寄っておいた方が帰る時に楽です。ちなみに3Fはトイレなども比較的空いています。

あと Terminal 1 と Terminal 2 を行き来するスカイトレインが無人運転されていて5分感覚で運行しています。ただし、ちょっと場所が分かりづらいので初めて移動する人は時間配分にご注意ください*3

今度アジアを色々旅して回る予定なので桃園国際空港は今後頻繁に立ち寄る事になる予感がしています。

誠品書店(エスリテ)

台北のお洒落なお店です。誠品グループは台北の各地にあります。最近は日本橋にも出店されていたりします。台北地下街のK區にもありますし、中山駅にある誠品R79は台北駅から中山地下街を通って行けるので暑い日だったり、雨の日などで便利です。

中正紀念堂(ヅョンヅェンジーネンタン)

散歩がてらに立ち寄った中正紀念堂ですが思った以上に大きな建物でした。スターホステルから歩いて10分程度なので早朝の散歩がてらに行ってみると観光客も少なくていい写真がとれると思います。微動だにしない衛兵は1時間おきに交代するのですが、わたしは残念ながらそれを見ていませんが微動だにしない衛兵みるだけでも楽しかったです。

中正紀念堂は思ったより大きかった

微動だにしない衛兵

迪化街(ディーホアジエ)

台北で私が一番お気に入りの街です。問屋街なのですが小洒落たお店もあったりして私はこの通りの雰囲気がとても好きです。この街にきたら烏龍茶とカラスミを買うといいと思います。

おいしそうなフルーツも売っています。

ごはんについて

私は基本的に綺麗なデパートのフードコートを利用しました。1食100-130元程度なので大体500円程度でしょうか。路面で食事している現地向けのお店だと割と味付けに癖があって馴染みづらいのと写真がなくて注文しづらいのですが、かといって店内にテーブル席があるお店だと結構お値段がします。

なお、大戸屋やもーもーパラダイスといった日本に馴染みのあるお店もありましたがちょっと割高です。

ビールに関しては台湾製のビールは安いのですが日本製だと高いです。単純に輸入代金だと思いますが。私が珍しいなと思ったのは18days っていう賞味期限が18日の生ビールでした。台湾に来たらこういった缶ビールを買ってみるのも楽しいと思います。

桃園国際空港のフードコードにて。150元

台北地下街 K區のスタバにて。80元。

台北駅(台北車站)にて。450元。日本食は割と高い。

朝からモツとタコ。80元。

Qスクエアのフードコート。150元。

minder vegetarian はとても便利。不足しがちな野菜をここで補充

ほぼ毎日食べていた。115元

Qスクエアのフードコートにて。160元。

QスクエアのJASONS。お土産買ったりビール買ってホテルで飲んだり。使い勝手が非常に良い。

まとめ

というわけで一週間台北でノマドしてきました。といっても3日間体調不良のためほとんど観光できませんでしたが。今後地方、あるいは外国でノマドをしたいという野望があり、その視察に行ってきたのですが台北はノマドするのにとても良かったです。寒いっていう課題があるので解決策は考える必要がありそうですが。という訳で今回の旅で学んだ事は以下の通り。

• スターホステルは立地、空間ともにノマドをするのに最高だった
• ただし、冷房が強いので寒がりの人はヒートテックが必要
• クレジットカードでの支払いは現地通貨を選択すべし
• お土産は徒歩10分程度で迪化街があるのでそこで買うと良いでしょう。
• スターホステルに滞在する場合は徒歩3分程度の場所にQスクエアがあり、食事も飲み物も事足りる
• スタッフとの会話は英語を使うので英会話の練習にもなる

台湾は日本からも行きやすく、またアジアを行き来するのにちょうど良い中継地点なので今後も頻繁に行き来することになりそうです。こちらからは以上です。

台湾はマンゴーがとってもおいしいです

*1:清掃スタッフは基本的に英語を話さない。多少は話せると思うんですけど英語での対応は受付スタッフに任せている気がします

*2:スタバだと1杯80元

*3:3Fにスカイトレインがあるのですが、場所によっては一度1Fロビーに降りて移動した後に3Fへ再度登る必要があります

石垣島のお洒落なカプセルホテルブルーキャビン石垣島に6泊7日滞在しノマドワークしてきた

あらすじ

毎年4月になると花粉症が酷く、4月は仕事をしていないという事実データが存在するので南の島へ避粉地ツアーしようと思いました。最初は沖縄本島へ行こうかと思ったのですが、以下の理由で石垣島を選びました。

• バニラエアで成田から石垣島への直通便がある
• 石垣島に良さげなホステル(簡易宿泊所)がある
• 手頃なアクティビティがたくさんある

というわけで今回のノマドワークで体験した事を記します

• 花粉の症状について
• 宿泊所であるブルーキャビン石垣島の事
• ノマドした場所
• アクティビティの事
• オススメのごはんどころ
• 石垣島のコーヒー事情

花粉の症状について

到着して2日ぐらいはまだ花粉の症状が残っていました。もしかしたら洋服に花粉がついているからかもしれません。石垣島にはすぎ、ひのきの花粉はありませんが、サトウキビにも花粉症になる人がいるらしいです。ちなみに今年は天候の影響でまだサトウキビを刈りきれていないとのことでした。あと地理的にPMや黄砂も少しあるらしいです。私はスギ、ヒノキの花粉がつらくて仕事のパフォーマンスが落ちるのが嫌だったのですが、ここに来ればまったくその心配が無く快適に過ごすことができました。これだけでも石垣島に来た甲斐がありました。

ブルーキャビン石垣島

今回宿泊したブルーキャビン石垣島は離島ターミナルから徒歩1分の場所という、とても便利な立地です。石垣島では基本的にレンタカーで移動するのが良いと思いますが、このホステルは離島ターミナルに近いので竹富島などへの離島めぐりができるのでレンタカー無しでも石垣島旅行を楽しむ事ができます。

宿泊期間とお値段

6泊して宿泊料金の合計は ￥19,500（消費税：込）でした。飛行機代と宿泊料金が安い時期を選んでいるのでハイシーズンはもう少し高いと思います。ちなみに貸切プランというのもあるので大人数でわいわいしても楽しいと思います。5名以上だったら貸切りしたほうがお得になる気がします。

日付	宿泊費用	思い出
2019年4月07日(日)	￥3,200	電動バイク、鰓呼吸
2019年4月08日(月)	￥3,200	ノマド、ペンギン食堂、石垣ブルー
2019年4月09日(火)	￥3,200	のりば食堂、竹富島、朝日食堂、星空鑑賞ツアー
2019年4月10日(水)	￥3,200	幻の島上陸、ノマド、ペンギン食堂、ぱいかじ
2019年4月11日(木)	￥3,200	自習、ドライブ、明石食堂、ぷかぷか、ぱいかじ、つる商店
2019年4月12日(金)	￥3,500	西表島、ツル商店

新石垣空港と石垣港離島ターミナルの移動手段

バスは二つあるので宿泊先が離島ターミナルの場合はどちらでも行けます。ANAインターコンチネンタルなどに宿泊する場合は各停に乗りましょう。

• ￥500: 空港からターミナルまで直通(カリー観光)
• ￥540: 各停(東運輸株式会社)

バスに関してはこちらに詳しく乗っています: https://okirito.net/bus/8440.html

ノマドした場所

石垣島でノマドするなら多分以下の3箇所がおすすめです。

• ブルーカフェ
• ホテルエメラルドアイル石垣島のカフェ
• 図書館

ブルーキャビン石垣島のカフェ: ブルーカフェ

ブルーカフェは宿泊所に併設されているカフェで早朝から営業しております。電源コンセントが少ないのですが朝6:00から営業しているので出かける前に少しノマドする、といったことができて便利でした。私は冷房が苦手なのでテラス席で仕事することが多かったです。

ホテルエメラルドアイル石垣島のカフェ

こちらは電源コードがたくさんあって訪問した時間(14:00ごろ)は私しか利用者がいませんでした。15:00以降はチェックインする宿泊者がやってくるので少し賑わい始めましたが冷房はそこまで強くないのでとても便利なスペースでした。

図書館

私は利用する機会がなかったのですが「ノマドするなら図書館もおすすめです。冷房は強くないですよ」という現地の方のアドバイスがありましたのでご紹介します。

アクティビティについて

石垣島とその周辺の離島でこんなことを楽しんできました。どれも楽しいんですけど全ては天気次第だったりします。なのでご参考程度に見てやってください。

• 電動バイク
• 竹富島
• 星空鑑賞ツアー(星空ツーリズム)
• 幻の島上陸(shechan石垣島)
• レンタカーで島半周
• 西表島由布島2島めぐり(石垣島トラベルセンター)

電動バイク

一応私は車の運転ができるのですが、石垣島に電動スクーターのレンタルサービスが開始されていたので、島内の散策はこれを利用しました。50cc と 125cc があり、50cc は普通免許があれば運転できます。もし石垣島に行くけど免許を持っていない、という方は原付免許*1だけ取得しておく、というのも有りだと思います。

でもまあ4時間以上借りると4千円となるのですが石垣島だと4時間あるとレンタカーが借りられるので普通自動車免許を持っている人はレンタカーの方が便利かもしれませんし、石垣島よりもその周辺の離島をめぐったりしたほうが面白いかもしれません。

私はとりあえず2時間だけレンタルしたのですが時間が足りずにあまり移動ができませんでしたがそれでもフサキビーチ、名蔵大橋、カンムリワシ展望台とドライブすることができました。バッテリーの交換にチャレンジしたかったのですがさすがに時間ないのでとりあえず帰還しました。でも久々にバイクに乗ってとっても楽しかったです。

カンムリワシ高台

竹富島

滞在3日目に石垣島に船で15分ぐらいにある小さな離島、竹富島へふらっと行ってきました。小さい島ですが自転車を借りた方が良いです。石垣島は日差しがとても強いので天気が良い日に歩いて移動するのはかなりつらいと思います。

私は特に予約せずにふらっと離島ターミナルに行って竹富島に行きたいと窓口に伝えて船へ乗船。離島ターミナルについたらレンタルサイクル屋のバンが何台か止まっているので「予約なしでもOK?」とい聞いたら余裕があったのでそのままバンに乗ってレンタルサイクル屋まで移動して自転車を借りました。

時間帯にもよると思うのですがもし早い時間帯でしたら最初に桟橋に向かってみるのも良いと思います。人が少ない時間帯だと絶好のフォトスポットだと思います。

遠浅で透き通った海

コンドイビーチは泳ぐことができるのですが遠浅の砂浜で、少し離れた場所に小島が見えます。腰ぐらいまで海水につかりますがその小島に上陸できるのでとても楽しそうです。私はただ眺めていましたが。ちなみに濡れたままの格好で自転車を返すと帰りにバンで港まで運んでもらえません。といっても歩ける距離なので歩いてもいいと思います。そして帰りの便はちょっと混み合うので船に乗るのに少し行列ができます。乗り切れない場合は次の便まで待ちましょう。あと小銭を多めにしてから出向くと良いと思います。

遠浅の砂浜の向こうに小さな島があります。コンドイビーチは水着必須です。

星空鑑賞ツアー(星空ツーリズム)

ベルトラ*2から星空ツーリズムさんが開催する星空鑑賞ツアーに申し込みしました。集合場所は離島ターミナルのバス停なのでブルーキャビン石垣島から歩いて行けます。市街地から屋根なしのバスに乗って街灯が見当たらない高台に向かいます。道中で車内灯を消したのですがもうすでに星空が綺麗でした。現地について専門家による星座の説明があって昔学校で習ったことを思い出すことができたりして、そんなのも楽しかったです。

なんですが残念なことに途中で厚い雲がやってきて、星を全く見ることができなくなりました。というわけで今回のツアーはキャンセルによる返金*3という事になりました。でも割と途中までいい感じだったので返金でなくてもたぶん参加者全員満足したんじゃないかな？というぐらい良かったです。気温がちょうど良かったのと、屋根なしのバスに乗って、気持ちいい夜風に吹かれながら星を見ることができたので非常に贅沢な時間を過ごすことができました。

なお写真撮影すると人間の目が暗闇に適用するまで数分要するらしく、撮影を自粛したので写真はありません。

幻の島上陸(shechan石垣島)

幻の島こと浜島に向かって出発

予報によると天気が良い日が限られている事に気づいたんで1日中ノマドをする予定の日だったのですが仕事前にアクティビティを予約しました。この日も天気が良かったのでとても楽しかったです。小型ボードに乗って片道30分かけて潮の満ち引きによって限られた時間だけ姿を見せる島へ向かいました。

参加したツアーは早朝7:30からの上陸だけのプランだったのですが、どのツアーよりも最初に訪れることができたので島を独り占めできて良かったです*4

ただ、小型ボードなので強風だとボードがすごく揺れると思います。あと島の滞在時間が1時間+往復1時間の間トイレに立ち寄ることができません。寒い日だと防寒しっかりしないとつらいかもしれません。私が参加した日は、波も比較的穏やかで寒さをあまり感じない天候だったので、これも素敵な思い出になりました。

一番乗りを果たして島の端っこから他の参加者を撮影した図。

レンタカーで島半周

平久保埼灯台に到着。絶景だったのですが良い写真なかったのでみなさんご自分の目で確かめてください。

天気があまり良くないことがわかっていたので午前中はホテルのカフェで自習*5してお昼から島の最北の地である平久保埼灯台に向かいました。最初レンタカー屋さんに「東京ではあまり運転しない」と伝えると「結構事故が多いので本当に気をつけてください」「練習目的での利用だったら危険ですのでお貸しするのは難しい」と説明を受けました。まあでももう何回も乗ってるので一応ペーパーではないという事で無事(?)車を借りて出発。なんですけど車もカーナビも古すぎて最初はやたらと道に迷いました*6

石垣島は制限速度がだいたい40kmぐらいで、市街地を出るとほとんど歩行者も車もないので割と快適に運転できました。平久保埼灯台近辺は道が狭かったので「対向車くるなよ、くるなよ、あーやっぱ来たかー」みたいな独り言をたくさん喋っていましたがそれ以外は特に困らなかったです。

道中で赤石(あかいし)食堂でソーキそばを頂きました。14時前だったのですが待っている人が数名ほどいらっしゃいました。お肉はボリューミーでかみごたえもほどほどに残っているけど口の中でうまいこと溶ける、そんな感じでした。また石垣島に行ったら食べたいなと思いました。

極上のソーキそば。定休日があるのでレンタカー借りる日は赤石食堂の営業日に合わせておくのをおすすめします。

最後にレンタカーを返却するまで時間があったので Natural Garden Cafe PUFFPUFF でコーヒーを頂きました。ここはテラス席からの眺めがよくてとても良かったです。帰り際に「島内の方ですか？今度BBQプランができたのでご検討ください」とお店の方から言われました。でも私の顔は全く沖縄感ないのでなんでだろうとその時は思ったのですが、石垣島はかなり移住者が多く、しかももう何年も住んでいる人が結構いるみたいです。*7

海辺のカフェってやっぱ最高すよねえ

そんなわけで無事レンタカーを返却しました。最初かなり迷子になってしまったので結構へとへとになりました。西側は電動バイクで走り回ったので一応石垣島はほぼ一周したことになります。たぶん。

南ぬ浜人工ビーチのテトラポット。釣り人がいたけど、魚から人間丸見えなんじゃないかな。

西表島由布島2島めぐり(石垣島トラベルセンター)

浦内川の絶景

出立前日、最後の思い出を作ろうと8:00-17:00のツアーを申し込みしました。これは以下のアクティビティがセットになっています。ちなみにこの日は波が高いので上原港ではなく大原港に到着しました。ちなみに船酔いしている人が何人かいて、バスの中でちょっとだけ苦しんでいました。船の大きさにもよるのですが、基本的に後部座席だと揺れが少ないので船に乗る時は並んでおくのがおすすめです。

• 石垣島と西表島の往復の船代
• 西表島で移動するバス代
• 浦内川ボート遊覧+マリュウドの滝までトレッキング
• キッチンイナバ昼食代
• 星砂の浜散策
• 水牛に乗って由布島入園

この日は結構肌寒くて浦内川ボート遊覧と星砂の浜散策の時はとても寒かったです。ただとても絶景だったので天気が良かったら風も気持ちよく浴びられて最高だったんじゃないかと思います。でもマリュウドの滝までトレッキングした時は結構運動するのでちょうど良い温度だった気がします。

マリュウドの滝

一応レンタカーを借りて同じアクティビティを楽しむことは可能なんですが、2人ぐらいならツアーに参加したほうがお値段的には良いのかな、と思います*8。あとトレッキングで結構体力使うのでみんなバスの中で眠ってたので運転する人がつらいかも。それとツアーだと約1日同じ人たちと一緒に行動するのでトレッキング中に「これ急いで帰らないと船にまにあわなくないですか？」「ほんとだ！」みたいにみんなで急いで帰ったりしたのでそれもなんだか楽しかったです。

スニーカーのほうが歩きやすいのですが靴の汚れが気になる方や歩きづらい靴の方には長靴の貸し出しもしているとのこと。写真は少し汚れた私のスニーカーです、ぬかるみ時々あったのですが全部避けれたらこれぐらいで済みます。

西表島はとにかく絶景でした。世界自然遺産への登録を目指しているのでもしかしたら今後制限がかかったりするかもしれないですし、登録されたら今度は人がいっぱいになると思うので石垣島に来たら一度行ってみるといいと思います。

オススメのごはんどころ

• 辺銀食堂
• 島の食べものや 南風(ぱいかじ)
• ツル商店

辺銀食堂

県産豚のレモングラス丼　

ランチで利用しました。11:30に開店で、私は11:40頃訪問したのですがすでに満席でした。なんですが名前を伝えると席が空いたら電話で連絡してくれるので便利です。近くにユーグレナモールがあるので散歩ができます。後日13:00頃訪問したときは空いていたのですが、お店の人曰く「急に団体さんが来るので何時頃が空いている、というのはわからない」との事です。まあでも待ってれば空くので気長に待ちましょう。夜は予約制のようです。

島の食べものや 南風(ぱいかじ)

View this post on Instagram

A post shared by @drunkard.tokyo

www.instagram.com

ここの料理はとても美味しかったです。他にも2件ほど飲み歩きしていて、そこも十分美味しかったのですが南風を訪れた時に「ここよりも良いお店を見つけるのは難しい」と判断して次の日も訪問しました。ちなみにこのお店はたまたま入店したのですが、地元の人でもおいしいと評判のお店らしいです。

ツル商店

View this post on Instagram

A post shared by @drunkard.tokyo

www.instagram.com

夜散歩していたときにたまたまツル商店の前を通った時に私の呑み屋レーダーが反応したので飲む予定なかったのですが急遽潜入捜査しました。スタッフさんや常連さんがとても気さくで私に声をかけてくれました。色々と石垣島の事を教えたもらえて楽しかったです。

というわけでこの夜は2名のスタッフさんと3名の常連さん、合わせて5名の現地の人とお話ができました。なんですけどみなさん石垣島に移住してきた人ばかりでした。実は石垣島って移住してくる人が大変多いそうです。ちなみに住処も仕事も「一人でお酒を飲んでいたら勝手に見つかる」との事でした。住まいは不動産屋で探すよりも誰かの紹介の方が効率が良いらしいです。そして仕事は選ばなければいくらでもある、との事です。実際石垣島に来ればわかるんですけど団体客がすごく多いです。ホテルとかは年中てんやわんやしているそうです。

石垣島のコーヒー事情

実は石垣島に来て、ずっと気になっていることがありました。それは「コーヒー薄すぎるな...」ということです。私は結構酸味が強いコーヒーをブラックで飲むのが好きなのですが、ちょっと私の好みとは合わなかったです。強いて言えば A&W*9のコーヒーが一番美味しいと思ってしまいました。

という事を前述のツル商店のスタッフに嘆いたところ以下のお店をおすすめしてもらいました。

• 和居津
• coral tree cafe
• MAHINA MELE / Lino coffee & espresso

というわけで MAHINA MELE / Lino coffee & espresso に訪問しました。とても美味しいコーヒーだったし、洋服屋さんとセットになっているお店でなかなか感度の高いお店だなと思いました。恵比寿とか代官山にお店がそのままやってきもて違和感がないと思います。

感度の高い洋服たち

感度の高いカフェスペース

お店を教えてもらったのが出立前夜だったので、飛行機の搭乗時間の都合上 MAHINA MELE にしか行けませんでしたが次回他のお店にもお伺いしたいと思います。

まとめ

というわけでスギ花粉とヒノキ花粉が存在しない石垣島で1週間ノマドしてきました。石垣島は昼の日差しはとても強烈でした案外朝と夜が肌寒かったです。でも花粉に関しては3日目ぐらいから症状がなくなりました。最高。

滞在してすぐにノマドする場所も見つかったし、おいしいお店も開拓できたし、気分転換したい場合はたくさんアクティビティがあるしでずっと快適な1週間でした。そして石垣島はなんだか楽しそうに働いている人ばかりでした。すっかり石垣島が気に入ったので花粉の時期に関わらずらまた行きたいと思います。

こちらからは以上です。

*1:最短で即日取得が可能

*2:現地オプショナルツアーの予約サイト

*3:バス代は返還されません

*4:みなさん足元が濡れないように服をまくしあげている間に水着を履いていた私が一番最初に上陸しました

*5:swiftの案件に関わる事になったので勉強しないといけない

*6:Google Map だけに頼ると位置情報はばっちりだけど方角があさって。最終的にカーナビで向きを確認しつつ、Google Map と併用する事にした

*7:後述しますがツル商店というお店で現地の人と少しお話して知りました

*8:無料のバスもあるみたいですが、見た感じそんなに本数が多くない

*9:沖縄のファーストフードのチェーン店

Meguro.es # 20 @ Drecom で LT してきました

最近フロント界隈の勉強会に参加するようになったのですが、とある勉強会に来ていた人に「他にどんな勉強会に行っているんですか？」と聞いたところ Megro.es を教えてもらいましたので参加してきました。

meguroes.connpass.com

スポンサー

今回の会場は株式会社ドリコム様が提供されていました。ありがとうございます。 そして個人スポンサーもいらっしゃったそうです。ありがとうございます！

会場の雰囲気

思った以上に参加者が多く、お酒も一応飲みながら〜という事でしたが割とみなさん真面目な雰囲気(?)でした。参加者がお酒飲みたい人が少なめだったからだと思うのですが、割と厳かな雰囲気になっており、私は少し緊張しながらLTしました。小心者の登壇者の為にも、参加者の皆さまにはもっと出来上がって頂けば幸いです。

話した内容: VuePress で Blog を作る

https://okamuuu.com/talks/2019/2019-04-04.megro-es20@Drecom.html

Blog を書くのにオレオレCMSから始まり、Gatsby, Nuxt.js, VuePress と色々なツールを使っていたのですが、現時点では VuePress が一番気に入っているのでそれを使っています。なんですがテクニカルドキュメントを書くように最適化されているツールなのでそれを Blog のように振る舞うようにカスタマイズした、という話しです。

VuePress

そんな中、今度は VuePress という新しいツールが発明され、CSS がとても綺麗だったんで気に入っています。今回 Blog 化をする方法を紹介していますが実はプラグインがすでに存在します。 @vuepress/plugin-blog@next なんですが、まだ alpha 版なのでドキュメントがほとんどなく、結局ソースコードを読んだ結果自分でカスタマイズした方が良さそうだと思いました。

そのとき得た Tips を共有しようと思い登壇したのですが、大事なのは以下2点

• module.exports が返すのは plain JavaScript object である必要があるが、オブジェクトを返すならば関数をセットでき、その場合は引数に options, ctx を受け取ることができる
• life cycle に ready という hook 関数が存在しており、options, ctx を引き渡すことができる

module.exports = (options, ctx) => {
  // 最終的に plain object を返せば OK
  return {
    ready() {
      const { pages, themeConfig } = options
      // pages や themeConfig の設定をここで頑張る
    }
  },
  ...
}

上記の原理を覚えておくと結構カスタマイズできると思います。

LT一覧

以下各LTの内容です。内容間違えていたらごめんなさい。

Gatsbyで導入事例をバシバシ読めるSPAなLPを作った話 @kikunantoka

board gameを趣味で作成されている方のLT.PHPで動的に動いていたLPが重くてたまに落ちるので Gatsby.js + Netlify にしたお話。

React.js のような View component はデザインが関数化できて社内の複数のサービスで共通のレイアウトを担保できるのでとても良い改善な気がします。Netlify は何も考えなくても(?) deploy できるし https にするの簡単だし私も気に入っています。

automatically build のお話は私知らなかったのでとてもタメになりました。デフォルトで Every pull request gets deployed in its own context with a unique URL. となっていて、勝手にネット上に PR 時のデータが公開され、削除する為には 一度全て削除する 必要があるそうです。

それから計測した結果、Gatsby にしたことによって SEO が悪くなったことはない、という事でした。

react-redux code reading @sadnessOjisan

ライブラリのコードを読むことによって、パフォーマンスチューニングの手法が理解できるようになったというお話。redux のコードを読むのは大変なのですが star の数が大きいライブラリを読むのはとても良い勉強になるので良いと思いました。

パフォチューって言葉、私も言いたいです。ちなみに unstaed と typeless が最近登場しています。

VuePress で Blog を作る @okamuuu

私のターン

.d.ts を解析して破壊的変更を検知する @L_e_k_o

話が難しくてよく分からなかったのですがソースコードから API Document 生成することができるのだったらその処理を利用してコードの差分だけで feat, chore, fix, test, docs みたいな commit prefix を自動的に判別できるかもしれない、というお話かな？

もしかしたら fix, test, doc みたいな分類はできるかもしれないし、それだけでも使い所あるのかも、デモが未完成らしいので続編を期待

自分の結婚披露宴のために Vue.js と firebase で画像投稿サービスを作った話 skmtko

Vue.js + Firebase で画像投稿サービスを作ったそうです。結婚式でプランナーからフォトシャワー(10万円)の提案を聞いて「自分で作れそう、というか作りたい」という非常にエンジニアらしい動機でサービスを作った時の体験談。

トラブルがあって現実はそんなにあまくなかったという話も面白かったのですが、「親族が割と楽しげに自分のサービスを使ってくれた」という話しを聞いて密かに胸熱でした。

そしてリサイズ大事すよねえ。

Storybook とスナップショットテストで API開発の完成を待たないフロント開発フロー @_sisisin

API開発の完成を待たないフロント開発フロー、というのはほとんどの人が同様の状況にはならない気がするのですが...

reg-suit という component の差分を 画像 として比較するツールのようです。私は知らなかったツールですがこれはなかなか良さそうです。canvas が微妙に同じ結果にならない、といった問題はあるそうなのですが、これによって リファクタやり放題 という現場を作り上げたとか。言葉にすると簡単だけどそこそこの統率力がないと出来ないと思うので強いチームだと思いました。

ただ 画像の差分を計算するのは重たい処理だと思うのですが Local PC でもストレスなくできたりするのかな？機会があったら試してみたいです。

JavaScript + Docker の知見@odan3240

開発環境を Docker にした場合ホストPCで編集した内容を container に反映させる Tips を紹介。全部 Docker でやろうとすると結構大変らしいです。VSCode で補完させるためには node_modles の扱いを気にしないといけないし node-gyp とか不安？

Docker は便利なんだけどどこまで頑張るのが便利なんでしょうね。私も一時期は仮想環境を用意しないエンジニアはダメな意味で怠惰だ、と思っていましたが iOS のデバックの時にネットワークの設定が面倒すぎて「やっぱ仮想環境でなくてもいいかな」という風に趣旨替えしました。

個人的にはサーバーサイドの API だったり、デザイナーに作業してもらうための storybook の提供だったりは Docker があったら便利だと思いますが、フロントで Docker にするとコストがかかるんだったら頑張らなくてもいいんじゃないかと思いました。

今日得た知見

• netlify の automatically build に注意
• reg-suit すごい

あとそれから

こちらに公式な記事があります。過去の記事も見れるので興味のある人は参加してみてはいかがでしょうか?こちらからは以上です。

https://meguro.es/posts/meguro-es-20

VuePress v1.0-alpha で Blog を作る

v1.vuepress.vuejs.org

あらすじ

VuePress の default theme が美しいのでこれで Blog を書きたいと思いました。

VuePress とは

コンセプトは以下2点です。

• Vue component を使用した Theme を扱う最小構成の静的サイトジェネレーター
• 技術的な文章を書くために最適化された default theme を提供する

一度読み込まれたHTMLは、それ以降 Single Page Application のように振る舞うためレンダリングは高速ですが、最初のHTMLにコンテンツを書き出しているので SEO との親和性も高い CMS です。

この振る舞いは nuxt generate と gatsby build と非常に良く似ています。

使われている技術と似ているサービス

Vue, Vue Router, webpack が使用されています。　

VuePress を使ってドキュメントを書く

VuePress を Default Theme を使って利用する場合、必要な作業は以下の通りです。

• defaultTheme の振る舞いを .vuepress/config.js で設定します。
• Markdown 形式のテキストファイルを追加します。

Blog 化するために必要な事

VuePress を初期状態で使う場合、ナビゲーションの機能が不十分です。今回私が VuePress を Blog 向けに使う為に、以下の２点の作業を行いました。

• BlogIndexPage を追加し、記事一覧を表示する
• sidenav に各記事へのリンクを動的に生成する

BlogIndexPage を追加

.vuepress/components/PostIndex.vue を追加します。

<template>
  <div>
    <div v-for="post in posts">
      <h3>{{ post.frontmatter.title }}</h3>
      <p>{{ post.frontmatter.description }}</p>
      <p><router-link :to="post.path">Read more</router-link></p>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    posts() {
      return this.$site.pages
        .filter(x => x.path.startsWith('/posts/') && !x.frontmatter.post_index)
        .sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date));
    }   
  }
}
</script>

現状だと Default Theme の Header や Sidebar などを override しづらい構成になっています。 自由にカスタマイズすることも可能なのですが eject する必要があります。まだ VuePress が alpha 版ということもあるので Theme に対するカスタマイズは避けたほうが賢明かもしれません。

ただし、上記のように Page 内に新たに Component を追加する場合は割と簡単です。

追加した PostIndex component を利用して記事一覧ページを作成するには /posts/README.md を以下のようにすればOKです。この例では記事一覧ページの幅を広げたいので pageClass を指定しています。 指定した class の CSS は.vuepress/styles/index.styl に記述をすれば適用できます。

---
post_index: true
pageClass: post-index
sidebar: false
---
<PostIndex />

Sidebar を Blog 風にカスタマイズする

.vuepress/config.js に以下のように記述をすると Sidebar のカスタマイズが可能です。ただし Blog の Post のように何度も記事が追加される場合、都度このようにハードコーディングを行うのは煩雑です。

module.exports = {
  themeConfig: {
    sidebar: [
      { 
        title: '2018',
        children: ['/posts/2018/xxxx', '/posts/2018/yyyy']
      },
      {
        title: '2017',
        children: ['/posts/2017/xxxx', '/posts/2017/yyyy']
      }
    ]
  }
}

Life Cycle の中で ready 関数が Hook されているので config を動的に変更することができます。私は年ごとに記事をまとめたかったので以下のようにしました。

module.exports = (options, ctx) => {
  return {
    ready() {
      const { pages, themeConfig } = options

      const items = _.orderBy(pages, 'frontmatter.date').reverse()
      const sidebar = []
      const posts = items.filter(p => p.frontmatter.title && p.frontmatter.type !== 'talk')
      
      for (let i = 0; i < posts.length; i++) {
        const post = posts[i]
        const m = moment(post.date)
        const year = m.year()
        if (!sidebar[year]) {
          sidebar[year] = []
        }
        sidebar[year].push(post.path)
      }
      
      const years = Object.keys(sidebar)
      themeConfig.sidebar = years.sort().reverse().map(year => {
        return {
          title: year,
          children: sidebar[year].map(item => item)
        }
      })
    }
  }
}

まとめ

というわけで Default Theme に少しだけ Component を追加していますが、このようにして Blog 風にカスタマイズすることができました。VuePress は非常に美しいデザインで、技術的なドキュメントを作成するのにぴったりだと思います。

以下、VuePress を使った私の Blog です。海外進出を目論んでいるので英語で書いていますが*1 VuePress で書き出されているのでよかったらご覧になってください。

Blog: https://okamuuu.com/

ソースコード: https://github.com/okamuuu/okamuuu.com

*1:文法があっているかはわかりません

We Are JavaScripters! @30th でLTしてきした。

wajs.connpass.com

JavaScriptを学びたい、もっと知りたい人のためのゆるくつながるというコンセプトの勉強会で発表してきました。

どんな会だったのか

勉強会だけどお酒を飲みながらお話ししましょう、という会です。基本的にフロントエンドの仕事をしているか、もしくはフロントエンドに興味がある人が集まっていたと思います。

何を話したのか

WEB では認証周りを Firebase Authentication で実装するととても簡単だったので React Native でも同じぐらい簡単だろうと思っていたら意外と大変だったのでそれを共有したいと思いつつ、いや、みんなも同じところで手こずるはずなのに誰もその事についてブログに書いていない、他にいい方法があるかもしれない。

という事で共有しつつ、英知を授かりたいので登壇しました。

他の方のLTについて

LT2 Vue でのCSSアニメーションの話 @daitasu

LT の2番手(1番は私)、ここでハプニングが発生し、プロジェクターが死亡。やむなくネット上の資料をそれぞれのPCで閲覧しつつ、合図に合わせて次にページに進むスタイル。

最後のデモで無事プロジェクターが復旧し、見事なオチがついていました。たぶん今後 Atomic Design の話がでるたびに原子が走るを思い出す気がします。

LT3 記事作成ツールのフロントエンドをNuxt.js × Atomic Designでリプレイスしている話 @comy

jQuery x Grunt でゴリゴリしていたサイトをリプレイス。Atomic Design は私も好きなアイデアなので聞いていて面白かったです。state 持って良いかどうかは好みの問題とかありそうですけど、ハンバーガーメニューなんかの state の管理は component に押し込めた方が楽ですからねえ。

LT4: 反復処理に速さを求めて @camcam_lemon

反復処理で本当に一番早い書き方はどれなのか？という謎の競技を開催し、それを共有して下さいました。 jQuery が謎に調子が良かったりして、何か特別な処理を入れているのかな？と思ったりしてとても興味深い話でした。まあ私はどれが早いかあんまり気にしないので、それゆえにこういう話は聞くのが楽しいです。

LT5: スポンサーLT（株式会社レトリバ様）

引っ越ししてまだ1か月ということなのですがそんな中で会場の提供をしてくださいました。会社が行なっている事業の概要をLT形式で紹介してくれました。

LT6: 無思考型個人開発のススメ @skmt3P

個人開発をするときは考えないといけないことがたくさん出てくるので考えなくて良いことは考えないようにしましょう、というお話し。例として Prettier と Lint のようなツールを活用しましょうというお話し

LT7: 『if文のはなし』 @ticktakclock

JS の if 文は true/false の判定ではなく、 trushy/falsy という非常に曖昧なものだったという事に気付かされました。私は普段型が無い言語しか触らないので面白いトークでした。本業が　Android ということであまり私の周りには居ないタイプの人だったので色々と質問させて頂きました。

ちなみに Android の勉強会は Shibuya.apk がおすすめらしいです。フロントエンドの勉強会を一通り回ったら今度はそちら方面の勉強会に参加しようと思います。

LT8: 勝手に技術書でビブリオバトル「JavaScriptで学ぶ関数型プログラミング」 @sadnessOjisan

最近はすっかり技術書を読まなくなってしまったので、こういうLTは面白かったです。ビブリオバトルという概念も初めて知ったのですが、こういうのを飲み会でやったら面白いかも。こういう発見ができるのも勉強会の魅力です。

LT9: On the Evolution and Change of Riot.js v4 @kuwahara_jsr

Riot.js v3 => v4 かなり変更があるらしく、書き直しが必要になってくるので注意が必要とのこと。インターフェースが React に似てきたとか？

私は React.js と Vue.js　を単体で使うことは少なく、 react-router だったり、 Nuxt.js だったりと、SPA を実装するときに使うケースが多い、ということもあるので Riot.js はあまり選択肢に入ってこないんだよなあ。

LT10: もっと画像を壊した話 @chikoski

jpeg はデータが壊れても無理やり表示することができるフォーマットなので動画を jpeg にしてちょっとデータに細工して連続再生したら面白いコマ送り動画が完成。

WEB Browser でゲームをレンダリングするようなお仕事をされているのかな？「画像を壊すときは Worker を使ってブラウザとは違うリソースを使っている」とのこと。

worker-dom　というライブラリを使っているそうです。 worker から DOM をレンダリングできる？という不思議な話をしていました。

github.com

フロントエンドのエンジニアを名乗っていますが、そこまでやったことなかったので今度実装してみたいと思いました。

あとそれから

詳しいレポートしてくれてる人が他にもいらっしゃったのでそちらの記事をご覧ください。

https://ozaki25.hatenadiary.jp/entry/2019/03/22/213445

会場について

株式会社レトリバさんの提供でした。新宿駅から割と近いのでなかなか便利な場所でした。途中でプロジェクターが繋がらなくなる、というアクシデントが発生しましたがその場で対応頂き、無事全員登壇できました。ありがとうございます。

https://retrieva.jp/

会場を貸して欲しい

運営の方々によると会場探しが結構大変らしいです。以下、要件。

• 30-100人くらい
• プロジェクター/マイクがある

まとめ

今回の勉強会で新しく手に入れたナレッジは以下の通りです。

• JS の if 文は true/false の判定ではない
• ビブリオバトル
• worker-dom

ちなみに

ネタがないから登壇できない、というのはごもっともですが、登壇しなきゃいけないからなんか作る！みたいな登壇ドリブンディベロップメントは意外と捗りますね。

というわけで次回は目黒界隈の勉強会に向けてTDD*1したいと思います。こちらからは以上です。

meguroes.connpass.com

*1:登壇ドリブンディベロップメントのことです。この勉強会の主催者から教わりました。

カレントディレクトリにあるファイルをあるディレクトリにまとめるために追加したディレクトリに git mv したい

expo init で作成した雛形を一つのでディレクトリにまとめた時のメモです

git mv -n ./!(expo) ./expo
git mv ^(expo) ./destination_folder

https://stackoverflow.com/questions/33002612/move-all-files-of-current-directory-into-subdirectory-and-maintain-history