うしろのこの本ください

なんでもかきます

エゴサ?それIFTTTで自動化できます

皆さんエゴサしてますか?僕はしません。著名な活動してる訳でもないし、巨大なミリシタラウンジのラウマスしてるわけでもないので。

でもエゴサじゃなくても定期的に検索する事はあります。イベント終わりの反応とかね。

そういうの、一々検索するのだるくないですか?IFTTTならそれ全部自動化できます。

ifttt.com

英語だけど逃げないでね。

IFTTTは様々なサービス間で通知をしあえるっていうサービスで、WebHookに対応してるアプリならどれでも使えます。

WebHookは任意の通知(POST送信)をイベント発生時に飛ばせるって仕組み。これを使えば例えばTwitterに特定キーワードが投稿されたら、そのイベントでWebHookが飛んでLINEの指定した部屋に内容が送られるみたいなことができます。

僕はミリシタの公式アカウントを監視対象にしてツイートがあればLINEに飛ばすっていうのをやってます。普段AppleWatch付けてるのでミリシタ公式アカウントが呟いたら腕に振動が来る状態になってます。

f:id:apple19940820:20181209220012p:plain

使い方も簡単で、有名どころはデフォで色んな機能が用意されてます。

僕のは今こんな感じ。

f:id:apple19940820:20181209220434p:plain

左上と中上がTwitterのつぶやきをLINEに通知するアプレットです。自分が普段LINE使っているのでLINEになっていますが、通知先をWebHookに対応している別アプリにすることもできます。(Slack、discordなど)

iOS/Android アプリ版もあるのでスマホから初めてみるのもいいでしょう。

IFTTT

IFTTT

  • IFTTT
  • 仕事効率化
  • 無料

play.google.com

特にキーワードプッシュは特定キーワードを自分で決めてTwitterで呟けば備忘録のように使えて便利です。([log]みたいに書いてIFTTTで[log]を監視する)

雑ですがIFTTTの紹介でした。それ自動化できるよって事で。

おわり

近いうちに? ElementUI の el-table は件数200以上で virtual scroll になるっぽい

ElementUI の table に vue-virtual-scroll を使おうと四苦八苦してたら、こんな issue が

github.com

Translation of this issue:

Existing Component yes

Component Name El-table

Description Current table components, when data is large (more than 200 data), scroll and checkbox switching are all Karton, hoping to support functions similar to vue-virtual-scroller.

したいっつってるからまだ実装されてないっぽい?まあ実際書けば分かる。

149件

f:id:apple19940820:20181127214049p:plain

どう見ても全て描画されている。

495件

f:id:apple19940820:20181127214245p:plain

全て描画されている(と思う)

結論

まだ未対応

vue-virtual-scroll を導入しようにも中々いい感じにならなかった。まあそういう issue が立つって事はそういうことなんだろう(適当)

おわり

Nuxt.js + Contentful + Netlify で JAMstack なブログをおためし

つくった

ushironoko-dev-blog.me

ソース

github.com

JAMstack って奴を試したくてやってみた。プロジェクト作成からデプロイ完了まで大体3時間くらい?だと思う。

ほんと Nuxt の公式モジュールが優秀で、Markdown のパーサとか dotenv とか諸々ほぼ設定なしで使えてしまう。本当に助かった。

というか、 Qiita にあがってる似たような構成の記事大体 Nuxt モジュール使ってないんだけどなんでだろう。割と最近の記事でも。謎。

満足したので寝る。開発ブログの方は開発ブログって言ってるけどまあ自由に色々試す場所ってことにしとく。

おわり

Vue.js の UI を自作する時に使えるライブラリ備忘録

最近Twitterに実装されたFABが結構不評で、なんでだろうと思った時に邪魔なのはそうなんだけどもっと押したくなるようなのだったらよかったかなと思った。実際そんなんで解決はしないが。

FABってこれです

material.io

ということでUI作りてーな→ディレクティブ自作つれーな→ライブラリ探そってことで。自分用備忘録なとこある。

FABだとボタン外を押したときに収納するみたいなフックが欲しいんだけど、それ

github.com

マテリアルなデザインでは必須?な波紋のエフェクトがディレクティブで付けられるやつ、通称 ripple effect春奈るなではない

github.com

色々な方法でツールチップを出せる奴、FAB作るなら必要

github.com

Vue 実装の FAB、あるじゃん!いやいや、もっとこうボタンがぽぽぽぽぽって出てカラフルな感じがいいじゃん、自分でつくろフォークしよ、書を捨てよ町へ出よう

github.com

こんな感じ

オールインワンなフレームワークかつ Vue.js のエコシステムで固める方法もできるのが Nuxtではある、でもさぁできるけど Nuxt Way からそれるのめんどくせーなみたいな感情があってだね。

普段 Nuxt.js しか触らないから Vue.js のミニマルでプラグインな開発に余り触れてないし、これを機にそういうのやってみるのも良いかなって思った。

おわり

開発者向けのミリシタAPIエンドポイント 「Princess」を Nuxt.js で使う

どうも

アイマスAPI と言えば im@study の im@sparql 辺りがあるが、ミリシタオンリーであれば REST で使えるエンドポイントがある。

api.matsurihi.me

特定のエンドポイントへリクエストを送ると対応した json データが返って来る。見た感じ個人運営の有志サービスなので、使う時は加減するか要相談案件。(こういうのにお金落とすべきだよなと思ったり)

せっかくだから軽く実践してみる。楽したいので慣れてる Nuxt.js と axios モジュールのみで。いつも通り create-nuxt-app から axios モジュールを使う設定、UI は element-ui でプロジェクト作成。

今回利用するエンドポイントはカードIDからカード情報を取れるもの。こんな感じでアクセスする。

const data = await this.$axios.$get(`https://api.matsurihi.me/mltd/v1/cards/100`)

axios の接続先は nuxt.config.js に baseURL として書いておけるので、v1 までをデフォルトとして設定する。

  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    baseURL:'https://api.matsurihi.me/mltd/v1'
  }

こうする事でさっきの axios の記述はこう書ける

const data = await this.$axios.$get(`/cards/100`)

でどういう風に作るかというと、テキストボックスにカードID入力してボタン押したら画面に json の中身が出る、くらいでとりあえずはいいと思う。

適当に表示場所とボタンのコンポーネント用意、api 叩くのは Vuex の中で行う。コンポーネントはメインページで読み込んで使う。 まあオーソドックスな Nuxt の構成でおk。

components/Card.vue

<template>
  <section>
    <el-card v-for="card in cardData" :key="card.id">
      {{ card }}
    </el-card>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['cardData'])
  }
}
</script>

components/CardFetchButton.vue

<template>
  <section>
    <el-button type="primary" @click="fetchCardAsync">取得</el-button>
  </section>
</template>

<script>
import  { mapActions } from 'vuex'

export default {
  props: {
    cardId : String
  },
  methods: {
    ...mapActions(['fetchCard']),
    async fetchCardAsync() {
      try {
        await this.fetchCard(this.cardId)
        this.$notify({
          title: '成功',
          message: 'カード情報を更新しました',
          position: 'buttom-right',
          duration: '3000'
        })
      } catch (e) {
        this.$notify.error({
          title: '失敗',
          message: `${e}`,
          position: 'buttom-right',
          duration: '3000'
        })
      }
    }
  }
}
</script>

pages/index.vue

<template>
  <section class="container">
    <div>
      <Card />
      <el-input v-model="cardId" placeholder="カードIDを入力..." style="padding-top: 10px; width: 160px;"></el-input>
      <Button style="padding-top: 10px;" :cardId="cardId" />
    </div>
  </section>
</template>

<script>
import Card from '~/components/Card.vue'
import Button from '~/components/CardFetchButton.vue'

export default {
  data(){
    return {
      cardId : ''
    }
  },
  components: {
    Card,
    Button
  }
}
</script>

<style>

.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>

store/index.js

export const state = () => ({
  cardData : []
})

export const getters = {
  cardData: (state) => state.cardData
}

export const mutations = {
  setCardData(state, { data }) {
    state.cardData = data
  }
}

export const actions = {
  async fetchCard({ commit }, id ) {
    const data = await this.$axios.$get(`/cards/${id}`)
    if (!data) throw new Error('Invalid card data')
    commit('setCardData', { data })
  }
}

作ってる途中でヘッダー欲しくなって作っちゃったけど別にいらない。

実際にコールしてみる。

f:id:apple19940820:20181111141611p:plain

f:id:apple19940820:20181111141638p:plain

いい感じ。IDを指定しない場合全件取れてくる。負荷高そう。

今回作った奴

github.com

感想

こういうサービスは続けていくの大変だし出来る範囲で応援したい。アマギフで支援できるので余力がある人はぜひ。

おわり

Proxy環境下から docker pull をするための覚書 for CentOS 7

結構手間取ったのでメモ残す

構成が悪いのか知らんけど、ググって良く出てくる systemd の設定に Enviroment を追記する方法だと出来なかった。

こういう奴

http-proxy.conf

[Service]
Enviroment="HTTP_PROXY=http://xxx.xxx.xxx.xxx:8080"

/etc/sysconfig/docker に パス書いて export するやり方でもなんかうまくいかない。

export http_proxy=http://xxx.xxx.xxx.xxx:8080/
export https_proxy=http://xxx.xxx.xxxx.xxx:8080/
export no_proxy=yyy.yyy.yyy.yyy

docker info でプロキシの設定が出てくればいいわけなんだけど、全然できなくて最終的にこれになった。

/etc/sysconfig/docker

http_proxy=http://xxx.xxx.xxx.xxx:8080/
https_proxy=http://xxx.xxx.xxxx.xxx:8080/

export しなくて良かったっぽい。無事プロキシ経由で docker pull できた。

調べると結構 Proxy 周りのトラブルは多いんだけど、公式のトラブルシュートのページにある方法を試しても上手くいかなかった。(systemdの設定にhttp-proxy.confを追記するやつ)

うまくいったのは 2014年 の Qiita 記事のコメント欄にあったやり方だったのでなんだかなぁという感じ。

まあできたから良し

おわり

Parcel + Vue.js であっさり目にフロント開発に触れてみる

Parcel は一時期話題になった時に知ってから今まで全く触れてこなかったのでやってみたかったのと、

jQuery + ES5 等でフロントの世界が止まっている人に気軽に ES6 over な世界観を体験してもらう方法を考えていたのもあり手を出すことにした。

parceljs.org

この記事で作ったやつはリモートにあげといた。

github.com

設定ファイル不要でモジュールのバンドルやらなんやらをしてくれる賢い子で、新しいバージョンでは .babelrc すら不要になっていたのでそろそろ使ってもいいかなと思った。

実践

Parcel の本領である環境構築の手軽さは次元を超え、2行のコマンドで完結してしまう程になっていた。

コマンド入力の前にディレクトリの作成と npm init か yarn init はやっておくこと。

yarn init --yes/-y とすると対話をスキップしてデフォルト値で packarge.json を作ってくれるらしい。よく分からない場合はこれで作ると良いと思う。

npm なら以下のコマンドを実行

npm install --save vue
npm install --save-dev parcel-bundler

yarn なら以下のコマンドを実行

yarn add vue
yarn add --dev parcel-bundler

インストールが終わったら package.json の scripts にプロジェクトスタート用のスクリプトを追記する。以下を追記

{
  "scripts": {
    "start": "parcel index.html"
  }
}

できたらこんな感じになるはずだ。

f:id:apple19940820:20181025225758p:plain

つまり、必要なものは Vue の本体と parcel-bundler のみ。少し前までは専用のプラグインが必要だった気がするが、なくなっていた。

全くNode.js/npm を触っていない人は良く分からないと思うけど、よく分からなくていいです。そのうち嫌でも分かるようになるよ。

これで先ほど追記したスクリプトを実行すればSFC だろうがしっかりバンドルして出力される。

このままだとビルドする元ネタがないので作りましょう。本当に基本的なものでOK。

構成例(npmの場合)

  • ./
    • node_modules
    • src
      • components
        • HelloWorld.vue
      • App.vue
      • index.js
    • index.html
    • package.json
    • package-lock.json

各ファイルは以下のような感じで書けばいいと思う。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>vue-tmp</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/src/index.js"></script>
  </body>
</html>

index.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue

<template>
  <div>
    <hello-world/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld"

export default {
  components:{
    HelloWorld
  }
}
</script>

HelloWorld.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data (){
    return {
      msg:`Hello Parcel World!`
    }
  }
}
</script>

できたら npm run start または yarn run start

ビルドされて生成物が dist/ の直下に吐かれる。ついでに .cache というフォルダも出来るが Parcel が差分ビルドを行うためのキャッシュディレクトリのようだ。

そして start したので localhost:1234 でWebサーバが立ち上がっている。飛んでみると以下のように表示されるはずだ。

f:id:apple19940820:20181025233713p:plain

雑感

普段 @vue/cli や create-nuxt-app で十分ストレスフリーな環境構築が出来てはいるが、本当に設定ファイルを触らなくて良い時は Parcel で十分だと感じた。

特に webpack.config.js の姿を見なくて良いのは清々しい気分だ。この調子で node_modules まで吹き飛んでくれたら JavaScript の世界は完全に靄が晴れるという気がする。

フロントに怯えている人はまず Parcel + Vue.js 辺りであっさり塩味がおすすめです。

おわり

Nuxt.js の generate で作ったポートフォリオを Netlify で公開したよ

タイトル通り

サイト

ushironoko-portfolio.me

ソース

github.com

とっても簡単な作りなので特にいう事はないけど、Netlify は初めて使って良いなって思った

デプロイを Githubリポジトリ経由にして、ビルドコマンドで npm run generate ってやっとけば master ブランチの差分を見て勝手に更新してくれる

一度設定すれば何も考えずに push するだけでサイト自体も更新されるという...素晴らしい

せっかくだからドメインもとってみた、年 $7.7 くらい

目的としてはポートフォリオからこのブログとか Qiita に飛んでもらってこんな奴なんだなって知ってもらう事だから、面白みのない感じになっちゃったとは思う

余裕あれば弄ろうかなぁ…なさそう

おわり

社会に出てからの振り返りとこれから

今の業界に出て1年半になった

SI企業に請け負いで入ってWebだったりネイティブアプリだったりを開発案件で経験した

ぺーぺーだった頃に比べて本当に多くの事(PCに関しての知識や歴史も含めて)を学べて概ね満足してるんだけど、やっぱり自分が欲しいものはここにはないなと悟った

ただだからと言ってお前はもう用済み、さらばだ!というのも悲しいしこれまでやってきた自分に溜まったものを信じたい

学べたもの、学べなかったものを書き出して整理することで次の目標に輪郭を付けるという作業をする

…って思ったけど、結構独学で覚えたもののウェイトも大きいしそれも書く、要するに社会人になってから得たもの全部

一言感想も書いてみた

学べたもの(業務)

言語

  • Java //メイン、別に好きではないけど9以降は結構良い

  • C# //かなり真剣にやってた、ドキュメントとにらめっこ

  • HTML、CSS、JS //業務での学びは少なかった

  • VB6 //多くは語るまい…

  • Excelマクロ //ノーコメント

DB

  • oracle //基本これ、例外は稀
    • PL/SQL //あんまよく分からなかった
  • PostgreSQL //本当に稀

インフラ

  • Web・APサーバー

  • 仮想環境

    • Citrix //LTS式アプデから逃れるための手段…力技だなぁ
  • 認証

サーバーOS

  • CentOS //基本これ
  • Windows Server //たまにこれ
  • AIX //ごくまれにこれ

ツール、その他

  • バージョン管理

  • IDE、エディター //色々使って今は落ち着きました

  • CI/CD

    • Jenkins //ビルド専門なとこあった、Subversion、Coverityと連携
    • Coverity //有償のLinter、複数言語対応
  • issue管理

    • Redmine //常にまっかっかなのはご愛嬌
  • Office

    • Excel //神に比べればまだまだ
    • OneNote //多分自分しか使ってなかったと思う
    • Word //多分自分しか使ってなかったと思う

こんな感じ、設計手法とか単体テストは学べなかったのとセキュリティ方面がエンカウントできなかったの心残り

学べなかったもの

  • 自動テスト //手で書いたテストケースを手で実行するのが開発フローに組み込まれていた
  • セキュリティ系 //不特定多数のユーザーを相手にするシステムじゃなかったので、学ぶ機会もなかった
  • クラウド系インフラ //クラウド禁止なので
  • フロントエンド系の色々 //自分が発信するまでjQueryで止まっていた世界なのでしょうがないですね

ここら辺この先やっていても駄目だろうな、というのが転職の大きな動機になっていたりする

学べたもの(独学)

言語

  • JavaScript //今の自分にとってのホームはここ

    • ES6 ~ //とりあえずここから入ったのは正解だった
    • Vue.js //メインで触ってる
    • Vuex //型と相性悪いでおなじみ
    • Nuxt.js //メインで触ってるその2、SPAやる場合でも使いたいと思ってる(Vue CLI 3であまり開発できてない)
    • React.js //仮想DOMを知りたくて触り始めたらjsxとstyled-componentsまでやる羽目に
    • Node.js //現代のJSやるなら避けて通れなくなってきてるよね
    • Express //ミドルウェアとして使ったりただのAPIサーバーとして使ったり色々出番ある
    • TypeScript //どうもデコレーターパターンが苦手で…Javaの影響かね
  • CSS

    • SCSS //正直あんま使ってない
    • Bootstrap 4 //実は業務でも使ってて、一番触り慣れてるのはこれだったり
    • Vuetify //Material Design すき
    • Bulma //jQuery依存やめようと思った時にこれが一番良さげだったので
  • Go //超A&Gの録音スクリプトをGoで書き直したりしてた、今一番やりたい

インフラ

  • GCP

    • GAE //Node8.x系対応を見てすぐに試した、とてもよかった
  • Firebase //ConsoleのUIセンス最高ですよね

    • Authentication //誰もが認める最高のサービス
    • Firestore //あんまよく分かってない
  • AWS //管理画面ごちゃりすぎて諦めてしまった

  • Heroku //knowledgeをHerokuボタンからデプロイしただけ

  • Docker //Linux立ち上げよと思って5秒で終わる素晴らしさ

    • docker-compose
    • Docker for Windows
    • Docker for Mac

サーバーOS

ツール、その他

  • バージョン管理

    • Git //だいぶ慣れた、チーム開発で使った事なくて割と不安だけど
    • GitHub //一度Bitなにがしに浮気したけど出戻り
  • IDE、エディター

    • VS Code //私用だとこれしか使ってない気がする
    • vim //DockerでUbuntu立ち上げるとデフォでviすら入ってなかったから仕方なく…
  • babel //React触った時はじめて1から設定したけども難しい

  • webpack //同上

    • webpack-serve //めっちゃ翻弄された…dev-serverに戻します…

大いにフロントに寄ってるのは業務の反動、Goは真剣にやりたいし出来れば業務の中で正しい失敗をしたいというお気持ち

所感

一昨年から比べてほぼ別人というくらい色々変わった、社会に出てこの業界でやっていこうという決心がついたのかも

世間一般ではレガシーと呼ばれる環境に居たのもあって、新しいもの好きな元の性格が良い方に伸びたと思う

自分の中にあるどうしても達成したい目標のための知識経験は今の職場では手に入らないのが判明したので、やっと重い腰を上げたというのが最近の経緯

こうして一覧にするのも色々期待してな部分もあるし、物書きも好きだからそういうアピールしようと

Markdown も社会に出てから覚えたものだけどこれは本当にいろんなところで成果が出ていて、Qiitaに記事書いたりするようになったのも Markdown 覚えたからだしこのブログはじめたのもそう、GitHub の README だって編集できる、世界は Markdown で回っている

そこそこ長文になったけど最近 HHKB 買ってキー配列に慣れてないから練習の意味も込めてこれ書いてる

もう慣れた、最高

PFU キーボード Happy Hacking Keyboard Professional JP Type-S 日本語配列/白 PD-KB420WS

PFU キーボード Happy Hacking Keyboard Professional JP Type-S 日本語配列/白 PD-KB420WS

おわり

Docker Ubuntu 上で超A&G録音スクリプトを実行してみる

普段 Windows10 のタスクスケジューラで定期的に実行することでラジオの録音をしているが、実装が Go という事はクロスコンパイルして Linux 用のバイナリを吐く事もできる

github.com

せっかく Go で作ったんだし、いろんな環境上で動くのを見てみたいよね

というわけで今回目的は動作確認のみ、 Docker pull で Ubuntu イメージ持ってきてその中で試してみる

Ubuntu イメージの pull、立ち上げ、乗り込み

$ docker pull ubuntu

$ docker run -it ubuntu bash

マジでなんにも入ってないので必要なものを入れる

apt の upgrade してからやってくれと言われるがとりあえず Y って返しとけばOK

vi すら入ってないとは恐れ入った…それからデフォだと UTC になってて setting.json の指定時間とズレるのでタイムゾーンJST に変更しておく

//git
$ apt install git

//gcc make
$ apt install gcc make

//golang
$ apt install golang

//vim
$ apt install vim

//rtmpdump
apt install rtmpdump

//tzdata
apt install tzdata
Geographic area: Asia
Time zone: Tokyo

必要なものが入ったら各種設定していく

GOPATH は go get で入るパッケージとプロジェクトのディレクトリを分けるようにする

GolangのGOPATHやGOROOTについて | Libra Studio エンジニアブログ

//git
$ git config --global user.email "example@example.com"
$ git config --global user.name "ushironoko"

//golang
cd //ホームへ移動
$ vim .profile

export GOPATH=$HOME/go/package:$HOME/go/workspace
export PATH=$HOME/go/package/bin:$HOME/go/workspace/bin:$PATH

go get github.com/mattn/go-shellwords

git clone 後、go build でバイナリを出力できる

後は crontab に 録画したい時間に起動するよう設定、setting.json に各種設定を追記して出力先フォルダを作れば Linux 上での自動録画環境の構築は完了

そのうちバイナリもリポジトリに置く、かも

おわり

Go から RTMPDump を叩いて超A&Gを録画する

学生時代に作った超A&Gの録画スクリプトをリプレースしようと思い数年、Go で軽くものつくりしたいというのもあり重い腰を上げてやってみた

github.com

ただ Go から外部コマンドを叩いて、いくつかの設定を読み込んで RTMPDump で録画する、使い方は README に軽く書いたけど Go がインストールされてないと run も build もできない

go build してタスクスケジューラで好きな時間に起動するだけの簡単な作りにした

というのも元々の録画スクリプトは誰かが書いたVBSのフォークで無駄に設定が多く(他局のものをコールサインを渡して録画できた)今の自分には不要だったのでかなり機能を削った

所要時間30分くらい、コマンド叩く系のスクリプトなら同じ要領で作れると思う

正直外部コマンド叩けたら大抵の事が出来るし、Go ならクロスコンパイルで Linux でも Windows でも動かせるから色々作ってみようと思った

ラズパイがね、転がってるんだよね

流石に365日稼働を目指すならヒートシンク買わないとまずそうだけど…まあいいか

バイナリ公開してもいいけどまあ無駄かなと思ってるのでやりません

おわり

最近の知見

知見なんてTwitterにでもメモがてら書いとけと思ってたけど見返さないし、備忘録として貧弱だったのでどうせだからブログに書く

WPF で exe にdll をマージしてビルドする時の log4net は外に出さないとだめ

dll をマージする方法はググれば沢山でてくる

qiita.com

cointoss.hatenablog.com

スタートアップ時に .dll とつくファイルを全て呼び出してから App.Main() を叩くよう変更する感じ

ただし注意点として .config を拾えないので log4net や 本体の .config は外だししなければならない

log4net.dll はマージされるがドメインが変わり .config が参照出来なくなるため

PNG は可逆、 JPG は非可逆

クライアントで撮った写真をBase64エンコードしてサーバーに投げ、呼び出す時にデコードして戻すみたいな事をする時の話

間違ってデコードの指定を JPG とかにしてしまうと情報が半分以上落ちて色味がおかしい写真が返って来る

JPG は基本非可逆なのでエンコード/デコードはかけてはだめっぽい

やるなら PNG

仮想DOMは実DOMとの差分をただ単純に見ているだけじゃなかった

最近何となく React を触ってみたりして、やっぱり仮想DOMの仕組みが気になってしまったのでちょっと読み物漁った

steps.dodgson.org

まあ最初は魂が震える奴から見返したりしたんだけど、この記事が一番わかりやすかったと思う

要するに、実DOMには手を一切触れないし、比較もしない

ステートフルなjsオブジェクトで表現された仮想DOMツリー(React では ReactComponent)をトラバースして必要な時だけステートレスな新しいノード(React では ReactElement)のインスタンスを生成、仮想DOMツリーを更新する

トラバースし終わったらそこから実DOMを作って古い実DOMと入れ替える、一連の処理では実DOMを弄った時に起こるスタイルの再計算やC++ネイティブコールが起きないし、新しく生成され差分計算に使われるノードはステートレスで軽い

まあ、ReactDOMComponent と ReactComponent の違いがあんまり読み取れなかったけどこんな感じだろうなというのは理解した、多分。もう少しはっきり理解したいので本買おうかと思ったけど電子書籍版がない

gihyo.jp

table のヘッダ固定、つらい

非常につらい、何がと言われると position:sticky がまともに動くの Firefox ぐらい

Can I use... Support tables for HTML5, CSS3, etc

Edge と Chrome は動くには動くけど thead と tr に効かないとかいうクソみたいなバグがあるし、IE は論外、Safari は嫌いなのでためしてない

どうもここら辺は足並みそろえる気ないらしく、将来的にバグが直る見込みがないので諦めた

IE に至ってはポリフィルを謳う jQuery ライブラリですら動作しなかったのでそこでキレてやめてしまった

im@s DB API が近日中に一般公開終了、代替エンドポイントは im@sparql

終わっちゃうらしい

データ取得API / キャラクター - アイドルマスター データベース (情報まとめ)

こっち使えって

sparql.crssnky.xyz

SPARQLって 使った事ないんだけど、これの運営は IM@Study っぽいので今度 Slack に使い方投げてみようかね

やっぱそっち方面の知識に疎いという自覚がある、RDB やら NoSQLやら RDF やらとにかくクエリと付くものに関連する事は弱い

常駐先の上司にもお前 DB 弱すぎへんか?とののしられる程なので何とかしようと思った

Babel7 の TS サポートがかなりいい感じ、らしい

らしい、Babel も TypeScript もガリガリやった感じじゃないので実感薄い

github.com

mizchi 氏があげてくれていた React ハンズオンの資料を上から順にやっただけ、早速 Babel7 使ってるけど名前空間付いたくらいの認識しかないので恩恵もよく分からない

このハンズオンで得た知見としては TS と React の方が多かった、特に TS は Vue CLI v3 から開発環境の整備が進み気軽に導入できるようになったしいいタイミングかもしれない

ぶっちゃけ js ベースな React での TS の使用感と HTML ベースな Vue での TS 使用感は全然違うと思うけど

兎に角まだデコレーターに慣れない、正確には JavaScript でデコレーターを使うことに慣れない

何故かはしらんが脳内パースに普通の js の3倍くらい時間使う

js やってる時は頭が js モードになってるし Java 書いてる時はそういうモードになってるんだと勝手に思ってる

Vue CLI v3 はいいぞ

cli.vuejs.org

今日はここまで

おわり

スキルセットむずかしいですね

むずいよねスキルセット

使えます!って、何をもって?という葛藤は誰にでもあると思う

考えられる線引きとしてはプロダクトで使ったとか、OSS に貢献したとか、もっとおおざっぱにすると趣味でやってますとか?

Java プロダクトで使こうてたで!テストは手動!というのはどっち?どっち?どこまで出来たら「できます」なのかね

ただ最近思うのは詳細は喋って伝えればよくて、スキルセット一覧なんてきっかけになれば効力として十分だろうと

これは実務3年、これは触っただけ、これは趣味で良く使ってる、等など

しっかりした採用担当者なら GitHub とかブログとか SNS とかざっと漁るんだろうし、逆にそこであーこの人このくらいで出来るっていう判断してるんだなって分かる

でも A Tour of Go 一通り舐めました!使えます!とか Progate で触れました!みたいなのは多分駄目で、本当に些細なもので良いのでモノを生み出しておくと実績になる

実績ができたら公開用のリモートリポジトリにでもまとめて置いておいてポートフォリオにリンクでも貼っときゃいい

出来るなら実績を使ってポートフォリオ作れたらベスト、web系でないと中々厳しいものがあるけども

というわけでスキルセット深く考えると難しいから、一つの線引きとして公開用リポジトリにものを置いたらクリア!使えます状態!でいきましょう

ポートフォリオ、今なら Nuxt の generate とか VuePress とかで生成した静的ページを Netlify にでもホスティングしとけば最低限そういうのできますアピールにもなっていいよね

1日あれば十分できるし、やろう、やるぞ

おわり

今の環境奇数クエウォリいけますよ

f:id:apple19940820:20180811004820p:plain

AAECAQcG08MCoscCz8cCze8CuPYCnvgCDEuiBP8Hm8ICysMCmccCyucCquwCuuwC8vEC4vgCs/wCAA==

ズーはカモ、メックトゥーンはドル以外ならカモ

ドルイドのメックトゥーンは装甲積まれ過ぎて8点ヒロパでも重い

兎に角ズーが多いのでヒロパと挑発で遅延できて大暴れと乱闘で良い感じにお掃除できる奇数クエウォリはとてもやりやすい

ブームシップは楽しいけど調子にのって使うとクエスト達成できず負けに繋がったりしたのでよく考えて切る

シルブロはなるべく使わないようにしていつでも大暴れできるようにしておく(シルブロで貯めた装甲勿体ないし)

戦績取ってないから貼れないけどズー相手は勝率9割はあった、20戦もしてないが

組めるなら試してみるといいかも

おわり

博士のメカメカ大作戦初日の戦果とか

先行50 + 先行80の計130パックを剥いて、レジェ8枚

まあ運いい方だったと思うけど、魂箱出なかったのが痛い…

特典のゴルレジェはこの二枚だった

f:id:apple19940820:20180808234552p:plain

f:id:apple19940820:20180808234613p:plain

正直めっちゃ嬉しい、報告を見てるとメックトゥーン使ってレジェ行ってる人もいて訳が分からんが

逆にブームズーカ採用のデッキはあんまり見ない、予想と違うな

マリドルは案の定で生物学プロジェクトを1ターン目に使えると試合が壊れる事が多い

相手は低コストキープのマリガンをするので早いうちのマナ加速は相手としてはあまりうまみがない

逆にこちらは後攻であれば2ターン目にコイン切って滋養、メロン、そのまま最速究極等やりたい放題

メックパラ意識で十中八九回帰2積みなので単体バフ主体よりもトークンドルのような横に並ぶデッキの方がまだある

ヴォイドリッパーがないと虫害で詰みかねないが自然に入れられるのは今のところ限られたクラスだけな気もする

見渡す感じプリが結構辛そうで、メイジドルイドウォロローグハンターパラディン辺りは新しい構築で良い結果も出てる

ウォリアーはまだよくわかんないけど兵器プロジェクトからのハリソンで酷いアドの取り方して来たりするし全然あると思った

シャーマンは自分ではオバロシャーマンしか試してないけど強さを感じた

色々デッキ試したいけど土日かなぁ、週末には結構色んなデッキ出てきてると思うし

少なくとも前環境より楽しいです、今のところは

おわり