既存プロダクトに最小構成でTypeScriptを導入する - RAKSUL TechBlog
こんにちは。 印刷のラクスルでフロントエンドを担当している菅野です。 現在、稼動中のとあるプロダクトへのTypeScript導入を進めています。今回は、既存プロダクトへの影響を最小限に留めつつTypeScriptを導入する手順をご紹介します。 TypeScriptとは TypeScript - JavaScript that scales. TypeScriptは、Microsoftが開発したオープンソースのプログラミング言語です。 詳細な説明は省きますが、以下のような特徴があります。 JavaScriptの厳密なスーパーセット(≒上位互換) 省略可能な型システム クラスベースのオブジェクト指向 TypeScript導入にあたって 今回TypeScriptを導入することで、以下のようなメリットがあります。 型システムの恩恵が得られる エディタの入力補完を受けられる コード=ドキュメントとい
Serverless WordPress と SSG(Static Site Generator) が生み出す、まったく新しくて それでいて WordPress コンテンツ管理な ウェブサイト - builderscon tokyo 2019
Serverless WordPress と SSG(Static Site Generator) が生み出す、まったく新しくて それでいて WordPress コンテンツ管理な ウェブサイト rejected Abstract ブログや情報サイトで人気の WordPress、一説には全ウェブサイトの 30%超は WordPress で作られていると言われています。 しかしながら WordPress を本格的に運用するにはたくさんの作業と時間、そして多くの経験とノウハウが必要です。また UI/UX である Theme を作ることも熟練が必要でしょう。 それは WordPress がウェブサーバーとデータベースを必要であり、その運用を必要とし、WordPress のアーキテクチャに寄り添った技術力で Theme 作りが必要となるからです。 もし、その２つが解決されたらどうなるでしょうか？ W
Production modeでもVue.js Devtoolsを有効にする方法 - mottox2 blog
この記事を見た@mascii_kさんがもっといい方法を教えてくれました！ ブレークポイントなしで実行できるようになるので便利です。 【Vue.js】Vueコンストラクタ関数をWebコンソール上で見つける方法 - Qiita 今年のWWDCは熱かったですね！その中でもSwiftでReactのように宣言的にUIを記述できるSwiftUIの発表はこれからのiOSアプリに変革をもたらす存在だと思います。 そのSwiftUIのチュートリアルサイトがVue.jsで構築されているというツイートがタイムラインに現れました。それが、Vue.js Devtoolsが有効になっている写真と共にです！ 自分がそのサイトを訪れてもVue.js Devtoolsが無効になっていたのですが、理由はこのツイートのリプライ欄にありました。 元ツイート .@Apple is using @vuejs pic.twitter.
App Engineの標準環境でNuxtを使って無料SSR - Crieit
Google App Engine（GAE）のStandard EnvironmentにNode.jsが追加されているようです。元々Node.jsは有料のFlexible環境でしか使えなかったため、無料で使えるようになったのは非常に嬉しいです。 元々Firebase HostingやNetlifyで無料でNuxtを動かす事はできるのですが、それらは静的ホスティングサービスのためSSR（サーバーサイドレンダリング）ができません。（Functionsを使ったり等で可能ではあるようですが、アクセスが増えると費用がかさむようになると思います） GAEであればサーバー上でNodeが動くためSSRも問題なく可能でSEO的にも良さそうです。ということでとりあえずGoogle App Engine上でNuxtを動かしてSSRできるところまで試してみました。 Windows SubsystemのUbuntu
Vue.js＋Vuex＋TypeScriptのWebフロントエンド開発現場を前向きに改善した話 - ZOZO TECH BLOG
こんにちは。Webフロントエンドエンジニアの松井菜穂子です。 ZOZOテクノロジーズに入社して一年ほど経ちます。 あるサービスの立ち上げから運用まで、Webフロントエンドのチームリーダー・開発メンバーとして関わってきました。 当記事では、当社のWebフロントエンド開発現場にあった問題と、それぞれの課題に対して堅実に積み重ねた技術的な改善方法についてご紹介します。 はじめに モダンな技術でも負債は生まれる 負債を何故改善するのか 要因 その1: Vueコンポーネントを綺麗に分割する テンプレート コンポーネントクラス 使用例 解決策 テンプレート コンポーネントクラス 使用例テンプレート 使用例コンポーネントクラス コンポーネントカタログで汎用化を促す コード テンプレート（atoms.vue） コンポーネントクラス（atoms.vue） サンプル その2: Vuexをシンプルにする Sta
Gridsomeを使ってみる【開発環境編】 - tyankatsu’s blog
最近仕事でGraphQLを触る機会が多く、APIは全部GraphQLみたいにエンドポイント一つになってくれないかなーと思っていたら、こちらのようなパッケージが登場しました。 現時点ではv0.2.5です。 https://gridsome.org/ Gridsomeとは ざっくりと GraphQLレイヤーを内包している(https://gridsome.org/docs/graphql) 外部API（WP REST APIとか）をGraphQLレイヤー向けに変換するのでAPIが使いやすい vueファイル内で独自タグを採用している（<page-query>とか）ので、vueファイル内でGraphQLライクに情報を引っ張れる JAMstackを目指していて、static site generatorになっている。（SSRにもできるらしいけど未確認） graphiqlみたいな機能を搭載している 独
TypeScript + Vue.jsでのフロントエンド開発 - razokulover publog
最近webアプリ(RailsのviewでVue.jsを使ってる感じの部分)をフロントエンドだけ切り離してリライトする業務をやった。 他の業務と並行で進め、実装からリリースまでの期間は大体営業日換算で2週間ちょいくらい。 バックエンドのAPIなどはすでに開発済みのものを使えたので純粋にフロントエンドのみ。 途中、既存の動いてるアプリへ機能追加などされていたので都度追従していく作業もやった。 そもそもリライトすることを決めたのは元のアプリが歴史的な経緯などあり、トランスパイルできる環境に無く、加えてAndroid4.2以降のwebブラウザに対応する必要があったため。素手でES5を書き続けるのは規模が大きくなっていくとだいぶ辛いしここらでちゃんと整えましょうということで重い腰をあげたという感じ。 フロントエンドライブラリとしてはVue.jsに元々は慣れてたこともあり、Vue.jsを利用。この夏に
VueコンポーネントのState管理を考える - 一休.com Developers Blog
この記事は一休.comアドベントカレンダー2018の3日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でWebフロントエンドの開発をしています。 一休.comにVue.jsを導入して、約1年が経ちました。スマートフォン版の予約入力画面から始まり、PCとスマートフォン版のホテルページほか、さまざまなUIコンポーネントがVue.jsで実装されるようになってきています。 また、予約入力画面のような複雑な状態管理を伴う画面の実装のため、Vuexを導入しています。 ここ1年ほどVue.js + Vuexというスタックで開発を行ってきて、アプリケーションの設計について色々と思うところがあったので、今回は現状でどういう構成が最適と考えているか、紹介します。 Vue.jsアプリケーションのState Vueコンポーネントには、親から受け取るpropsと、自分自身で保持するstate(data
Vueを用いた開発プロジェクト用に「コンポーネント設計・実装ガイドライン」を作った話 - Qiita
はじめに こんにちは、モチベーションクラウドの開発にフリーのエンジニアとして参画している@HayatoKamonoです。 この記事は、「モチベーションクラウド Advent Calendar 2018」8日目の記事となります。 概要 モチベーションクラウドの開発チームでは2018年10月から改善期間と称して、開発に関するガイドラインやルール作りをはじめとする、様々な改善活動に取り組んでいます。 その改善活動の一環として作成した「コンポーネント設計・実装ガイドライン」を今回は説明を交えながらご紹介して行きたいと思います。 目次 Componentの粒度に関して Container ComponentとPresentational Component コンポーネントの共通化に関して コンポーネント実装時の細かな決め事 CSSに関して まとめ Componentの粒度に関して これまではフロント
Vue.jsで全然使ってない機能とかが割とあるって思って - うしろのこの本ください
吾輩はなんか使ってない/使う機会がないみたいなVue.jsの機能がある。理由はまだない。 最初に言っちゃうとグローバルで使うようなのは殆ど書いてない。Vue.useくらい？ filter <!-- mustaches --> {{ message | capitalize }} <!-- v-bind --> <div v-bind:id="rawId | formatId"></div> filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } マスタッシュ{{}}かv-bindでパイプ演算子をフィルタにかけたいdataに繋げていくことで使える。パイプは複
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開発者ブログ とは言え、直接書くとコードがなかなか複雑というか、残念な感じになっていました。例えばネットワークのオンライン、オ
NetlifyCMSをGridsomeに適用する方法 - よしたく blog
yoshitaku-jp.hatenablog.com 以前の記事でGridsomeを使う設定をおこないました。今回はCMSを導入し使う設定をおこないます。使うCMSはNetlifyCMSです。 すでに海外の方が使える設定を公開していて参考にさせてもらいました。 ディレクトリとファイルの作成 YOUR_DIRRECYORYE/static/adminディレクトリを作成し、配下に2つのファイルを作成します。 index.htmlとconfig.ymlです。 index.html <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Content Manager</title>
Vue.js 実務でハマったところ @2018/05/21 | イメージ・マジック開発者ブログ
公開日：2018/05/15 最終更新日：2018/11/05 タグ: Vue.js はじめに こんにちは！ 株式会社イメージ・マジックの技術ブログ、今回担当の宮川です。 本ブログでは、イメージ・マジックがどんな技術を扱っているのかを知ってもらうために、業務で得た知識のまとめやハマって解決したこと、技術選定理由、最新技術動向などや、社内の雰囲気が伝わる内容を書いていきたいと思います。 今回は、社内のプロジェクトで採用している、Vue.jsについて書きます。 Vue.js所感 Vue.js使い始めて2カ月ですが、所感として良いところは概ね以下かなと思ってます。 データバインディングが簡潔 部品化しやすい 機能の分類が細やかで配慮が行き届いている だいたいライフサイクルがいい感じにやってくれる Vue.js ハマったところ 以下、まとめました。 1. Arrayの更新は、以下の方法で更新しない
Vue.jsの人気UIフレームワークまとめ2018秋 - nanisore oishisou
お久しぶりです。ベル子です。 Vue.jsのUIフレームワークについてのまとめ記事(英語)を見つけてツイートしたところ、 それなりにいいねがついたので 「みんな、UIフレームワークをめっちゃ探してるな」と感じとり 人気のあるフレームワークを日本語でまとめてみることにしました。 人気のあるフレームワークは以下のブログ記事などを参考にしています。 11 Vue UI Component Libraries You Should Know In 2018 海外のVue.js用UIフレームワーク紹介記事を読み漁り、どの記事にもだいたい出てきているフレームワークを 女の勘でチョイスしました。 人気がありそうなVue.jsのUIフレームワーク Vuetify vuetifyjs.com Quasar quasar-framework.org Element Element Vue Material v
【Vue】無限スクロールライブラリを試す - 山崎屋の技術メモ
Twitter や Facebook みたいにスクロールして下段まで行くと追加でデータをロードしてくれるあれを Vue を使って試したいと思います。 今回は Qiita の API を使用してデータを取得し、無限スクロールしていこうと思います。 使用ライブラリ 便利な無限スクロールライブラリがあるはずなので探してみました。 参考にしたサイト： vuejsで無限ロードを実装 - Qiita vue-infinite-scroll や vue-infinite-loading というのがあるようです。 GitHub のスターの数は前者のほうが 1,800 位で後者のほうは 1,400 位。ただ、活発に活動しているのは後者。 先行となる vue-infinite-scroll のいい所も取り込んでいるだろうし、今回は後者の vue-infinite-loading を使ってみたいと思います。 公
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NuxtMeetUpに登壇してきました - うしろのこの本ください
Loading...
Quickstart guide for a new Gridsome project · lobo_tuerto's notes
A deep dive in the Vue.js source code (#41): _isMounted
https://pizzamanz.net/web/vue/vuex-persistedstate/
