GitHub - vuejs/vetur: Vue tooling for VS Code.You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Nuxt.jsでクリーンアーキテクチャ | MoT Lab (GO Inc. Engineering Blog)
はじめまして、バックオフィスシステム第二グループの辻田です。 参画してからもう少しで3ヶ月目を迎えようとしています。主に運用改善系のお仕事をさせていただいていて、インフラとサーバーサイドを触ることが多いです。 今回は、わたしの大好きなNuxt.jsにいま勉強中のクリーンアーキテクチャを当てはめてサンプルを実装してみたので紹介したいと思います。業務で実際に試した内容ではないのですが、今後機会があれば挑戦したいと思っていますし、こんなことしてるメンバーもいるんだなあくらいの温度感で読んでいただければと思います。 使用技術Nuxt.js 2.14.0 TypeScript 4.0.2 SWAPI https://swapi.dev/ Vue3がリリースされたてですが、Nuxtはまだ対応中なので 2.14.0 のバージョンを使用しています。（今回紹介するのはほぼtsファイルなのであまりVueのバー
Next.jsで勤怠管理システムを作ってみた
# Next.jsで勤怠管理システムを作ってみた お久しぶりです。 忙しさを言い訳にだいぶ更新をサボってしまってました(;^_^A汗) さて、僕はフリーランスエンジニアなんですけど、主に 準委任契約 でお取引させていただくことが多く、 勤怠表の提出を求められる立場でして。 今までは取引先さんの提供するWebシステムにポチポチ入力するだけだったんですけど、 そういったものを提供していない会社さんとお取引させていただく場合、 Excelに作業実績を記入していく という方法を取っていることが多いと思うんですが... . . . そんなんめんどいですぅ～～ｗｗｗ っていうかぼくのPCにExcelはインストールされてませんから～～～ｗｗｗ ってことで、 勤怠管理をシステム化しよう計画 を立ち上げました。 # 技術選定 表題の通り、今回は前々から勉強しようと思っていた React で開発をすることにし
Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】フロントエンド編③｜Yuu's Memo
皆さんこんにちは！！ 前回に引き続き、フロント（Vue.js）側の開発を始めていきます。 前回は、Vuexを利用してカレンダーコンポーネントを書き換えました。 Vuexは解説することが多かったので、かなり長い記事になっていますがとても大切な部分なので、じっくり読んでみてください。 前回までの記事はこちらからどうぞ Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】準備編Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】API作成編①Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】API作成編②Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】フロントエンド準備編Laravel + V
Vue.jsで、親コンポーネントからもらった変数を子コンポーネントで更新したいときの対処法 - Qiita
Vue.jsで、すぐ忘れちゃうコンポーネントの記述方法。 とくに親コンポーネントからもらった変数を子コンポーネントが更新したい場合の記述方法について備忘録。 この辺のはなしです。https://jp.vuejs.org/v2/guide/components.html イントロ Vue.js は、親コンポーネントから渡された変数を子コンポーネントで更新しようとすると、下記のwarningが出ます。 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being
バックエンドエンジニアのためのVue.js、React、Angular入門 - Qiita
WEBシステム、WEBプログラム開発において昨今ではjQueryではなくVue.js、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれています。その原因はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事は、jQueryを多用するWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説です。 ちなみに自分はサーバ構築からバックエンドまでこなしているワンオペエンジニア（フリーランス、非正規雇用に非ず）です。 コンポーネント、ルーティング、スタイル周りの続編を作成しました（編集が困難になるほど容量圧迫してたので、それぞれで独立させています）。また、Vueは3.2から採用されたscript setup、Angularは14から採用されたスタンドアロン
Elmの型で読むReduxやVuexのアーキテクチャ - Qiita
はじめに 近年徐々に複雑になるwebフロントエンドの状態管理の仕組みとして、ReactやVue.jsといったwebフロントエンドフレームワークのお供にReduxやVuexと言ったライブラリを組み合わせて使うことが多いと思います。 それら二つのライブラリは、Elmという高品質webフロントエンド構築のための関数型AltJSが用いているThe Elm Architectureと呼ばれるアーキテクチャに影響を受けて作られました。 追記: ReduxとElmの時系列はReduxの方が先であり、しかしながら状態のimmutableなどは影響を受けていることから、 現在の形のReduxはElmに影響を受けている所がある。 という表現が正しかったようです。 コメントありがとうございます。 参考 Vuexとは何か？｜Vuex reduxjs / redux Elmの型システムや見た目は非常にリーダブルであ
ワイ「何で子コンポーネントに状態を持たせたらあかんの？」 - Qiita
とある師走のWeb制作会社 社長「お〜い、やめ太郎くん」 ワイ「なんでっか」 社長「ちょっと作ってほしい画面があんねん」 社長「↑こんなんを作ってほしいねん」 ワイ「おお、SNSの設定画面とかによくあるやつでんな」 ワイ「簡単ですわ、任しといてください」 社長「おお、ありがとう」 社長「フレームワークはVue.jsで頼むわ」 社長「ほな、よろしく〜」 作り始めてみる ワイ「ええと、このトグルスイッチみたいなんはいくつ必要なんや」 ワイ「3つやな」 ワイ「ほな、このトグルスイッチはコンポーネントとして作っとこか」 ワイ「そしたら3回使い回せるからな」 ワイ「イメージとしては、ToggleSwitchっていう名前のコンポーネントを作って・・・」 <ul class="switch-list"> <li>通知 <ToggleSwitch /></li> <li>検索フィルター <ToggleSw
Handling Errors in Vue.js
Raymond CamdenFather, husband, developer relations and web standards expert, and cat demo builder. I've been spending the last year working with, writing about, and presenting on my favorite framework, Vue.js, and realized that I had yet to look into error handling with Vue. I'd like to say that's because I write perfect code, but I think we all know the truth of that. I spent some time the last f
Vuejsでテーブル表示 vue-tables-2 - Qiita
vue-tables-2とは vue-tables-2は、Vuejsでテーブルを表示するためのライブラリ。 良い点 ソート/検索/ページングをクライアント側だけで実施することができる サーバ側の実装はデータを全件返すだけのシンプルなAPIで済む 注意点 全データをクライアント側で保持する必要がある(データ量がクライアント側で保持できるサイズかどうかを事前に確認して適用すべき) サンプルコードについて サンプルコードはすべてJSFiddleに書いています。ソースコードはリンク先を参照してください。2018/5/9時点のmasterを直接参照しているので、急に動かなくなる可能性があります。 表示してみる まずは、単純にデータを表示してみる。 https://jsfiddle.net/kimulla/9LLqhxut/19/ 実装のポイント :columnsで、表示するデータのフィールド名を指定
Nuxt.jsでnoteの記事ページを置き換えました｜こんぴゅ
noteの記事ページがリニューアルしてパワーアップしました。記事の読み込み、描画が格段に高速化されています。 noteのフロントエンドはAngular.jsの1系で運用されてきましたが、実行効率が悪く表示速度が遅いという問題がありました（特に古いスマホで顕著）。問題を根本解決するためにNuxt.jsへの移行を進めていました（詳しい経緯は以下の記事をごらんください）。 今年から、おすすめページ、マガジンページ、コンテスト一覧ページなど部分的にNuxt版に置き換えていきました。nodejsやNuxt.jsサーバーの運用が初めてだったので一気に置き換えるのではなく少しづつリリースして様子を見ながら進めました。 運用を2ヶ月ほどしてみて、インフラ面、実装面で問題なさそうなことが確認できたため、noteのトラフィックの多くを占める記事ページ（このページがまさにそうですね）のNuxt.js版リリースを
VueとFirebaseの基本機能全部使ってぬるぬる動くポートフォリオサイトを作ったのでソースと解説 - Qiita
絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。 サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Laravel Enso
がんばらない Vue.js / Vuejs on VS Code & TypeScript