2018-08-30

研究してました

毎日技術日誌

研究

昨日まではLTの準備やらだったので、今日は研究に時間を使っていました。

H2Oを使ってオプション切り替えてブラウザでの挙動を確認したり。

ChromeとFirefoxで違う挙動を示すことはよくわかったが、どのようなパケットのやりとりでそれが行われているのかというところを知りたいのでパケットキャプチャとかやって見る必要があるのかもしれない。

Wiresharkやろ？くらいの知識しかないのでお勉強の必要がありそうですねぇ。

という進捗。

mockサーバーを立ててみた

こっちは趣味の開発。ほとんどやる時間なかったので、json-serverをつかってモックサーバーを立ててみてた。

ブログをイメージして、postとpostに紐づくcommentがあるようなイメージのAPIサーバーを立てた。

json-serverとかいうくらいなので、当然jsonを書いて食わせても動くのだが(参考: おとといの記事)それはつらい。

そこでJSを読ませても動くということだったので、適当にランダムで作ってくれるような感じにしてみた。

module.exports = () => {
  const data = {
    posts: [],
    comments: []
  };

  const postsCount = 20;
  let lastComentsId = 0;
  
  for (let i = 0; i < postsCount; i += 1) {
    // Generate comment
    let commentIds = [];
    for (let j = 0; j < Math.floor(Math.random() * 5); j += 1) {
      const id =  ++lastComentsId;
      data.comments.push({
        id,
        article_id: i + 1,
        body: 'comment body',
        name: 'uutarou',
        created_at: new Date()
      });
      commentIds.push(id);
    }
    
    // Generate posts
    data.posts.push({
      id: i + 1,
      title: `TITLE ${i}`,
      body: 'hogehoge',
      comments_id: commentIds,
      created_at: new Date()
    });
  }
  
  return data;
}

だいぶ雑だが。(のちのちfaker的なのを入れてもう少し文章の量を確保したりしたい。)

これをjson-server index.jsみたいにしてやるだけでOK。簡単ですね。

雑談

土日は少しまとめて時間をとって趣味の方の開発を進めていきたい。

もともとマルチタスクに何かをこなすのは得意ではないので、本当は研究か趣味かに絞ってやっていくべきだとは思うが、息抜きとしてできる趣味をもっておくのも大事だし、このスタンスで続けていきたい。

今はスケジュール管理がガバガバなので、もう少しちゃんとしたスケジュールを立ててやっていく必要はありそうですね。

2018-08-29

LTでしゃべってきました！ #yuruhachi

毎日技術日誌

LTでしゃべってきました！

【さらに増席しました】第1回ゆるはち.it: PWAについてゆるく話す - connpass

こちら。

そしてスライドがこちら。

speakerdeck.com

PWAがお題なのに、「あんまりメリット無いのでは？」という話をしてしまって大丈夫なのか？なんて思いながらスライドを作ってたが、なんとなく同意を得られた気がする。

ただ、後々酒が入って考えてたが、もしこれがでんぱ組のメンバーのブログとかだったらホーム画面入れちゃうだろうし、結局コンテンツの種類次第なのかもなと思った。

あとは、いろんなサイトを運用してみて、どれだけの人がPWAとして使ってくれるのか、どんなサイトがそうなりやすいのかみたいな統計が取れるといいのかもとおもった。

あとはやっぱりPushですね。更新通知を送れるのはブログとして大きいと思う。現状iOSのSafariは対応してないとのことだったのでそこがなんとかなって欲しいがそんな日は来るのか…?

まだまだこれからの技術についてしゃべったり、手を動かしたりするのは楽しいですね…!

雑談

勉強会後

元バイト先のエンジニアの皆々様とお酒を飲みながら語らえた。

もう何ヶ月もお会いしてなかったので、その間にやってた研究やら趣味の開発やらの話をたくさんできてひじょーによろしかった。

あと、やっぱり何かしらの技術に触れるのって楽しいと思った。最近モチベーションが遥か彼方に飛んでいってたのでこれは大きい。それだけでも行ってよかった。

バイトを辞めた頃から考えると、だいぶ技術への取り組み方とか、ただ使うだけじゃなくてなんでやるのか考えることとか、とりあえず手を動かすこととかできるように(少しずつだけど)なってきた気がする。

もちろんまだ十分じゃなくて、もっとスピード感持ってやるとか課題はあるが、自分のやってきたことが間違ってなくてよかったという気持ちが溢れた。ちょっと泣きそうだった。

あと学生生活は半年、やることやっていける気がしてきた。

(モチベーションが落ちた時は何か面白そうなことやってる人たちの話を聞いたりするのがいいのかもしれないなと感じた。)

2018-08-28

json-serverとかいうのもっと早く知っておくべきだった

少しずつやる気を取り戻しているので、今日はいろいろやりました。

研究の件

中間発表以来進捗がどうにもいまいち状態だったのですが、とりあえず手を動かしてみようと思って、仕様策定当時いち早くHTTP/2に対応したH2Oを使ってパフォーマンス測ったりといったことをしてみました。

H2Oをローカルに入れるのは面倒だったので、サクッとDockerを使いました。

lkwg82/h2o-http2-server - Docker Hub

動かすところまではすんなりといったのですが、パフォーマンスに差が現れるケースがいまいち把握できず。

調べようにもHTTP/2の通信がわからなかったので、もう一回該当箇所のRFCを読んでみようかと思います。

フロントエンドのお勉強

今日はちゃんとやった。研究室のPC(Core i7 7700)でビルドするとMacだと1分近くかかる処理がものの数秒で終わって腹が立った。やはり性能の良いMacが欲しい。

フロントエンドだけ勉強したいのに外部のAPI叩いたりするところでどうしてもサーバー的なものを書かないといけないじゃないかと思っていたのですが、json-serverなるものを知った。

typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

これ。

以下のような感じのjsonを用意して

{
  "posts": [
    {
      "id": "id1",
      "title": "id1 title",
      "content": "id1 content"
    },
    {
      "id": "id2",
      "title": "id2 title",
      "content": "id2 content"
    }
  ]
}

食わせる

$ json-server db.json

以上でモックサーバーが立ち上がる。

叩いてみる。

$ curl localhost:3000/posts
[
  {
    "id": "id1",
    "title": "id1 title",
    "content": "id1 content"
  },
  {
    "id": "id2",
    "title": "id2 title",
    "content": "id2 content"
  }
]

すげえ。(idはFirebase的なのを意識してあえてstringにしてみたけどその辺もよしなにされている)

それだけではなくPOST/DELETE/PUTなどもできる。JSONに対して直接変更を入れてくれる。

これさえあればフロントエンドの開発にだけ集中できるやんけと思ってしまった。もっと早く知りたかった。(というかmockを使って開発するという思考に至っていればすぐ見つけられただろうに…)

これを使ってモリモリやって生きます。いずれはFirebase的なのを使って少しは実用的なアプリケーションを作りたいなぁ。