ゆるふわ技術日誌

エンジニア見習いの悪戦苦闘日記

資料作成などなど & Nuxt

今日やった事

資料作成

研究の発表用の資料を作ったりしていました。

ひとまず作り終えたものの、なにも知らない初見の人が見たらわかりづらいかもなーとか思った。

明日ボスに見せてみて様子見ることにする。

Nuxt

なにを思ったかNuxtの本を買いました。

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

そもそも、Vueにちらっと触ってみたらとても好感触だったので、ついでにNuxtもやってみようみたいな。

研究の息抜きにやるにはちょうどいい難易度なタスクかなと思っています。

Contextオブジェクトになにが入ってるのかとか、thisはなに指してるのかとか混乱しつつもちまちまやってます。

そんなにガチでやるつもりは無いけど、選択肢として持っておくと、ちょろっと何か作りたいときにめちゃくちゃ強そうだな、と感じた。

明日の予定 / やること

  • 研究(発表)
    • ボスの前で発表の巻

雑談

NuxtやったらNextもやるべき…?

Node学園祭2018に行ってきた

今年も行ってきました。Node学園祭。

nodefest.jp

今日はずっとROOM Bにいました。聞いたセッションの中から印象に残っているやつをいくつか。

JavaScript機械学習はじめよう

docs.google.com

TensorFlow.jsの話。

機械学習がそもそもわかってなかったのですが、それも含めてわかってすごく為になるセッションでした。

普段あんまり機械学習とか興味ないと思っていたけど、Webの話になると途端に興味が湧いてきて、なにか面白いものが作れないかなぁとか思った。

State of SEO for SPA

speakerdeck.com

SPAにおけるSEOの話。

いろんな手法があって、それぞれのメリット・デメリットがわかった気がする。

ちゃんとやるならDynamic Renderingがよさげということはわかったが、実際運用するとなるとなかなか面倒そうだなぁという印象を受けた。

実践GraphQL for クライアント側

speakerdeck.com

GraphQL自体は前に一通りドキュメントと実装をやってみた経験があったので、基本的なとこは頷きながら聞けた。

個人レベルで触っている分には困ったこととか特にないなぁと思っていたけれども、実際に回してみると多少は困りごとも発生するんだというのは気づきだった気がする。

その辺をどう解消するかとかも、今後GraphQLが流行っていく中で確立されていくのかなぁ。

貢献できるOSSの見つけ方

speakerdeck.com

超絶いい話だった…。

去年も似たようなことをこのブログに書いた気がするが、OSS文化って素晴らしいなぁと思った。

英語力とかには不安しかないけど、簡単なIssueとかならもしかしたら自分にもできるかもしれないので、積極的に挑んで行きたいと思った。

雑談

今年は去年より自分自身が成長したことを体感できた気がする。わかることが増えたというか。

一方で、わからないこともたくさんあって、まだまだ知識が偏っていることを実感した。

自分はまだまだだと思った。一個一個積み上げるしかないと思った。つらいけどがんばるしかないのだ。(?)

Vue.jsに入門してみた

今日やった事

Vue.jsに入門してみた

研究をしないといけないのですが、あんまり時間がなかったのと、かねてからやってみたかったのでVue.jsに入門してみました。

github.com

カレンダーみたいなのをライブラリ使わずに実装してみた。

f:id:uutarou:20181117234805g:plain

Vueの算出プロパティやメソッド、ディレクティブなどの基本的な操作を一通り試すことができたので、いいお題だったかなと思った。

ただ、JavaScriptのDateに対する理解が足りなかったので、いろいろと詰まってはMDNを眺めるみたいな形になってしまったのはちょっと残念。カレンダーの配列を作っているところ、こんな感じでいいのか無限に悩みながら実装したので、誰か綺麗な実装があったら見せてほしいと思った。

(全然関係ないけど)チェキ会に行った

結局研究やばいとか言いつつもオタ活してきたので、ログとして残しておく。

こんな感じ。元気がチャージされたので、明日からはちゃんと頑張って研究します。

明日の予定 / やること

  • 研究

雑談

楽しい1日でした。

103 Early Hintsを試したり

今日やった事

研究

午前しか時間がなかったので大した進捗はなく……。

github.com

こんな奴を作ってちょろっと試したりしてた。

103というHTTPのステータスコードがあって、レスポンスヘッダだけを先に送ることができる。

こいつとH2Oというwebサーバーを組み合わせることで、HTTP/1.1を喋るサーバーを使っていてもHTTP/2の機能であるサーバープッシュという機能が使える。

実際に動くか試したらちゃんと動いた。

あとは、前日書いたfluentdが動くDocker composeに少し手を加えた。Mongoに対する理解が足りなくて変な感じになってたところが修正された。

明日の予定 / やること

  • タイヤ交換
    • 自宅の車のタイヤ交換に持っていく(どうでも良い)
  • 研究
  • チェキ会
    • 行ってる場合じゃねえので行かないかも

雑談

もっと前からちゃんと方向性定めて研究しておくんだったなあwとか今更言っても遅い

Docker Compose + fluentdでNginxのログをmongoに流し込む

やりつくされてそうなネタですが、ちょっと研究の一環でログをうまいこと扱う必要が出てきたのでやってみました。

ひとまず実験として、Docker Composeを使って

  • Nginx
  • fluentd
  • MongoDB

を立ち上げて、Nginxのログをfluentdが拾って、MongoDBに流し込むということをやってみました。今回はログが複数のコンテナやノードに分散すると言ったことは考慮していません。

github.com

普通に、docker-compose upで上がります。

Nginxが8080で立ち上がるのでアクセスすると、数秒程度でMongoDBのadminデータベースのtestコレクションに書き込まれます。

8081番でWebGUIであるmongo-expressというのが上がっているのでアクセスすることで確認することができます。

f:id:uutarou:20181111223450p:plain

こんな感じ。ほぼPluginの説明から拾ってきてコピペしたものだが、fluentdのconfigはこんな感じ。

<source>
  @type tail
  path /var/log/nginx/access.log
  # pos_file /var/log/td-agent/tmp/access.log.pos
  tag nginx.access
  format ltsv
</source>

<match nginx.**>
  @type mongo
  host mongo
  port 27017
  database admin
  collection test

  # for capped collection
  capped
  capped_size 1024m

  # authentication
  user root
  password example

  # key name of timestamp
  time_key time

  # flush
  flush_interval 10s

</match>

sourceはtailというものを使うとpathで指定したファイルの末尾を監視(名前の通りtail -fと同じ)してくれます。

それをformatで指定したフォーマットを使って取り込んでくれるという認識。ltsvはタブで各項目を区切るフォーマットらしく、fluentdではよく使われてる気がした。初期設定のフォーマットだと、入ってくる文字によってはparseに失敗することがあるらしい。

そして、matchではmongoを指定しています。mongoに関してはDockerイメージには含まれていないので、自分でイメージをビルドする必要があります。

後の設定はまぁ見ればわかるでしょうという感じ。


ところで、今回DBの中身を見るために使用したmongo-expressですが、MongoDB側のポートが開くまで待ってくれるという処理がなさそうなので、depends_onlinkでmongoを指定してもDBが立ち上がるより前にMongoDBを見に行って勝手に落ちてくれちゃいます。

ポートが開くのを待ちたかったのでwait-for-itというシェルスクリプトをDockerイメージの中に仕込んでみた。

github.com

Dockerイメージは以下のような感じ。

FROM mongo-express

RUN wget https://raw.githubusercontent.com/vishnubob/wait-for-it/master/wait-for-it.sh
RUN chmod a+x wait-for-it.sh
CMD ./wait-for-it.sh mongo:27017 -- tini -- /docker-entrypoint.sh

これで解決した。

雑談

久々に真面目な技術記事を書いた。サクッと行けたかのように涼しげな顔で書いているがここまでうまく動かすのに結構な時間を使ってしまったのはちょっと反省。

Dockerで動かす必要があったのかと言われればそうではなく、手軽さを求めてのDockerだったわけだが、手こずるなら仮想マシンとか用意すればよかった気がした。

研究がやばい。

研究やった / HHKBを掃除してみた

今日やった事

研究

レスポンスヘッダをつけたり外したりということを柔軟にやる必要が出てきたので、Golangで簡単なWebサーバーを立てて実験してた。

詳しく話すと長くなりそうなのでやめておくが、ブラウザの仕様が複雑すぎてなかなかうまくいかなかった。どうしたもんかな。

Golang自体は、前にちょろっとやって今回久しぶりに触ったが、割とすんなり思い出せた。

改めて触ってみると、標準ライブラリもかなり充実しているし、シンプルな文法なので、今回のようにサクッと書いて動かして、修正して…というのをやるのにも良いと思った。(unusedなimportを放置できないとかはちょっと面倒に感じるときもあるが)

明日も引き続き作業して、月曜に発表する用の資料を作成する。

HHKBを掃除してみた

自宅ではHHKBというキーボードを使っています。

なん年前に買ったかいまいち思い出せないのですが、キーの隙間から溜まってしまった汚れが見えて気になっていたので思い切って掃除をしてみた。

sato001.com

今回はこちらのブログを参考に作業した。キーの取り外し工具は後輩がくれた。(余ってたらしい?どういう状況なんだ…)圧倒的感謝ですね。

f:id:uutarou:20181027235216j:plain

作業中の風景。キッチン丸出しでごめんという感じ。

本体側はエアダスターのエアが切れていたので仕方なく、綿棒で汚れをとったり、風船用の空気入れで飛ばしたりしてみた。意外といける。

明日の予定 / やること

  • 研究

雑談

何にも進捗を生み出していないのに疲れてしまった。

勉強会でFirebaseについて喋ってきました

今日やった事

勉強会

こちらの勉強会で喋ってきました。

yuruhachi-it.connpass.com

資料はこちら。

speakerdeck.com

資料作ってて、限られた時間の中でコードを説明することの難しさを感じた。特に今回は、Firebaseについて触れたいにもかかわらずサンプルはReactを使って書いてしまったので、本質と関係ない部分が大半を占める感じになってしまった。多分聞いてるだけじゃ理解できなかったんじゃなかろうかと思った。

今回の発表の狙いは、簡単そうだと思ってもらうところだったのだが、達成できたかと言われると微妙だったと思う。

今回は自己採点25点くらいしかあげられない出来だったなと反省。


勉強会はどうあれFirebaseについては一通り触れたかなと思う。(Storageとか触ってないサービスもあるが)

趣味の方の勉強はこれからちょっと別の方向なり技術にシフトしていきたい所存。

明日の予定 / やること

  • 研究の検証用のコード書く
    • なんの言語でもかけそうだけどどうしたものか。

雑談

勉強会後酒飲みました。ヘロヘロです。

酒飲んでる間ずっとApple Watchが心拍数急上昇の通知送ってきてた。

このスクショによると6回も鳴ったらしい、死ぬのか自分?