はじめに 今回はNuxt.jsの勉強の一環として、適当なウェブページを作成したので、そのページをsurgeにデプロイした話についてまとめる。 完成ページ nuxt-example-page surgeとは 基本無料で使えるデプロイ先になります。(SSLの発行や多数のプロジェクトをア…

はじめに 今回は画像のスライド機能を作ってみた話についてまとめていく。 画像をスライドした 文字列のスライドを参考にした 色々調べてみたら文字列で実装している方がいたので、このコードを動かしてみることにしました。 JS Bin - Collaborative JavaScr…

はじめに 今回はボタンを押したら任意の場所までスクロールしてくれる機能をvue-scrolltoを用いて実装した話についてまとめていく。 環境設計 vue-scrolltoとは v-scroll-toディレクティブを拡張してくれるプラグインのことです。 公式ページ vue-scrollto -…

はじめに 今回はNuxt.jsの基礎勉強としてBootStrapをNuxt.jsに組み込んでみた話についてまとめる。 初期設定 create-nuxt-appコマンドでアプリを作成した時の質問にてBootStrapの使用について聞かれるのでBootStrapを選んで進める。 $ npx create-nuxt-app …

はじめに 今回はNuxt.jsの勉強としてESlintを用いたコードフォーマットチェックと自動調整を行なったことについてまとめる。 ESlintのインストール 開発ツール - NuxtJSの公式に沿ってESlintのみをインストールすることにした。 $ npm install --save-dev ba…

はじめに Nuxt.jsの基礎部分の勉強を一通り区切りがついたので今回も纏めてみました。 Vue.jsの基礎を学んでみて - KKZooの備忘録 参考にしたコンテンツやサイト 私が参考にしたサイトやコンテンツは基本的に以下の２つです。 Vue.jsの公式 Nuxt.jsの公式 Ud…

はじめに 今回は前回の記事の続きを記述していく。 page側でfirebaseにあるデータを取得して表示 idをキーに指定して、v-forを用いてtodosを展開することで表示することができる <ul> <li v-for="todo in todos" :key="todo.id"> <span v-if="todo.created"> (略) <span v-bind:class="{ done: todo.done }"> {{ todo.name }}, {{ todo.created.toDate() | dateFilter}} </span> (略) </span> </li></ul>…

はじめに 今回はグーグルが運営しているデータベースであるfirebaseとNuxt.jsのアプリケーションを連携させることを勉強した。 長くなると思うので記事を2つに分けて投稿します。 firebaseの環境設定 firebaseでプロジェクトを作成 firebaseでアカウント登録…

はじめに 今回はカウンターアプリを作ることでvuexの知識を整理をした。 github.com カウンターアプリの実装 storeの作成 モジュールモードを用いてストアを設計 stateにはデータの初期状態を記述 mutationsにデータの操作を記述 actionsにmutationの読み込…

はじめに 今回はvuexを用いたデータの扱いについて学習したので纏めておく。 前回同様に以下のリポジトリに扱ったソースコードを公開します。 github.com vuexとは vue.jsを用いたアプリケーションで扱うデータの状態管理を行うツールのことです。 Vuex とは…

はじめに 前回Nuxt.jsを勉強した際にはファイル構造や知識の追加だけだったので今回は実際に動かしてみたので行なったことについて纏めていく。 今回勉強した内容は以下のリポジトリにあげております。 github.com componentsとpageについて この二つがMVCの…

はじめに 今回はVue.jsのステップアップとしてNuxt.jsの勉強を行なったので、それについてまとめていこうと思う。 npmのinstall npmが入ってなかったのでnpmの環境設定をした。(詳しくは以下の記事に記載しました) - npxコマンドを使うためにNode.jsをインス…

はじめに 今回はVue.jsの基礎的な勉強を一通り区切りがついたので、そのまとめを記述していきます。 参考にしたサイトやコンテンツ 私が参考にしたサイトやコンテンツは基本的に以下の２つです。 Vue.jsの公式 Udemy/講師: 中村祐太さんのVue JS入門決定版 …

はじめに 今回はフォーム入力について勉強したので、その成果を記述していく。 See the Pen NWNWoxP by KKZoo (@kkzoo) on CodePen. テキストエリアの記法について テキストエリアは多量の文字を扱うときに使う。記法としてはマスタッシュ構文を用いるのでは…

はじめに 今回はVue.jsの勉強の最初の方で軽く触れた、コンポーネントについてもう少し踏み込んで勉強したのでその成果を記録する。 ソースコードの全体 See the Pen コンポーネント by KKZoo (@kkzoo) on CodePen. グローバルコンポーネントとローカルコン…

はじめに 今回はv-onを用いたイベントハンドラーの処理について勉強した。 See the Pen イベントハンドラ by KKZoo (@kkzoo) on CodePen. 修飾子について 修飾子を用いることで様々な制限やキー入力を行なった際の処理を追加することができる様になる。 once…

はじめに 今回はv-bindを用いたCSSの当て方について勉強した。 ソースコードのフルバージョン See the Pen qBZBaoP by KKZoo (@kkzoo) on CodePen. class記法について 今回はclass記法を用いて以下のcssを読み込んで行こうと思う。 .large{ font-size: 30px;…

はじめに 今回はcomputedとmethodsの違いについてとaxiosを用いたAPIの利用をQiitaのAPIを用いて勉強した。 算出プロパティ 全体像 See the Pen 算出プロパティ by KKZoo (@kkzoo) on CodePen. 算出プロパティの主な特徴 算出プロパティを用いることで複数回…

はじめに 今回はVueの出力構文の中の文字を変数として扱う方法と、フィルターを用いた記述記法について勉強した。 See the Pen dyMbLrj by KKZoo (@kkzoo) on CodePen. {{ a }}の中のaを単一式として扱える 今までの使い方はdataから単に出力するだけだった…

はじめに 別のアプリを作ることでToDoアプリで得た知識をより固めていこうという主旨の元、今回は応募フォームを作ってみた。 See the Pen 応募フォーム by KKZoo (@kkzoo) on CodePen. ファイルのアップロードとv-modelについて ファイルのアップロードを<input type="file">で…

はじめに お手本を元に写経しつつToDoアプリを作成することでvue.jsの基礎的な実践利用の方法を学んだ。 その後、学んだ知識を生かしてcheckDeleteボタンとallDeleteボタンを作ることで理解していることを整理した。 See the Pen ToDoApp by KKZoo (@kkzoo) …

はじめに 今回はvueの基礎的な命令を勉強したのでその記録を残しておきます。 以下のGitHubにて勉強したさいの記録をあげておきます。 github.com 基礎記述について vue.jsの基礎的な記述方で、記述する側のidの名前を決めてそれをel:で指定し、それらにdata…

はじめに 今回はvue.jsの勉強にてCDNを使った場合のファイルを分けて書く方法を記述していく。 vue.jsのファイル分け方について ファイル構造を vue_practice ├── index.html └── main.js にするためには、index.html内のjsファイルの読み込みをvue.jsの読み…