最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - console.lealog();
久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき！」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い！とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。（もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし） 原初の時代からReactな案件をそれ
エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA
Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、
「レガシーフロントエンド安全改善ガイド」を商業出版します #技術書典 - memo_md
※2019/11/8: 無料サンプルと目次を記事内に追加しました。 2019年4月に開催された技術書典６で頒布した「レガシーフロントエンド安全改善ガイド」ですが、このたびインプレスR&D社さまより商業版を刊行することになりました。 自分が商業版の技術書を書く日が来るとは思わなかったのでビクビクしています。 メディア: この商品を含むブログを見る nextpublishing.jp 表紙イラストは同人版と同様、鍋料理さんに描いていただきました。「安全な感じで！」という相談から、カワイイ工事現場が仕上がりました、とても気に入ってます。工事現場本と呼んでください。 タイトルに「迷わない！困らない！」という強気ワードが付いててちょっぴり恥ずかしいですが、迷わず困らない内容になってる・・はずです！ 同人版との違い / 加筆・修正した点 紙の本で比較すると、ページ数が110ページ程度→200ページ超と
Release v4.0.0 · vuejs/vue-cli
We're happy to announce the release of Vue CLI version 4! This major version bump is focused on necessary version bumps of underlying tools, better default setups, and other fine-tunings required for long-term maintenance. We expect a smooth migration experience for most users. You can view the full migration guide at https://cli.vuejs.org/migrating-from-v3/ Vue CLI v4 comes with greatly improved
jQuery to Vue.jsで学ぶ レガシーフロントエンド安全改善ガイド (ダウンロード版) - わんにゃんショップ麦 - BOOTH
この商品はダウンロード版です（PDF&EPUB） - PDF版 : A5/122ページ レガシーなフロントエンドコードをモダンなコードに安全に改善していくための実践的なノウハウをまとめた一冊です。表紙はとってもカワイイですが、筆者が2年ほどやってきたフロントエンドの改善経験がベースになっているため、中身はゴリゴリに現実的な話になっています。 フロントエンドの改善にはさまざまな問題が待ち構えています。 - 改善したいんだけど壊しそうで怖い - 何から手を付けたらいいのかわからない - 修正が巨大になってしまってもう自分でもわけがわからない - 心が折れる - などなど... そして「◯◯というフレームワークが良いらしいぞ！」と聞いたとしても、ゼロベースでの構築方法の情報はたくさん見つけることができますが、稼働しているリアルな現場に投入するための情報は手探りになってしまい、「そう簡単には導入で
Vue.jsでシンプルなローディングを表示する「vue-loading」の使い方 | DevelopersIO
Vue.jsでローディングを表示するモジュールは様々ありますが、本ブログでは「vue-loading」というモジュールをご紹介します。シンプルで使いやすいのでオススメです。 Vue.jsでローディングを表示 Webアプリにおいて、非同期処理を行うこと（APIを呼び出してデータを取得するなど）はほぼ必ずと言っていいほど必要なことです。また、非同期処理中にはローディングを表示しておき、ユーザーに処理を待っている状態であることを伝える必要があります。 Vue.jsでローディングを表示するモジュールは様々ありますが、中でも個人的に気に入った「vue-loading」をご紹介します。シンプルで使いやすいのでオススメです。 使い方 まずはVueプロジェクトが作成済みの前提で進めます。 以下のコマンドでインストールします。 $ yarn add vue-loading-template あとは表示したい
Electron+Vue.jsを使ったデスクトップアプリ開発を始める手順
はじめに ElectronはWebアプリケーションの開発に使われるJavascriptやHTML、CSSなどの技術を用いてデスクトップアプリを開発できるフレームワークです。１つのソースでクロスプラットフォーム対応（Windows、Mac OS、Linux）のデスクトップアプリを開発することができます。この記事では、Ubuntu上でElectronとさらにVue.jsを用いたデスクトップアプリ開発をはじめるために必要なツールのインストール手順と、実際にデモアプリを起動させるまでをまとめます。 できるようになること 以下のように、デフォルト状態のアプリを起動するところまでをまとめます。 前提と環境 以下の通りです。 OS : Ubuntu 18.04 Node環境は構築済とする。ここでは、v10.16.0 使用するパッケージ ElectronでVue.jsを使用する場合の選択肢としてはいくつか
Electron + Vue.js アプリでSQLite3を使う手順
Photo by Caspar Camille Rubin on Unsplash はじめに Electron + Vue.jsで構築したデスクトップアプリでSQLite3を使うための手順をまとめます。 前提と環境 以下の通りです。 OS : Ubuntu 18.04 Vue CLI : 3.8.2 Electron : 5.0.0 この記事でのElectron + Vue.jsアプリは、Vue CLI 3を使って構築したVueアプリにVue CLI Plugin Electron Builderをプラグインとして追加した状態での手順になります。他のelectron-vueなどを使用して構築した場合やその他の条件下で試していませんが、何か参考になれば幸いです。なお、VUe CLI 3とVue CLI Plugin Electron Builderを使ったElectron + Vue.jsア
Vue CLI Plugin Electron Builder
GitHub (opens new window) Write Once, Run Everywhere If it works as an SPA, it will work in Electron. Because it extends your regular config, it works with all plugins and customized webpack options. Completely Customizable All the functions of VCP Electron Builder are entirely configurable and well documented.
2019年 Vue.js + Electron の環境構築は vue-cli-plugin-electron-builder がおすすめ - Qiita
今まで Vue.js + Electron の組み合わせでプロジェクトを作成するには electron-vue が定番でした。 しかし、Vue CLI がバージョン3になり、Webpack 周りの設定を意識することなく TypeScript などが手軽に導入できることに慣れてしまうと、Vue CLI 2 ベースの electron-vue で新規プロジェクトを作るのは若干面倒に思えてしまいます。 検索してみたところ、Vue CLI 3 のプラグインである vue-cli-plugin-electron-builder というのが見つかり、大変便利だったのでご紹介させていただきます。 公式サイト https://nklayman.github.io/vue-cli-plugin-electron-builder/ 導入方法 Vue CLI 3 がインストールしてあり、すでにプロジェクト作成済
Chrome拡張機能開発でVue.jsを動かす – myMemoBlog by 256hax
Vue.jsをWebpackでビルドしたものを読み込めば、manifest.jsでunsafe-evalとかやらなくても実行できる。 ChromeでHelloWorld的な雛形（Hello Extensions）をつくる こちらに書かれているとおりに実行して、「Hello Extensions」を表示するまでをつくる。 Google Chrome 拡張機能を開発する -入門 Hello Extensions- こんな感じの構成になるはず。 Webpack + vue-loaderのインストール Vue.jsにおけるCSP環境の説明はこちら。つまり、Vue.jsをそのまま読み込んでも実行できないが、ビルドするとCSPをクリアして動作するとのこと。 Vue.jsのCSP環境 今回はWebpackを選択したのでこちらにアクセスする。 webpack-simple usageに書かれているとおりに
Vue.jsを使ったブラウザ拡張機能の作り方 - 物置小屋
はじめに ChromeやFirefoxなどの拡張機能はHTML、JavaScriptなどで書くことができます。 JSのフレームワークにはVue.jsなど扱いやすいものがありますが、Content Security Policy(CSP)だかでエラーになるので基本そのまま使うことはできません。 この記事ではVue.jsを使ったブラウザ拡張機能開発を楽に行えるテンプレートを紹介します。 使うやつ github.com vue-web-extension-boilerplateというやつです。 また、vue-cliが入っていること前提です。 使い方 $ vue init kocal/vue-web-extension example-extension 上記コマンドを打つことでテンプレートが展開されます。 example-extensionのところは各自プロジェクト名を入力しましょう。 なんか色
Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division
Vue.js 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎かにすることはチームを混乱に陥れることと同義です。 それが SPA 未経験のチームであればなおさら…
Nuxt.jsでnoteの記事ページを置き換えました｜こんぴゅ
noteの記事ページがリニューアルしてパワーアップしました。記事の読み込み、描画が格段に高速化されています。 noteのフロントエンドはAngular.jsの1系で運用されてきましたが、実行効率が悪く表示速度が遅いという問題がありました（特に古いスマホで顕著）。問題を根本解決するためにNuxt.jsへの移行を進めていました（詳しい経緯は以下の記事をごらんください）。 今年から、おすすめページ、マガジンページ、コンテスト一覧ページなど部分的にNuxt版に置き換えていきました。nodejsやNuxt.jsサーバーの運用が初めてだったので一気に置き換えるのではなく少しづつリリースして様子を見ながら進めました。 運用を2ヶ月ほどしてみて、インフラ面、実装面で問題なさそうなことが確認できたため、noteのトラフィックの多くを占める記事ページ（このページがまさにそうですね）のNuxt.js版リリースを
ドメイン駆動Vuexで複雑さに立ち向かう
スタディスト開発部、フロントエンド担当の小宮山です。走ることが楽しくなりすぎてフルマラソン完走が当面の目標です。 今回は私達が進めているUIリニューアルプロジェクトにおける、フロントエンド設計の心臓部についてご紹介したいと思います。盛り上がりつつあるものの、まだまだ実践的な情報が少ないVue界隈に少しでも貢献できましたら幸いです。 画面駆動Vuexの頃プロジェクト始動当時は私含め大規模プロダクトにVuex（さらにその他Flux状態管理も）を導入して開発を進める経験も知見もほぼない状況でした。 そして開発していく画面デザインの大枠は出揃っている状態だったので、計画も実装も画面単位で区切って進みだしていきます。 こうした状況でVuexのstoreはどのような方針で実装されていくか。正確に表現するなら、特に方針なく実装していくとどうなるか。画面ファーストで、画面から使いやすく、画面ごとに専用なs
【感想】『Vue.js入門 基礎から実践アプリケーション開発まで』でしっかりVue.jsに入門【JavaScrpt】 - Rのつく財団入り口
JSフロントエンドフレームワーク Vue.js の本格入門書 ロー◎製薬の目薬V・◎ートのマーク……じゃなかったVue.jsのVのロゴもブイっと眩しく輝く本格入門本。480ページという大ボリュームのがっつりした骨太な本です。 著者の中心となった川口和也さん(@kazu_pon)は、OSSとしてのVue.js自体の開発のコアチームでコントリビュートしてきた第一人者。僕がこの前sp.53で出てしまったテック系Podcast「しがないラジオ」の初期の頃のsp.9a/sp.9bや、同じくPodcastの「soussune」episode28でもゲスト出演されています。他のメンバーもそうそうたる顔ぶれ、Vue.jsを自社プロダクトのKARTEで活用していることで知られるPLAIDの方もおられますね。おっ、しがないラジオMeetup#2でご挨拶できた、めるさん(@c5meru)の名もありますぞ。 とい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsとFirebaseを使って爆速で何か作る前に読む本 - shiodaifuku - BOOTH
Vue.js 3 に向けた Vue.js 入門
Vueでグラフ描画するなら、Google Chartがオススメ - Qiita
GitHub - Kocal/vue-web-extension: 🛠️ A Vue CLI 3+ preset (previously a Vue CLI 2 boilerplate) for quickly starting a web extension with Vue, Babel, ESLint and more!
