Re: React.js界隈の人に聞きたい

React.js界隈の人に聞きたい

前提

SPA

JSX について

jQuery React 辛さ

他、jQuery 捨てたい理由として、ほとんどのプラグインが npm 以前のモジュール化される前のもので、githubでバージョン管理すら上がってなかったり、基本的に品質が低く、予想できない副作用を発生させることがある、という問題があります。もはや jQuery プラグイン = 品質が低い といってもいいぐらいです。最近書かれるものは nodeでも動くように jQuery 非依存だったり、DOMのライブラリでも jquery に依存しない形で書かれることが多い気がします。jQuery依存が発生すると、+120kb を要求するわけですからね。

AltJS

AltJSがなければ今のES2015もBabel もなかったんで、一定の役割は果たしたと思ってます。coffee の仕様のうち、いくつが採用されたことか。 ただ個人的には最近 babel にリソースが集約されすぎててゲテモノがなくてつまらんという感覚があります。wasm はやくこないかなぁ

まとめ

スプラトゥーンで前歯が折れた

※ネタです

※ フロントエンドへの複雑化について、一つの視点 - mizchi's blog のこと

http://www.miyagi.kopas.co.jp/JSFS/JSFS-kids/daigaku07/image/univ7_r44_c3.gif

カラストンビと呼ばれているね。 腕でとらえたエサを、この口と中の歯舌で細かくするんだ。 イカの歯は、カラストンビの奥にある。 顕微鏡でみるとこんなふうにギザギザしている。

フロントエンドへの複雑化について、一つの視点

これらの件

前提

去年は勝手Reactエヴェンジェリスト(自称)として、日本に複雑化するフロントエンド技術の海外の動静を紹介をし続けていた。

僕としても、フロントエンドは複雑化してると思ってるし、それは「目的の複雑化に対して必要なもの」だったと思っている。ここでいう目的とはSPAの構築であって、普通のウェブサイトは含んでいなかったが、普通のウェブサイトも当たり前のようにリッチ化目指しているのが現在なので、境目は曖昧ではある。

僕もフロントエンドの複雑化がだれにでも必要なものだとは思っていない。が、定期的に情勢を整理して、交通整理するのを心がけてきたし、春からはじめるモダンJavaScript / ES2015 - Qiita みたいな記事を書いたりした。

で、現在誰でもキャッチアップする価値がある技術としては

  • ES2015: 仕様化済み
  • npm: エコシステム
  • browserify | webpack: ビルドツール

を挙げてる。まあその詳細については↑の記事を読んでくれという感じ。

それに比して、フレームワークを使うべきかは人によるとしか言いようが無い。ReactもReduxもAngularも、僕は「普通のウェブサイトを作ってる人」は無視して構わないと思う。僕は仕事、というかQiitaの開発で「普通のウェブサイト」に部分的にReact入れてるけど、これはこれでフロンティア感があって、悩ましくて毎日試行錯誤してる。(その部分についてはあとで雑誌の記事なりQiitaなりでまた書くと思う)

あとはTwitterから

注: スタートアップ界隈での話。大きな会社ほど専業化の傾向は強まる。

注: さすがにポジショントークすぎますね…

サボったこと

そりゃね、可処分時間でゲームやらずにサボらなければ今苦手としているDockerやAWSの運用もMySQLの効率的なクエリも雑ではないちゃんとしたCSSもRailsのテクニックももっと高いレベルで身についたと思う。

だけど、相対的に興味ないことを、モヒカン的に全部やれって言われるの辛いんで、全てはスキルツリーと可処分時間のバランスの問題で、僕はフロントエンドのスキルに僕が必要と思うだけ時間割いた結果やっぱ他のスキルおざなりになってるのは自覚しているところですけども、その分踏み固めるんで、僕の学習成果は公開するし、他の人が効率的にそれらを消費して欲しいと思ってる。

フロントエンドエンジニアの審美眼

あとまあフロントエンドを名乗るエンジニアの平均的な技術力が低いことは僕も認めるところではあるんだけど、これはJSが元々「サーバーサイドもしくはデザイナが片手間にやる」時代の変遷から仕方なくて、そのせいでコミュニティとして技術的な審美眼が欠けてるから、使えるものと使えないものの見極めに時間掛かって収束しない、という傾向はある。これが一番悩ましい問題だとは思ってる。

で、「真っ当な」エンジニアからはJS界隈がまるごとそう見えるだろうと思われるであろうのも自覚している。じゃあ何を信用するかというと、時間による淘汰をみてくれとしか言えない。フロントエンドの複雑化の流れは2012年頃のnode.jsのフロントエンドへのフィードバックから始まるので、そこから生き残ってる奴はまあ使えるんじゃないの、って感じ。

つらさ

どのライブラリとは言わないけど、「これやばいだろ…」、ってライブラリに釣られて皆ホイホイ釣られていて、「あ〜う〜んやりたきゃいいんじゃないの、ダメだと思うけど…」みたいなスタンス僕は取ってること多いんだけど、そこでそのライブラリについて悪くいうと、僕がReact押しだったのもあって、なんか政治的な色彩とか帯びてしまって、やりづらいっすね。つらい！

2015年振り返り

思い出

  • 1月~8月 Kobitoの開発
  • 9月~12月 Qiitaの開発
  • SplatoonでS+達成
  • 趣味ゲーム開発

Kobitoの開発

主にReactおじさん、Electronおじさんとしての成果がこれ。

とにかくエッジなライブラリを使って開発していて、何もかも足りないのでひたすら自分で足りないパーツを作っていた。

公開した成果としてはこのあたりになる。

QIitaの開発

Kobitoは最新のテクニックでSPAを組み上げる手法だったが、Qiitaの開発における僕のテーマは「昔ながらのウェブアプリを段階的にモダンにしていくアプローチの模索」だと言える。

僕が開発に入る前のQiitaのフロントエンド環境は、Backboneが存在してはいるものの、その…「伝統的」なフロントエンドで、しかし動いてるし止めるわけにもいかないしで、リファクタリングは本当に苦労している(進行形)。

最初にとある画面のスクラッチを試みたのだが、少し進むに連れて僕が知らない仕様が無限に出てきて、2週間で終わらせるつもりが1ヶ月半経っても終わらず、分量に押しつぶされて諦めてブランチごと廃棄してしまった。ここで自分の見通しの甘さを反省した。

廃棄したブランチから一部だけ取り出して react_rails でサーバーサイドレンダリングを試してみたりしている。ここではじめてQiitaで自分の書いたコードが表に出た。といっても同じ仕様で動くコンポーネントを作っただけで、とくに機能追加したわけではない。全画面で使われる古いスタックを捨てる準備ができたといった感じだった。

あとは脱Sprocketを頑張った。

趣味ゲーム開発

基本的にKobitoの開発スタックと全く同じで、RPGを作っていた。ここで素振りした成果がKobitoに反映されている。

表に出てはいない。とはいえさすがにそろそろ何か個人プロダクトを表に出したいという気持ちもある。やはり根が技術屋なので、というかミドルウェア開発の方が楽しい。

ゲーム、とにかくドメイン層が暑くなるので、エリック・エヴァンスのDDDとかヴァーンヴァーノンの実践DDDを読んだり、12月は自作フレームワークのためにRPGツクールMVのコードを読んで勉強したりしていた。

Splatoon

これのせいで結構な趣味OSSが止まった。すまん。

11月頃にダイナモ一本でS+達成したのだが、シューターが使えないのはダメだろう、ということで、サブアカを寿司コラ、52ガロン縛りでやっていて、今Sまで到達したところ。

とはいえ、最近のS＋もレベルが下がってきたと言われていて、S+だけだとドヤれなくなってきた。S+カンストチャレンジが始まるし、カンストまでがチュートリアルです、と言われる日も近い。

フロントエンド界振り返り

今年は淘汰の年だった。AltJS群の開発が止まってES2015にノウハウが集約され、Fluxフレームワークのうちプロダクションに耐えないものが死に、Rx系の得意不得意が確認された。

表面上様々なツール群が生まれたり死んだりしていたが、新しい概念が登場したわけでもなく、ベストプラクティスが収斂されていく年だったといえる。個人的な感想としては、つまらん年だった。本当に。

来年の抱負

痩せる。

FPSで吐きまくってエイム上達しなかった僕がボイチャで訓練されてS+になるまで。またはボイチャ訓練の薦め

この記事はSplatoon Advent Calendar 2015 - Adventarの15日目です。遅れてすいません！！！！！！

プログラミングの話は一切しません。イカで技術の話をするのは @hasegaw さんや @mzsm_j さんに任せておきましょう。僕は今日イカの話だけするんで。

というわけで、S+ 達成してました。やったぜ。

最高ウデマエS+44。維持できるか怪しいですが、勝利点6500おいしい…。

S+昇格失敗した時の動画をyoutubeに上げてます。(この後上がった)

酔って上達しないエイムを克服するために

僕はとにかく3Dゲームで酔いやすく、FPSまったくできない体で、最近だとMGS5で吐いて15分しかできてません。Last of Us も積んでます。

スプラトゥーンはジャイロオフでなんとかギリギリでした。まずはローラーで徐々にならして、ランク35に慣れてきた頃にジャイロをオンし、エイムが比較的いらないダイナモをメインにしています。最近はサブアカでシューターを練習していますがSまではすんなり行けそう。でもチャージャーだけはやっぱり無理。

そういえば、巷でいうねくら式エイム練習法をやったらおもいっきり吐きました。どうもレティクルを覗こうとすると酔うみたいです。

使えるブキ

  • ダイナモローラー
  • スプラローラー
  • 52ガロン

メインは銀ダイナモ。

自分が52ガロンが使えるのは、通路が細くエイムがいらないホッケのみ。ダイナモがホッケで完全に腐るので習得した。

スプラーローラーはBバスパーク、シオノメのヤグラ/ホコの小さいマップで射程が短いインファイト特化。またはキューバン遠投を積んでタチウオでチャージャーを牽制しつつ登山して高台から追い払う要員。

このゲームの基本的な考え方

と僕が思っているもの。

  • 開始時に編成を凝視(優先度高い順)
    • 敵味方のチャージャーの有無
    • 敵チャージャーの射程(リッタースコープ/リッター/スプラスコープ/スプラチャージャー)
    • 敵のシールドの枚数
    • 敵の無敵スペシャルの枚数(バリア/ダイオウ)
    • 敵のスパショの有無
    • 敵のギアによるスキル傾向の予測(とくに防御系)
  • 開始後: ミニマップを監視
    • どのルートに分散しているか(大抵2か3)
    • とくにアロワナ/ヒラメで重要
  • 開始後: 敵味方どちらのチャージャーが強いか(場を支配できるか)
    • 味方のチャージャー強い場合: 敵をオープンスペースに引きずりだす
    • 敵のチャージャーが強い場合: 壁を背に射線が通らない場所から前線を押し上げる
  • トップメタとの戦い方
    • 対スプラシューターコラボ
      • 裏とり警戒
      • エリアのキューバン警戒
      • 初撃のスパショ警戒
      • 雑に撃ってるスパショ(通称おみくじスパショ)警戒
      • ヒト速によるエイムずらし考慮
    • 対52ガロン・96ガロンデコ
      • 序盤は大抵正面で最速シールド
      • 「今ここでシールドを出されたら一方的に死ぬ」という状況を全力で避ける
      • シールド展開モーション見てから倒すか逃げるかの判断を先に考慮しておく
      • 味方にシールド持ちがいる場合、シールドミラーで敵のシールドを殴って溶かす
      • 盾持ちは通路/角/坂を取りたがる
    • 対わかばシューター
      • バリアによる強引な裏とり警戒
      • 釣りだしの動き警戒
      • ボイチャ環境ではスペシャル溜まってるかどうかを最優先に報告
    • 対ノヴァブラスターネオ
      • 初遭遇で確実にスプラボム
      • エリア/オープンスペースの取り返しにボムラッシュを使う可能性が高い
      • 上下に動くのでエイム考慮
      • 前線での潜伏警戒
    • 対リッター3k/スプラスコープ
      • 味方のチャージャーとどちらが射程が長いか？
        • 敵が長い場合は押し込んでチャージャーポジションを限定させる
        • 味方が長い場合はチャージャー線は任せて前に出て押しこむ
      • 基本的にチャージャーのポジションにバリエーションはない
      • リッターに近づくとクイボで暴れ始めるので、かすりダメージの蓄積に注意
    • 対ダイナモ
      • 高所から一方的に殴られる場所をとられると居座られる
      • スパセン警戒
      • 入力猶予エイムでのカウンター考慮
      • ボムで障害物がない場所におびき出す
  • ガチマッチ
    • 編成事故を前提に戦術のバリエーションを複数持っておく
    • 味方を信用せず、自分がエースになるという心持ちで行く
      • これは悪い意味ではなくて、味方を信用した動きは自分で試合を支配できず、勝率が5割に収束していく傾向がある
        • S80からS+に上がるには勝率7割必要
      • とはいえ味方が信頼できると判断できた場合、支援に回っても良い
      • エース向きのブキの方がたぶん事故しにくい。オールレンジ対応のスシコラが多いのはそのため。
  • タッグマッチ
    • チャージャー1/盾1(ガロン)/エース1(ノヴァネオ/スシコラ)/支援(ダイナモ/わかば/稀にスピナー) がよく見る強い構成
    • 敵も編成事故が起きないので、常にチャージャーがいる環境を念頭に置く
    • ボイチャ率が高いので裏とり見られたら報告されたと思っておく(ので撤退する or 確認される前に全員倒す)
    • ステジャンゾンビ等の偏った戦略をとれる(とられる)
    • 上手い人とのボイチャは勉強になるのでやったほうがいい

ボイチャの薦め

…という思考に至ることになった背景にはボイチャしながらスプラトゥーンやるようになったのがあると思う。

長い期間ずっとナワバリでエンジョイ勢してたんだけど、ある日 @omochimetaru さんに誘われてS~S+なプラベ部屋でボイチャしながらやったんだけど、そこですごく鍛えられた。その時確かB+だったと思う。 それを何度か繰り返して、Sのプラベで通用するかな？とその後ガチマで数こなしてS到達。

Sになってからはノーリスクでタグマにいけるようになり、ボイチャで連携深めながら暇そうな大学生と練習しまくった。(とはいえS以上はランク変動なしのタグマの仕様はS以上にしか優しくない…)

その後 @mizuharayuki さんに突っ込まれた S+ 部屋で動きをブラッシュアップして、得意ルールのヒラメシオノメのエリアでS+到達という感じ。苦手ルールだとS落ちそうな予感がある。

ボイチャ中に考えること

  • S+ が何を報告しているか
    • 何を考えているかのシミュレートする
    • スペシャル、チャージャーの位置、etc…
  • 自分は同じ死に方を繰り返していないか
    • その行動は繰り返すべきではない
    • 相手が甘い場合は選択肢を絞られている、ということを認識する
  • 敵のS+が同じパターンを繰り返していないか
    • 相手が同じパターンを繰り返すということは、それは一方的に有利な行動
    • それを阻害する為の行動を考える

とにかく上手い人が何かを考えているかなぞるのが上達のコツ。

というか単にボイチャ楽しい

フレンド100人溢れてるけど Twitter で話しかけてくれたら枠空けてプラベ開くんでやりましょう。

プラベにはイカデンワが便利。個別にマイクのon/offができる。webrtcで頑張ってる。 https://ikadenwa.ink/ Chromeのイカデンワ+という拡張を入れるとチーム名の申告だけで敵側をミュートできるんで便利。 あとダイナモの使い方の各論とか書いてたけど後日にする。

じゃあ僕はこれからウェイストランド行くんで。

銀ダイナモですがS+昇格に失敗しました(S99)

今はS70まで落ちて反省している。

https://i.gyazo.com/cec478b6e9fb4f470d1fd1186477fe33.png

スプラトゥーン、最近 @omochimetaru さんや @mizuharayuki さんらへんでS~S+のフレンドとタッグマッチやプライベートマッチで遊ぶことが増えたんだけど、彼らと戯れた結果、苦手ステージは本当にダメなんだけど、僕も得意ステージならS+いけるのでは？？いや〜でもそんな都合いい組み合わせないよな〜と思ってこんなツイートしてたら、本当に来てしまった。

t.co

当日は実況プレイ、というかマイクを入れてゲームプレイをtwitchでタレ流ししてて、なんか最高で30人ぐらいに見られてたんだけど、twitchの自動録画機能で4時間分録画されてる。youtubeへのexport機能で S+昇格戦のところを切り出してアップロードした。

未編集の録画はこっち http://www.twitch.tv/mizchi/v/25395430

見どころとしては、自分以外S+の部屋に突っ込まれて、劣勢時に味方頼む〜っと泣きながらバシャバシ塗ってるとこですね。

反省

最近の反省点として、プラベのS+連中に思い知らされたんだけど、ナワバリやり過ぎたせいで相手がガバることに甘えて突撃する癖がある。S+相手だと一方的に死ぬ。リスク負ってでも前に出るところとそうでないところの判断がまだダメ。なので悪い癖つかないようにナワバリあんまりやらないようにした。

あとダイナモで段差の後ろに隠れたとき。振る前に小ジャンプで障害物の上を一瞬越えるようにして振ると強いんだけど、その入力精度がまだあまり良くない。

録画見直すとスピナーに弱かった。

スプラトゥーンアドベントカレンダーに登録したので、それまでにS+昇格報告したい…

ギア

https://i.gyazo.com/81802657e99e65a1c5c6266adfae64a8.png

フクをマキガ+インク効率x3 にしてる時もある。

録画

twitchで生放送してて、たまに動画アップロードしてる。主に自分で見返すようだが。

https://www.youtube.com/channel/UCDIj9TmckobVQT2KyXIwxnA

この動画、なぜか味方のトラップで死んでて面白い。

www.youtube.com

趣味プログラミング業

ゲームやりまくる時はひたすらゲームやってるんだけど(2年前のLoL業のときもそうだった)、RPGツクールMVアドベントカレンダーのためにRPGツクールのエンジン部分のコードひたすら読んでるんで、その辺あとで報告したい。

型付きJavaScriptの将来についての最高のシナリオ

babelのsebmck(18歳)がfacebookに入ったのは吉と出るかどうか

flowは外部ライブラリ呼んだり野良ライブラリの型アノテーション違反を握りつぶすのがとにかく苦手で実用足り得ない、という認識です。

Oracle Blogs 日本語のまとめ: [Java, JavaScript] Nashorn Architecture and Performance Improvements in the Upcoming JDK 8u40 Release

今の段階でやってるのは気が狂ってると思う。

ここではV8を想定してます