Vue.js Tokyo v-meetup #8 の発表資料 https://vuejs-meetup.connpass.com/event/95678/
![Vue Fes Japan 2018 サイトの速度改善 / High Performance Vue Fes Japan Site](https://cdn-ak-scissors.b.st-hatena.com/image/square/fa1ee0f1d77d6a3202c39924f5d6f31afb42c2de/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F6b3860e635894d34b02490117a2e194c%2Fslide_0.jpg%3F10644714)
先日、三沢市で開催された名無し勉強会で、 「フロントエンド初学者のためのNuxt.jsの歩き方」 というタイトルで発表をしてきました。 スライドを作り始めたらボリュームが大きくなってしまい、10分に収まらずすいませんでした🙇時間オーバーしてしまったにも関わらず全てを伝えることはできませんでしたが、興味を持って頂いて学習のきっかけとしていただけたら嬉しいなと。 かく言う自分もフロントエンドを本格的に触り始めて5ヶ月弱の弱者なのでまだまだ初学者に毛が生えたレベルなんですが、自分の経験を元にこんな感じで勉強していけば効率的に学べるんじゃないかな?という情報をまとめたつもりですので少しでも参考にして頂ければ幸いです。 また、間違いなどのご指摘やアドバイスなどがあれば是非お願いします🙏 (スライドは公開用に少しリライトしました) 資料内の紹介コンテンツ・Nuxt.js ・noteのフロントエンド
仕事の開発環境改善のために欲しかったので金曜日からコツコツ作っていたアプリケーションを紹介します。 github.com 目的 CIが走るとstorybookやフロントエンドの成果物などの静的ファイルを自動的にアップロードして、PRでのレビューコストを下げるのが目的です。 PRでのレビュー時にCSSの変更などローカルに落として確認するほどでもないものを落としてビルドするのは時間の無駄だと思っています。 また、特にstorybookはデザイナさんと共有することが多いので、常に見れるところにあってほしいなって思っています。 gh-pagesでもいいけどコミットが面倒なのと、複数並列でアップロードできないのが問題です。 つまりmasterのしか置けず、今自分が作業している状態を見せたい時の共有が大変です。 このツールと同じでS3にデプロイするツールは知ってますが、カスタマイズしたいのと自分のサー
autoscale: true Webpagetestから始める継続的 パフォーマンス改善 ページロードタイム編 :hourglass: 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info Create: textlint, Almin アジェンダ パフォーマンス改善は指標を決めて行わないと迷子になる パフォーマンス改善を行うには継続的な計測を行う 今回はページロードについて、ランタイムは範囲外 パフォーマンス改善のアプローチ 継続的なパフォーマンス計測とリグレッションの検知 ^ 目的はパフォーマンス改善には計測が必要という事実を知ること ^ パフォーマンス計測は継続的に行う必要がある ^ パフォーマンス改善は何を目的、指標にして改善するかを決めないと迷子になる ^ 目的をもって継続的にパフォーマンス改善を行い
2018年8月11日に新しいメジャーバージョンとなるVue CLI 3.0がリリースされました。Vue CLI 3では、公式にTypeScriptをサポートし、 TypeScriptを利用するプロジェクトの生成に対応しました。これにより、TypeScriptでVueを気軽に試せるようになったということで、今回ちょっとどんなものか試してみることにしました。試した中でポイントとなりそうな部分をまとめてみたので紹介します。なお、私は普段はAngularでTypeScriptを書いているため、TypeScriptのクラス構文を使った説明になっています(クラス構文を使わなくても、TypeScriptでvue.jsを書くことはできます)。 目次 はじめに – Vue CLI + TypeScript TypeScript + Vue サンプル Vue CLIでTypeScriptプロジェクトを生成する
smarthr.connpass.com 行ってきました。十数人で各々が好きなところから読み始めて、最後に見所や気づきを喋る流れでした。initializersを読んでいく人やモデル中心に見ていく人など様々。近日中に全員のメモが公開されるとのことですので、そのときはリンク追記します。会場を提供してくださったSmartHRさんありがとうございました。 追記 先週金曜の dev\.to コードリーディング会に参加した皆さんのメモはこちらに公開されてますhttps://t.co/uipqG1pYxu— ぷりんたい (@spacepro_be) 2018年8月13日 追記ここまで 以下は自分のメモ。やはりdev.toと言えば爆速なので、CSSをheadタグに埋め込んでいたり、キャッシュってどうやってんだろうなーといったところを中心に読みました。最後の所感にも書きましたが、爆速サイトをつくるためのイ
技術的に誤った認識でnot for meされるのは悲しいし寂しいので、誤った認識に反論しておきます。 React の過激派(高尚なコードを求める人々)と Vue の過激派(動けば良い人々)と Angular の過激派(オブジェクト指向信仰の人々)— ユーン🍆 (@euxn23) August 7, 2018 何を以ってオブジェクト指向とするかは人それぞれだけど、Angularはオブジェクト指向ではないと個人的には思ってる。 クラス使ってたらオブジェクト指向、というのであればそれは否定できない。 ちなみに過激というかアドバンスドな設計をすればするほどAngularもRxJSをベースにしたリアクティブプログラミングに寄っていく傾向にある。 AngularとAngularFire(FirebaseのAngular向けライブラリ)を使って簡単なアプリケーションでも書いてみれば多少体感できると思う
久しぶりのブログです。 よく Node.js の人と思われがちですが、普段は Node.js でのバックエンド開発はもちろんですが React や Vue を書いていますので、たまにはフロントエンドネタを投稿しようと思います。 GitHub - hiroppy/ssr-sample: A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App - GitHub ... リポジトリにあるコード見たほうが早いと思いますので、ここでは注意点等を列挙していこうかなと思います。 主な技術スタック de
Update: The Cost Of JavaScript In 2019 is now available to read. Building interactive sites can involve sending JavaScript to your users. Often, too much of it. Have you been on a mobile page that looked like it had loaded only to tap on a link or tried to scroll and nothing happens? Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones, because it can delay inter
2019年の2月まで表参道のプログラミングスクールでVue.js(+Nuxt.js)を教えていました。 とある生徒に「Vue.jsとVuexの関連がわからないので図解して欲しい」と頼まれてホワイトボードにサクッと書いて説明してみたらわかりやすいと大好評。 しかもその生徒が私のラフ図をキレイな動画に作り直してくれたのでカットごとの紹介記事を書くことにしました。 この記事でわかること state/mutations/commit/actions/dispatchの違いがわかるようになります。 getterやsubscribeについては扱いません。 実際のコードの書き方にも触れません。 Vuexを使ってはいるけど理解できなくて苦しんでいる方向けの内容です。 なぜVuexを使うのか Vuexの図解に入る前に、私がVuexを使っている理由を説明しておきます。 Vuexのメリットが明確でないと図があっ
webサービスのUXを向上させるために、表示速度は非常に大切です。 しかしながら、noteはリリース当初からフロントエンドの実行速度が遅い=表示が遅いという構造的な問題を抱えており、継続率や離脱率など重要指標に悪影響を及ぼすリスクが強くありました。 noteチームはnoteを本格的なメディアプラットフォームへ成長させるスピードを加速していきます。それを踏まえ、手遅れになる前に技術的な負債を解消し、最新のベストプラクティスに沿ったフレームワークに移行することで、高性能なサービスを提供する基盤を作っていくという決断をしました。 本ポストでは、移行プロジェクトの技術的背景や移行手順を説明します。また、途中成果のデモをUPしているのでご紹介します。 技術的な背景noteの現在のフロントエンドはAngular.js 1系で構築されたSPAです。Angular 1系はかなり複雑なUIでも簡単に構築でき
こんにちは、モバイルチームの中川[twitter:@nkzn]です。 5月22日にプレスリリースがあった提携で紹介されていたアプリでは、React Native及びReact Native for Webを採用しています。こちらについて技術的な側面から(当たり障りのない範囲で*1)事例を紹介します。 経緯 5/22に、農業総合研究所さんとの業務提携契約が公開されました。 www.agri-note.jp 農業総合研究所さんは、7000件以上の農家さんから野菜を集荷し、全国各地のスーパーなどに設置された直売コーナー「農家の直売所」に野菜を出荷している、農産物の流通・販売・コンサルティングを手がける農業ベンチャーです。 (上記のスクリーンショットは2018年7月18日現在のものです) www.nousouken.co.jp 今回の業務提携により、共同でシステム開発を行っていくことになりました。
この記事では、 ReactやVueではなくWebComponentsだけを使いたい気持ちを胸に、とある社内プロジェクトをやってみての学び 巷にあふれるWebComponentsに対する見方への違和感 についてメモっておきます。 ただ「WebComponents」の語がもつ意味をきっちり定義してるわけではないので、そのへんは雰囲気で察してください。 そのせいで勘違いされがちな概念なんかも、知らんけど。 まずは巷にあふれる意見に対する気持ちから。 (React|Vue|Xxx)はもう古い、これからはWebComponentsだ! 勝手なイメージですが、こういう認識の人いるよね・・? 個人的には、「いや、WebComponentsはそういう技術じゃない」と思った・思ってます。 以下、ReactもVueもAngularも「ウェブアプリケーションを作るための技術」であるが、WebComponents
Illustration by unDrawInkdropというMarkdownノートアプリを一人で作っているTAKUYAです。最近、React Nativeを使って、iOS版とAndroid版の新しいバージョンをリリースしました。React Nativeは、JavaScriptとReactを使ってクロスプラットフォームなモバイルアプリが開発できるフレームワークです。 どうすればReact Nativeでハイクオリティなアプリが作れるのか、今回の開発を通して多くのことを学びました。本稿では、よりよいアプリを作るために自分が工夫したことをシェアします。既にReact Nativeでアプリを作っている方も、これから作ろうと思っている方も参考になるかと思います。 概要OSSライブラリは慎重に選ぶネイティブ拡張モジュールは出来るだけ使わないUIテーマの対応タブレットの対応動作を軽く保つ違和感のない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く