The Pragmatic Ball boy

iOSを中心にやってる万年球拾いの老害エンジニアメモ

Prettierで.vueをフォーマット

Prettierのv1.10でVueのsingle file componentをformatできるようになりました。

それまではeslintででたエラーを人手でポチポチ直してたのでこの辺りが自動化できるのは最高です。

やることはすでにprettier導入済みであれば*.vueを対象のファイルにいれるだけです。

// package.json

"format": "./node_modules/.bin/prettier --write \"js/**/*.{js,vue}\"",

lint-stagedを使ってprecommit hookしてる場合も同様です

  "lint-staged": {
    "gitDir": "../",
    "*.{js,vue}": [
      "yarn format",
      "git add"
    ],

ReactでESCキーを押したときにモーダルを閉じる

このようにdivにonKeyDownをつけた場合、キーを押してもonKeyDownは呼ばれません。

<div
  onKeyDown={this.onKeyDown}
>

tabIndexをつけて要素にフォーカスを持つことができるようにすれば解決します。

<div
  onKeyDown={this.onKeyDown}
  tabIndex="0"
>

SwiftTweets 2018 Winterの資料のまとめ

SwiftTweets 2018 Winterの資料のまとめです。

https://swift-tweets.github.io/2018-winter

発表

どうやってSwiftのOSSをメンテナンスしていくか

https://twitter.com/ikesyo/status/954687472369201155

Swift Foundationにコントリビュートする

https://twitter.com/takasek/status/954696314171740160 https://qiita.com/takasek/items/01f7746bf444bd5c85c0

LT

iOSじゃないところでSwiftを使う

https://twitter.com/hiragram/status/954699064855076864

世界をプログラミングで満たしたい

https://twitter.com/koher/status/954702886935527424

2017振り返り

2017年の振り返りです。

仕事

これまで長らくiOSをやっていましたが、4月からフロントエンド担当になりYADOKARIというメディアを開発してます。

React.jsとかVue.jsを使ったりしてますが、ES6時代だとそんなにJavaScriptについての学習コストがかからないので iOSアプリのエンジニアからのコンバートは割と楽でした。

cssのほうがむしろハードルが高かった気がしてます。(精神的にも)

プライベート

子供が一歳になりました。 今年は勉強会とかもいっさい参加せず、子育てに全てを費やしました。

勉強とかはいつでもできますけど、子育ては今しかできないので最優先です。

まとめ

今年はフロントエンドと子育ての一年だったなぁといった感じでした。

正直iOSはここ最近そんなに新しいことが少なくなってきてて学びはあんまりないなぁと思っていたのでちょうどよかったです。フロントエンドから学ぶことも多々ありますし。

来年も子供の圧倒的な成長を見習いつつがんばりたいです。

Vue.js Tokyo v-meetup #6 資料まとめ

v-meetup #6の資料のまとめ

イベントページ

Vue.js Tokyo v-meetup #6 - connpass

資料

speakerdeck.com

docs.google.com

github.com

docs.google.com

speakerdeck.com

potatotips #44 iOS資料まとめ

Togetter

togetter.com

資料

speakerdeck.com

speakerdeck.com

speakerdeck.com

speakerdeck.com

www.slideshare.net

speakerdeck.com

speakerdeck.com

speakerdeck.com

Jestで環境変数を設定する

JestでテストするときにwebpackのDefinePluginなどで環境変数をセットしている場合、テスト時にもセットしたいときがあります。

package.jsonのjestのところにglobalsを追加することで設定できます。

Configuring Jest · Jest

EXAMPLE

package.json

"jest": {
  "globals": {
    "ENDPOINT1": "http://api.example.com",
  }
}

ルートVueインスタンスのプロパティ

こんな感じにroot Vue instanceのpropsを使って初期値とかを与えたい場合があったりします。

  • html
<div id='root' props='initial-value'>
const vm = new Vue({
    el: '#root',
    props: ['initialValue'],
    data: {
        value: '',
    },
    beforeMount: function() {
        this.value = this.initialValue;
    }
});

が、これだとthis.initialValueはundefinedになります。

原因は、propsは親から子にデータを渡すためのもので、親のないroot vue instanceでは使えないようでした

Passing props to root instance · Issue #6440 · vuejs/vue · GitHub

対策1

真っ当な対策としてはroot vlue instanceのpropsを使って値を渡すのではなく、 rootに子コンポーネントを作って、子コンポーネントのpropsを使うです。

対策2

どうしてもrootで渡したい場合は、強引なやり方ですが、elementのattributesから取ってくれば一応とれます

const vm = new Vue({
    el: '#root',
    data: {
        value: '',
    }
    beforeMount: function() {
        this.value = this.$el.attributes['initial-value'].value;
    }
});

slackのbotでmentionが飛ばせなくなった対応

9/11からslackのusername指定が使えなくなりました。

A lingering farewell to the username | Slack

これにより、botなどでユーザーにメンション飛ばしていた場合にusernameを使っているとmetionが飛ばなくなります。

対応方法

<@username><@userID>に変更するだけです。

userIDを取得方法

以下からユーザーリストを取得してIDを取ってきます。

https://slack.com/api/users.list?token=<token>

Markdown Night 2017 Summer 資料まとめ

Markdown Night 2017 Summerの発表資料のまとめです。

イベントページ

connpass.com

ハッシュタグ

twitter.com

資料

なぜMarkdownは拡張されるのか

Markdownはなぜ拡張され続けるのか | bitjourney Kibela

esa Markdownの思想とデザイン

esa-pages.io

Markdownを拡張する話

speakerdeck.com

Qiita/Qiita:TeamにおけるMarkdownレンダリングの歴史

speakerdeck.com

TBD in Markdown Night

speakerdeck.com

MARKDOWNの本を一緒に作りたい

gitpitch.com

Vagrantでwebpackのwatchが動かない

Vagrant上でwebpackのwatchオプションを使ってファイルの変更を監視しても、変更を検知しないという現象に出くわしました。

こちらに(Webpack Watch in Vagrant/Docker )書いてあるように

webpackのconfigファイルに以下のようにpollingするようにする必要があります。

watchOptions: {
  poll: true
}

Ubuntu16.04にyarnを入れる

Ubuntu16.04にNode.jsの6系とyarnをインストー

sudo curl -sL https://deb.nodesource.com/setup_6.x | sudo bash -

sudo apt-get install -y nodejs

sudo curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 0.24.4

Ubuntu 16.04にDocker環境を作る

Ubuntu 16.04上でDocker動かすのにちょっと手こずったのでメモ。

とりあえずこれを実行すれば、Docker CEとdocker composeがインストールされるはず。

yes | sudo apt-get install \
           apt-transport-https \
           ca-certificates \
           curl \
           software-properties-common

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

sudo add-apt-repository \
        "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   $(lsb_release -cs) \
   stable"

sudo apt-get update

sudo apt-get install -y docker-ce

apt-cache madison docker-ce

sudo curl -o /usr/local/bin/docker-compose -L https://github.com/docker/compose/releases/download/1.13.0/docker-compose-`uname -s`-`uname -m`

sudo usermod -aG docker $USER

sudo chmod +x /usr/local/bin/docker-compose

Fetch APIを使ってRailsのAPIを叩く

JavaScript(es2015)でFetch APIを使ってRailsAPIを呼ぶときの方法。

ポイントとしては、'credentials: same-origin'をつけることと、 CSRFを有効にしている場合はheaderにX-CSRF-Tokenをつける点です。

    const getCsrfToken = () => {
        const metas = document.getElementsByTagName('meta');
        for (let meta of metas) {
            if (meta.getAttribute('name') === 'csrf-token') {
                console.log(meta.getAttribute('content'));
                return meta.getAttribute('content');
            }
        }
        return '';
    }

    const postFoo = () => {
        return fetch('/api/foo', {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': getCsrfToken()
            },
            body: JSON.stringify({
                bar: "bar",
            })
        }).then((response) => {
            if (response.status >= 200 && response.status < 300) {
                return response.json();
            } else {
                const error = new Error(response.statusText);
                throw error;
            }
        });
    }

iOSのFrameworkのVersionについて

Frameworkにはversionがいくつかあってそれらの違いの雑な説明です。

その1

ひとつはお馴染みのinfo.plistに書くやつ これはちょっと省きます

その2

Umbrella Headerに書いてあるやつ

FOUNDATION_EXPORT double FwVersionNumber;
FOUNDATION_EXPORT const unsigned char FwVersionString[];

Build SettingsのCurrent Project Versionがこれにあたります

Frameworkをコンパイルするとわかるんですが、 (ここでは例としてFwというframeworkをつくります)

Compile Fw_vers.c

というcのファイルが勝手に生成されてコンパイルされてます。 中身を見てみると

 extern const unsigned char FwVersionString[];
 extern const double FwVersionNumber;

 const unsigned char FwVersionString[] __attribute__ ((used)) = "@(#)PROGRAM:Fw  PROJECT:Fw-10" "\n";
 const double FwVersionNumber __attribute__ ((used)) = (double)10.;

とこんな感じでxxVersionNumberとxxVersionStringが定義されてます。

Umbrella Headerではこれらをexternしているので、Frameworkを利用しているプログラムはこれらの変数を使うことができます。

その3

Framework VersionのAとかはFrameworkの中身のフォルダ構成を見ての通りでCurrentさしているディレクトリになります

Anatomy of Framework Bundles

その4

current library versionとcompatibility versionについてですが、

Link時のビルドログをみるとわかるようにこれらの値はclangのオプションとして渡されて使われる感じになります。

clang ...  -compatibility_version 1 -current_version 1

詳しくはこの辺を読むと良いのではないでしょうか

developer.apple.com

現場からは以上です。