やまろぐはてな

勉強会レポートとか技術メモとか戯言とか

「さくらインターネットのエンジニアは Vue.js をこんな風につかってます」レポート #さくらの夕べ

connpass.com 10/25(水)に、さくらインターネットが主催の「さくらの夕べ」にてVue.jsの業務内活用についての発表がありましたのでそれの個人的まとめです。こういう話聞くと久々にやるかみたいなモチベになります。(はやくやれ)

第1部「はじめてのビュウ」

www.slideshare.net

さくらクラウドの料金シミュレーションをVue.jsで作った https://cloud.sakura.ad.jp/payment/simulation/

経緯

もとはAngular1系。UIはそのままで一部のみ変更。URLでの記憶機能や時間割計算も対応できるようにした。

課題

メンテコストがキツイ。フロントと何故かバックエンドのダブルメンテ。

Vueの採用理由:

  1. 覚えることが少ない。久しぶりに手をいれるときにも思い出しやすいんじゃないだろうか
  2. 公式のライブラリでまかなえるので継続メンテが期待。vue-routerとかVuexなど
  3. 日本語情報が充実している。Vue.jsの公式ガイドは親切丁寧でだいたい分かる https://jp.vuejs.org/index.html
  4. 人気と勢いが凄いのでメンテする人は後続ができる期待

実装の時に気をつけること

構成、命名規則について

コンポーネントの構成を決める際に、テストしづらい、使いまわせない、分割できないといったものにならないように気をつける ItemContainerという親を作るとItemGroupの場合はどっちが親?となる

<ItemGroup>
  <ItemContainer> <= こういった構成なら分からなくもないが単体だと分からない
    <Item />
    <Item />
  </ItemContainer>
</ItemGroup>

Catrgory、ItemListなどの的確な名前づけをした。親子関係と役割を想起しやすいようにしよう

<Category>
  <ItemList>
    <Item />
    <Item />
  </ItemList>
</Category>

ディレクトリ構成について

  • 単一では意味をなさない組み合わせではじめて意味をなす <components>
  • 単一で機能できるコンポーネント <layouts>
    • 関連するものはひとまとめにしておく
    • スタイルも一緒に梱包する
buttons
├─ AddFieldButton.vuw
├─ RemoveFieldButton.vue
└─ SaveButton.vue
bill
├─ bill.vue
└─ bill.scss

VuexでのStoreについて

Store構成 => コンポーネント内部だけで知っておくべきこと(タブの開閉)、全体として知っておきたいもの(合計金額)を洗い出していく。

アプリケーションが大きくなると見通しが悪いが、Vuexのmoduleで見通しをよくするようにしておく。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> `moduleA` のステート
store.state.b // -> `moduleB` のステート

第2部「Vue.js 導入の経緯と実例紹介」

経緯

さくらインターネット上にはさまざまなwebサービスがあるが、実はフレームワークが乱立している問題があった(好きにやっていい裁量がある)

  • Angular
  • Vue
  • jQuery
  • prototype
  • ember

課題

  • 結果としてプロジェクトへの参入コストが増大している問題が起こる
    • 似たような機能開発でもフレームワーク毎に別の実装になったり、技術が分散され共有されにくい
    • いつの間にかフレームワーク使われてたけど知られてなかったのようなことが起きる
    • ほか学習コストや属人性について
  • フルスタックフレームワーク(Angular)を使うにしても開発のスタートを切るためには時間がいる
  • デファクト・スタンダードとなるものを選定する必要がある

Vue.jsの普及

そんな中、社内SlackにVue.jsを推す影響力のある人がおり、反応してみた。 実はウェブアクセラレータや幾つかの過去のプロダクトにはVue.jsが使用されていた模様。

何とかして良さそうなVue.jsを普及してみたい。が、実績についてはあまり無かった(ウェブアクセラレータくらい)。 そのため、社内での利用事例を増やすために小さいプロダクトからVue.jsを導入してみることにした。

実際に取り入れてみる

さくらインターネット20周年に際して、TOPページのリニューアル案件が立つ。そこで一部にVue.jsを導入してみることにした。

www.sakura.ad.jp

スライダー

https://gyazo.com/6fd8efd405d14355e133d4edb69525fe

Ajax読み取り箇所

https://gyazo.com/d0d00bb90171bb6137c17377c92d5547 Vue-resourceを使用。

Vue.jsでの制作実績

やってみた結果

  • デザイナーと協業しやすそう(シンタックスとして分かりやすい)
    • エンジニアとデザイナーが分業しやすい
    • ロジックとhtml、スタイル箇所がtemplete内で分けられるので棲み分けが良さそう
  • 導入スピードがダントツでよかった。
  • 日本語ドキュメントが充実している、プラグインが豊富なのも良い
  • CDNなどでソースに直接入れ込むことが出来るのですぐ使える https://gyazo.com/01764c33a12dbc94f2a7428f79b028b2
  • Vue.jsはあくまでもjQueryの置き換えになるわけではない。新たなロジックの書き方を知る必要はある
  • 2.5が出るまではTypeScriptの対応が未知数だった
  • 他のフレームワークも良い部分があるので、Vue.jsを使うなら「なんでVue.js使うんですか?」に答えられるようにする
  • 今後の開発において大きめのコントロールパネルでVue.jsを導入する予定

第3部 「とにかく楽してVue.jsでTypeScriptを使いたい」

ダーシノさん https://twitter.com/bc_rikko

  • さくらクラウドのネタ機能担当フロントエンジニア
  • Vue1.x系での2行Contributor

www.slideshare.net

静的型付ができることで最近話題になっている(ことにしてほしい)TypeScript。 Vue.jsでもせっかくなので使ってみたいと思ったけどVue2.4以前ではかなりつらいことが多かったのだが、Vue 2.5からTypeScript統合の改善がされ、だいぶ楽になったよという話。

今回はサーバーサイドエンジニアもメンテナンスができるように、ということで型定義がおそらく好まれているだろうことを推測し、TypeScriptを全面導入。

thisprops型推論ができて、class構文ベースの記述が以前は必要だったがそれがいらなくなるなど改善された箇所が多く、つらくなくなった。 jp.vuejs.org

便利なVue.js + TypeScript体験一式も配布。ありがたい。 github.com

第4部 NUXT.jsでウェブサイトを作れるのか?(未完)

ja.nuxtjs.org

Nuxt.js とはユニバーサルな Vue.js アプリケーションを構築するためのフレームワークです。

具体的には何ができるのか?

  • SPA
  • SSR
  • 静的サイトジェネレーター <= 個人的にコレを試したいと思っている

静的ジェネレーターの代替

を他にも検討しているが、Vue記法をつかいたいため、Nuxt.jsを推したい。

コマンドで切り替え可能

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

SPAにする場合は --spa オプションを付与。

問題点

  • アプリのヘッダーやHTML属性はvue-metaを使わないと更新できない。
  • 新しいため、まだまだ知見が少ない

参考・関連URL

初心者にGit教える時に必要最低限のCUIコマンド

f:id:cardboarder:20170116221632p:plain

前提条件

ガチ初心者でgitの操作をCUIで学ぶため、基本1人でmasterで作業するという「いやお前それGit管理じゃないだろそれ」という前提でやってもらます。いいんだよ細かいのはこれから学んでいけば。

作業前にリポジトリとかはどこかで作って置いたほうがよい(Github、Bitbucket、backlogなど)。

必要なコマンド群

リポジトリのクローン ... gitを使う設定

git clone https://xxxxxxxx/xxxx.git

※この時もしかしたらログインIDやパスワード聞かれるかもだが、気にせず入力してください

作業ファイル全追加 ... 作業したファイルを保存

git add -A

コミットメッセージ ... 何の作業をしたかの記録

git commit -m "commit message"

プッシュ ... サーバーにアップする

git push

プル ... 人が作業した分を同期・ダウンロード

git pull

右のはあくまでもそうした意味ではなく、イメージ。だいたいこれで足りる。自分は足りた。

cloneした後に「作業 → add → commit → push」を基本ローテーションとして作業。

必要に応じて他の初心者を入れて同様に作業させて、pullを理解してもらう。コンフリクト起こしたら、その時は都度修正、コミットなどしてくれ。

基本の骨組みはこのイメージでいいのではないか

実際Gitは様々なコマンドがあったりフローが存在して、いわゆる「ちゃんと理解できたらちゃんと使える」代物とも言われてるので、使いこなすにはある程度知識や経験が伴う。

とはいえ自分がやってきた中では基本このイメージさえできていれば、後はそれに付随する肉付きをしていけばいいんじゃないかと思っている。

たとえば作業でpushまでしたけど実は違ったものが最新になっていたのでそれを直すというのがあった際に、上記コマンドであれば作業後に再びadd、commit、pushなどをする一連の流れがあるわけだが、そのままだと煩雑なコミットログになりかねない(別に慣れる間であれば気にしなくて良いのだが)

そのためにgit revertだったりresetだったりcheckoutというコマンドが調べて出てくるのだが、そうした時に学んでいけばいいんじゃないかとは思う。

それなりに親切なGit

あとGitは丁寧なので、たとえば新しくブランチを切って作業して何も考えずadd、commitしてpushすると「リモートにそんな追従ブランチねーよ」と教えてくれて以下のコマンドを提示してくれます。

git push --set-upstream origin branch

アメリカ語だけど頑張って訳せばそれなりにちゃんと教えてくれてるんだというのがわかる。なので極端に怖がらなくてよいのだ。

極端な言い方をさせてもらえば、やり方次第でなんとかなるのがGitである。

Git教育について知見が欲しい

ウチではこうやってるよ的なのを募集しています。

こちらからは以上です

HTML5 Conference 2016 行ってきたよ

events.html5j.org

自分のまとめです。


Reactの最新動向とベストプラクティス

@koba

speakerdeck.com

この内容の通りです。https://getstorybook.io/とかhttps://storybooks.io/は視覚的に確認できるのがめっちゃ便利だと思いました。

あと会場内でのReact体験者 - React業務経験者 = だいぶ少ない印象でした。


webのグラフィックス2016

WebGL事例 - @mattari_panda

www.slideshare.net

コロプラの中の人。今回はサイトで使うWebGL(というかThree.js)の紹介。簡単なものから導入してみるのはよいことですね。

WebGLパフォーマンス - @emadurandal

https://www.icloud.com/keynote/09q5bI7F3WA9tdK17J6BIt4hg#HTML5%E3%82%AB%E3%83%B3%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9WebGL%E9%80%9F%E5%BA%A6%E6%9C%80%E9%81%A9%E5%8C%96

パフォーマンスを測る方法など。CPU側とGPU側でボトルネックになり得る箇所があるかもなのでそこを履き違えないようにという感じ。

CPU側(Javascript部分とか)は描画処理以外でもネックになりえている可能性があるので調査は割としやすいかもだけど、自分はGPU側はあまり知り得てないので使うときには軽く触れておくといいかもしれない。

あとThree.jsなどのライブラリには内部にWebGL命令が書かれているので最適化は難しいが、チューニングの仕方を知ったりやノウハウを集めていく(Stackoverflowとかで)やり方がよい。

他資料は以下より参照 https://www.icloud.com/keynote/000hhaE2RGqEe9gdi1evUinqA#GLSL%E6%9C%80%E9%81%A9%E5%8C%96%E3%81%B8%E3%81%AE%E9%81%93


Material Design for Web

@taquo

Google Developer Relations所属。プレゼンというか間のとり方上手いなという印象だった。

様々なデバイスへの対応

歴史

4,5年前

GmailAndroid Gmail、Mobile Web Gmail 実はデザインはすべてバラバラ

2011

Project kennedy - ユーザー体験を統一化しようプロジェクト 黒帯メニュー部分がプロジェクトの集大成

Holo フレームワークが登場 ↓ デスクトップとAndroidで違う…

2014

Material Design誕生 異なるプラットフォームでアクセスしても平等なアクセスが出来る ↓ Googleサイト、アプリ以外にも様々なサードパーティでも利用できるように マルチデバイス・クロスブラウザ問題の解消をすすめる

  • Tangible Surface (物質的なデザイン) → デジタルな紙で表現
  • Print Like Design (印刷物デザイン) → グリッド計算 1dp → 約8px
  • Meaningful Motion(意味のあるモーション) → 現実世界の動きに準ずる

アプリケーションコストを下げられるのではないだろうか?

Use Case

Framework

  • PolymerPaper Elements
  • Angular Material
  • Material Design Light

Layouts

  • ai frameworks
  • Device metrics
  • Resizer

Fonts

Icons

  • Material Icons

Summary

design.google.com

デザインフレームワークに縛られてほしくない

Anouncement

コミュニティ(Slack) http://design-jp.herokuapp.com


協働のためのデザイン思考の再構築

@yhassy

デザイナー エンジニア 各自のコミュニケーションが永遠の課題

デザインとコードの同時進行が最近の動き 「デザイナーはコード書くべき、ビジネスを知るべきだ!」ニーズ

ツールで解決

Sympli

パターンを考える

UI構築のスピードアップ

一定以上の品質担保

  • ある程度のパターン言語を作るべき
  • ユーザーが最低限満足するツールを作るため
  • あらゆる状況に対応できるように汎用性のあるもの

パターン言語

ATOMIC DESIGN

デザインの最小要素とは何か?

MATERIAL DESIGN

Bootstarp

フォースプラットフォーム、すべてで同じ体験をする

自社スタイルガイド、パターン言語をつくる

例:MailChimp

  • 利用者ニーズに最適化するUI
  • 製品・サービスに合う名称

そもそもの大きな問題

デザイナー… 全体構成から詳細部分をつくる → 部品から作れない

エンジニア… パーツ単位から全体のサービス → 一貫性がないと二度手間

プロトタイプツール

invision

考え方を合わせるアプローチ

スタイルガイドの作成など ← ただし必ずうまくいく訳ではない

今考えられる解消の仕方

エンジニア

ドメイン駆動設計 DDD(言葉のズレの解消)

ドメインモデルーーーーーユーザーの目的

デザイナー

オブジェクト指向UX

ユーザー像 → シナリオ → オブジェクト化

コンテンツモデル(例)

レビュー

  • タイトル
  • 本文
  • 概要
  • 日付
  • アイテム --- 名前、概要、価格、発売日、メディア、ブランド
  • タグ
  • 評価
  • 筆者

オブジェクトで考えよう、言葉を合わせよう

いったいどういうコンテンツを設計しようとしているのか?

JOB TO BE DONE

イノベーションのジレンマ

JOB

どの製品・サービスでもお客様に「仕事を与えられている」という考え

ユーザー属性は違う…でも同じ目的がある(20代女性、40代男性でも自分の写真を「知人に共有させたい」)

Facebookの写真機能は知人と一緒に見て楽しむ

ユーザーの動機、求められる結果を突き詰める

  • 状況 … レストランで"食べ物"がきた時
  • 動機 … 美味しそうな"写真"が撮りたい
  • 結果 … いい"場所"を知っていると思われたい・"お店"に来て欲しい…願望

ユーザーインタビュー, 仮設検証

こんな機能はどうだ?こう使って欲しい

ユーザーの求めている結果に対して詰めてゆく!


AtomSublime Text、WebStorm に Visual Studio Code、四大エディター真夏の大決戦!

Sublime Text派なんですが、推しの人がそこまで推しておらずいいかげんにしろって感じだよ(怒る)。WebStormは有料だからすごかった。

Atom

中島 滋 ledsun

マルチプラットフォーム

ユーザー数 100万人 1500万ダウンロード

標準機能

カスタマイズ方法

  • エディタ設定
  • snippet
  • パッケージ4600以上
  • テーマ1500以上

パッケージの例

atom-beautify

  • コードフォーマッター

hyperclick

  • 関数・変数定義へのジャンプ
  • 言語毎のサブパッケージ ex:js-hyperclick

やっててよかった話

1 マークダウンで書きたい

  • markdown-preview(標準機能)
  • 標準機能(ctrl+shift+m)

2 Railsアプリケーションの修正、slim記法をやるとき

3 html文章を組む時全角半角が混ざっている時

  • japan-util
  • 選択範囲を修正

Sublime Text

こもりまさあき

基本概念

必要最低限の機能だけが搭載されたテキストエディタ

いまどきのGUIエディタの大本

何気にかゆいところに手が届くもの

拡張性の高さ

今はいろんなエディタにも対応されているが…

言語や技術にも素早い対応

今はいろんなエディタにも対応されているが…

WebStorm

山本裕介 @yusuke

  • JetBrains製のIDE
  • 拡張・カスタマイズ不要
  • 有料 ¥5,940~

機能例

  • Github Isuue検索できる
  • ブランチ作成できる
  • コミットのブランチをする
  • color Pick

Visual Studio Code

井上章 Microsoft エバンジェリスト

機能

ルート起点でcode .で起動

terminal起動してコンパイラーを走らせられる

Nodeや.NET/ASP.NETほかウェブブラウザでの環境でもデバッグできる

Visual Studio Code Extensions | Visual Studio Marketplace


個人的なこととしてはプロスマブラーの人が来ていたり、@Stocker_jpの中の人が目の前の席に座っていたのですげーってなりました。

twitter.com

色々他にもセクションはあったと思うのでそこらへんのまとめは他の人にまかせる。というか普通にセッションスライドまとめとか公式で作って欲しい。

こちらからは以上になります。

XSS対策のセキュアJSについて(基本編)

社内ブログでまとめた内容をこっちでも書いてみる。ただ、フレームワーク使ったりしている中級者以上にはあんま参考にならないと思いますが基本編みたいなノリで御覧ください。

エスケープをする

すぐできる対策であり、割と効果的なものがエスケープ処理です。これは問題を起こしうる特殊文字文字参照に変換して、実行させないようにする処理です。対応する特殊文字「&」「<」「>」「”」「’」の5つです。

function escapeHTML(str) {
 str = str.replace(/&/g, '&amp;');
 str = str.replace(/</g, '&lt;');
 str = str.replace(/>/g, '&gt;');
 str = str.replace(/"/g, '&quot;');
 str = str.replace(/'/g, '&#39;');
 return str;
}

ちなみにES6であればテンプレートリテラル(=Template strings)を使用して下記処理もできます。

function escapeHTML() {
 var raw = String.raw.apply(null, arguments)
 var safe = raw.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, ''');
 return safe
}
var input = "<img src=# onerror=alert(1)>";
var html = escapeHTML`<div>${userinput}</div>`;

テンプレートリテラルの使い方は「`」(バッククオート)で囲むだけです。

URLはhttpおよびhttpsスキーム

URLを取り出し、それをデータとして扱う際に気をつけたいことは、javascriptスキームなど複数のスキームを介在させないために、リンク先がhttp://かhttps://なのかを判断して挿入するようにすることです。

var url = decodeURIComponent(location.href);
if( url.match( /^https?:\/\// ) ){
    var elm = document.getElementById("link");
    elm.setAttribute("href" url);
}

javascriptスキームはいわゆるブックマークに登録して便利な機能として使うというのが一般的ですが、それをXSSとして使用されるのを防ぐための策であります。

JSONPの取り扱い注意とJSON.parse

JSONPはクロスドメイン、つまり同一のドメインのデータでなくても引っ張ってこれるもので便利なものではありますが、同時に他者が仕組んだ悪意のあるJSONPデータも入り込む可能性があります。

JSONPをまったく使用するな、ということではないのですが使用する際は信頼のあるデータであることを証明した上で使用するのが吉です。

そしてJSONほか外部データを使用する際は必ず JSON.parse関数 を使用してください。これは文字列を JSON として解析するためのものなので、eval関数だとJSONの中に実行文が紛れていると実行されてしまう恐れがありますので意識して使いましょう。

レンダリングメソッド使用廃止

主に下記のソースになります。これは上述したエスケープ処理がない場合、確実にXSSの標的になり得ますし、この部分を使って悪用されるおそれがあるかもしれないからです。

element.innerHTML = “…”;
element.outerHTML = “…”;
document.write(…);
document.writeln(…);

jQueryに頼り過ぎるな

jQueryはjsライブラリの1つですが、煩雑なコードを容易に記述しやすくして、デザイナーさんにも扱える簡単なもので今も制作会社で広く使用されていると思われます。

実はjQueryでもXSS対策はできるものがあり、それは text() です。受け取る値をテキストデータにエスケープしてくれる代物なのでinputでの入力を即出力するものには適しています。

$('input').on('keyup', function(e){
 $('.hoge').text($(this).val());
});

しかしながら、jQuery自身の長所でもあり弱点としても見られる「DOMの直接操作」部分が割とネックとなってきています。つまりDOM操作によるXSSの介入が起こりうる可能性があるのです。

以前のver.1.6では $(location.hash) の脆弱性が指摘されており、要素の検索や作成などを引数の文字列で判断するため、$()内でスクリプトを記載すると#idで指定したものがそのまま要素として判断されることがありました(ver1.6.3にて修正済み)

http://my-web-app/#<img onerror="alert(1)" src="xxx">
$('#<img onerror="alert(1)" src="xxx">') //ハッシュ値で判断すると左の値で取得する
//<img>タグで処理されるようになってしまう。

jQuery自身もver3.0の更新(2016年5月)があったように、日々使いやすくかつ脆弱性を潰してきて、簡単な装飾程度であれば使用する面では問題無いかもですが、セキュリティ面を考えた上でwebサイト・アプリに使い続けるというのは難しい選択のようにも思えます。

なのでjQueryのみに頼り続けるのは危ないかも、というのを念頭に置いておくと良いかもしません。(※使用をやめろ!と固く禁じる訳ではないです)


こちらからは以上です。つまりReact.jsについてちゃんとやれということでした。