Nuxt.js(Vue.js)とGoでSPA + API(レイヤードアーキテクチャ)でチャットアプリを実装してみた - Qiita
概要 Nuxt.js(Vue.js)とレイヤードアーキテクチャのお勉強のために簡単なチャットアプリを実装してみた。 SPA + APIと言った形になっている。 機能 機能はだいたい以下のような感じ。 ログイン機能 サインアップ機能 スレッド一覧表示機能 スレッド作成機能 ログインしたユーザーは誰でもスレッドを作成できること コメント一覧表示機能 スレッドをクリックすると、そのスレッド内のコメント一覧が表示されること スレッド内でのコメント作成機能 ログインしたユーザーは誰でもどのスレッド内でもコメントできること スレッド内でのコメント削除機能 自分のコメントのみ削除できること ログアウト機能 コード コード全体はここ コードは一例でもっと他の実装や良さそうな実装はありそう 技術 サーバーサイド DDD本に出てくるレイヤードアーキテクチャをベースに以下の書籍や記事を参考にさせていただき実装し
ZOZOのグローバルECのフロントエンドアーキテクチャ設計 / Frontend Architecture Design of ZOZO - Speaker Deck
HTML5カンファレンス2018で登壇した内容です。
Vueを用いた開発プロジェクト用に「コンポーネント設計・実装ガイドライン」を作った話 - Qiita
はじめに こんにちは、モチベーションクラウドの開発にフリーのエンジニアとして参画している@HayatoKamonoです。 この記事は、「モチベーションクラウド Advent Calendar 2018」8日目の記事となります。 概要 モチベーションクラウドの開発チームでは2018年10月から改善期間と称して、開発に関するガイドラインやルール作りをはじめとする、様々な改善活動に取り組んでいます。 その改善活動の一環として作成した「コンポーネント設計・実装ガイドライン」を今回は説明を交えながらご紹介して行きたいと思います。 目次 Componentの粒度に関して Container ComponentとPresentational Component コンポーネントの共通化に関して コンポーネント実装時の細かな決め事 CSSに関して まとめ Componentの粒度に関して これまではフロント
運用期間20年 DMMが明かす、Vue.jsを使って長期運用サービスを改善するまで
2018年9月5日、第70回となる「HTML5とか勉強会」が開催されました。今回のテーマは「開発環境」。 Webフロントエンドの開発環境をテーマに、エディタプラクティスやServiceWorkerを開発ツールとして使うアプローチ、長期運用されたサービスのリニューアル方針など、登壇者たちがその知見を語ります。プレゼンテーション「長期運用サービス改善のために構築した開発環境の話」に登場したのは、koyano氏。DMMにおいて長期間運用されているサービス「DMM動画」の改善のために、Vue.jsを使って取り組んだことについて語りました。講演資料はこちら 長期運用サービス改善のために構築した開発環境の話 koyano氏：それでは始めさせていただきたいと思います。よろしくお願いします。 （会場拍手） 「長期運用サービス改善のために構築した開発環境の話」をさせていただきたいと思います。 まず自己紹介
ReactとVueのどちらを選ぶか - Qiita
主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu
noteのフロントエンドをNuxt.jsへ刷新します｜こんぴゅ｜note
webサービスのUXを向上させるために、表示速度は非常に大切です。 しかしながら、noteはリリース当初からフロントエンドの実行速度が遅い=表示が遅いという構造的な問題を抱えており、継続率や離脱率など重要指標に悪影響を及ぼすリスクが強くありました。 noteチームはnoteを本格的なメディアプラットフォームへ成長させるスピードを加速していきます。それを踏まえ、手遅れになる前に技術的な負債を解消し、最新のベストプラクティスに沿ったフレームワークに移行することで、高性能なサービスを提供する基盤を作っていくという決断をしました。 本ポストでは、移行プロジェクトの技術的背景や移行手順を説明します。また、途中成果のデモをUPしているのでご紹介します。 技術的な背景noteの現在のフロントエンドはAngular.js 1系で構築されたSPAです。Angular 1系はかなり複雑なUIでも簡単に構築でき
Vue.js + Scala.js + Electron でMac用backlogクライアントを作りました - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く
backlogというのは一般名詞のほうのbacklogではなく、ヌーラボさんのプロダクトのほうのbacklogです。 www.backlog.jp だいたい土日の2日間でできたのでよかった。 作ったやつどこにおいてあるか アプリ BackLogger-darwin-x64_v0.1.1.zip - Google ドライブ ソースコード github.com スクリーンショット タイトルの通り、Scala.jsとElectronで作られています。 なぜ Scala.js と Electron で作ったのか Scala.js がどれくらい実用的に使えるのかを知りたかった Electoron の得意なこと、苦手なことを触ってみて検証したかった というまっとうな理由と、 来年のScalaMatsuriに応募するためのネタがほしいな〜 「で？なんか偉そうに設計の話してるけど、お前はそれで何作ったの？
ToKyoto.jsでScala.jsについてLTしてきました。 - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く
自分の発表について speakerdeck.com もう3日前のことになりますが、ToKyoto.jsでLTしてきました。Scala.jsの話です。スライドにあるし、このブログでも何度か取り上げていますが Scala.js 普通に実用性あります。とはいえ「実用性がある」と「使うべき」の間には高い壁がそびえているわけですが……。 ちょっと補足的な話をしておくと、ReduxやVuexが提供する状態管理パターンのよさはいくつかあって、 Single source of truth が守られる 参照系と更新系が強制的に分離させられる 以上の二点により、プレゼンテーション上でのデータの分割構造とロジック上のデータの分割構造が分離される ヘッダーで使う情報とメインコンテンツで使う情報が互いに関連するみたいなやつが、おなじデータソース見るの簡単とかそういうこと 自分でデータの変更をobserveしなくて
Vue.js Tokyo v-meetup="#1"に行ってきたよ - 俺、サービス売って家買うんだ
今日はVue.jsのミートアップに参加してきました。 なんとVue.jsの生みの親のEvan YouさんのQ&Aセッション付き！ vuejs-meetup.connpass.com 全体を通して、気になった箇所や今後調べておきたいことを箇条書き程度に。 気になったこと Vue.jsは学習コストが低い 日本語ドキュメントも豊富だし、data-binding目的だけで使えたりして便利 →誰かに教えるときDOMをすっ飛ばしてVueとか入っていいものかとなやましい 肥大化したVMへの対応 .NETからMVVMの思想を紐解くとよい MVVMのModelにまつわる誤解 - the sea of fertility callbackで変更を検知 →component+eventを利用しない理由を聞いておけばよかった Vuex 2.0系から$broadcast, $dispatchがdeprecatedに
Vue.js - The Progressive JavaScript Framework | Vue.js
The Progressive JavaScript Framework Web ユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク。 Vue を使う理由 はじめる インストール 親しみやすい 直感的な API とワールドクラスのドキュメントを使用して、標準的な HTML、CSS、JavaScript をもとに構築します。
既存のRailsアプリケーションにVue.jsを採用した話 - スパイスな人生
こんにちは、id:ukstudioです。今回は弊社サービスの1つであるSPOTLIGHTSにVue.jsを採用した話をしようと思います。 SPOTLIGHTS自体は一般的なRailsアプリケーションといって問題ない作りになっているので、既存のRailsアプリケーションにどういった形でVue.jsを投入していったかを中心に書いていきます。 Vue.js採用前の状況 SPOTLIGHTS初期のJavaScriptはHTML/CSSと共に外注し納品してもらったものです。 フレームワークといった類はほぼ使っておらずjQueryに頼りきったコードでした。 当時は様々な事情によりこれはこれで妥当な判断だったと思うですが、今後社内でメンテナンスしていくうえで足かせになるであろうというのはなんとなく予想ができていました。jQueryのイベントハンドラやDOM操作がひとつのファイルにひたすら連なっているとい
ぼっち対策として、ポートフォリオを作る。（TrelloとVue.jsでプロトタイピング） - Qiita
※現在、当サンプルは動作しません。追記を参照して下さい。 大き目の勉強会に参加すると、たいていぼっちになってしまいます。ピザとチューハイ片手に、邪魔にならない位置にいるしかありません。 自己アピールさえできればなんとかなる場合も多かったと思います。じゃああれですね。ポートフォリオの出番です。作りましょう。 CMSに対する最新の気持ち 書き下すとこんな感じでしょうか。そこは面倒臭がるなよって箇所もありますが。 とりあえずWordPressは嫌 GitHub pages上にホスティングできると、お金かからないし、しかもURLもかっこいい jekyllで生成するのもやってみたけど、いちいちコミットしてPushするのだるいし、環境ないと更新も面倒臭くて、廃墟になってしまった。 だから管理画面がほしいなぁ。 Markdownで書きたい。 画像アップローダもほしい（しかし作りたくはない）。 というか自
Vue.jsで手軽じゃないアプリケーション構築 - Qiita
概要 Vue.jsは、MVVMというMVCの派生種を設計基盤として構築されたクライアントサイドJSフレームワークです。AngularJSと表面上は似ていますが、設計思想は全く異なるもので、作成したUIコンポーネントを組合せてページを構成することを前提にしています。 「Vue.jsで遊んでみた」のような記事はよく見るのですが、実際にプロジェクトとして走らせる場合に、アプリケーション構成からテストまで、どのようにするのがベストなのかを、まとめました。 SPAをベースに、サーバーサイド言語上で動かすときの構成も調べています。 ブラウザサポート yyx990803/vue - Vue.jsはレガシー・ブラウザをサポートしていません。 参考記事 Getting Started - vue.js Vue.js概要？ - Qiita - はてぶ200 大きめのアプリケーション構成について ガイドライン
Vue.js + atom-shellでアプリ作ったメモ - マルシテイア
Lolipopという音楽プレイヤーを作った。 初めて使うツール多かったので、メモ。 Vue vue.js Vue.js人気だけど個人的にはあんまり良くわかってなくて、良さを理解するために触ってみようとなった。 Vue.js、サーバ側で生成したHTMLに対し、JSっぽい動きを与えるVMとして使うのに向いてる。 オレオレComponentを量産して組み合わせて使うのはあんまり得意じゃなさそう。 というのも、この前React+fluxでオモチャ作ったんだけど、その時と比べるとComponentの扱いに結構苦労したからだ。 頭のこんがらがり具合はAngularのディレクティブと大して変わらない気がする。 結果としてReact(+flux)の良さを認識することになった。 React、コンポーネントの正体がJSのクラスだし、データのやり取りはEventEmitter使って一方向でやるの推奨なので、「こ
Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita
Vue.jsはそのまま使ってもよいですが「自分(プロジェクト)に合ったフレームワーク」を見つけるのにも向いています。 これは、後発フレームワークだけあり各フレームワークの特徴を意識した設計がなされているためです。他の著名なフレームワークとの特徴を比較した文書もあるので、こちらをチェックしながら導入を検討するとよいと思います。 そのため、以下はVue.jsの紹介と他フレームワーク(Knockout.js と Angular)へのステップという2セクションに分けて紹介していきたいと思います。 JavaScriptフレームワークの導入を行いたいがこの選択は慎重にいきたい、という状況であれば最初にVue.jsを試金石としてみて、効果的と感じられる機能からAngularやKnockout.jsに流れていくというのは十分ありだと思います。 2016/06: Vue.jsの1.x系に合わせて記述・サンプ
Vue.js v0.11の変更点(予定)まとめ
Vue.js v0.11のrc版もリリースされて、v0.10からの変更点が多いのでchangesを参考にまとめてみました。 ** rc3がリリースされたので修正・追記しました ** APIの変更も多いですが、data継承の仕組みが完全に変わっているのでその辺りは注意が必要ですね。 npm install vue@0.11.0-rc2 まだ安定してなかったりドキュメントはv0.10のものしかなくてchangesとmergeしながら読む必要があったりするので、これから開発する人は今のタイミングはどのバージョンを使えばいいのかちょっと悩ましいですね。v0.11系を使っていった方がいいとは思いつつ。 今回の変更でも見えるのですが、Angular.js以外にもBackbone.jsやReact.jsなど様々なフレームワークからいいところを持ってきてるところがVue.jsの面白いところですね。 htt
Angularそっちのけで、Vue.jsについて所感
Vue.js 軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog を読んで触発されたので、自分も外見的に良いなと思ったポイントだけ書き留めてみます。さすがに実戦投入できていないので、そのあたりの精度は悪しからず。 サンプルコードの雰囲気 サンプルコードとか自分でちょっと触ってみたときの感触からは、以下のポイントが気に入りました。data-bidingsとかは前提として便利です。はい。 覚え切れそうな分量のAPI Class: Vue - vue.js 脳みそちっちゃいので助かります。それに尽きる。 プロパティによる宣言っぽさ Angularだとイベントハンドラ類を書くにも、$scopeに都度ハンドラを仕込んでいくのがあまり好きでないです。工夫で回避できそうですが、与えられたスタートが下記のような状態であることには変わりません。 angu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1年間単体テストを書き続けた現場から送る Vue Component のテスト / Vue Component Test - Speaker Deck
DMM動画サービスの問題を解決しようとしている話（コンポーネント編） - DMM inside