kmmkの雑種系日記

学習まとめです。

nuxtにscssを導入する

https://www.suzu6.net/posts/173-nuxt-scss/

【ビール企画】ハイネケン

ビール企画とは 時々ビールを飲むのですが、ひろゆきさんのビール紹介をみてもっと詳細まで調べてみようかなと思い初めた思い立ち企画ですw 僕の気分ですぐに消滅しますw ハイネケンとは? オランダのビール ハイネケン・ホールディングスの主要ブランド ア…

副作用を起こす関数をわかりやすくしてあげる方法

はじめに なるセミさんのYoutube動画参考 自分メモ www.youtube.com 副作用を起こす関数とは? 例えば、以下のような関数である。 つまり、値に変更が生じる関数 class A{ int count = 0; public function addCount(): void { this.count++; } } なぜ副作用…

laravelのプロジェクト内でvueを使う時のvue-router初期設定

フォルダ構成 sample-project/ ├ app/ ├ 以降省略(Laravelの構成です) ├ resources/ │ ├ js/ │ │ └ components/ │ │ ├ pages/ │ │ │ └ sample.vue │ │ ├ router/ │ │ │ └ index.js │ │ ├ app.js │ │ ├ App.vue │ │ └ bootstrap.js │ └ view/ │ └ welcome.bla…

【技術以外 - 書籍まとめ】全身の疲れがスッキリ取れる本

はじめに 人間が疲れを「脳」で感じる。 不安や不満がたまると人間が活動する際に出たエネルギーの残骸やカスのようなものがうまく排出されず新しいエネルギーを生み出しにくくなる。 その残骸をうまく排出するためには「ドーパミン」と呼ばれる物質(やる気…

Element UIのel-date-pickerでハマった問題

問題 2020-02-04を選択した時に、表示上は2020-02-04だが、保持している値は2020-02-03で1日前の値を持っているので少し困った 解決策 オプションにvalue-format="yyyy-MM-dd"をつけたら解決 <el-date-picker type="date" v-model="contacts.birthday" style="width: 100%;" value-format="yyyy-MM-dd" ></el-date-picker>

Vue-cliをビルドして、S3にアップロードする

ビルドしてみる npm run buildでsrcディレクトリと同じ階層に/distが作成される。 distの中には静的ファイルサーバーにアップロード可能な、ビルドされたファイルが作成される。 S3にアップロードする アップロードするプロジェクト配下(/distが存在する箇…

Git 自分用メモ

git

[:content] 特定のブランチをクローンしてくる git clone -b ブランチ名 https://リポジトリのアドレス

【Java】競技プログラミングで使う最大公約数と最小公倍数の実装

最大公約数 (Greatest common divisor) 例題) 12と18の最大公約数を求めなさい。 この方法は「ユークリッドの互除法」を使用しています。 class Main { public static void main(String[] args) { System.out.println(gcd(12, 18)); } // 最大公約数 public …

 ABC147 B - Palindrome-philia の振り返り

問題 高八士君は回文が大好きで、回文でない文字列が許せません。高八士君は文字列を 1 回ハグするごとに、文字列から 1 文字を選んで任意の文字に変えることができます。 文字列 S が与えられます。 S を回文にするために必要なハグの最小回数を答えてくだ…

Laravel + Vueのプロジェクトをgithubからherokuにデプロイしたので備忘録(S3も)

目次 目次 はじめに 条件 流れ herokuでプロジェクトの作成 githubとの連携 PHPの国際化用拡張モジュール(intl)の使用とHTTPSの強制 herokuの環境設定 自分のデータベースのURLの情報を確認して、設定 s3を使用する場合の設定(**は独自で設定) サイト運営…

Laravelにtailwindcssを導入する

tailwindcssの導入 インストール $ npm install tailwindcss resources > sass > app.scssに追記 @tailwind base; @tailwind components; @tailwind utilities; config作成 $ npx tailwind init webpack.mix.js const mix = require('laravel-mix'); const t…

LaravelでAPI開発している際にCORSのエラーが出た時の対処法

CORSの設定ができるライブラリがあるのでそれを入れる $ composer require barryvdh/laravel-cors app/Http/Kernel.phpに以下を追加

Laravel5.8でJWTインストール時のautoload_real.phpがNo such file or directoryエラー対処法

はじめに Laravel5.8でjwtをインストールする際に詰まったので対応内容のメモ これまでの流れ 1 jwtをインストール 2 carbonの依存関係問題でエラーが出るので、composer.jsonを修正する 3 改めてjwtをインストールした結果、「autoload_real.phpがないよ」…

No 'Access-Control-Allow-Origin' header is present on the requested resource.の対処法

はじめに 色々あって、Vue.js+Nuxt.js + Laravelで何か作ろうと思う— kmmk@Vue.jsの鬼になるマン (@kami_tsukai) October 4, 2019 少し前にこのようなツイートをして、時間のあるときにAPIサーバーをLaravel、フロント側をNuxt.jsで書いています。 Laravel…

[Nuxt.js] headタグはどこにあるのか

はじめに 今回は、FontAwesomeを使用しようと思った際にheadタグどこ?となったので備忘録 結論 nuxt.config.jsにある export default { mode: 'universal', /* ** Headers of the page */ head: { title: process.env.npm_package_name || '', meta: [ { ch…

Buefyでツールチップを実装する方法

はじめに 前回、Buefyの導入理由がツールチップだったので、公式ドキュメント踏襲でまとめていきたいと思います。 ツールチップとは? ツールチップとは、ホバーした際に表示される枠内の補足説明などのことで、様々なサイトで使用されています。 そして、下…

Buefyの導入

目次 目次 はじめに Buefyとは buefyの導入 インストール nuxt.config.jsのモジュールに追記 参考 はじめに 現在の仕事でツールチップはbuefyで統一するぜ!となったので調べてみました。 現場ではnpm installだけで環境ができたので、個人的に導入方法の備…

Vue.jsで複数のCheckboxを扱う

目次 目次 はじめに 準備 モックサーバー vueファイル 解説(主にJSファイル) はじめに Checkboxにチェックを入れると全部に反映されていったので備忘録。 その上、APIにcheckedというboolean型のプロパティがない場合 ※今回はあくまでチェックボックスの扱…

モックAPIで作成した409エラー時のjsonファイルをaxiosで取得する

目次 目次 はじめに ステータス409を返すyaml / jsonファイルを作成 axiosでjson取得 はじめに 今回も前回記事にしたstubcellを用いて、エラーレスポンス時の対処を書いていきます。 場面としては、パスワードを数回間違えてロック解除までの日付のメッセー…

stubcellを使ってhttpモックサーバーを作る

目次 目次 はじめに Stabcellとは? 準備 流れ $ npm install stubcell -g でインストール 色々ファイル作成 entry.yaml jsonファイル 実行 感想 参考 はじめに APIのテストで使ったので、これから自分用で使う時用に備忘録 Stabcellとは? 実際の開発だと、…

画面遷移時に遷移先にクエリを渡す [Vue.js]

目次 目次 はじめに Do it はじめに 画面遷移時のクエリの備忘録 Do it データを渡すvueファイル <li v-for="item in qiitaPosts" :key="item.id"> <span class=”dan”><router-link :to="{name:'file-list-details',query:{title:item.title,created_at:item.created_at}}">{{item.title}}</router-link></span> : </li>

期限が10日以内の値を赤く表示する [Vue.js]

はじめに 朝4時近くにこんなツイートした自分 一部だけにcss判定かけるの結構めんどくさい。やり方がわからぬ。— kmmk@この1ヶ月乗り切るマン (@kami_tsukai) September 22, 2019 はじめに とりあえず書いてみる 改善 まとめ とりあえず書いてみる 最初のや…

プルダウンメニューの処理(昇順・降順)と親子間のデータの受け渡し($emit)

子コンポーネントから親コンポーネントにデータを渡す$emit share_file_list.vue(親)にdrop_down_menu.vue(子)のコンポーネントが含まれている。 つまりdrop_down_menu.vueのデータをshare_file_list.vueに渡す | - components | | | - drop_down_menu.v…

配列を昇順に並び替えるロジック[JS]

はじめに 現在、プルダウンメニューで呼び出したapiデータのタイトルを昇順やら降順やらしていた時に迷ったので備忘録 配列を数値(昇順)並び替える .js var arrayNum = [1,2,3,4,5,1,2,3,4,5] arrayNum.sort(function(a,b){ return a - b }) console.log(a…

vue-routerで同時に複数のviewを表示させる時の注意点

構成 サイドバーは常に表示しておきたい 変更されるのはコンテンツエリアのみ の簡易な構成にしていきたいと思います コンポーネントに分ける 2つに分ける sidebar contents Vue-routerのルールでルーティングをしてくれるファイルにこのように記述 router.j…

axiosでpost送信されなかった[備忘録]

はじめに 前回Guzzleで叩いたリクルートのtalk_apiにpost送信したらエラーが出たので、調査して備忘録 postしてみる JavaScript const base_url = "URL"; const apikey = "APIKEY"; var params = { apikey : apikey, query : this.messageByUser } axios.pos…

axiosを使用してビットコイン情報を画面に表示してみた

はじめに 公式のページ参考:axios を利用した API の使用 — Vue.js 内容 axiosによるGET送信 mountedフック 通信エラーハンドリング ローディングの表示 filtersフック v-cloak コンパイルされていない Mustache バインディングの非表示 CDNによるaxiosの読…

Vue.jsでToDoアプリ作って詰まったとこ

checkboxのboolean問題 個人的にHTMLでCheckBoxを使用するときの扱い方は下記のようにしていた //check済みで表示するとき <input type=“checkbox” checked=true> なのでVueもそのように考えて下記のようにしたらfalse値のまま変化がなかった。。 <ul> //todo.isDoneは真偽値が返る(初期値はfalse) <li><input type=“checkbox” v-model:checked=“todo.isDone"><span></span></li></ul>…

slackAPIを使ってフォームから取得した内容をBotに発言させてみた

はじめに お問い合わせフォームで入力した内容をSlackに送信してみようとおもい作ってみました。 ポートフォリオの一部です 流れ ライブラリ追加 Botの作成してAPI Tokenの取得する Botが話すスペースの提供 コーディング ライブラリ追加 Maven Repository: …