はじめに Webサイトを新しく公開しようということで色々と調べたところ、なるべく簡単かつ無料でやろうと思い以下を採用しました。 Vue.js GitHub CloudFlare Pages イメージ図一度環境構築さえ出来てしまえば、GitHubの特定ブランチを更新すればサイトが自…

先日ポートフォリオなるものを作ってみました。 ページの一部hanachiru-portfolio.com今回はこのポートフォリオがどのような技術で動作しているか紹介させていただきたいと思います。 概要 Vue.js BootstrapVue AWS Amazon S3 Amazon CloudFront Route 53 Am…

はじめに 今回は子コンポーネントから親コンポーネントにデータを渡す手順についての記事になります！イメージはこんな感じ。今回も細かいところは書かずに、おおまかな実装手順を書いていきたいと思います。 はじめに 実装①「ハンドラ(メソッド)を登録する…

はじめに 今回は親コンポーネントから子コンポーネントにデータを渡す手順についての記事になります！イメージはこんな感じ。今回も細かいところは書かずに、おおまかな実装手順を書いていきたいと思います。 はじめに 実装①「属性で渡す」 parent.vue 実装②…

はじめに こんにちは、はなちるです。最近Web熱が高まっていて、新しくWebサイトを作ったので紹介をしたいと思います。 はじめに 作ったサイト どうしてこのようなサイトを作ったか 使った技術 感想とか 作ったサイト Unityオススメ記事20選！というサイトを…

はじめに 先日このようなコードを書いたらタイトルにあるようなエラーがでてきてしまいました。 <ul> <li v-for="(item, index) in list"> なにかしらの処理 </li> </ul> 解決策 エラー文を翻訳してみると一意なキーが必要ですよと言っているみたいなので、それを付け足してあげれば無事動きました。 <ul> <li v-for="(item, index) in list" :key='index'> なにか</li></ul>…

はじめに 今回はVue.jsでVuexを実際に使ってみる記事になります！細かい説明というよりは、実際に使うときの実装の手順を書いていけたらと思います。 はじめに Vuexとは 導入 実装①「プラグインとして登録する」 実装②「ストアを作成する」 実装③「ストアの…

はじめに 今回はVue Routerを実際に使ってみる記事になります！細かい説明というよりは、実際に使うときの実装の手順を書いていけたらと思います。 はじめに VueRouterとは？ 導入 準備 実装①「コンポーネントの作成」 実装②「ルーティングの設定」 実装③「<router-view></router-view>…

はじめに 今回はVue.jsのコンポーネントについての記事になります！細かい説明というよりは、実際に使うときの実装の手順を書いていけたらと思います。 はじめに 導入 実装①「コンポーネントの作成」 実装②「コンポーネントの登録・実装」 さいごに 導入 今…

はじめに Vue.jsを使うにあたってとても参考になったサイトをまとめてみました。qiita.comqiita.com

はじめに Vue.jsを使っていて、vue-cliを用いてプロジェクトを作成しようとするとこんなこと聞かれますよね。 ? Please pick a present: (Use arrow keys) > default (babel, eslint) Manually select features デフォルトで入っているbabelとはいったいなん…

はじめに 先週の一週間unity1weekというイベントが開催されていました。1週間でunityを使って作成したゲームを投稿しようというイベントで、そこそこの頻度で楽しく参加させていただいています。今回のお題は「さがす」ということで、結構悩んだのですがタイ…

はじめに Vue.jsでJsonデータを使いたいときがあり、そのやり方を備忘録の意味合いもかねて残しておきたいと思います。 はじめに Json Monsters.json axiosを使う 実際に使ってみる index.html さいごに Json 今回使うJsonはこんな感じ。 Monsters.json [ {"…

はじめに 今回はVue.jsにFont awesomeを導入してみる記事になります！こんな感じのアイコンを使いたい場合も多いのではないでしょうか？このアイコンはFont awesomeというものを利用していて、全部ではないですが無料で使うことができます。その導入方法につ…

はじめに 今回はBootstrapVueを導入してみる記事になります！BootstrapVueはBootstrapという有名なCSSフレームワークをVue.js向けにアレンジされたものです。bootstrap-vue.js.orgこれを用いることで比較的簡単に見た目を綺麗にすることができます。私はよく…

はじめに 今回は画像ファイルをバインディングする方法についての記事になります！フォームの入力といえば私はまずv-modelディレクティブが思いつのではないでしょうか。ただ画像ファイルの場合にはこれを用いることはできません。その対処法について触れた…

はじめに 以前属性のデータバインディングについて紹介をさせていただいたのですが、このメソッドイベントハンドラの定義も個人的に忘れやすい定義の一つだと思います。 【Vue.js】属性のデータバインディングをする方法 - はなちるのマイノートなので自分へ…

はじめに Vue.jsのコードを書いていて、Ajaxライブラリであるaxiosをつかった際に、以下のようなエラーがでてきてしまいました。 Access to XMLHttpRequest at '---' from origin 'null' has been blocked by CORS policy: Cross origin requests are only s…

はじめに 今回は属性のデータバインディングをする方法についての記事になります！テキストのバインディングといえば以下のようなコードですよね。 {{ message }} ただ当然ではありますが、これを属性に使うことはできません。 <input type="text" value="{{ message }}"> この属性のデータバインディ…

はじめに いつも通りに firebase initとコマンドプロンプト等に打ち込んだときに、 .firebaserc already has a default project, skippingと表示されてプロジェクトの選択ができませんでした。その対処法を書いておきたいと思います。 原因 おそらく、この表…

はじめに Vue.jsにElementを導入したときにつまづいたことを書いておきたいと思います。 エラー その１ Module parse failed: Unexpected character '' (1:0)というようなエラーがでてきました。 対処法 { test: /\.css$/, loader: 'style-loader!css-loader…

はじめに Firebaseのセットアップとデプロイをしようとしたときに firebase initというコマンドを打つと思います。ここでちょっとつまずいたことがあったので紹介しようと思います。 つまずいた内容 firebaseのセットアップをするしたとき、このような指示が…

はじめに よくこのようにURLと一緒に画像とその説明があるものを目にしたことがないでしょか？知識ゼロの状態から3日でwebサービスを作ってみました！《334ノートとは？》・334ツイートの自分だけのランキングが作れる・twitterログインなので5秒でログイン…