jQuery、今までありがとう【移行すべき理由と代替案3選】世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。
NUXT いるのかどうか (Vue CLI 3 との比較) - Qiita
Nuxt.jsいらない説 という記事を読んだのをきっかけに、 NUXT と Vue CLI 3 どちらを使うべきか、その選び方を整理してみた。特にその記事に対する反論とかではない。 Vue を使うときの選択肢 現状、 Vue CLI 3 と NUXT の二択だと思って良い。 少なくとも webpack で1からゴリゴリ書くのはおすすめしない。アップデートが死ねる。 parcel はちゃんと使ってないのでコメントしにくいが、 Vue CLI 3 ですら重たいような局面では使えるかも知れない。けど今回は選択肢には挙げない。 Vue CLI 3 とは なにをするものなのか Vue のツールチェーンがほぼ全部入りした CUI/GUI ツール。 vue create を叩くとローカルでの開発環境やビルドを備えたプロジェクトが作成される。その際、 Router や Vuex を導入するかも選択できる。
SVG で遊ぶのに Vue.js を利用する - Qiita
この記事は Vue.js Advent Calendar 2018 の 1 日目の記事です。 SVG 初心者が SVG で遊んでいる記録です。 Vue を使うことで状態管理が簡単にでき、SVG を書くことに集中できました。 こちらから実際に触れます https://akifo.github.io/vue-svg-text/ GitHubリポジトリ（動かなかったらごめんなさい..） https://github.com/akifo/vue-svg-text 背景 アドベントカレンダー初日の枠を確保し、SVG で2018 年 Vue カレンダーを盛り上げるぞ！と思っていたのですが、未完成のため、Vue に関する情報はサクっと軽めに記載させていただきます。 以下、GitHub にあるコードとは異なりますが、元となる考え方を少し記録しておきます。 <polygon> の points を配列から文
Vue.js + Vuex + TypeScript ファーストインプレッション - Shin x Blog
日頃は、サーバサイドの開発が主なのですが、その UI として フロントエンドの開発も行うことがあります。最近話題の Vue.js を試してみたのでその感想などを。 前提 これまで利用した構成 Vue.js 構成 雑感 ちょっと試す、がすぐにできる vue-cli が楽 vue ファイル template ディレクティブ scoped css vue-router / Vuex 連携 Vuex mutation を直接呼んで、state を変更 コンポーネントから直接 state を操作 TypeScript Vue.js 入門 さいごに 前提 これまで利用した構成 ベースとして、これまでプロダクションで利用したことがある構成は以下です。いずれも、フォームベースの SPA で、現在も稼働しています。 AngularJS 1.x AngularJS 1.x + TypeScript React
VSCode+Vue.jsを使用するならインストールするべき拡張機能と設定 | iwb.jp
VS Codeとは 正式名称はVisual Studio Code。Microsoft社が開発したオープンソースのテキストエディタ。 Vue.jsとの相性が良いためVue.jsの開発者のEvan Youなどが使用している。 VS CodeはEmmetやGitなどコーディングを行う上で必須の拡張機能がいくつか最初からインストールされているので使いやすい。 (Extentionsで@builtinで検索すると一覧が見られる) しかし、Vue.jsを使用する上で必要な拡張機能は最初からインストールされている訳ではないため、インストールしたほうが良い拡張機能と設定(settings.json)をまとめた。 以下にVS Codeおすすめ拡張機能を記載した。 Vue.js Extension Pack Vue.js開発でインストールされていることの多い11の拡張機能パック。 vetur vue-pee
redux-workerized で Redux と Vue を接続する - mizchi's blog
mizchi/redux-workerized 作った。 yarn add redux-workerize で入る。 元々は react-hooks で redux へのアダプタを書いていただけのライブラリだったが… TypeScript フレンドリーなAPIにする ReactRedux.Provider の異なるAPI表現だけじゃ面白くない じゃあ Redux.Store を worker に置いて postMessage で更新しよう mapStateToProps や更新処理の抑制の処理もCPU使うから、worker に置こう JSON飛び交ってるだけだし、 React だけじゃつまらないから Vue Plugin も提供しよう 結果、ビジネスロジックが Worker に切り出された上で、 React と Vue が同じ Store を共有するようになった。 どうなってるかというと
Vue.jsの進化を感じるカンファレンス――Vue Fes Japan 2018：レポート｜gihyo.jp … 技術評論社
2018年11月3日、Vue.jsに関する初の国内大規模カンファレンス、Vue Fes Japan 2018が開催されました。Vue Fes Japan 2018 実行委員会（Vue.js日本ユーザーグループを中心とし有志スタッフ）の主催によるカンファレンスです。本記事では当日の模様をレポートします。 オープンニングトーク オープニングトークには、Vue Fes Japan 2018実行委員会代表 川口和也氏が登壇。川口氏はVue.js日本ユーザーグループ代表を務め、Vue.js入門 基礎から実践アプリケーション開発までを執筆するなど国内におけるVue.js普及の中心的な人物です。 オープニングトークの川口氏 Vue Fes Japan 2018に至るまでの経緯、国内でのVue.jsの盛り上がりなどを紹介しました。Vue Fes Japanはユーザーコミュニティ主導のイベントとしてはかなり
極小WebアプリをURLに埋め込んで超ポータブルなWebアプリを作りたい！ - Qiita
やりたいこと データを変形・加工するスクリプトをURL上にホストをして、 ポータブルで永続的でブラウザで完結するWebアプリを作れるようにします！ Rubyはデータ加工に最適！ Rubyは豊富なメソッドが標準で用意されていて、特にArray, Enumerator, Stringなどよくデータを加工したいときに使えるメソッドがとても豊富です。 メソッドチェーンでつなげていけるところが、人の思考にあっていて、どんどんデータを変えていけるところがRubyの良さだと思います。 そのためデフォルトの言語はRubyです。JavaScriptもオプションで選べるようになってます。 そこで、 データ加工に便利なRubyで書いた小さいWebアプリをURL上にホストします！ URLにすべてのコードを載せてしまえば究極的にポータブルなWebアプリになるのではないかという発想です。Itty.bittyにインスパ
Vue.jsとDjango REST FrameworkでSPAなWebをやる時の勘どころ - HATEOASと非同期処理（の触り） - Lean Baseball
ボストン・レッドソックスの皆さん、世界一おめでとうございます！*1 野球ってほんと面白いですね、こんばんは野球エンジニアです.*2 このエントリーでは楽しい野球技術、Vue.jsとDjango（Django REST Framework、以下DRFと略す）の話をサクッと書きたいと思います. なお、このエントリーは先日開催されたPyLadies Tokyo - 4周年記念パーティのLTでやったことの自分メモをブログにしたものです.*3 元ネタ PyLadies Tokyo - 4周年記念パーティのLTで話した内容がベースです. speakerdeck.com DjangoとVue.jsそしてOhtani-San - Pythonで二刀流しよう #PyLadiesTokyo 4周年 TL;DR 複数カテゴリのデータをSPA + REST APIで扱うなら、最初からHATEOAS（Hyperme
Vue.jsに至る道（Native, jQuery, Vue.js書き比べ） - Qiita
JS周りが混沌とする中、自分用のメモ。結局わかりにくくなってしまったが、個人用ということでお許しを。 Native, jQuery, Vue.jsで同じことを書いてみる 試したいことは HTML内のテキスト取得 inputの値の取得 classの編集 イベント処理 と言ったところ。 Vue.jsは順番を追って書きづらい（Vue.jsが使いづらいという意味ではない）。 動作イメージ 下記のような感じのものが表示されるはず。 コードを書く あと、別に<script>分ける必要ないのだけど、わかりやすさのために分けました。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <style> /* 切り替え用のCSS */ .red{ color: red; } .blue{ color: blue; }
Googleスプレッドシートで作成したファイルリストをVue.jsで表示する：IE11対応編 | バシャログ。
まさかの２週連続台風により週末が終わってしまいそうで、ちょっと悲しい kouraku です。おはこんばんちわ。予定は何も入れていなかったので、それだけが救いですね。。。 さて、前回『Googleスプレッドシートで作成したファイルリストをVue.jsで表示する』というお題にチャレンジしましたが、実は１つだけ問題がありました。それは・・・ IE11だと表示されないよ！！！！ ・・・はい、分かっていたのですが、コーディング中にIEを使うこともあまりないだろう・・・と思い放って置いたんです。 でも、仕事を進め行く内に、「IEでもちゃんとファイルリストが見られないと面倒！！」という場面にチョイチョイ出くわしたので、やっぱり直すことにします。 ということで今回は、このファイルリストをIE11でも表示できるように修正をしたいと思います。 まずはIE11のコンソールでどのようなエラーが起きているかチェック
社内管理画面を Vue + Go で作る - Gunosy Tech Blog
広告技術部のUTと呼ばれている @mocyuto です。 普段は広告配信のバックエンドを主に担当しています。 今回は社内管理画面を作った話をお伝えしたいと思います。 はじめに 設計 バックエンド goa 構成 フロントエンド 構成 TypeScript Vuex Atomic Design まとめ はじめに Gunosyの管理画面ではRailsが多いですが、社内用管理画面を新規で作ることになり、Vue + Go のSPA（Single Page Application）で作ることにしました。 管理画面をVueとGoで作る事例は最近増えてきていますが、弊社でもすでにこの組み合わせで実績はあり、２つ目となりました。 今回の社内向けの管理画面の作成意図としては、ABテスト反映の高速化が目的です。 今までは、リリースフローは以下のようになっていました。 配信チームとロジックチームをまたいでファイル
1週間でVue.jsをマスターしようと思った時に参考にしたサイト
前置き（とばしてください〜） めっちゃ久しぶりに更新します。 プロフィールなども古いですがとりあえず今度そのあたりも更新しようと思っています。 簡単に今の私について。 携帯の販売→スマートフォンアプリの専門学校→Web制作会社→フリーランス→フリーランスの時に仕事を受けたスタートアップの会社に就職（まだ2週間前の話） こんな感じです。 フリーランスのときは（今もまだ仕事はちょこちょこ受けてますが） 基本的に私ができる仕事はなんでも受けていました。 ので、エンジニアの仕事があればデザインの仕事、Botのシナリオ作成（UXライター的な）、プログラムとはかけ離れた仕事などなどもしていました。 また、ガッツリエンジニア！！という仕事はなかったので、（なぜが割とがっつり常駐していたスタートアップではメンバー半分がエンジニアだった！） 逆に、仕事で新技術学べる機会は殆ど無く… 今の自分が活躍できる領域
Vue.jsで構築された、デスクトップでもスマホでも快適に操作できるスライドショーのフレームワーク -Eagle.js | コリス
Vue.jsで構築されたスライドショーのフレームワークを紹介します。 デスクトップ・スマホに完全対応、プレゼンテーションモードも備えており、キーボード・マウス・タッチ操作をサポートしている快適なスライドショーを実装できます。 Vue.jsで構築された、軽快に動作するスライドショーのフレームワーク。 アニメーション、テーマ、インタラクティブウィジェットをサポート。 プレゼンテーション全体でコンポーネント、スライド、スタイルを再利用可能。 ビルトインプレゼンターモードとさまざまな便利なウィジェット。 すべてのAPIが公開されており、カスタマイズ可能。 ライセンスはISC Licenseで、商用でも無料で利用できます。 Eagle.jsのデモ Eagle.jsを使用したさまざまなスライドショーを楽しめます。 まずは、スライドやフェードなどのアニメーションが仕込まれたスライドショーから。 Eagl
レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 #エンジニアHub - エンジニアHub｜若手Webエンジニアのキャリアを考える！
レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 10年以上前に作られたレガシーシステムをVue.jsで大規模リプレイスしたエムスリーに、導入して感じたVue.jsのメリットや、活用法を伺いました。 JavaScript（JS）のフレームワークは、何を使うのがベストなのでしょうか。ここ3年ほどで数々のJSフレームワークが誕生していますが、React、Angularという二大巨塔を超えるものはなかなか現れていません。 そんな状況の中、GitHubではReactを上回るスター数を誇っている1のが、2014年のリリース後、着実に進化を重ね、日本でも採用事例が増えてきているVue.jsです。「JavaScript ベスト・オブ・ザ・イヤー」に2016年、2017年と2年連続で選ばれているほか、Ruby on Rails（Rails）やLaravel とい
Nuxt.js v2.0.0がリリースされたので触ってみた【変更点まとめ】 - Studio Andy
新ブログに移行しました。 blog.andoshin11.me
Vue.jsにjQueryからの移行方法も詳しく解説！Vue.jsの実践的な使い方がこの一冊でばっちり分かる -Vue.js入門
Vue.jsで、何ができるのか？ Vue.jsでUIを構築する際の考え方、導入方法、基本的な使い方、コンポーネントの扱い方、そして、実際のアプリケーション開発やjQueryからの移行など、この一冊でVue.jsの基礎から実践的な使い方までがしっかりと身につくオススメの本を紹介します。 Web制作に携わる人であれば、読むとワクワクすると思います。 本書はVue.jsのコアチームに名前を連ねている川口氏や片山氏をはじめとする、Vue.jsのエキスパートによる入門書ながら本格的な解説書。 Vue.jsに興味がある、使ってみたい、もっと使いこなしたい、そんなフロントエンドの制作に携わるコーダーやデザイナーにぴったりです。
お天気アプリで学ぶVue.jsのAPI連携 ｜ Tips Note by TAM
Vue.js で気象情報を表示させてみたいなとふと思い立ったので実際に作りながらVue.jsのAPI連携についてもまとめてみました。 今回実装するに当たってAPIからデータの取得が簡単に行えるaxiosを利用します。 基本的なVue.jsの使い方は公式ドキュメントがあります。 Vue.js - 基本的な使い方 axiosに関してより詳しく知りたいという方は以下のリンク先でご確認ください。 GitHub - axios/axios: Promise based HTTP client for the browser and node.js ■以下のように特定地域の気象情報をVue.jsで描画させることを目指します。 デモページ ■必要な準備 OpenWeatherMapでアカウント（無料）を作成し、APIキーを取得する OpenWeatherMapでは気象情報を取得できるAPIサービスが用意
Vue.js関連の各種リソースがまとめられた「VueToolbox」 - NxWorld
「VueToolbox」は、Vue.jsに関係するフレームワーク・コンポーネント・ジェネレータ・ユーティリティなどの各種リソースがまとめられているサイトです。 サイトでは下記5カテゴリーに大きく分類されているのに加えて、例えば「Frameworks」であれば「Admin Template」「Component Collections」「Desktop」といったように、さらにその中でも分類化されているので目的のリソースも探しやすくなっています。 Frameworks Integrations UI Components UI Utilities Utilities 子カテゴリーの一覧ではリソース名と概要が記載されたものが並べられています。 また、一覧の右上で並び順の切り替えができるようになっており、最後のコミットがいつされたかやnpmでのダウンロード数などを基準にできます。 詳細ページでは「
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsの勉強にもいい！UIコンポーネントやインタラクションを実装するチュートリアルがまとめられた -Vue.js Examples | コリス
