Vue.js？React？フレームワーク選びの７つの選定基準、大規模ECサイトのフロント刷新プロジェクト - MonotaRO Tech Blog
こんにちは。モノタロウでフロントエンド寄りの開発をしている、陳です。 今回はモノタロウの新フロントエンドのメインフレームワーク選定についてお話しします。 選定結果から言うと、モノタロウ独自の７つの選定基準をもとに、Reactを選ぶことになりました。 背景 新フロントエンドプロジェクトの立ち上がり Vue.jsとReactの比較検討をしてみた 俯瞰して改めて選定基準を考えた 一般的な視点 モノタロウの社内事情 ７つの選定基準 選定結果 技術選定を通して得た３つの学び 背景 まず、モノタロウの現フロントエンドについてざっくり説明します。 モノタロウは2002年から、PythonとJavaScriptでECサイトを開発してきました。 基本構成として、サーバサイドのPythonでHTMLを生成し、クライアントサイドのJavaScriptでカートインなどの動的処理を補完する形ですが、実はこの構成で違
Vue.jsのサイトジェネレータGridsomeが最高かもしれない - Sweet Escape
はじめに Gridsome どんな感じで動くのか やってみる データソースとかもろもろ設定してみる ビルドする Wordpressをデータソースに設定してみる まとめ はじめに 前回、Docker + Remote Containersを最高だと紹介したわけですが、今回はGridsomeを紹介します。そもそも前回のブログはこれを試すために環境を整備しなおそうとしたのがきっかけでした。なお、前回のブログはこちら。 www.keisuke69.net どこらへんが最高かっていうと全てのデータソースに対してGraphQLでアクセスできるようになるところ。これって最高じゃないですかね。ま、最終的には静的サイトとしてGenerateしてしまうわけですが。 ちなみに、なぜ、今回Gridsomeを試そうと思ったかというと、最近聞いたとあるPodcastで紹介されてたからです。それだけ。 Gridsome
東京都の新型コロナ対策サイトはなぜNuxtJSだったのか？ ─ シビックテックのベストプラクティス｜ハイクラス転職・求人情報サイト AMBI（アンビ）
文科系の学部に在籍しながらシビックテックに興味を持ち、関治之氏の「右腕インターン」として1年ほど関わる。その後いくつかのシビックテック活動やインターンシップを経て、株式会社almaの創業に参画。プロダクト開発をリードするかたわら、共同設立したCode for Youthなどでも活動する。学習院大学4年。 なぜNuxtJSだったのか？ あるいはjQueryでなかったか？ 偶然に決まったNetlifyは開発にとても役立った 後でコンポーネントを変更改善できるよう小さく作る ベストエフォートでの開発体制 リリース直後から届いたエンジニアの反響 シビックテック活動のベストプラクティス なぜNuxtJSだったのか？ あるいはjQueryでなかったか？ ── まず最初に、今回の技術的なバックグラウンドから聞かせてください。一見すると行政が関係した仕事とは思えない現代的な技術選定のWebサービスですが、
Jestを使ったVueコンポーネントのテストを導入した話 - MicroAd Developers Blog
はじめまして、フロントエンドエンジニアをしている川上です。 業務では、主にサービス要件に沿ったフロントエンド開発を担当しています。 今回は、私自身初めての経験だったフロントエンドのテスト導入手順や、 導入するにあたって気をつけた点などをお話しできればと思います。 はじめに Vueコンポーネントのテストについて Jestの導入について Jestを利用したテスト おわりに はじめに マイクロアドには様々なプロダクトがありますが、私の担当しているUNIVERSEというプロダクトについては、 フロントエンドフレームワークにVue.jsを利用しています。 jp.vuejs.org テストの導入を行うにあたって、今後、現在利用しているVue2をVue3へ移行していくことを考えると*1 TypeScript*2でテストを書いていくのがいいということになりました。 また、TypeScriptのメリットでも
「レスポンシブにすればPCサイトと同じ工数でPCにもスマホにも両方対応できるよね?」 - エムスリーテックブログ
できません。 こんにちは、エムスリーエンジニアリンググループの福林 (@fukubaya) です。 中村の記事で宣言したDocpediaの技術的チャレンジの記事も今回で最後です*1。 今回は、PCページとスマートフォンページで共通的に使用できるVue.jsコンポーネントをどうやったら実現できるかを考えて実装した例を紹介します。 仙台サンプラザ（せんだいサンプラザ）は、仙台市都心部東側の宮城野通に面してあるホール・ホテル・会議室などの複合施設。本文には特に関係ありません。 なぜレスポンシブにしたいのか? PCとスマホで共通のコンポーネントを使って工数を減らしたい 実例 構成 エントリー router AppModePlugin PCとスマホで処理を切り替える PCとスマホでデザインを分ける We are hiring! なぜレスポンシブにしたいのか? 冒頭のタイトルは、直接こう言われたのでは
Vue.jsで構成するシングルページアプリケーション(SPA)の作り方やサンプル例【前編】 | ソフトウェア開発のギークフィード
こんにちは。 ギークフィードに入社してはや半年が経ちました。 エンジニアのNkawaKです。初めてのブログ投稿になります。 この記事では僕がVue.jsで作ったサンプルを参考にしながら、 シングルページアプリケーション(SPA)とVue.jsについて解説をしていきます。 かなり解説することが多くなってしまったので、前編と後編に分けています。 こちらの前編では、シングルページアプリケーションの構成と画面遷移に焦点を当てて、 解説を行います。 シングルページアプリケーションとは シングルページアプリケーション(以下SPA)とはその名前の通り、 単一のページでコンテンツの切り替えを行うWebアプリケーションの名称です。 単一のページで構成されているため、ページ遷移の度にロードが発生することなく、 高速で画面が切り替わることがSPAの特徴です。 実際に画面を見ながらSPAの動きを確認してみましょう
「SSRと規約だけ」の勘違いを解く、 Nuxt.js をプロジェクトで採用すべき理由 - ROXX開発者ブログ
back check 事業部に業務委託でコミットしているフロントエンドエンジニアの potato4d です。 ROXX では、 v1.0 が出る前から、プロダクト、コーポレートサイト、ランディングページ、メディアなど、多くのシーンにて、 Nuxt.js が採用されています。 Nuxt.js は多くの人に愛される一方で、最近は Vue 3.0 の話もあり、多少評価が落ち着いてきた印象があります。 この記事では、十分に普及した今だからこそ、 Nuxt.js の本当の優位性と、どういったときに使うべきか。あるいは使うべきでないかを再度言語化できればと思います。 「SSRとルールだけ」という勘違い まずは Nuxt.js の採用についてです。多くの場合、「Vue か Nuxt か」という問いには、いかが判断基準として使われます。 SSR 今必要かどうか Nuxt.js の組み込みのルールをチームに
ReactとVueのどちらを選ぶか - Qiita
主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu
「レガシーフロントエンド安全改善ガイド」を商業出版します #技術書典 - memo_md
※2019/11/8: 無料サンプルと目次を記事内に追加しました。 2019年4月に開催された技術書典６で頒布した「レガシーフロントエンド安全改善ガイド」ですが、このたびインプレスR&D社さまより商業版を刊行することになりました。 自分が商業版の技術書を書く日が来るとは思わなかったのでビクビクしています。 メディア: この商品を含むブログを見る nextpublishing.jp 表紙イラストは同人版と同様、鍋料理さんに描いていただきました。「安全な感じで！」という相談から、カワイイ工事現場が仕上がりました、とても気に入ってます。工事現場本と呼んでください。 タイトルに「迷わない！困らない！」という強気ワードが付いててちょっぴり恥ずかしいですが、迷わず困らない内容になってる・・はずです！ 同人版との違い / 加筆・修正した点 紙の本で比較すると、ページ数が110ページ程度→200ページ超と
Vue.js + SVG練習7: 文字がにょろっと出てくるやつ - No Regrets in Bathing
動いてるところは下記ツイートから見れる（gifがでかくなりすぎてはてなにアップロードできなかった） 文字をアニメーションさせて遊ぶやつができた https://t.co/mTYNrkBLxi pic.twitter.com/UT4inhu0My— はっしゅろっく (@hashedrock) 2017年11月18日 デモサイトは下記。文字を入力したり、文字サイズや太さを変えて遊べる。 https://hashrock.github.io/canvas-lff/ ソースは下記。 github.com リポジトリについて もともとは昔に作ったリポジトリで、LFFというラインフォントフォーマットの存在を知って作ったやつ canvas上に描くようにして、光らせたりアニメーションさせたりはしていた 今回はVue + SVGに移植した ついでにES5 -> ES2015 -> TypeScriptに段階
Nuxt.js使ってみた - Qiita
福岡でVR・アプリ開発をやっている株式会社OneSmallStepの@_takeshi_24です。 公開から2年が経ち、この記事の内容も少し古くなってきました。 Nuxt.jsやFirebaseを使って、サーバーレスでWebアプリケーションを開発する手順について、アドベントカレンダー「diffeasyCTO西の24(にし)日連続投稿チャレンジ Advent Calendar 2019」の中で、「Nuxt.jsとFirebaseとCloudFunctionsでWebアプリ開発」シリーズとして、連載していきます。 Nuxt.jsとFirebaseなどを使ってWebアプリケーション開発にチャレンジしたい方、是非Qiitaアカウントかtwitterをフォローしていただき、ツッコミやいいね！お願いします！ Nuxt.jsとは 公式ドキュメントに詳しく書いていますが、Vue.js アプリケーションを構
TypeScript + Vue.jsでのフロントエンド開発 - razokulover publog
最近webアプリ(RailsのviewでVue.jsを使ってる感じの部分)をフロントエンドだけ切り離してリライトする業務をやった。 他の業務と並行で進め、実装からリリースまでの期間は大体営業日換算で2週間ちょいくらい。 バックエンドのAPIなどはすでに開発済みのものを使えたので純粋にフロントエンドのみ。 途中、既存の動いてるアプリへ機能追加などされていたので都度追従していく作業もやった。 そもそもリライトすることを決めたのは元のアプリが歴史的な経緯などあり、トランスパイルできる環境に無く、加えてAndroid4.2以降のwebブラウザに対応する必要があったため。素手でES5を書き続けるのは規模が大きくなっていくとだいぶ辛いしここらでちゃんと整えましょうということで重い腰をあげたという感じ。 フロントエンドライブラリとしてはVue.jsに元々は慣れてたこともあり、Vue.jsを利用。この夏に
【Laravel 6 & PHP 7.4 対応】Vue + Vue Router + Vuex + Laravel チュートリアル（全16回）を書きました。 - Qiita
【Laravel 6 & PHP 7.4 対応】Vue + Vue Router + Vuex + Laravel チュートリアル（全16回）を書きました。LaravelチュートリアルVue.jsVuexvue-router 2020/1/5 更新 チュートリアルを Laravel バージョン6 & PHP 7.4 に対応し、加筆修正しました。 技術ブログに 『Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう（全16回）』 を公開しました 出来るだけたくさんの方に見てほしいので宣伝エントリを書きます。 コンテンツ フロントエンドに Vue.js + Vue Router + Vuex と サーバーサイドに Laravel を使用して写真共有アプリを開発するという内容です。 こんなやつ ができます。 写真を投稿できます。 コメント投稿、いいね、ダウン
フロントエンド開発に迷ったら「Vue.js入門」を読もう - JavaScript関連の書籍とかまとめてみた - Lean Baseball
先日のPyCon JP 2018の野球の話にてVue.js（Nuxt.js）の話をした結果、技術評論社様のご厚意により、一冊頂戴いたしました. Vue.js入門 基礎から実践アプリケーション開発まで 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也出版社/メーカー: 技術評論社発売日: 2018/09/22メディア: 単行本（ソフトカバー）この商品を含むブログを見る 正に欲しかった類の本で大変助かりました、ホントありがとうございます！ 結論から言うと、 Vue.js（またはNuxt.js）で開発するなら一冊持っておけ！（ただし他のFWにもいい本がある） っていうくらい素晴らしい書籍でした、自信を持ってオススメができるレベルです. このエントリーでは、 「 Vue.js入門 基礎から実践アプリケーション開発まで」の簡単な感想 私がフロントエンド開発するまでにやってきたJavaScri
Vuex でショッピングカートを実装できる無料コース「Vuex for Everyone」を受講した - kakakakakku blog
Vue School の無料コース「Vuex for Everyone」を受講した．Vue.js 初心者でも受講できるレベルになっているし，今まで Vue.js を書いたことはあるけど，Vuex はまだ使ったことがないという人にもオススメできる．進め方にもよるけど，写経するとしても2,3時間あれば終わる． Vuex for Everyone 今回受講した「Vuex for Everyone」の題材は「shopping-cart」で，ステップバイステップに実装を進めていく．動作確認をしながら，機能を追加したり，リファクタリングをしたりする． vueschool.io 動画を見るとわかるけど，とにかく実装スピードが早いので，写経する場合は何度も戻して見直す必要がある．ただ困ったときは Vue School の GitHub にセッションごとにコミットされているので，それを活用すればオッケー．
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
