VUEJS

Webdevelopmenthasbecomeincreasinglycomplexanddemanding,withbusinessesstrivingtocreateexceptionaluserexperiencesanddeliveroutstandingresults.Vue.js,apopularJavaScriptframework,hasgainedimmensepopularityduetoitsflexibili

Vue.js,apopularJavaScriptframework,hasgainedimmensepopularityinrecentyearsduetoitsflexibility,versatility,andeaseofuse.Aswebdevelopmentbecomesincreasinglycomplexanddemanding,havingadedicatedVue.jsdevelopmentteamcan

JavaScriptはほぼ全てのブラウザで動作するプログラミング言語で、フロントエンドアプリケーションの開発でも主として使用されています。そのJavaScriptのフレームワークの1種であるVue.jsはNPMでの週間ダウンロード数が300万以上、GitHubのスター数が19万5,000個で、Web開発者のコミュニティで注目を集めています。Vue.jsはWebアプリ開発の分野で注目を集めており、ユースケースが数多い点で革命的です。デスクトップとモバイル両方のアプリケーションを開発できます。→

vuetify追加後アイコンを追加する方法前回の記事でvuetifyを追加した後、iconを利用できる設定を追加する方法を紹介。前回の記事npmでモジュール追加npminstall@mdi/font-Dvuetify.jsに設定追加//src/plugins/vuetify.jsimportVuefrom'vue'importVuetifyfrom'vuetify'import'vuetify/dis

先ほど作ったVueプロジェクトにAmplifyを設定します。プロジェクトフォルダで以下のコマンドを実行します。$amplifyinit最初にデフォルトの設定が表示され、それでいいか聞かれます。今回は以前に使った設定がありましたので、それをそのまま使うことにします。こんなメッセージが表示されていれば成功です。AWSマネージメントコンソールにログインし、サービス→Amplifyを選択していくと先ほど作ったプロジェクト名でアプリケーションが表示されるはずです。P

Vueのセットアップも終わったので、Vueプロジェクトを作ってみます。プロジェクトを作成するフォルダに移動し、そこで以下のコマンドを実行。$vuecreatesamplesプリセットを選択せよといわれるので、マニュアルを選択します。必要なものを選べと言われるので選択します。今回は上記のとおり選択。バージョンを選択します。色々聞かれますが基本的にデフォルトを選択。最後にプリセットを保存するか聞かれますが、ここは[N]としました。上記のような画面が出て終了です。以

今度はVue.jsを使えるようにします。Vue.jsはユーザインターフェースを構築するためのプログレッシブフレームワーク、とのこと。Webページを作るときに便利なフレームワークです。細かな説明はできないので、こちらを参照。上記のページにガイドも出ていますが、それにならって作業を実施していきます。<コマンド>$npminstall-g@vue/cliいくつか警告がでますが、問題ない（と思う）ので、これで作業完了です。サイトを見ていたらデバッグに便利ということでCh

先月の話。若手技術者との会話。「それだったら普通にJavascriptでAjax使って、DOMはjQueryで飾ってあげればそれなりになるんじゃないかな？」「そうですね。。でも今のシステム、AjaxやjQueryは使ってないのです。。」なんでやねん。。？聞いてみたらAjaxやjQueryは今となっては古い技術で最近のシステムでは使っていない、とのこと。。マジですか。。？私がJavascriptを本格的に勉強したのは5,6年前のこと。AjaxやjQueryという画期的な技術が出

画像ファイルをstaticに置いてたんだけれども、これだと画像ファイルをアップロードする機能作ったときに死ぬな。と思い、画像もfirestorageに配置するように変更。あと、レビューの列幅を標準5列、解像度によって１～5列になるようにレスポンシブ対応。https://bourbon-note.netlify.app/

Webサイトを作ってみる続編ちょっとずつ作ってます。https://bourbon-note.netlify.app/技術ブログじゃないので、細かいことは書かないですが、フロントエンドはNuxt.jsでSPA、バックエンドのAPIはFirebase無償枠使ってます。これどうやるの？があればQiitaにでも書きますが。。。あと、いくらSPAとはいえ画像はサムネイル作るとかしとかないとロード重いな。。。スマホではみないほうがいいかも。このへんもそのうち改善それはそれとして

Vuexy–VuejsHTMLAdminDashboardTemplatehttps://awards.visualmodo.com/review/vuexy-vuejs-html-admin-dashboard-template/🏆🖥📱#CSS#Gallery#Submit#Free#Promo#Websites#Awards#Winner

コロナでGW出歩けなかったので勉強がてら久しぶりにコードを書いてみようと思います。仕事ではバックヤードをやることが多いので、ある意味未開の地だったフロントエンド触ってみます。試しにVue.jsというかVUEXというかNUXTでこのブログの昔の記事を使ってバーボンのレビューサイトもどきを作ってみる予定です。昨日から初めてとりあえず一覧作るところまで来たのでNetlifyというホスティングサービスに乗せて公開してみました。とりあえずは一覧出せるようにしてみようと思います。ま

時間が許す限り…・Git・Docker・Laravel（PHPのフレームワーク）・Vue.js・WordPressで何かを開発する経験ただでさえPHPもそこまで身についていないのに、今月中にマスターするのはまず無理だな。

今回は、Vue.jsでシングルページアプリケーションを作ってみます。■シングルページアプリケーション（以下、SPA）とは1つのHTMLを読み込み、UI操作に応じて動的に更新するWebアプリケーションのこと。一見ページを切り替えているようにいますが、内部的にUIを差し替えて複数のページがあるのもSPAです。SPAではページ遷移をクライアントサイドで行うため、ユーザには滑らかな操作感を与えます。（SPA以外）ボタンクリック⇒サーバへアクセス（ブラウザ内では一瞬真っ白になったり、操作

今回で３回目となりますが、Vue.jsの双方向バインディングを試してみましょう。まずは、動作検証用のサイトを開きます。分からない場合は、前回のjsfiddle.netを使っている部分を参照して下さい。■「双方向バインディング」とは？簡単に説明すると、スクリプト側から値の設定とブラウザからの入力のどちらから行っても双方向で値を更新できる仕組みのこと。ブラウザから入力<==>変数a<==>JavaScriptから更新変数aの値をJavaScriptから