Baby steps to migratory bird

元半導体系エンジニア、今Webエンジニアの雑記

【参加メモ】第1回 Nuxt.jsハンズオン 初心者編

最近Vueのチュートリアル触ったし、Nuxtも触ってみたいなと考えてたところでライブ配信ありの情報を見つけたのでリモート参加してみた。

frontend-temple.connpass.com

ハンズオンの資料はリンク貼っていいかわからないので貼らないけれど、 イベントページからslack参加すると当日のハンズオンチャンネルがあるのでそこで見られる (エラーの対応ログも残ってるので良きです)。

配信動画は今は見られないみたい。

参加のモチベーション

Nuxtなんぞ?を触りながら感じたい

Nuxtの特徴

  • 環境構築が楽
  • ディレクトリ構成が決まっている
  • Vue.jsはインターフェースが整っているので、誰でも同じ様に書ける。
  • Sassが使える
  • HTMLそのまま使える(JSX書かなくて良い)
  • 動きをつけやすい
  • モジュールが便利
  • 静的サイトジェネレータ

途中で

Nuxtは学習コストが低いわけではなく、
インターフェースが整っているだけ

というコメントがあったのはなるほどなぁという感じだった。

ハンズオンの流れ

最初にサーバー起動して以降は ほぼVueのハンズオン的な感じで進み、 こちらも流行りのNetlifyを利用して静的サイトをデプロイして終了。

といった感じだった。

Nuxtを使いこなす、というところまではいかないけれども、 最後にデプロイできる体験はハンズオンとして良いなぁと思う。

まとめ

  • まだVueをまともに触ったことない人はまずはVueからちゃんとやった方がいい感じ。
  • Nuxtを触りたいモチベーションって普段フロントでVue触ってて、サーバーサイドのハードル下げつつアプリを作りたいところにあるのでは。
  • 逆に普段Railsなどサーバーサイド触ってる立場からすると、そこにVueを組み込むのが早いと思う。

    →なのでちゃんとやるなら、自分もまずはVueかなと。

【参加メモ】第一回 エリック・エヴァンスのドメイン駆動設計 読書会

最近DDDの勉強会をよく見るなぁ、と機運が高まっていたので参加

evans-ddd-book-read.connpass.com

今回は初回ということで全体構成の紹介とまえがき・第1章の解説でした。

主催者の@moaieeeさんが時折笑いを交えながら、全体的に緩やかな雰囲気で進められました。

詳細な説明よりは、イメージを掴んでもらうようなゆるいスタイルの解説的な感じで進みそう(な予感)です。

全体構成

1,2部の話は正直つまらないかも、とのこと

自分の理解度に応じて参加回を決めてOK

  • 1部 用語の定義と動きの紹介
  • 2部 モデル駆動開発の基本構成の紹介
  • 3部 実用的なモデルの設計と実装の話
  • 4部 より大規模な設計の話

まえがき

  • モデルとは何か?

    あるものを抽象化したもの

image.png (109.8 kB)

  • モデルを蒸留する

    モデルまでだけでなく、実装までやってくぞ、という話

第1章

構成

  • やり方

    モデルを取り出す5つのポイント

  • モデル化

    モデルを取り出す流れ

      PCB回路の例
    
  • 実装化

    モデルを適用したコード

      貨物の運搬の例
    
  • モデルを取り出す

    〜知識を噛み砕く〜

PCB回路の例

  • ヒアリングから徐々にモデルを作り出していく

  • 人により言葉の定義が違う

  • ヒアリングを進めるうちに目的が曖昧になりがち。。

    →実は、回路の遅延回数を知りたい。それを表すモデルが欲しいことがわかる。

  • ここでは何が言いたかった(と思われる)こと

    設計者へのヒアリングを繰り返すことで、知識を噛み砕き、 モデルを洗練させていきましたよ、という例。

  • 最初から完璧なモデルはできないので、継続的な学習により深いモデルが出来上がっていく。

【参考】

船に載せる貨物の例

最初の簡単な例を作る
(航海に貨物を載せる)
↓
制限の追加
(最大予約数を実装に反映)
↓
新たな制限の追加
(さらに実装に反映)
↓
(洗練を繰り返す)

【参考】

早くも2回目が公開されてる

evans-ddd-book-read.connpass.com

こちらも気になる ddd-community-jp.connpass.com

【Ruby】putsの返り値はnilらしいと聞いて色々みてみた。

きっかけ

Railsチュートリアルを眺めててたら

4.2.4 メソッドの定義の演習3で

palindrome_tester("racecar")に対してnil?メソッドを呼び出し、
戻り値がnilであるかどうかを確認してみてください 
(つまりnil?を呼び出した結果がtrueであることを確認してください)。
(以下略)
def palindrome_tester(s)
  if (条件。問題なので省略)
    puts "It's a palindrome!"
  else
    puts "It's not a palindrome."
  end
end

と書いてあり、なんでだろ?と思ったので調べてみた。

また、 注記13にもこんなことが書いてある。

実際には些細な違いがあり、pメソッドは画面出力だけでなく戻り値も
オブジェクトになります。
しかし、putsメソッドの場合は引数によらず必ずnilが戻り値になります。
(以下略)

リファレンスを見てみる

module function Kernel.#putsより

puts(*arg) -> nil

引数と改行を順番に 標準出力 $stdout に出力します。 引数がなければ改行のみを出力します。

引数が配列の場合、その要素と改行を順に出力します。 
配列や文字列以外のオブジェクトが引数として与えられた場合には、 
当該オブジェクトを最初に to_ary により配列へ、 
次に to_s メソッドにより文字列へ変換を試みます。
 末尾が改行で終っている引数や配列の要素に対しては puts 自身 は改行を出力しません。

なるほど標準出力されるのか〜

元々標準出力に向けてアウトプットするためのメソッドであり、返り値を得るようにはできてないですよってことなのだろうか。

似ているメソッドとして、module function Kernel.#pも見てみる。

p(*arg) -> object | Array

引数を人間に読みやすい形に整形して改行と順番に標準出力 $stdout に出力します。
主にデバッグに使用します。

引数の inspect メソッドの返り値と改行を順番に出力します。つまり以下のコードと同じです。

print arg[0].inspect, "\n", arg[1].inspect, "\n", ...
整形に用いられるObject#inspectは普通に文字列に変換すると
区別がつかなくなるようなクラス間の差異も表現できるように工夫されています。

p に引数を与えずに呼び出した場合は特に何もしません。

こっちは出力した情報を色々抜き出したりできるよう、返り値がオブジェクトになっているっぽい。

試してみる

Rails上で比較してみた。

  • メソッドではメッセージ作成のみ。viewで<%= %>
# 例えばapplication_helper.rb
def thanks_message(user_name = "ユーザー")
  "#{user_name}さん、ありがとうございます"
end

# 例えばthanks.html.erb
<div class="thanks_message"
  <%= thanks_message(@user.name) %>
<div>

<結果> 当たり前だけど(ユーザー名)さん、ありがとうございますと表示される。

  • メソッド内でメッセージをputsして、それを<% %>viewに埋め込む
# 例えばapplication_helper.rb
def thanks_message(user_name = "ユーザー")
  puts "#{user_name}さん、ありがとうございます"
end

# 例えばthanks.html.erb
<div class="thanks_message"
  <% thanks_message(@user.name) %>
<div>

<結果> viewには何も表示されない! 一方、rails sしてるconsoleの方を見てみるとこっちに出力されてた。

色々試したが整理するとこんな感じ↓

メソッド内の出力メソッド↓/viewの表記→ <% %> <%= %>
なし 非表示 表示
puts 非表示 非表示
p 非表示 表示

(pでも表示できるけど無駄感ハンパない。。)

余談

そもそも<%= %>は何を出力してくれるのか

結果を出力

なるほどわからん。

  #   <%# WRONG %>
  #   Hi, Mr. <% puts "Frodo" %>

はい、ごめんなさい。。

ここらへんだろうか https://github.com/jeremyevans/erubi/blob/master/lib/erubi.rb#L129-L133

when '='
          rspace = nil if tailch && !tailch.empty?
          add_text(lspace) if lspace
          add_expression(indicator, code)
          add_text(rspace) if rspace
# Add the given ruby expression result to the template,
    # escaping it based on the indicator given and escape flag.
    def add_expression(indicator, code)
      if ((indicator == '=') ^ @escape)
        add_expression_result(code)
      else
        add_expression_result_escaped(code)
      end
    end

    # Add the result of Ruby expression to the template
    def add_expression_result(code)
      @src << " #{@bufvar} << (" << code << ').to_s;' // to_sで文字列に変換
    end

    # Add the escaped result of Ruby expression to the template
    def add_expression_result_escaped(code)
      @src << " #{@bufvar} << #{@escapefunc}((" << code << '));'
    end

結局の所to_sで文字列に変換してるということらしい。

to_sはObject classのメソッドなので、何でも文字列として返す(はず)。

例えば対象がarrayでも

[1, 2, 3].to_s
=>"[1, 2, 3]" # 返り値はこんな文字列になる

まとめ

  • putsの返り値はnil, pの返り値はarrayオブジェクト
  • viewに出力するときはオブジェクトを用意して素直に<%= %>で書こう

技術書典5 ゆるく参加したレポ

この1ヶ月続いた3連休シーズン最終日は技術書典5でした。

前回に引き続き、今回も一般参加してきたのでそのレポです。

techbookfest.org

事前準備

今回は初めて池袋サンシャインシティで開催されました。

会場の広さが前回までの秋葉原UDXと比べて3倍とのことで参加サークルも増加、事前のサークルチェックは必須です。

公式ページのチェックリストで事前チェックを入れておくと、会場地図にチェックしたサークル位置がハイライトされてとても便利でした。

f:id:roo_oregon:20181008224019p:plain

技術書典へ向かう

前回「DNSをはじめよう」で話題になった@mochikoAsTechさんがとてもわかりやすい記事を書かれていたため、会場までスムーズにいくことができました。

ちょっと誤算だったのですが今回は整理券がなかったため(行きがけの電車でtwitter眺めてて気づいた)、予想外に行列に並ぶことになりました。ちゃんと事前チェックおけば良かったなぁ、というのが今回の反省です。

入場前行列に並ぶ

なんだかんだ早め(10:20くらい)に着いたので、11:20くらいには入場できました。

会場の地図をチェックしたり、出展者さんの記事を読んでたりしたので、そんなに苦ではなかったかな。

今回の戦利品紹介

私は人気サークルの物理本にこだわりはなかったので、端から順繰りまわりました。

戦利品はこんな感じ↓

f:id:roo_oregon:20181008222608j:plain

f:id:roo_oregon:20181008222526j:plain  

技術書典はあまりRuby本がないのですが、最近気になるJS(Nuxt, React, etc.)やかわいすぎて一目惚れした@tdakakさんのシールや、最近輪読会でお世話になっているとらLabさんの薄い本(無料!)、よちよち.rb関連でお世話になっている@pupupopo88さんの教育心理本など色々購入しちゃいました。

ラインナップを見ると、私の最近の課題がだいたいわかりますね 汗

初めて行く人向けメモ

#技術書典とか見てるとめちゃ混んでそうだし尻込みしてしまうと思うんですが、ゆるく参加するなら〜的なメモです↓

時間帯

物理本にこだわらないなら、午後2時くらいから参加でOK

DLカードを用意している出展者の方が多いので、よほど遅い時間帯でなければ大抵の本は手に入ると思います。

また後からBOOTHなどで買える本も結構あるので(特に人気の出展者さん)、当日手に入らなくても大丈夫。

持ち物

ここら辺持っていけばOKかと。

  • 小銭
  • 飲み物
  • 軽食
  • タオル

小銭に関しては簡単後払いシステムを利用するとQR読み込みで購入できるのでかなり便利です。

買い終えたら

ハッシュタグをつけて戦利品写真をツイートしてみましょう。参加した感がアップするし、出展者の方が反応してくれるとテンションも上がります 笑

まとめ

前回は圧倒的ぼっち参加でしたが、今回は知り合いが出展者として参加していたり、会場撤収後も戦利品お披露目会したりなど、 かなり楽しかったです(・ω・)b

 

 

輪読会で利用した「とらLab」が良い感じだった

きっかけ

最近よちよち.rbで知り合ったメンバーで「Webを支える技術」の輪読会をやっているのですが、毎週開催のため毎度会場どうしよう問題がつきまとう。。

そんななか見かけたのがこちらのツイート

エンジニアは無料で使える、だと、、

しかもイベント利用でも無料、だと、、

行くしかない!( ゜∀ ゜)

というわけでこちらのフォームから申し込み (今回は@chinatz_さんがやってくれました) f:id:roo_oregon:20180929122637p:plain

https://news.toranoana.jp/64239

とらLabへのアクセス

とらLabがある秋葉原虎ビルは、銀座線末広町駅のすぐ近く。JR秋葉原駅からは少し歩きます。

入口前の張り紙 f:id:roo_oregon:20180929125907j:plain

とらのあな2ndに入ってすぐ右側のエレベータから4Fに上がるとすぐです。

とらLabの様子

少し早めについたところ、、

もう会場セッティングが済んでた。。!神対応! f:id:roo_oregon:20180929122950j:plain

会場に着いて感じたのですが、かなり落ち着ける雰囲気で(あまりとらのあな感はないかも)集中できそうな環境です。もちろんwi-fiもあります

せっかくなので会員カードも作ってみた。 f:id:roo_oregon:20180929123848j:plain

ウワサ?のプログラミング言語アンケート。Javaが多いのかな f:id:roo_oregon:20180929124141j:plain

Ruby勢力拡大しときましたw f:id:roo_oregon:20180929124324j:plain

誰でも書き込めるコミュニティノートもあります。 中身が気になる方はぜひ行ってみてください。 f:id:roo_oregon:20180929124507j:plain

直近のイベント f:id:roo_oregon:20180929131304j:plain

スケジュールの状況はコチラでも確認できます。 イベントで貸し切りのケースもあるため、訪問前に確認しておいた方が良さそうです。

技術書典5にも参加されるんですね〜

輪読会の様子

f:id:roo_oregon:20180929124811j:plain

ちらっと見えますがesaにまとめながら進めています。 輪読会の話はまた別記事で書こうと思います。

というわけで、ありがとうございました!

プロジェクタ、変換ケーブルなどもあり、勉強会を開くのに必要なものも一通り揃ってる良い環境でした(無料だし!)。

その場で次回の会場申し込みもdone(・∀・)

公式のハッシュタグはないらしいですが#とらLabにつぶやくと中の人も見てくれてるみたいです!

感想やシェアも歓迎とのこと

f:id:roo_oregon:20180929132646p:plain

iOS開発未経験だけどiOSDC当日スタッフしてきたよ!

この週末でiOSDC Japan 2018 Day3, 4の当日スタッフとして参加してきたので、そのレポ

f:id:roo_oregon:20180903230502j:plain

なぜか申し込む

普段RubyとJSしか触ってないけどゆるふわバスケメンバーと話してるとiOS界隈楽しそうとか、元ぺちぱー的にとむぞうさんがやる運営は楽しそうすぎでしょ、ということで機運が高まり当日スタッフに申し込んでみた。

そしてなぜか当たる

当選メール↓

【タイトル】
iOSDC Japan 2018: 当日スタッフ ご応募ありがとうございました

【本文】
BCCにて失礼いたします。

iOSDC Japan 2018実行委員会です。
こんにちは。

先日はiOSDC Japan 2018の当日スタッフへのご応募、ありがとう
ございました。

スタッフにて検討した結果、
当日スタッフをお願いしたいということになり、ご連絡させて
頂きました。

(中略)

それでは、よろしくお願い致します!

--
iOSDC Japan 2018 実行委員会

たぶん検討とかしてないよね

スタッフ顔合わせ

という名の飲み会

当日に向けて士気を高めた!

なぜかRubyの話ばかりしてた笑

Day3

主に受付をやりつつ、ヘルプの要請あればそこに入る、という動きをしていた。

朝からどんどんドーナツ

f:id:roo_oregon:20180903230217j:plain:w300

コーヒー職人の朝は早い

f:id:roo_oregon:20180903230411j:plain:w300

完璧なるドブ漬けオペレーション

f:id:roo_oregon:20180903230716j:plain:w300

バドワイザーがトビウオのよう

f:id:roo_oregon:20180903230828j:plain:w300

選びぬかれたQAチーム

f:id:roo_oregon:20180903230929j:plain:w300

お弁当めちゃうま!

f:id:roo_oregon:20180903231034j:plain:w300

懇親会

ビール瓶開けスキルがupした。

これがiOSでぃーすぃーだ!

f:id:roo_oregon:20180903231101j:plain:w300

もちろんクラフトビアも

f:id:roo_oregon:20180903231304j:plain:w300

いいにく

f:id:roo_oregon:20180903231508j:plain:w300

ネットワーク系ミサンガ

f:id:roo_oregon:20180903231551j:plain:w300

いいお寿司台

f:id:roo_oregon:20180903231717j:plain:w300

ハイタッチでお見送り

f:id:roo_oregon:20180903231833j:plain:w300

Day4

2日目ということ少し余裕ができ、 スタッフ業の合間に発表をいくつか聞いてみた。

iOSのことはよくわからないので知ってる人の話でも、ということでakatsukiさんの発表を聞いてみた。 自分にもかなりわかりやすかったし、記事をみると事前準備あってこそあの良い発表ができあがるのだな、とすごく参考になる。 akatsuki174.hatenablog.com

あとアンカンファレンスにいつもrebuildに登場するhakさんがいらして、とむぞうさんと古今東西ゲーム機談義をしてたのがめちゃくちゃ面白かった。

朝ごはん

f:id:roo_oregon:20180903231955j:plain:w300

止まらないゲームハードネタ@アンカンファレンス

f:id:roo_oregon:20180903232311j:plain:w300

クロージング

f:id:roo_oregon:20180903232159j:plain:w300

まとめ

iOSDCのことよくわからないまま参加したけど、スタッフ&参加者みんなで楽しいカンファレンスを作り上げようという雰囲気を感じつつ、楽しい2日間を過ごせました! 来年もまた参加したいです。

f:id:roo_oregon:20180903232107j:plain

【LTしてきた】WEBエンジニア勉強会 #08

タイトルどおりLTしてきたのでそのまとめ

8回目のWEBエンジニア勉強会に参加してきた。会場はアクアミーティングスペース渋谷

今回もテーマを決める前に勢いで5分枠に申し込んだ。LT駆動開発

web-engineer-meetup.connpass.com

発表について

www.slideshare.net

今回のテーマはGoogle Apps Script(GAS)とSlackの連携アプリ

最近仕事で業務知識について答えてくれるBotが欲しいな、ともんやり思っていたので、 週末にまず遊びで作ってみたものをまとめて発表した。

デモ

今回のLTでは初めてデモに挑戦してみた。 著作権的なアレがあるためアップロードスライドからは抜いたけど、 ポケモンのイーブイネタでSlackbotの動きをみせた。

今回はあらかじめ下のようなスプレッドシートを用意した。

f:id:roo_oregon:20180728151759p:plain

デモした画面をそのまんまキャプチャ

f:id:roo_oregon:20180728153823p:plain

デモではSlackの投稿を利用した「一覧表示」「説明取得」だけみせたけど、実は「登録」もできたりする。

f:id:roo_oregon:20180728154320p:plain

GASのソースコード

後で載せる予定

実装中あるある

  • トリガーワードを登録し忘れて反応がなく焦る
  • Slackへの投稿にトリガーワードを入れてしまい無限ループ
  • リンクを含めた投稿にサムネイルが表示されない→参考

みなさんの発表

ハッシュタグがメモ代わり #webエンジニア勉強会08 hashtag on Twitter

あとはいつも通りOSCAさんブログの勉強会レポートで!

すでにレポート書かれた方がいて、今回の感想を書いていただいてた。ありがとうございます!

blessed-rain.com

まとめ

発表やると打ち上げのビールがうまい(・∀・)

参考

@zuckey_17さんのブログ

これを読めば速攻で最初のアプリ作成までいけるので、まずは作ってあとで自分色に染めましょう

Google Apps Scriptを利用したSlack Bot作成の" Hello, World!! " Google Spreadsheet + Google Apps Script で Slack KPT Botを作ってみた

初心者がGASでSlack Botをつくってみた

おまけ

はてなブログのアイキャッチ設定とTwitterへの更新反映

アイキャッチ画像(記事のサムネイル) - はてなブログ ヘルプ

https://cards-dev.twitter.com/validator