Nuxt.js(Vue.js)とGoでSPA + API(レイヤードアーキテクチャ)でチャットアプリを実装してみた - Qiita
概要 Nuxt.js(Vue.js)とレイヤードアーキテクチャのお勉強のために簡単なチャットアプリを実装してみた。 SPA + APIと言った形になっている。 機能 機能はだいたい以下のような感じ。 ログイン機能 サインアップ機能 スレッド一覧表示機能 スレッド作成機能 ログインしたユーザーは誰でもスレッドを作成できること コメント一覧表示機能 スレッドをクリックすると、そのスレッド内のコメント一覧が表示されること スレッド内でのコメント作成機能 ログインしたユーザーは誰でもどのスレッド内でもコメントできること スレッド内でのコメント削除機能 自分のコメントのみ削除できること ログアウト機能 コード コード全体はここ コードは一例でもっと他の実装や良さそうな実装はありそう 技術 サーバーサイド DDD本に出てくるレイヤードアーキテクチャをベースに以下の書籍や記事を参考にさせていただき実装し
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で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
次世代の管理画面を作るフロントエンドの取り組み - BASEプロダクトチームブログ
フロントエンドエンジニアの松原(@simezi9)です。BASEでは現在ショップ向けの管理画面をリニューアルするプロジェクトが進んでいて、UI/UXの更新と同時に創業当時から継ぎ足して作ってきたフロントエンドの技術スタックを一新しようとしています。この記事では、具体的にそのフロントエンドの更新でどのようなことに取り組んでいるのかをいくつかご紹介したいと思います。 Vue + TypeScriptを利用したMPA(multi page application)化 HTMLの構築をPHP(サーバーサイド)からJS(クライアントサイド)へ移行する 従来の「BASE」の画面ではPHPでHTMLの構築を行っていましたが、HTMLの構築をすべてPHPのコードから分離させて、Vueによるクライアントサイドでのレンダリングにしています。また管理画面の特性上（1ページあたりの閲覧時間が長く相対的にローディン
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でもっと幸せになりたいあなたへ。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
Vue.jsでブラックジャックを作ってみた - Qiita
プログラミング入門者からの卒業試験は『ブラックジャック』を開発すべし ものすごい今更なうえ何番煎じかもわからないけど vue.js でブラックジャックを作ってみた。なんでかって言うと vue.js のいい感じのチュートリアルが無かったから。 完成品 デモ https://t-kojima.github.io/blackjack-vue/ リポジトリ https://github.com/t-kojima/blackjack-vue ルール ルールはネタ元にある通り、以下のものを使用。ただし A は 1 と 11 どっちでも扱えるようにする 初期カードは 52 枚。引く際にカードの重複は無いようにする プレイヤーとディーラーの 2 人対戦。プレイヤーは実行者、ディーラーは自動的に実行 実行開始時、プレイヤーとディーラーはそれぞれ、カードを 2 枚引く。引いたカードは画面に表示する。ただし、デ
Laravel × Vue.js × axiosでTODOリストを作るよ！ その1 | とんよー。ブログ
はい。とてつもなくシンプルですね（笑）。 タスクを識別するためのキー「id」。主キーで、オートインクリメント。 タスク名を入れる「title」。 ………以上！！ …あ。バリデーションは面倒なのでナシで（汗）…。 開発環境について 本記事は下記の環境を想定して書いています。 お使いのPCの環境と異なる場合は、適宜調整してくださいませ。 macOS High Sierra ver.10.13.5 Composer – 1.6.5 npm – 5.6.0 Laravel – 5.5 Vue.js – 2.1.10 axios – 0.16.2 laravel-mix – 1.0 Laravel・Vue.js・axiosでTODOリストを構築する手順 変更があるかもしれませんが、流れとしてはだいたい下記のようなカタチになるかと。 Laravelのインストール・セットアップ Vue.jsとaxios
2018年Vue.jsとVuexを使ってFluxをしている人には必ず知っていてほしい開発やメンテナンスの際に役立つVuexのTipsとサンプルコード
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしい開発やメンテナンスの際に役立つ設計とTipsとサンプルコードFacebookfluxVue.jsVuexvue-router 初めに ※ 全てのコメントに返事しません。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ゴール ReduxやVuex、Fluxのパワーワードに負けずになんとなくではなくちゃんとFluxを理解し、実践して恩恵を受ける。 役立つVuexのTipsを身につけコード品質を向上させる。 VuexとVueRouterの落とし穴の把握。 リファクタリングの障害を減らしコードを追いやすくする。 Vuexの穴 1. Vuex提供のmap系の辛み VuexのmapActionsとか、createNamespacedHelpersめっちゃ便利ですよね。 import { createNamespac
【Firebase】Vue.jsで作ったWebアプリを公開する方法を解説【初心者向け】
誰向けの内容か？ この記事は下記のような悩みがある方に向けた内容となっています。 もし該当するものがあれば、ぜひFirebaseを試してみてください。 「制作したポートフォリオをできるだけ簡単に公開したい」 「Vue.jsやReactを使ってWebサービスを作りたいけれど、バックエンドは苦手なので避けたい」 「フロントエンドの勉強で何か作りたいけれど、バックエンドの実装に時間を掛けたくない」 Firebaseのメリット Firebaseは”mBaaS”(mobile Backend as a Service)、または”BaaS”(Backend as a Service)と呼ばれるサービスです。 Backendとあるように、Firebaseはバックエンド（サーバサイド）の機能を提供しています。 Firebaseを使うと、バックエンド機能をある程度まかなうことができるようになります。 サーバ
noteのフロントエンドをNuxt.jsへ刷新します｜こんぴゅ｜note
webサービスのUXを向上させるために、表示速度は非常に大切です。 しかしながら、noteはリリース当初からフロントエンドの実行速度が遅い=表示が遅いという構造的な問題を抱えており、継続率や離脱率など重要指標に悪影響を及ぼすリスクが強くありました。 noteチームはnoteを本格的なメディアプラットフォームへ成長させるスピードを加速していきます。それを踏まえ、手遅れになる前に技術的な負債を解消し、最新のベストプラクティスに沿ったフレームワークに移行することで、高性能なサービスを提供する基盤を作っていくという決断をしました。 本ポストでは、移行プロジェクトの技術的背景や移行手順を説明します。また、途中成果のデモをUPしているのでご紹介します。 技術的な背景noteの現在のフロントエンドはAngular.js 1系で構築されたSPAです。Angular 1系はかなり複雑なUIでも簡単に構築でき
AWSの料金を「ざっくり」計算できるサイトを作る - Qiita
AWSの料金、ややこしいですよね。 サービスの選択肢が多く構成が柔軟なおかけで、さまざまな要件をカバーできるのは嬉しいのだけど、そのぶん料金体系がややこしいので、やるせない気持ちになります。 この気持ちはなんだろう、この気持ちはなんだろう、と自問しているうちに春になってしまったので、AWSの料金を「ざっくり」計算できるサイトを作り始めました。 ざっくりAWS 公式ツールの存在 Simple Monthly CalculatorというAWSの料金を計算できる公式のツールがあるのですが、悲しいことに名前ほどシンプルではありません。 正確な料金を算出するために入力項目が多いのは仕方がないとは思うのですが、サイトを開いたときの威圧感がすごいので、もう少しさっぱりできないかという気持ちがありました。 なので、公式ツールの敷居が高いと感じる自分のような人向けに、料金を「ざっくり」計算できるサイトを作り
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js Examples
Vue.js によるアプリを Firebase で Hosting する最短の道 - Qiita
Vue Fes Japan 2018 ティザーサイトの裏側 / Inside Vue Fes Japan 2018
https://creative-tweet.net/blog/2018/04/beginning-vuejs.html