create-laravel-mixを使って素早くLaravel Mix環境を構築する - QiitaHelp us understand the problem. What is going on with this article?
初心者向：Vue.js コンポーネント作成がうまくいかないときにチェックする5つのこと - Qiita
こちらの記事は、主にVue.js v2向けの記事となります。 Vue2は、2023年12月31日でEOLとなるため、それに伴い本記事は近日中にクローズする予定です。 こちらVue.js #4 Advent Calendar 20174日目の記事です～。 どもども。ソニックムーブっていう会社で、マークアップしたりJavascriptをちょいちょい触ったりしているココエっていいます。 最近Vue.js絡みの仕事ばっかりやっていて、初心者の方にVue.jsの使い方を教える機会がでてきたので、こんな記事を書いてみようと思いました。 やっぱり最初の難関がコンポーネント作成ですよね。 チュートリアル見ながら、コンポーネント作ってみたけど、なんかうまくいかなーーーい！という方は、後述する、コンポーネント作成がうまくいかないときにチェックする5つのことをチェックしてみてください。 お役に立てればこれ幸い。
Storybookがなぜ必要か？(Vue.js編) - Qiita
まさあき(@masaaakikunsan)です。 最近よく、「Storybookを導入しよう」「Storybookがいい」と言う話は聞きますが、意外となぜ必要なのか、どう使うのか、という記事がみつからなかったので、基本的な使い方をサンプルと共に紹介します。 TL;DR StorybookでUIコンポーネントのカタログを作ることができる カタログのおかげでデザイナーと認識の齟齬が生まれなくなる アドオンを追加するとStorybookがかなり便利アイテムになる Storybookとは ざっくり言うとコンポーネントのカタログです。 コンポーネントライブラリの参照ができ、各コンポーネントの様々な状態の表示などができるものとなります。 また、アプリ外で実行されるため、UIコンポーネントを単独で開発でき、コンポネの再利用、テストの容易性、開発スピードを向上させることができるのが魅力です。 Storyb
Vue.jsにおけるRender PropとScoped Slotsについて - Qiita
こんにちは。転職によりReact畑からVue畑に乗り換えることになったフロントエンドエンジニアです。 Vueでも描画関数使ってればRender Propsも使えるじゃんと思ったところ、Vue.js 作者のEvan You曰く「Render PropパターンはVue.jsにおけるScoped Slotsと同じ」とのこと。 In case you are wondering what’s the equivalent pattern in Vue, it’s called scoped slots (and if using JSX it works the same as React) — Evan You (@youyuxi) 2017年9月25日 本当にそうなのか簡単な実装例を用意してみました。 Render Prop まず、そもそものRender Propを使う目的としては 「コードの
サーバレスアプリ開発をjQueryでがんばらないためのVue.js - Qiita
サーバレス構成のWebアプリ開発を担当し、そこでVue.jsを使ってみたので採用した経緯と、Vue.jsの何を使ったかを紹介する。 これまでのWebアプリ開発 JavaのWebアプリ開発ならThymeleafやFreemarkerなどのテンプレートエンジンを使用していた。 サーバレスだと、HTMLとJavaScriptで表示の処理を行うため、JavaScriptの処理が増える。 よく使われるのはjQueryによってDOMを操作し、HTMLを動的に変更する方法だろう。 jQueryのDOM操作は辛いよ jQueryを使ったことがあればお分かりだと思うが、jQueryによるDOM操作は「このイベントで、このvalueがxxxなら、このDOMを変更する」という手続き型のコードになる。 JavaScriptの処理が増えると、この手続き型のコードが増えてデータと状態の管理が煩雑になる。 また、Jav
Vue.jsをシンプルに理解しよう - Qiita
Vue.jsって聞いたことあるよね？ 最近ホットみたいですねVue.js、今更ですが入門者向けにVue.jsを紹介したいと思います。 誰でもわかるように書きますので多少間違っていても許してください!何でもしますから! 続きを書きました。 Vue.jsをシンプルに理解しよう その2 双方向データバインディング？ Vue.jsのインスタンスの作り方とかは他にもいろんな方が紹介していると思うのでそちらを参照してください。 まず一番基本的で便利なやつを紹介します。 Vueインスタンス内のdataというオブジェクト内の変数がhtmlと連動します。 かっっこいい言い方すると双方向データバインディングとか言います。 分かりにくいからhtmlとjsが同じ値になるって覚えたらいいよ! jsfiddleで確認してください。 dataの中にさらにオブジェクトを入れることもできます。 便利だ... ちなみに{{
jQuery から Vue.js へのステップアップ - Qiita
はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ
2018年 スタートアップでSSRにVue.jsを導入してWebサービスを開発して得た設計 - Qiita
私がWebサービスのバージョンアップでVue.js導入することになり、取り組んでる内容についてWEBエンジニア向けに簡単に解説する記事です。 例えばjQueryのUIプラグインを沢山使ってるサーバーフレームワークで Vue.js、Vuex、Storybook を導入する際にどうすれば良いのか？などのノウハウについて記述します。 はじめに サーバーフレームワークのテンプレートへの組み込みが今回の要件です。 つまりVue.jsでカスタムコンポーネントもどきを作り、テンプレートエンジンで使えるようにするのが今回の要件です。 フロントエンド界隈のノウハウ集は大体がビッグスケールしても耐えられるようにフロントエンドとサーバーを開発チームまで完全に分離し、サーバーは API のみ提供する設計でしょう。最近ではVue.jsがどんどん認知され、実験的にRailsに組み込む軽いサンプルが散見するでしょう。
結局Reactは他(Vue.js, Angular)と比べて何がよかったのか。触ってみてわかった初めてのフロントエンドフレームワーク。 - Qiita
フロントエンドフレームワークも通常のプログラミングと同じように、第二,第三の言語の習得にそこまで時間はかからない。 選択に時間を使うくらいなら、何か一つ直感で選んで遊んでみるべきである。 私は、それを知らずにそれなりの時間をフレームワークの特徴探しに費やしてしまったので、過去の自分自身に送るつもりでこの記事を書いてみる。そして、過去の私と同じ境遇の人が少しでも参考にしてくれたらいいと思う。 これらは完全に主観であるため、何か納得できない点があれば、コメント欄に残しておいてほしい。 Why choose React over Angular and Vue.js 上で述べたように、フロントエンドフレームワークの学習という観点では何から始めても大きな問題はない。ここでは、その'何か'でReactが選ばれる理由を述べる。 Reactは小さく、シンプル。 Reactは、ちょっとしたReactとの対
Vue.jsミニハンズオン（TODOリスト作成） - Qiita
Vue.jsミニハンズオン（TODOリスト作成） AngularでもReactでもriot.jsでも満足できなかったひとに、ぴったりフィットなJSフレームワーク「Vue.js」のざっくりハンズオンです。 このハンズオンではnode.jsのパッケージは使わず、Google ChromeとテキストエディタがあればOKです。 Vue.jsミニハンズオンのシリーズは以下を公開しています。 Vue.jsミニハンズオン（TODOリスト作成） Vue.jsミニハンズオン（TODOリストにアニメーションをつける） Vue.jsミニハンズオン（TODOリストをコンポーネント化する） 今回の目標 目標はシンプルなTODOリストの作成です。 WebStorageに保存してリロードしてもデータを保持できるようにしてます。 Chromeの拡張機能を入れる デベロッパーツールでデータを見やすくするためChromeの拡
ベジェ曲線を描画してVue.jsの素晴らしさを体感する - Qiita
ハイパーテキストをマークアップするのがHTMLなら、グラフィックをマークアップするのがSVGです。簡単なコードであれば形をイメージできるうえに、JavaScriptから手軽に操作できます。 WebGLを含むCanvasは、できる事の幅でいえばSVGよりもはるかに上ですし、ベジェ曲線も用意されていますが、線を引くだけなら大げさな気がします。あとレスポンシブ対応が地味にめんどくさい。サクサク動くゲームとか、ゴリゴリ動くリッチなサイトをCanvasで作れる人はすごくすごいと思います。 そんなこんなで、今回はSVGを使います。 Vue.jsとSVG SVGの実体はXMLなので、HTMLのようにVue.jsから操作できます。ベジェ曲線に必要な座標を変数として定義しておいて、それをリアルタイムで変更できるようにすれば、いい感じのベジェ曲線がVue.jsとSVGで実現できそうです。高まります。 実装 プ
Vue.js + Firebase を使って爆速でユーザ認証を実装する - Qiita
最初に この記事はVue.js アドベントカレンダー#4 25日目の記事です。 この一ヶ月でVue.jsについてのナレッジが100記事増えたことになります。やったね！！ 2018/8/2 追記 現在では vue-cli の3.x.xがリリースされており、スキャフォールドからVueプロジェクト作成の工程が若干異なりますのでご留意ください。 この記事でやること バックエンドをFirebaseに丸投げしたユーザ登録 → サインイン → サインアウト までのチュートリアルです。 認証の実装は面倒 フロントエンドの技術を使ってちょっとしたアプリケーションを作った時、認証やユーザ管理を実装するのはそれなりに面倒かと思います。フレームワークの選定、DBは何使う?など決めなければならないこと、覚えなくてはならないことがたくさんありますね。 そこでBaaSを使います。 BaaSって？ Backend as
はじめてのVue.js - タスクリストの実装から学ぶコンポーネントベースアプリ - Qiita
この記事では Vue.js を用いたタスクリスト管理アプリの実装を行いながら、Vue.js の各機能について紹介していきます。 開発環境は はじめてのVue.js - 単一ファイルコンポーネントを作れる環境構築編 (npm + gulp + browserify + babel + vueify)に準じて説明していきますので、未読の方は一度目を通していただけるとありがたいです。 モデルの実装 Vue.js はリアクティブデータバインディングを実現するためのフレームワークで、MVVMパターンで言う所の VM, View に焦点を当てています。 逆に Model 層については特にサポートがあるわけではなく、通常の JavaScript のオブジェクトを使用することになります。 ビジネスロジックやデータ操作自体を Model 層の通常の JavaScript の世界のみで完結できるので、 ロジッ
Vue.jsで開発を始める前に決めておきたい事 - Qiita
ここ１年ほど実務でVue.jsを利用してWebアプリケーションを開発しています。 今回はVue.jsを使ってチームあるいは個人で開発を始める上で予め考慮しておくと良さそうな事をいくつか書きたいと思います。 コンポーネントルール Vue.jsは単一ファイルコンポーネントによって、とてもシンプルな記述でコンポーネントを作る事ができます。しかし、開発者同士でコンポーネントの認識を揃えておかないと同じようなコンポーネントが作られてしまい、保守性を低下させる要因になってしまいます。 そのため、昨今ではAtomic Designなどの考え方をベースにコンポーネントを管理する方法が用いられています。Atomic Designを用いたコンポーネント設計方法については、以下の記事が参考になるかと思います。 Vue.js × Atomic Design - it's an endless world. いずれ
Go と Vue.js なアプリを Heroku で動かす - Qiita
サーバサイドを Go で WebAPI として独立して作り、フロントは Vue.js で SPA チックに作り、Static な成果物（HTML/CSS/JS）を Go バイナリに内包して Heroku で動かすメモです。 サンプルのソースコードはこちらです。 https://github.com/zaru/go-vuejs-heroku 前提条件 Go 1.9+ パッケージ管理: dep DBマイグレーション: pressly/goose Vue.js 2.5+ vue-cli ビルドツール: webpack Heroku PostgreSQL Redis デプロイの動作フロー git push heroku master で Heroku にデプロイ デプロイ dep で必要パッケージをインストール npm で必要パッケージをインストール Vue.js を webpack でビルド G
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vue.jsで「数字」しか入力できないinput要素を作る - Qiita
vueで条件分岐、ループをみやすくする - Qiita
GAS＋Vue.jsでサーバレスなWebアプリ② - Qiita
Vue.js #1 - Qiita Advent Calendar 2017 - Qiita
Vue.js スタイルガイド早見表 🎄✨ - Qiita
