最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - console.lealog();
久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき！」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い！とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。（もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし） 原初の時代からReactな案件をそれ
Vue.jsの日本最大級カンファレンス「Vue Fes Japan Online 2022」、10/16にYouTube Live上で開催 | gihyo.jp
Vue.jsの日本最大級カンファレンス「Vue Fes Japan Online 2022」、10/16にYouTube Live上で開催 日本最大級のVue.jsカンファレンスであるVue Fes Japan Online 2022が、10月16日（日）にオンラインにて開催されます。 本カンファレンスでは、セッションやライトニングトーク、さらには様々な企画が開催されます。今回はYouTube Liveでの開催なので、ぜひ気軽にご参加ください。 キーノート キーノート（基調講演）には、Vue.jsの開発者であるEvan Youがライブ配信にて登壇します。キーノート後には、Evan Youが質問に答えてくれる「Evan Youに聞こう」という企画も用意されています。直接質問できる貴重な機会ですので、Evan Youに質問してみたいことがある方は、ぜひ#vuefes_qaのハッシュタグをつけて
LINE MUSIC のパフォーマンスを向上させた Vue3 マイグレーション
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINEの京都開発室でフロントエンド開発を担当している柴坂浩行です。 みなさんは仕事中などにパソコンで音楽を聴くことはありますか？ LINE MUSIC にはスマホアプリだけではなくWeb版アプリがあります。 私たちが開発しているWeb版アプリでは、JSフレームワークとして Vue.js を使用しています。 https://music.line.me/webapp/ これまでこのWeb版アプリには Vue2 が使われてきましたが、 2022年6月、私たちは Vue3 にアップグレードしたバージョンをリリースしました。 私たちのチームではWeb版アプリの機能開発と平行して、パフォーマンスの改善にも取り組んでいます。パ
25 Vue Tips You Need to Know
Learning to be a better Vue developer isn't always about the big concepts that take time and effort to master. It's also about the short tips and tricks that can make your life a whole lot easier — without a whole lot of work. I've picked up a ton of useful tips over the years developing and writing about Vue. Some are clever, some I use almost every day, and some are more advanced — but they're a
JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年の総合ランキング1位はVue.jsです。 以下は2020年のランキング、2020 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2020 5回目のJavaScript ライジングスターにようこそ！ こ
vue-composition-apiで作るカスタムHook入門〜useHoge()を自作してみよう〜
概要 vue/composition-apiの登場によって, Vue.js でも React の Custom Hook のような関数を簡単に作成できるようになりました. 本記事では, vue/composition-apiで作る API 呼び出し用の Hook として「useApi」を紹介しながら, 作成のコツや考え方を説明していきます. また, 最後には useApi 単体でのテストコードも添付しています. Hook のテストコードが気になる方もぜひ読んでください. 対象読者 vue/composition-apiの存在は知っている, または軽く使ったことがある React の Hook の存在は知っている, または軽く使ったことがある useHoge で表される最近のフロントエンドのコードがよくわかっていない といったステータスの方に, useHoge を作成する狙いと compos
Vue 3 に向けて Composition API を導入した話 - MicroAd Developers Blog
システム開発本部アプリケーションエンジニアの Edy です。 マイクロアドの WEB アプリケーションのフロントエンドは、大半を Vue.js を用いて開発しています。 その Vue.js ですが、「Vue 3 is now in RC! (Vue 3 is now in RC! · Issue #189 · vuejs/rfcs · GitHub)」が公開され、version 3 ( Vue 3 ) が盛り上がりを見せています。 今回は、Vue 2 から 3 へ移行する理由と、 2 から 3 へ version up するために行なっている Composition API の導入 についてお話していこうと思います。 そもそも Vue.js とは ? SFC TypeScript Vue 2 の限界 大規模なプロジェクトになるほど開発効率が落ちる ロジックの再利用にかかるコストが大きい 単
AWS Amplify と Vue.js を使って、基本的な認証と CRUD 操作ができる Web アプリケーションを作る- builders.flash☆ - 変化を求めるデベロッパーを応援するウェブマガジン | AWS
こんにちは、JAWS-UG 浜松支部の松井です。 普段からモノリシックな環境やそれに準じる環境での Web アプリケーションの開発、保守に取り組んでいますが、継続的にサービスを運用していく上では様々な悩みが尽きません。 OS のバージョンアップ、セキュリティパッチはどうするか ? 言語やミドルウェアのバージョンはどうするか ? ステージング、本番等の環境のデプロイはどうするか ? コスト最適化はどうするか ? etc・・・ そこで、サーバーレスアーキテクチャを採用することにより、こう言ったホストマシンやネットワークの管理に起因する悩みを軽減することができます。 とはいえ、いきなりサーバーレスに着手するとしても、 本当にちゃんと動くのか ? 設計、構築が難しいのではないか ? コストはどのくらいかかるのか ? まずどこから手をつければ良いのか ? と言った疑問があると思います。 今回はそう言
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTipsJavaScriptTypeScriptVue.jsフロントエンドvue-cli はじめに 最近iCAREさんの所でVue.jsを一緒にやらせていただいているのですが、フロントの技術スタックがGraphQL + Vue.js + TypeScriptで開発しており、そこでのVue.jsの開発体験がかなり良く、iCareさんの詳細なノウハウを公開しても良いと言っていただけたので、言語化し、整理して、共有出来たらと思います. ※ いつも通り記事の内容に意見がありましたら直接編集リクエストをください 前置き 今回のサンプルは@vue/cliを利用し、プリセットはTypeScriptだけいれときました. versionは2020年7月16日
「AmplifyとAppSyncでモダンでイケてるWebサービスを爆速で立ち上げようぜ 」を話しました #devio2020 | DevelopersIO
こんにちは、もこ@札幌オフィスです。 6月16日より、クラスメソッドの年次技術イベント「Developers.IO 2020 CONNECT」を開催しています。期間は2020年6月16日（火）から7月7日（火）、テーマごとに7日間の日程に分けて開催、セッションはなんと合計100本以上あります。 私は、6月23日（火）のライブセッションの3本目を担当しました。登壇の内容についてはこちらをご覧ください。 登壇動画 ライブセッションだけでなく多数の技術について動画を公開しています。下記のYouTubeチャンネルの登録もお願いします。 登壇資料 Q&A Q1. Amplifyを使うことでインフラ側がブラックボックスになってしまい、セキュリティ上の不安や仕様考慮漏れによる不具合が怖いのですが、どうすればそういった不安を拭えますか？ 確かに脆弱性や不具合がある可能性は無きにしも非ずですが、自前で全てを
BASEのVue.jsコンポーネントの設計について登壇してきました - BASEプロダクトチームブログ
前書き フロントエンドエンジニアの松原(@simezi9)です。 先日10月30日にクラウドワークスさんをお借りして実施したVue.jsの設計勉強会である、Vue.jsアーキテクチャリング勉強会 にて、 BASEの現在のVueコンポーネントの設計に関して登壇してお話してきました。 全体の資料はこちらです もともとBASEではVue.js+TSを採用した大規模なシステムのリニューアルプロジェクトが2018年からスタートしていました。それにあたっての大まかなフロントエンドの構築方針は以前もblogや外部登壇で発表していました。 次世代の管理画面を作るフロントエンドの取り組み - BASE開発チームブログ 次の5年を支えるVue.js製UIコンポーネントライブラリを育てる これまでの発表では大枠の技術スタックやワークフローの話が多かったですが、 今回はVueコンポーネントの設計が勉強会の主眼にあ
新管理画面のAPIにGraphQLを採用した話 - 一休.com Developers Blog
一休.com レストランを開発している所澤です。この記事は一休.comアドベントカレンダーの10日目の記事です。 先日、一休.comレストランの管理画面をリニューアルしました。 この記事ではその際にAPIの実装方法として採用したGraphQLについてフロントエンド視点で利点や使い所について述べます。 GraphQLについて以下の記事がわかりやすかったです。 「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ - エンジニアHub｜若手Webエンジニアのキャリアを考える！ 短いまとめ 新しくAPIサーバーを書くなら是非GraphQLで！ というくらい良かった Apolloのエコシステムに乗り切らなくてもいい。ふつうのRESTfulなAPIサーバーの代わりに、くらいの気軽さでGraphQLを採用してもいい プロジェクトの概要 今回リニューアルした一休.comレ
Vue Function API で簡単に view と logic を分離しよう - Qiita
を追記すれば準備完了です。 改変元のソースを用意する 新しい書き方を学ぶには 既存コードの改変がとっつきやすいです。 お決まりの Todo アプリで行きます。まずはテンプレートを用意しましょう。 きみは今まで作った Todo アプリの数をおぼえているか。 <script> export default { data:() => ({ todoList: [], tempTodoName: '', taskId: 0 }), computed: { itemCount() { return this.todoList.length } }, methods: { updateTaskName(name) { this.tempTodoName = name }, addTodoItem() { this.todoList = [ ...this.todoList, { id: this.ta
Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division
Vue.js 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎かにすることはチームを混乱に陥れることと同義です。 それが SPA 未経験のチームであればなおさらです。 直近のプロジェクトはまさにそんなプロジェクトでした。 本セッションではアトミックデザインのエッセンスを用いてコンポーネント分割の指針を示し、 またコンポーネント実装時に注意すべき事柄についてお話します # URL HomePage: https://nrslib.com Twitter: https://twitter.com/nrslib
Vueの秘密のパフォーマンステク9選紹介 - Qiita
VueConf USでのさまざまな発表 今年の3月に VueConf US が開催されました。最近になってビデオが公開されて初めて知ったこともあるので本記事ではその紹介をします。 いろいろ面白いトピックがあるのですが、特にVueコアチームのGuillaume Chauさんによるパフォーマンス改善テクニックはまじかーという感じだったのでここにまとめたいと思います。 "9 Performance Secrets Revealed with Guillaume Chau" プレゼン動画: http://www.youtube.com/watch?v=5B66qer8cZo スライド: https://slides.com/akryum/vueconfus-2019#/ デモサイト: https://vue-9-perf-secrets.netlify.com ソース: https://githu
破綻しない Vue.js アプリケーション開発のために大切なこと / How to make a robust Vue.js application - Speaker Deck
2018/10/15 に JSLounge の活動として UUUM株式会社様で行った発表のスライドです。
レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 #エンジニアHub - エンジニアHub｜若手Webエンジニアのキャリアを考える！
レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 10年以上前に作られたレガシーシステムをVue.jsで大規模リプレイスしたエムスリーに、導入して感じたVue.jsのメリットや、活用法を伺いました。 JavaScript（JS）のフレームワークは、何を使うのがベストなのでしょうか。ここ3年ほどで数々のJSフレームワークが誕生していますが、React、Angularという二大巨塔を超えるものはなかなか現れていません。 そんな状況の中、GitHubではReactを上回るスター数を誇っている1のが、2014年のリリース後、着実に進化を重ね、日本でも採用事例が増えてきているVue.jsです。「JavaScript ベスト・オブ・ザ・イヤー」に2016年、2017年と2年連続で選ばれているほか、Ruby on Rails（Rails）やLaravel とい
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Context and Provider Pattern Using Vue 3 Composition API | HackerNoon
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
