最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - 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> それでも時として、
Vueでグラフ描画するなら、Google Chartがオススメ - Qiita
はじめに これはVue Advent Calendar 2019 5日目の記事です。 最近、Vue.jsで集計結果をグラフ描画する機会がありました。 Vue グラフ描画で調べると基本的にCharts.jsが出てきます。 色々、考えt時に、Google chartsが便利だったので紹介したいと思います。 google chartsとは google chartsとは、googleの図表描画ライブラリです。 スプレッドシートとかで使われているグラフを描画できるイメージです。 プロジェクト作成 素のVue.jsではなく、Nuxt.jsでやっていたためNuxtでプロジェクト作成 yarn create nuxt-app charts-sample # yarnを選択 # cssフレームワークはbulmaを選択 cd charts-sample yarn dev
CSSフレームワークBulmaについて - 一休.com Developers Blog
フロントエンドエンジニアのid:ninjinkunです。この記事は一休.comアドベントカレンダーの1日目の記事です。 一休.coｍレストランの管理画面リニューアルプロジェクトにおいて、CSSフレームワークのBulmaを導入しました。結論としては、採用して良かったと思っています。 このエントリではBulmaを選定した理由と、採用後に見えたPros / Consについて述べたいと思います。 なお今回リニューアルした一休.comレストランの管理画面の概要は以下の通りです。 レストラン店舗向けの管理画面 店舗の方と一休スタッフの両方が使う DAUは数千の規模 主な用途は在庫の管理と、プラン（コース）や席の管理 現在は店舗を限定してリリース済み 具体的には以下のような画面で構成されています。 UIフレームワークは必要か？ まずそもそもUIフレームワークは必要かという議論があります。 今回のプロジェ
「レガシーフロントエンド安全改善ガイド」を商業出版します #技術書典 - memo_md
※2019/11/8: 無料サンプルと目次を記事内に追加しました。 2019年4月に開催された技術書典６で頒布した「レガシーフロントエンド安全改善ガイド」ですが、このたびインプレスR&D社さまより商業版を刊行することになりました。 自分が商業版の技術書を書く日が来るとは思わなかったのでビクビクしています。 メディア: この商品を含むブログを見る nextpublishing.jp 表紙イラストは同人版と同様、鍋料理さんに描いていただきました。「安全な感じで！」という相談から、カワイイ工事現場が仕上がりました、とても気に入ってます。工事現場本と呼んでください。 タイトルに「迷わない！困らない！」という強気ワードが付いててちょっぴり恥ずかしいですが、迷わず困らない内容になってる・・はずです！ 同人版との違い / 加筆・修正した点 紙の本で比較すると、ページ数が110ページ程度→200ページ超と
Release v4.0.0 · vuejs/vue-cli
This commit was signed with the committer’s verified signature. 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.vuej
jQuery to Vue.jsで学ぶ レガシーフロントエンド安全改善ガイド (ダウンロード版) - わんにゃんショップ麦 - BOOTH
この商品はダウンロード版です（PDF&EPUB） - PDF版 : A5/122ページ レガシーなフロントエンドコードをモダンなコードに安全に改善していくための実践的なノウハウをまとめた一冊です。表紙はとってもカワイイですが、筆者が2年ほどやってきたフロントエンドの改善経験がベースになっているため、中身はゴリゴリに現実的な話になっています。 フロントエンドの改善にはさまざまな問題が待ち構えています。 - 改善したいんだけど壊しそうで怖い - 何から手を付けたらいいのかわからない - 修正が巨大になってしまってもう自分でもわけがわからない - 心が折れる - などなど... そして「◯◯というフレームワークが良いらしいぞ！」と聞いたとしても、ゼロベースでの構築方法の情報はたくさん見つけることができますが、稼働しているリアルな現場に投入するための情報は手探りになってしまい、「そう簡単には導入で
Vue.jsでシンプルなローディングを表示する「vue-loading」の使い方 | DevelopersIO
Vue.jsでローディングを表示 Webアプリにおいて、非同期処理を行うこと（APIを呼び出してデータを取得するなど）はほぼ必ずと言っていいほど必要なことです。また、非同期処理中にはローディングを表示しておき、ユーザーに処理を待っている状態であることを伝える必要があります。 Vue.jsでローディングを表示するモジュールは様々ありますが、中でも個人的に気に入った「vue-loading」をご紹介します。シンプルで使いやすいのでオススメです。 使い方 まずはVueプロジェクトが作成済みの前提で進めます。 以下のコマンドでインストールします。 $ yarn add vue-loading-template あとは表示したいViewでモジュールをインポートして使います。 <template> <div class="container"> // 使用 <vue-loading type="spi
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
2019年 Vue.js + Electron の環境構築は vue-cli-plugin-electron-builder がおすすめ 今まで 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
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 未経験のチームであればなおさらです。 直近のプロジェクトはまさにそんなプロジェクトでした。 本セッションではアトミックデザインのエッセンスを用いてコンポーネント分割の指針を示し、 またコンポーネント実装時に注意すべき事柄についてお話します # URL HomePage: https://nrslib.com Twitter: https://twitter.com/nrslib
Nuxt.jsでnoteの記事ページを置き換えました｜こんぴゅ
noteの記事ページがリニューアルしてパワーアップしました。記事の読み込み、描画が格段に高速化されています。 noteのフロントエンドはAngular.jsの1系で運用されてきましたが、実行効率が悪く表示速度が遅いという問題がありました（特に古いスマホで顕著）。問題を根本解決するためにNuxt.jsへの移行を進めていました（詳しい経緯は以下の記事をごらんください）。 今年から、おすすめページ、マガジンページ、コンテスト一覧ページなど部分的にNuxt版に置き換えていきました。nodejsやNuxt.jsサーバーの運用が初めてだったので一気に置き換えるのではなく少しづつリリースして様子を見ながら進めました。 運用を2ヶ月ほどしてみて、インフラ面、実装面で問題なさそうなことが確認できたため、noteのトラフィックの多くを占める記事ページ（このページがまさにそうですね）のNuxt.js版リリースを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsとFirebaseを使って爆速で何か作る前に読む本 - shiodaifuku - BOOTH
Vue.js 3 に向けた Vue.js 入門
Vue.js設計地図 〜設計概念の依存関係からフロントエンド設計を見つめ直す〜
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!
