Vue.js設計地図 〜設計概念の依存関係からフロントエンド設計を見つめ直す〜Vue.js の設計地図を作成しました。設計概念の依存関係の図式化して理解し、 フロントエンド設計をモデリング起点で考えたブログです。
TypeScriptでVue.jsを書く – Vue CLIを使った開発のポイントを紹介
2018年8月11日に新しいメジャーバージョンとなるVue CLI 3.0がリリースされました。Vue CLI 3では、公式にTypeScriptをサポートし、 TypeScriptを利用するプロジェクトの生成に対応しました。これにより、TypeScriptでVueを気軽に試せるようになったということで、今回ちょっとどんなものか試してみることにしました。試した中でポイントとなりそうな部分をまとめてみたので紹介します。なお、私は普段はAngularでTypeScriptを書いているため、TypeScriptのクラス構文を使った説明になっています（クラス構文を使わなくても、TypeScriptでvue.jsを書くことはできます）。 目次 はじめに – Vue CLI + TypeScript TypeScript + Vue サンプル Vue CLIでTypeScriptプロジェクトを生成する
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
【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス) - Qiita
はじめに Vue.jsを使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルは、コンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルがほとんどでした。 しかし実際のプロダクトでこれをしてしまうと コンポーネント内でAPIアクセスの直書きによって単体テストが困難に Vuex(actions)の肥大化(使い回さない処理はStoreに記述しないほうがいいとする文献もある) API通信部分をPureJSでモジュール化しても依存度がイマイチ下がらない（コンポーネントでモジュールをインポートするため）。 などなど問題になることが多そうでした。 ある日、Jorge氏が投稿した「Vue API calls in a smart way」という記事にたどり着きました。
Vueの秘密のパフォーマンステク9選紹介 - Qiita
VueConf USでのさまざまな発表 今年の3月に VueConf US が開催されました。最近になってビデオが公開されて初めて知ったこともあるので本記事ではその紹介をします。 いろいろ面白いトピックがあるのですが、特にVueコアチームのGuillaume Chauさんによるパフォーマンス改善テクニックはまじかーという感じだったのでここにまとめたいと思います。 "9 Performance Secrets Revealed with Guillaume Chau" プレゼン動画: http://www.youtube.com/watch?v=5B66qer8cZo スライド: https://slides.com/akryum/vueconfus-2019#/ デモサイト: https://vue-9-perf-secrets.netlify.com ソース: https://githu
Vue.js + Elelment UI + Lottieでお手軽にいい感じなUI/UXを作ってみる - SMARTCAMP Engineer Blog
デザイナー兼エンジニアの葉栗です！ スマートキャンプでは以前からWebフロントエンド開発にVue.jsを取り入れています。 Vue.jsなどコンポーネント指向のフレームワークは、UIフレームワークも豊富で、お手軽にリッチなUIが構築できるのでいいですよね。 今回は私のお気に入りの、Vue.js + Elelment UI + Lottie というライブラリを使って、数十分でできる簡易的なログインページを作ってみようと思います。 0から構築をはじめて、レイアウト設計、ElementUIで実装、Lottie組み込み、完成といった感じで詳しく説明していきます！ 完成画面 😊 使用技術 Vue.js Element UI Lottie（ロッティー） 実装します！ 事前準備 Vue CLIをインストール プロジェクトを作成 ElementUIをインストール ログイン画面を作成 不要コードの削除 コ
VueとFirebaseの基本機能全部使ってぬるぬる動くポートフォリオサイトを作ったのでソースと解説 - Qiita
絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。 サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
GoでVueっぽくWebアプリが作れるVugu事始め - Qiita
ツイートが100RT超えたので、Qiitaにも書いてみます。 Go 1.11がJavaScript APIをすべてサポートしたライブラリを開発し、WebAssemblyに新しい未来が見えました。それまでのWebAssemblyはDOMやネットワーク操作ができないとされてきたので、ループ処理の高速化や数値計算、またはCanvasをゴリゴリ使うゲームくらいしか使い道がないよね…といった評価でした。しかしJavaScript APIが実装されたことで、DOM操作やネットワーク処理が可能になり、WebアプリケーションをそのままGoに置き換えられるんじゃないかという可能性が出てきました。 GoではじめるWebAssebmly その1「Hello World」 | hifive開発者ブログ とは言え、直接書くとコードがなかなか複雑というか、残念な感じになっていました。例えばネットワークのオンライン、オ
Webアプリ無料運営のススメ：FirebaseとNuxt(Vue)なら最強！ - Qiita
まだサーバーで消耗してるの？Firebase（サーバーレス）とNuxt.js（Vue系）ならWebアプリ運営は最強でしょ！？ この記事は、 サーバー費用をなるべくかけたくないけどショボいのはNO Firebaseの活用法をあまり理解していない Nuxt/Vueを使ってアプリ作ってみたい（Next/Reactと悩んでたり） アプリ構想はあるけどアイデアの落とし込みスピードが遅くて毎回挫折する という人向けに、「こんな感じで構築すれば効率良く開発できそうよ」というのを、勉強になった記事や技術的トピック・躓いた点なども合わせて紹介させていただきます。初心者向け＆技術トピック気になる方向けです！ 今回作ったアプリ「Moji → Pic」 Moji → Picは、文字だけだとなかなか目につく投稿ができないなぁ…とお困りの時にインパクトある画像が即座に出来るアプリ。目立ったツイートで友達に差をつけろ！
次世代の管理画面を作るフロントエンドの取り組み - BASEプロダクトチームブログ
フロントエンドエンジニアの松原(@simezi9)です。BASEでは現在ショップ向けの管理画面をリニューアルするプロジェクトが進んでいて、UI/UXの更新と同時に創業当時から継ぎ足して作ってきたフロントエンドの技術スタックを一新しようとしています。この記事では、具体的にそのフロントエンドの更新でどのようなことに取り組んでいるのかをいくつかご紹介したいと思います。 Vue + TypeScriptを利用したMPA(multi page application)化 HTMLの構築をPHP(サーバーサイド)からJS(クライアントサイド)へ移行する 従来の「BASE」の画面ではPHPでHTMLの構築を行っていましたが、HTMLの構築をすべてPHPのコードから分離させて、Vueによるクライアントサイドでのレンダリングにしています。また管理画面の特性上（1ページあたりの閲覧時間が長く相対的にローディン
Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう - Qiita
はじめに 質問箱や、ボタンメーカー、診断メーカー等を始めとする 「OGP画像生成系」 を ２個以上作ってそれのベストプラクティスがわかってきたので、共有したいと思います。 宣伝 この技術を使ったサービスを実稼働２日ぐらいで作りました！ 使い方は簡単です！ メッセージカードを書いて、Twitterにシェアするだけ。 #嵐ありがとう OGP画像生成系サービスとは？ 質問箱 みんなのボタンメーカー （｡･ρ･）ｵｼﾃﾐﾃ キズナアイな気分のときに押すボタンを作りました！みんな押してね！#キズナアイな気分のときに押すボタン#みんなのボタンメーカー https://t.co/2mzJUE48zj — Kizuna AI@hello,2019‼︎ (@aichan_nel) 2019年1月29日 「ツイッターでつぶやけるボタン」を簡単に作成できるサービスをリリースしました【個人開発】 すごくいいサービ
ぼくのかんがえたさいきょうの配色Webサービスを公開した話 - Qiita
TL;DR まあぜんぜん最強ではないですが、自分好みの配色 Web サービスをつくってみました yum-yum COLOR 個人で公開まで作りきったのは初めてでしたので、色々とつまずきました そんなつまずきポイントや、 Web サービスを公開するために利用した技術などを紹介していきます ❗ なぜ配色サービス ❓ 色彩検定という資格をご存知でしょうか？ 僕はプログラマーなのに 色が好き で、この試験を受検しました。 その学習をしてる時にこんな風に思ったのです。 この色相環、これを使って配色選べたら便利じゃない？ あっ、このトーン、これを使って配色選べたら便利じゃない？？ と。 受検勉強の追い込みをしないといけないのに、そっちのけで作り始めてしまった...というわけです （一時はどうなるかと思いましたが、無事に検定は合格しましたよ 🎉 ） どんなサービスなの ❓ 使い方 色相環 と Hue
Vueを学び、SPA対応のポートフォリオサイトを自作するまでの道のり - Qiita
昨日1/28にVue, Vuex, Vue Routerを使って、SPA対応のポートフォリオサイトを自作しました！ここまで形になったこと、本当に嬉しかったです。 自作ポートフォリオサイト もともと1週間でVue.jsを使ったポートフォリオを作った記事をみて、「すげぇ…自分もVueでポートフォリオサイト作成を第一目標にしよ！」と思ったんですね。 それで、Vueでの自作ポートフォリオサイトを１つの目標にしたんですが、想像以上に私には難しく１ヶ月くらいかかりました(^p^) あと、２回ほど心が折れました(^p^) そんな過去の私のようにVueで心折れそうな方々が減れば…！という一心で、個人的なVue学習の道のりをご紹介します。 追記：2020/3/25 NuxtでJAMStackなポートフォリオに一新した記事を上げました。こちらも参考になれば幸いです！ 【JAMStack】Nuxt×Conten
Vue.jsにも対応の優れ物！高さが異なるカードでもグリッドにレイアウトできる超軽量ライブラリ -Magic Grid
カードの高さが常に一定であれば、CSS GridやFlexboxで簡単に実装できます。しかし、ユーザーが作成したデータを使った動的コンテンツでは高さが同じになることはほとんどありません。 カードの高さがそれぞれ異なる動的グリッドを簡単に実装できる超軽量JavaScriptライブラリを紹介します。 動的コンテンツはもちろん、静的コンテンツにも対応しています。 Magic Grid Magic Grid -GitHub Magic Gridの特徴 Magic Gridのデモ Magic Gridの使い方 Magic Gridの特徴 Magic Gridは、高さが異なるアイテムでもグリッドに揃えてレイアウトすることができます。高さを調整するために、下部に異なるスペースは必要ありません。 高さが揃っていたり、たくさんの行にそれぞれが何行にまたがっているか定義できる場合はCSS GridやFlexb
Vue.jsとFirebaseの本を読んで高速にWebサービスを開発してみた - Imomemo
まずVue.jsとFirebaseの本を読んでみた 改訂新版 Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ（NextPublishing）) 作者: 渡邊達明出版社/メーカー: インプレスR&D発売日: 2018/10/05メディア: Kindle版この商品を含むブログを見る ワタナベ(id:tatsuaki_w)さんの「Vue.jsとFirebaseで作るミニwebサービス」というイカした本を買ってみました、超絶わかりやすくオススメ出来ます。 Vue.jsもまだまだ分からない部分も多く勉強中ですが、Firebaseに関しては一切触ったことがなかったです。 しかし、使ってみるとこれがめっちゃ便利。 この本によって基礎知識を付け、サクッとマークダウンエディターをFirebase上で作ってみて要領を掴みました。 オンラインメモ帳を作ってみた OimoNote |
Vueでもっと幸せになりたいあなたへ。VueのUIコンポーネントライブラリVuetifyのススメ - KAYAC engineers' blog
どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。 KAYAC Advent Calendar 2018の12日目の記事を担当します、今年1月に中途入社しましたエンジニアのたがみです。 前職ではサーバーサイドのSEとして業務系のwebアプリを開発したり運用したりしていましたが、今はクライアントワークのフロントのエンジニアとしてwebサイトを作ったり動かしたりぶっ飛んだものにしたりしなかったりしています。 今回は、そんな私がフロントエンドになったばかりの頃に仲良くなった思い入れのある言語、Google App Scriptの話を！・・・・・・と、つい二日前までは、思っていたのですが。 Google先生を訪ねて色々と検索していたところ「あれ・・・なんか・・・Vuetifyについての日本語記事、実は少ないのでは・・・？」と気づいてしまったのです。 （もしかしたら気のせいか
「Vue.js + Go言語 + Docker」で作る！画像アップロード機能実装ハンズオン - Qiita
こんにちはpo3rinです。Vue.js Advent Calender 2018 9日目の記事です。 8日目の記事は vue.js(nuxt.js) の plugin はとても便利 でした。 11月にフリーの案件で Vue.js + Go言語で画像アップロード機能のあるCMSを作りました。Vue.jsでの実装の際には npmモジュールである vue2-dropzone を使うと、Vue.js にとって便利な機能が提供されており、すぐにアップロード機能が作れました。なので今回は Vue.js + Go言語 で画像アップロードを行う機能の実装をハンズオン形式で紹介していきます。 今回は Vue.js のアドベントカレンダーとしての投稿なので、Go言語の実装を飛ばしたい方向けに、Go言語のインストールが不要になるように、すでにDocker環境を用意してあります。せっかくなので今回は Docke
Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA アプリケーションのチュートリアル 1/4 - Qiita
Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA アプリケーションのチュートリアル 1/4JavaScriptLaravelJWTSPAVue.js Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA なTODOアプリを作ってみました。 結構本気で作りました。 Laravel + Vue.js はかなり作りやすく、サーバーサイドの処理が少ない＆分かりやすいので楽しかったです。 自分の記憶の定着を上げるため、チュートリアルを書きます。 JS初心者なので、おかしいところとかベストじゃないところが多々あると思いますので ご指摘頂けたら嬉しいです！ 作ったもの ソースコード デモサイト 目次 四部作です。 はじめに ← 今ここ 基本的な概念の説明 インストール Todoアプリ作成編 / サーバーサイド M
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
がんばらない Vue.js / Vuejs on VS Code & TypeScript
なんとなくVue.jsのUIフレームワークを紹介する - Qiita
