久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき！」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い！とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。（もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし） 原初の時代からReactな案件をそれ

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> それでも時として、

Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

フロントエンドエンジニアのid:ninjinkunです。この記事は一休.comアドベントカレンダーの1日目の記事です。 一休.coｍレストランの管理画面リニューアルプロジェクトにおいて、CSSフレームワークのBulmaを導入しました。結論としては、採用して良かったと思っています。 このエントリではBulmaを選定した理由と、採用後に見えたPros / Consについて述べたいと思います。 なお今回リニューアルした一休.comレストランの管理画面の概要は以下の通りです。 レストラン店舗向けの管理画面 店舗の方と一休スタッフの両方が使う DAUは数千の規模 主な用途は在庫の管理と、プラン（コース）や席の管理 現在は店舗を限定してリリース済み 具体的には以下のような画面で構成されています。 UIフレームワークは必要か？ まずそもそもUIフレームワークは必要かという議論があります。 今回のプロジェ

※2019/11/8: 無料サンプルと目次を記事内に追加しました。 2019年4月に開催された技術書典６で頒布した「レガシーフロントエンド安全改善ガイド」ですが、このたびインプレスR&D社さまより商業版を刊行することになりました。 自分が商業版の技術書を書く日が来るとは思わなかったのでビクビクしています。 メディア: この商品を含むブログを見る nextpublishing.jp 表紙イラストは同人版と同様、鍋料理さんに描いていただきました。「安全な感じで！」という相談から、カワイイ工事現場が仕上がりました、とても気に入ってます。工事現場本と呼んでください。 タイトルに「迷わない！困らない！」という強気ワードが付いててちょっぴり恥ずかしいですが、迷わず困らない内容になってる・・はずです！ 同人版との違い / 加筆・修正した点 紙の本で比較すると、ページ数が110ページ程度→200ページ超と

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

この商品はダウンロード版です（PDF&EPUB） - PDF版 : A5/122ページ レガシーなフロントエンドコードをモダンなコードに安全に改善していくための実践的なノウハウをまとめた一冊です。表紙はとってもカワイイですが、筆者が2年ほどやってきたフロントエンドの改善経験がベースになっているため、中身はゴリゴリに現実的な話になっています。 フロントエンドの改善にはさまざまな問題が待ち構えています。 - 改善したいんだけど壊しそうで怖い - 何から手を付けたらいいのかわからない - 修正が巨大になってしまってもう自分でもわけがわからない - 心が折れる - などなど... そして「◯◯というフレームワークが良いらしいぞ！」と聞いたとしても、ゼロベースでの構築方法の情報はたくさん見つけることができますが、稼働しているリアルな現場に投入するための情報は手探りになってしまい、「そう簡単には導入で

Vue.jsでローディングを表示するモジュールは様々ありますが、本ブログでは「vue-loading」というモジュールをご紹介します。シンプルで使いやすいのでオススメです。 Vue.jsでローディングを表示 Webアプリにおいて、非同期処理を行うこと（APIを呼び出してデータを取得するなど）はほぼ必ずと言っていいほど必要なことです。また、非同期処理中にはローディングを表示しておき、ユーザーに処理を待っている状態であることを伝える必要があります。 Vue.jsでローディングを表示するモジュールは様々ありますが、中でも個人的に気に入った「vue-loading」をご紹介します。シンプルで使いやすいのでオススメです。 使い方 まずはVueプロジェクトが作成済みの前提で進めます。 以下のコマンドでインストールします。 $ yarn add vue-loading-template あとは表示したい

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を使用する場合の選択肢としてはいくつか

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.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 がインストールしてあり、すでにプロジェクト作成済

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

はじめに 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 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎かにすることはチームを混乱に陥れることと同義です。 それが SPA 未経験のチームであればなおさら…

noteの記事ページがリニューアルしてパワーアップしました。記事の読み込み、描画が格段に高速化されています。 noteのフロントエンドはAngular.jsの1系で運用されてきましたが、実行効率が悪く表示速度が遅いという問題がありました（特に古いスマホで顕著）。問題を根本解決するためにNuxt.jsへの移行を進めていました（詳しい経緯は以下の記事をごらんください）。 今年から、おすすめページ、マガジンページ、コンテスト一覧ページなど部分的にNuxt版に置き換えていきました。nodejsやNuxt.jsサーバーの運用が初めてだったので一気に置き換えるのではなく少しづつリリースして様子を見ながら進めました。 運用を2ヶ月ほどしてみて、インフラ面、実装面で問題なさそうなことが確認できたため、noteのトラフィックの多くを占める記事ページ（このページがまさにそうですね）のNuxt.js版リリースを