読者です 読者をやめる 読者になる 読者になる

青空コメントアウト

WEBのこと、デザインのこと、ご飯のこと、趣味のこと。青空の向こうの誰かに届きますように。

Vue2.x系のハマりどころ templateとコンパイラを完全解説するよ

// WEB開発の話 // JavaScript

f:id:cocoro27:20170308195311p:plain

Vue2.xでは仮想DOMが使われるようになりました。それに伴い、「Vue用のテンプレート」を「仮想DOMをレンダリングするための関数」に変換するという処理をコンパイル時に行ってくれる仕組みが組み込まれています。

そして、お手軽にVueを試したい人、プロダクトにVueを使いたい人、コンポーネント志向でアトミックに実装したい人など、様々な用途に応じたテンプレートの書き方(&コンパイルの方法)を用意してくれています。

そのためテンプレートの書き方とコンパイルの種類については仕様がやや複雑で、公式ドキュメントだけでは理解が難しくけっこうハマりどころだと感じている(事実ずっぽりハマりました)ので、知見を残しておこうと思います。

※この記事を書いている時点でのVueのバージョンは2.2.1です。

続きを読む

逆引き!フロントエンドのイマドキパフォーマンス改善

// WEB開発の話

f:id:cocoro27:20170118182205j:plain

WebアプリにしろWebサイトにしろパフォーマンスはとても重要です。どんなに高機能であっても、どんなにデザインが良くても、パフォーマンスが悪ければユーザーは離れてしまいます。
とは言え現場はキツキツのスケジュールで、パフォーマンスにまでこだわる余裕がないよ!パフォーマンスはひとまずできる限りのところまで頑張るよ!となってしまうこともあるかと…。

この問題の解決の糸口はパフォーマンスを良くする手段をどれだけ知っているかです。仕様を決めるとき、デザインを決めるとき、実装するとき、それぞれのフェーズでパフォーマンスを常に意識していると自ずとハイパフォーマンスに近づきます。

というわけで今回はフロントエンドの観点から、イマドキのパフォーマンス改善手法をまとめてみました。イマドキと謳っておきながら2年前くらいの技術が出てきたりして最新の話題でもないのですが。

ちなみに、本題に入る前にWebパフォーマンスの基本として押さえておくべき本を紹介しておきます。どうぞ遠慮なく離脱してポチりに行ってくださいませ。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

  • 作者: Steve Souders,スティーブサウダーズ,武舎広幸,福地太郎,武舎るみ
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2008/04/11
  • メディア: 大型本
  • 購入: 32人 クリック: 676回
  • この商品を含むブログ (127件) を見る

続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス

続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス

続きを読む

コールバック・ナイト

// WEB開発の話 // ためにならない話

さてお立ち会い。
せっかくだし、ではなくて、特に話すこともないし、今回は僕のクリスマスの話をしようと思う。今となってはいつのクリスマスのことだったか曖昧だし語るに足りないエピソードなのだけれど、そこは語るに落ちるというか、語った結果オチが付いたらラッキーという感じで。

そんなわけで。
以下、回想。

続きを読む

zshとpreztoを導入した話

// WEB開発の話

ターミナルを触らない日はないと言っても過言ではないくらい、開発者にとってターミナルは必須の存在です。かく言うあろえりーな(@aloerina_)もgitコマンドをたたいたりsshサーバにアクセスしたりとよく使っています。にも関わらずターミナルやシェルについては無頓着で、コマンド使えれば何でもいいなんて時代遅れなことを考えていました。恥じます。

そんなわけで、イケてるシェルであるzshを導入してファッショナブルでセンシティブでモテモテな開発者を目指す話をします。


続きを読む

npm + gulp + webpack でつくるES6/sass開発環境

// JavaScript // WEB開発の話

f:id:cocoro27:20161025201707j:plain

最近はJavaScriptをES6で書いたり、cssをsassで書いたりするのが当たり前になってきました。そうなると必然的に必要になるのがビルド。ビルドの仕組みも充実してきていて、単にトランスパイルするだけでなく、構文チェックしたり圧縮したり、CSSスプライトをつくるようなことまでできたりします。

で、このビルド環境、新規Project立ち上げる度に用意するのが面倒くさいので、自分用の雛形をつくりました。よかったら参考にしてみてください。

続きを読む

プレゼンするときに知っておくといいかもしれない20のこと

// WEB開発の話 // あろえいずむの話


エンジニアをやってると意外とプレゼンや講義をする場がありますが、何度やっても100%満足するプレゼンにはたどり着かないんですよね。想像以上に難しい。何か必勝法はないものか…と模索しているうちに個人的な「最低限守るべきプレゼンのルール」ができてきたのでまとめてみます。参考になる部分があれば使ってください。


続きを読む

ターミナルを快適に使ってMacでの開発を幸せにしよう計画

// WEB開発の話

f:id:cocoro27:20160916205509j:plain 職が変わってMacBook Proで開発することになったあろえりーな(aloerina_)です。
パソコン買い換えることって数年に一度しかないので、1度切りの設定ってけっこう忘れがちだよね。ということで、Macのターミナルを快適に使うために必要なことをメモっときます。3年後のあろえを幸せにするのだ。


続きを読む
TOP