Vue.js から考えるアクセシビリティについて - 2019
こちらは、Webアクセシビリティ Advent Calendar 2019 の２１日目の記事です。 Vue.js 開発における Web アクセシビリティ対応にまつわる内容となっております。（英訳記事） この記事は公開から１年以上が経過しています。内容が一部古い箇所があります。 自己紹介 大山奥人（おおやまおくと）と申します。ネット上では、おおやまみちのく、yamanoku と名乗って活動しています。 制作会社の Web デザイナーとして働き出し、株式会社GEEK でマークアップ・フロントエンドエンジニアとして従事した後、2019 年 10 月から株式会社クラウドワークスに在籍しております。 役職は UX エンジニアです。個人ではアクセシビリティ啓蒙も行っています。 著書 これからはじめるwebアクセシビリティ 技術書典で「これからはじめるwebアクセシビリティ」という技術同人誌を発表しまし
現役Vueエンジニアが参考にしているフロントエンド素材まとめおすすめサイト４選 - Qiita
今回の記事ではフロントエンド開発で参考にしているサイトを紹介していきます。 どれも動くCSS素材やコピペだけで簡単に実装できる素材がまとまっています。 気に入ったサイトを自己判断で参考にしてみてください。 TwinzLabo コピペだけで作れるデザインレシピを公開しています。動きのあるデザインやオシャレなWebデザインなど様々な記事があるのでおもちゃ屋さんに来たかのように楽しめます。記事に使用しているアニメーションはVue環境で作成されているので普段Vueで開発している方はコピペだけできれいに反映させることができて便利です。記事で紹介されているコードひとつひとつに詳しく解説がついているので初心者にはありがたいかと思います。 Free Frontend By using freefrontend.com you accept our cookies and agree to our priv
Vue.jsのサイトジェネレータGridsomeが最高かもしれない - Sweet Escape
はじめに Gridsome どんな感じで動くのか やってみる データソースとかもろもろ設定してみる ビルドする Wordpressをデータソースに設定してみる まとめ はじめに 前回、Docker + Remote Containersを最高だと紹介したわけですが、今回はGridsomeを紹介します。そもそも前回のブログはこれを試すために環境を整備しなおそうとしたのがきっかけでした。なお、前回のブログはこちら。 www.keisuke69.net どこらへんが最高かっていうと全てのデータソースに対してGraphQLでアクセスできるようになるところ。これって最高じゃないですかね。ま、最終的には静的サイトとしてGenerateしてしまうわけですが。 ちなみに、なぜ、今回Gridsomeを試そうと思ったかというと、最近聞いたとあるPodcastで紹介されてたからです。それだけ。 Gridsome
ep.36 Vue 3 Study 「何が変わる？ Composition API」 | UIT INSIDE
@spring_raining が @rChaser53 とともに、 Vue 3 Composition API の概要、実際にコードを書いて触ってみた所感、使うべきか？ などをテーマに話しました。 ゲスト @rChaser53 UIT Front-end engineer 趣味では Rustfmt に貢献したり、WASM で動く JVM を Rust で作ってしまうバリバリの Rust エンジニア Vue 3.0 の変更点の中でも目玉のアップデート RFC: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0013-composition-api.md Composition API について解説する特設ページ https://vue-composition-api-rfc.netlify.com/ TypeScript との相
プロダクトのパフォーマンスを改善するためにVue.jsの関数型コンポーネントやpropsに関する施策を行った話 - SMARTCAMP Engineer Blog
こんにちは！フリーランスエンジニアとしてスマートキャンプに参画している芳岡です。 弊社のプロダクトであるBiscuet(https://biscuet.jp/)の開発に初期から参画していますが、サービスが世の中に展開されていく過程、チームが大きくなっていく過程を間近で見れとても興味深く思っています。 今回は、そのBiscuetで使用しているVue.jsのパフォーマンス改善を行ったのですが、そこで気づいたいくつかのポイントを整理してお届けします。 Vue.jsのパフォーマンス 関数型コンポーネント propsは、オブジェクト全体か各プロパティごとか？ プロパティごとに渡す方法 オブジェクトを渡す方法 注釈 最後に Vue.jsのパフォーマンス Vue.jsでは、状態変更によって、仮想DOMが繰り返し再計算（updateRender)されるため、それによりパフォーマンスが悪くなることがあります
最近のフロントエンド、ぶっちゃけどう？ 第一線のエンジニアたちが語るVue.jsでの開発事情
Vue.jsに関する勉強会「Roppongi.vue #2」が2019年7月31日に開催されました。Vue.jsをさまざまな角度から掘り下げ、知見をシェアします。トークセッション 「最近のフロントエンドぶっちゃけどうっすか？」に登壇したのは、フロントエンドエンジニアで活躍するpotato4d氏とkahirokunn氏。昨今のフロントエンド界隈事情をディスカッションします。 最近のフロントエンド、ぶっちゃけどうですか？ tadano：本日はpotato4dでおなじみの花谷さんと、kahirokunn。フリーランスなんですよね？ kahirokunn氏（以下、kahirokunn）：そうです。 tadano：活躍されているエンジニアのお二人をお招きいたしまして、トークセッションをやらせていただこうと思います。テーマは「最近のフロントエンド、ぶっちゃけどうっすか？」。めっちゃ話し言葉ですね（笑）
Vue.jsでアホなジェネレーターを作る勉強会をやると予想以上にガチになる
デイリーポータルZが「Vue.js勉強会」というWeb開発系のイベントを開催した。サイトを知っている人なら「え？あのデイリーが？なんでそんな真面目なイベントを？」と驚くかもしれない。 急に真面目なことをやりだすと、ヤンキー母校に帰る的な心変わりでもあったのかと心配になる。 僕自身がWeb開発の仕事をしているため「ふざけたサイトがやる勉強会なんて…」と最初は不安に思っていた。しかし、蓋を開けてみればエンジニア業務を擬似体験できるくらい内容のしっかりした勉強会だった。 大学中退→ニート→ママチャリ日本一周→webプログラマという経歴で、趣味でブログをやっていたら「おもしろ記事大賞」で賞をいただき、デイリーポータルZで記事を書かせてもらえるようになりました。嫌いな食べ物はプラスチック。（動画インタビュー） 前の記事：ドラクエに出てくる「やくそう」は現実だとどう使うのか専門家に聞く ＞ 個人サイト
Vuexによる状態管理を含む最高に快適な Vue.js + TypeScript の開発環境を目指す話 - Qiita
追記 2019/12/05 Vue 3.0 のリリースが現実的に近づいてきて色々と事情が変わっているので、話半分に聞いておいてください。 はじめに Patreon での支援募集をはじめました。この記事が良かった！という方は、今後の情報発信のためにもぜひぜひ支援お願いします。 https://www.patreon.com/potato4d Vue.js Advent Calendar 2018 年の管理役の potato4d です。昨年に引き続き、今年も Vue.js のアドベントカレンダーは他にもたくさんあるので、ぜひ #1 から追ってみてください。 12日目の今日は、 Vue.js + TypeScript での理想的な開発環境について考えてみたいと思います。 Vue.js における TypeScript 利用はまだまだ課題が多く、型の恩恵をうけるためのテクニックも複数存在しています。
「Vue.js + Go言語 + Docker」で作る！画像アップロード機能実装ハンズオン - Qiita
こんにちはpo3rinです。Vue.js Advent Calender 2018 9日目の記事です。 8日目の記事は vue.js(nuxt.js) の plugin はとても便利 でした。 11月にフリーの案件で Vue.js + Go言語で画像アップロード機能のあるCMSを作りました。Vue.jsでの実装の際には npmモジュールである vue2-dropzone を使うと、Vue.js にとって便利な機能が提供されており、すぐにアップロード機能が作れました。なので今回は Vue.js + Go言語 で画像アップロードを行う機能の実装をハンズオン形式で紹介していきます。 今回は Vue.js のアドベントカレンダーとしての投稿なので、Go言語の実装を飛ばしたい方向けに、Go言語のインストールが不要になるように、すでにDocker環境を用意してあります。せっかくなので今回は Docke
【2018年】Vueのテスト関連まとめ【非公式】 - Qiita
はじめに。こちらは アドベントカレンダー Vue.js #2 Advent Calendar 2018 3日目の記事になります。 2018年 Vueのテストまとめ （Vue-test-utils） こんにちは。世界。 今回は今年のVueのテスト関連について、自分がTwitterとか勉強会で観測したことをだらだらと述べるだけの会です。 この記事についてなにか意見があるようでしたらコメント欄なり、編集リクエストをいただけると対応させていただきます。有名なWeb文章からの引用させていただきます。 この問題について自分が唯一無二の権威だと主張するつもりもありません。気にくわなければ、自分なりのヤツをどうぞ。 by ハッカーになろう (How To Become A Hacker） https://cruel.org/freeware/hacker.html#skills1 ブコメなどで辛辣なコメン
Vue.jsとFirebaseの本を読んで高速にWebサービスを開発してみた - Imomemo
まずVue.jsとFirebaseの本を読んでみた 改訂新版 Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ（NextPublishing）) 作者: 渡邊達明出版社/メーカー: インプレスR&D発売日: 2018/10/05メディア: Kindle版この商品を含むブログを見る ワタナベ(id:tatsuaki_w)さんの「Vue.jsとFirebaseで作るミニwebサービス」というイカした本を買ってみました、超絶わかりやすくオススメ出来ます。 Vue.jsもまだまだ分からない部分も多く勉強中ですが、Firebaseに関しては一切触ったことがなかったです。 しかし、使ってみるとこれがめっちゃ便利。 この本によって基礎知識を付け、サクッとマークダウンエディターをFirebase上で作ってみて要領を掴みました。 オンラインメモ帳を作ってみた OimoNote |
弊社マッチングアプリ「CoupLink」をVue.jsでSPA化しました | LINKBAL Blog
はじめまして、リンクバルエンジニアの北村尚之です。 弊社が運営するマッチングアプリ「CoupLink」ですが、今年の夏にソースコードの全面的なリプレイスを行いました。 具体的には、Vue.jsというライブラリを用いてフロントエンドをSingle Page Application(以下SPA)化しました。 また、HTMLを提供していたバックエンドも、DB設計からやり直し、APIサーバーとして一新しました。 この記事では、主にフロントエンド部分について、下記の話をしたいと思います。 リプレイスの目的 SPA化にあたり考えたこと 設計について Vue.jsの学習コストについて リプレイスの目的 SPA化による高速化 今回の改修以前のCoupLinkは、Ruby on Railsで組まれた通常のHTMLを返すWebページをベースに、ハイブリッドアプリとして提供されていました。 この構成だと、画面遷
真のフロントエンドエンジニアになるために、まずはNuxt.js + Firebaseを使って簡易メモ帳を作ってみた - LiBz Tech Blog
目次 目次 はじめに 前提条件 Nuxtってなに？ Nuxtの主な機能 Nuxt.jsやってみる Nuxt.jsのインストール Nuxt.jsでアプリ作成 nuxt.config.jsによる設定いろいろ Nuxtの構成 Nuxtでアプリ実行 ポート(3000の部分)を変更したい場合 アプリの説明/解説 レイアウト・コンポーネントの作成 レイアウト(layouts) ページ(pages) コンポーネント(components) データの扱い/保存 firebase firebaseでdatabase作成 firebaseで認証設定 store(Vuex) デバッグ ビルド herokuにデプロイ やってみて はじめに こんにちは! 11月にLiBに入社したアベと申します。 アラサー子持ちのエンジニア(エンジニアと名乗るのは憚れる...)です。 社会人3年目からWebの世界へ転身し、webデザ
Vue.js + Vuex + TypeScript ファーストインプレッション - Shin x Blog
日頃は、サーバサイドの開発が主なのですが、その UI として フロントエンドの開発も行うことがあります。最近話題の Vue.js を試してみたのでその感想などを。 前提 これまで利用した構成 Vue.js 構成 雑感 ちょっと試す、がすぐにできる vue-cli が楽 vue ファイル template ディレクティブ scoped css vue-router / Vuex 連携 Vuex mutation を直接呼んで、state を変更 コンポーネントから直接 state を操作 TypeScript Vue.js 入門 さいごに 前提 これまで利用した構成 ベースとして、これまでプロダクションで利用したことがある構成は以下です。いずれも、フォームベースの SPA で、現在も稼働しています。 AngularJS 1.x AngularJS 1.x + TypeScript React
[和訳] 次期 Vue (v3.0) の計画 / Plans for the Next Iteration of Vue.js - Qiita
[和訳] 次期 Vue (v3.0) の計画 / Plans for the Next Iteration of Vue.js ありがとう Evan You, ありがとう Vue.js 開発チーム 元記事 Plans for the Next Iteration of Vue.js – The Vue Point – Medium 追記 (2018/10/02) この訳が Vue.js 日本語公式サイトの翻訳記事になりました 🎉 https://jp.vuejs.org/2018/10/01/plans-for-the-next-iteration-of-vue-js/ Plans for the Next Iteration of Vue.js ─ Vue.js における次のイテレーションの計画 先週の Vue.js London で、私は Vue の次のメジャーバージョンについて簡単
![[和訳] 次期 Vue (v3.0) の計画 / Plans for the Next Iteration of Vue.js - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/cbc1f0f7d57c0fbd7dc87d81bc07542c36a83eff/height=288;version=1;width=512/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fqiita-fb-2887e7b4aad86fd8c25cea84846f2236.png)
2018年Vue.jsとVuexを使ってFluxをしている人には必ず知っていてほしい開発やメンテナンスの際に役立つVuexのTipsとサンプルコード
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしい開発やメンテナンスの際に役立つ設計とTipsとサンプルコードFacebookfluxVue.jsVuexvue-router 初めに ※ 全てのコメントに返事しません。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ゴール ReduxやVuex、Fluxのパワーワードに負けずになんとなくではなくちゃんとFluxを理解し、実践して恩恵を受ける。 役立つVuexのTipsを身につけコード品質を向上させる。 VuexとVueRouterの落とし穴の把握。 リファクタリングの障害を減らしコードを追いやすくする。 Vuexの穴 1. Vuex提供のmap系の辛み VuexのmapActionsとか、createNamespacedHelpersめっちゃ便利ですよね。 import { createNamespac
Nuxt.js v2 の中身を読んで仕組みを理解しよう - Qiita
東京ラビットハウスのerukitiです。ごきげんよう。 Nuxt大人気ですね。ですが皆さん、Nuxtを使っていてもその中身がどうなってるかまではちゃんと調べている方は少ないのではないでしょうか？エンジニアたるもの中身をちゃんと知らずに使うなどとはもってのほかです！ そこで今回の記事はではNuxtの中身を読んで仕組みを解説します。 2018/10/08（月曜祝日）に開催される技術書典5では、Nuxtの中身を主な題材として、JavaScriptフレームワークの技術と仕組みについて解説する本と、V8を崇める本の2冊を出す予定です。ご興味があればサークルページから、チェックリストに登録してみてください。 この記事は、本を書く過程で調べ上げたことを元にブログバージョンとしてまとめたものです。 誤りがある、ここがわかりづらい、もっと深く説明がほしいなどの要望があれば、お気軽にコメントや、@erukit
Nuxt.js v2.0.0がリリースされたので触ってみた【変更点まとめ】 - Studio Andy
新ブログに移行しました。 blog.andoshin11.me
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ESLintとPrettierをどう扱うべきかの考察（2018年12月版） - Qiita
Nuxt, ElementUI, Storybook 構成のVueプロジェクトの始め方 - Qiita
