見てはいけない黒歴史 in -The Rong's Caravan-
日記ログ コメント
About
黒歴史をリアルタイムで見られる貴重なサイト。
人間観察の悦びをあなたに・・・・・・

というのは冗談で、ただの趣味のサイトです。


管理人:ろんぐ
Since:2005/2/14
update:2019/10/14 「Vueでカクテルデータベースをリファインする話#12【CSSとSass】」
update:2019/10/14 「Vueでカクテルデータベースをリファインする話#12【CSSとSass】」
§Infomation§


「やりたいことをやるための継続可能な副業」としての

宅飲みカクテルデータベース

開発中。

ただいまデータ入力中!

あ、語感良くなりそうなので正式名称に「宅飲み」とつけてみました。でも宅飲み要素はあんまない笑


<予定>
未定:しばらくはデータを揃えることを考えます。

§Comment§
名前の非掲載


§Diary§
2019.10.14
Vueでカクテルデータベースをリファインする話#12【CSSとSass】

CSSの話自体は大したことないと思って日記には取り上げない予定でいたのですが、そういえばVueでCSS書くためのお作法とかなんも知らんし、ハマりそうな予感がしたので(笑)日記のネタにしてやろうかと思います。
で、そのついでにSassを書けるようになろうということで導入していこうかなと思います。これに関しては記法自体はCSSに似てる(Scssを採用します)んで、そんなに障壁はないと思います。


やりたいこととしては、Vueのコンポーネントに直書きする、いわゆるscopedなCSSと、サイトデザインの統一感を図るためのグローバルなCSS、両方書けるようにしておこう、って感じですね。


んじゃやっていきましょう。まずはscoped CSSですね。
今回は、前回作ったフォームを、フォームとしてちゃんと整形しつつ、そのフォームの大きさなりデザインなりっていうのをコンポーネント内で記述します。特にここでしか使わないようなプロパティがほとんどになると思うので、コンポーネント内に書いた方が良さそうなので。

で、ついでにSassを取り入れましょうねと。これに関してはこことかこことか参考にしながら。
認識としては、基本的にはlang="scss"というプロパティをぶっこんだら書けるようになるって感じでよさそう。
ただ、Laravelってvue-cli使ってるんだっけ・・・・・・?使ってないという認識で今までずっといたんだが、どうなんだろう???


で、ここで先に考えておかなくてはいけないのはスタイルのバッティングだと思います。
コンポーネント内でクラス名が解決すると思っていたのに、なんか外のコンポーネントに伝搬してる・・・・・・ってのは最悪です。
基本的にはそれが起こらないよう、独自データ属性で管理されてるっぽいんですけど、バッティングするケースもいくつかあるみたいなので気をつけるべきですね。同じ名前使わなければいいじゃんって感じはしますけど、本来そういうのってコーディング時になるべく考えないほうがよさそうなので・・・・・・。


雑に書いてるなうなんですけど、Scssってまじラクですね。入れ子で書けるってすばらしい。
とりあえず基本的には使い捨てクラスなので同じVueファイル内に書けばいいんですけど、汎用性が高そうなクラスは外に出して共通化したいところです。
しかしこれをどうやったら切り出すことが、つまりモジュールっぽくできるかってことですね。

まぁ簡単な手段としては一番大元となる親コンポーネントにscopeつけずにやればいいだけではあるんですが、ちょっと不格好なのでscssファイルを作りたいです(笑)
静的ファイルをhtml、つまりビュー側で読み込むという手もあるんですが、scss使えないのでこれはダメですね。


答えはやはりマニュアルに書いてありまして、LaravelMixを使うみたいですね。



mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/default.scss', 'public/css');


僕はこんなふうに書き換えました。scssで書いたdefault.cssをpublic/cssにビルドしますよーっていう意味になります。
で、これを使いたいところで読み込めばいいわけです。今回はすべてのページで使うCSSを書いているつもりなので、welcome.blade.phpでふつうに読み込めばいいってことになりますね。


あぁこれはちょお便利である・・・・・・かんたん・・・・・・。



ってことで、Vueの基本的な扱い方はなんとなくわかってきた感してきましたね。あとは黙々と移植作業を続けるのみ・・・・・・。
いまのtwitterアカウントとのシナジーが結構強いので、なるべく早く開発したいところですね。

2019.10.13
日曜なので、女子高生とたぴたぴ♪したかったのに

フラれてしまったので書くことがなくなりました(笑)
せっかくちょうどいい移動ルートが取れそうだったのに・・・・・・たまには外に出て人間らしい遊びをしたかったんだけど・・・・・・笑
やっぱ外に出るのそんなにめんどくさいかな?wwwww
とはいえ、僕も前回教習所の卒検が入れられそう、ってドタキャンしたのでおあいこみたいなとこありますけどね・・・・・・

新宿でちょっと雑貨屋行ってお香見て、そのついでにタピオカを飲んでみて高速道路の試運転をする、という理想に近いプランだったんですけどおじゃんになっちゃいましたねえ・・・・・・新宿にわざわざ寄るの結構めんどくさいというか、だったら電車で行こうかなって迷うレベルのところなんで・・・・・・(笑)
片道700円ぐらいだったかな。本八幡とかで乗り換えれば結構ラクに新宿に行けたりするんですよね。こうしてみると電車賃高いっすね・・・・・・実家から神戸ぐらいかかるじゃん(?)



とはいえ僕は諦めの悪い男なので、次回は銀座に連れ出そうと思ってます(断言)
東京鳩居堂ってとこに行きたくてですね・・・・・・。銀座(東京)は日曜は路駐OKなエリアが結構あるのでラクです。
まぁその後は・・・・・・どこに行けばおもしろいのかな(笑) べつに銀座だけで一日潰せそうだけどさ笑




ただ、しょうがないので予定を変えてカレー屋さんでカレーの調査をしました。いよいよ自分のカレー作りが行き詰まったというか、「これじゃないんだよなぁ」感がすごいので・・・・・・。
バターチキンカレーに関してはまぁ若干似てはいましたけど、マトンカレーなんかはぜんぜん味が別物です。マトンがまず獣っぽくておいしい。

使うスパイスがどうなってるかはわからないんですが、とりあえずもっと他にスパイス買わないといけないのかなぁとか考えながら食べてました。うーーーん。




それはそうと、せっかくなので今日は高速道路に乗って横浜から家に帰る経路をショートカットしました。
湾岸道路部分は爆走できるので(笑)、東神奈川から湾岸道路部分までショートカットしてみたんですが、700円の投資で30分ほど短縮できました。コスパとしては微妙なんですけど、ストレスは軽減できたのでたまにはいいかな笑
・Vueでカクテルデータベースをリファインする話#11.5【この前のコードの最適化】
そんなわけで、時間があいたのでおまけのお話をしましょう。前回書いたコード、正解がわからなかったんですがなんと公式のリファレンスにサンプルコードが載ってたので書き換えます。
プログラミングを独学で勉強する際ここが一番たいへんなんですよねー。動くものは作れるんだけど、コードのにおいをどうやって払拭したらいいのかわからない時ってあるので・・・・・・笑


どう違いのかっていうと、一番大きなところはmountedライフサイクルを使うってところですね。
で、データを受け取ったとき、それをデータにぶっこんだらあとは算出プロパティでなんとかしてくれる、って感じですね。mountedは完全に盲点でしたね・・・・・・。


ただまぁ、DOMにアクセスする必要性がないので(むしろDOM側が受け取ったデータを参照してるだけ)createdでやってもよさそうですね。まぁ現状そういう意味でcreatedに入れてるんですが・・・・・・
アクションをdispatchすればいいだけなのは変わらなさそうです。



んじゃ、改良したところとその考察を・・・・・・。



export default {
    namespaced: true,
    state: {
        categories:undefined,
        kinds:undefined,
        methods:undefined,
    },
    mutations: {
        setResult(state,{result}){
            state.categories=result.Categories;//結果をstateに格納
            state.kinds=result.kinds;//結果をstateに格納
            state.methods=result.methods;//結果をstateに格納
        }
    },
    actions: {
        getAndSetCategories({commit},payload) {
            //APIからの結果取得と格納を同時に行う
            axios.post(process.env.MIX_SENTRY_DSN_PUBLIC+'/api/getKindsForForm', {})
                .then(function (response) {
                    commit('setResult', {
                        result: response.data.result
                    })
                })
                .catch(function (error) {
                    console.log(error);
                })
        }
    }
}


Vuex部分はスイッチがなくなりました。要らなくなったので。だいぶソースがすっきりして、嫌なにおいがなくなりました(笑)



<template>
        <v-app>
            <div>
                <v-app-bar fixed>
					//ヘッダー
                    <v-btn color="accent" large @click.stop="showCocktailSearchModal=true"/>
                    <cocktailSearchModal v-model="showCocktailSearchModal" />
                </v-app-bar>
            </div>
            <v-content>
                <v-container>
					//メインコンテンツ
                </v-container>
            </v-content>
            <v-footer>
				//フッター
            </v-footer>
        </v-app>
</template>

<script>
    import cocktailModal from './Header/CocktailSearchModal'
    export default {
        data () {
            return {
                showCocktailSearchModal: false
            }
        },
        mounted() {
        },
        components: {
            headerComponent: header,
            cocktailSearchModal: cocktailModal
        },
        methods: {
        }
    }

</script>

で、本題とは少しずれるんですが、dialogに関するエラーを消すためにいろいろ調べた結果こうなりました。



エラーメッセージを流し読みすると、レンダ中にdialogメソッドへの参照が発生するけど、そんなもんないからリアクティブにできないよみたいなエラーだと僕は解釈してます。dialogメソッドが自分で定義したものじゃないせいで、どういうライフサイクルでどのタイミングでどういうふうに、誰が参照してるのか正直よくわかってないんですけど、発生箇所がメインビューなので、たぶん入れ子構造の中身にアクセスできなくて困ってるってことなんじゃないですかね。

さすがに動くとはいえこのエラーを放置するのはちょっとイヤというか、リアクティブにできないとか言ってるのでそのうち事故の元になりそうってことで頑張って消しました。


コードを読んでいきます。とりあえずボタンはヘッダー側に持たせることにして、ボタンをクリックするとダイアログ呼び出しイベントのためのvueファイルへとイベントを伝搬させていく構造になりました。
ボタンをクリックしたら、.stopによりイベント伝搬が止まり、他の親divなんかのイベントを間違って発火させないようにして、フラグをtrueにします。
で、そのフラグは一行下のコンポーネントにv-modelにてバインディングされてるため、イベントを伝搬させることができます。

ちなみに、v-modelとはv-onとv-bindをまとめて書くための糖衣構文とのことで、コンポーネントで使った場合は、valueプロパティにバインドする、ってところまでは理解しましたが、inputに関しては理解ができません・・・・・・。
とりあえず今回の例ではinputを使っていない(v-bind:valueに変えても動作する)ので考えるのをやめます・・・・・・。

たぶん、HTML5から定義されたらしいinputイベントにトリガされる、っていう認識でいいのかも知れない。



<template>
    <div>
        <v-dialog v-model="show" width="600px">
            <v-card>
                <v-card-title>
                    <span class="headline">カクテル検索</span>
                </v-card-title>
                <v-card-text>
                    <cocktailForm></cocktailForm>
                </v-card-text>
                <v-card-actions>
                    <div class="flex-grow-1"></div>
                    <v-btn color="green darken-1" text @click.stop="show=false">Close</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
    import cocktailForm from '../Forms/Search/Cocktail/form.vue'
    import {app} from "../../app"
    export default {
        components: {cocktailForm: cocktailForm},
        props: {
            value: Boolean
        },
        computed: {
            show: {
                get () {
                    return this.value
                },
                set (value) {
                    this.$emit('input', value)
                }
            }
        }
    }
</script>


で、モーダルダイアログ部分を司るvueファイルです。ここのvalueに、さきほどbindしたブーリアンが渡ってくるわけですね。
それで、今度はダイアログを表示させるためのプロパティを変えるわけですね。ここではv-modelにより、showという算出プロパティを参照しているので、v-dialogのvalue値にぶっこんでるっぽいですね。




で、v-dialogのAPIを見ると、valueが定義されておりまして、ここでvisibleかhiddenか定義するとか言ってます。typeがanyなのがめちゃくちゃ気になるんですけど、どういう意味なんですか・・・・・・?booleanじゃないの・・・・・・?

で、showという算出プロパティですね。普通に書くとこのget()が呼び出されるのですが、こんなふうにセッターを定義することもできるそうで。初めて知りました。
つまり、showにfalse、つまりCloseボタンがクリックされたとき、inputイベントにfalseが設定されるみたい・・・・・・?んん??????



だめですね、よくわかってないのでemitの仕様を理解するところから始めましょう。

このページを見るに、とりあえずemitっていうのは独自のイベントを定義するっていう意味らしい。イベントってのはonclickとかonsubmitとかに値するものみたいなんですけど。

で、emitの引数に関して、1つめがイベントの名前で2つめがイベントハンドラに渡される引数ですね。


で、これを購読する、つまり親コンポーネントからのアクセスですね。
基本的な文法としては<component v-on:イベント名="イベントハンドラ名">らしい。

つまり、this.$emitでinputイベントが発行され、親にイベントが伝搬し、この例だとinputイベントが発行されたのを v-model="showCocktailSearchModal"でキャッチしてることになりますね。
というのもv-modelというのはv-bind:value="showCocktailSearchModal" v-on:input(*)="$emit('input', $event.target.value)"と同値です。

で、米印をつけましたけど、今度はこのinput(*)が呼び出され、さらにinputイベントを発火します。今度はこのinputイベントは引数を持ってるはずです。$event.target.valueがそうなの??受け取った引数をどこで呼び出してるのかわからんけど、たぶんこれjavascript直書き、って意味ですよね・・・・・・?


まぁとりあえずさらにその親のinputイベントに falseが伝搬していくことになるはずなんですが、見当たらないですね・・・・・・。デフォルトで定義されてるなら話はわかるんですが、ドキュメントのどこにもそんなこと書かれてないのでここでイベントの伝搬を見失います。
暗黙的に実装されてるのか・・・・・・?なんなんだinputってよぉ・・・・・・。html5準拠のoninputにfalseが伝搬したとしてなんなんだ??これがダイアログの開閉状態を持ってんのか???


いやまぁ・・・・・・動くからいいけど・・・・・・釈然としない・・・・・・・・・・・・。
けど、独学だとこれ以上追跡するのは不可能なので、もうそういうものなんだと考えることにします。後回し。(だってわかんないもん)



まぁとりあえずこれでvuexストアのプロパティを無駄なく読むことができるのでよしとしましょう・・・・・・。
実際には、フォームがちょっと遅れて表示される、みたいな感じになります。でも実際このフォームはヘッダーにボタンを置いてるのでいつでもアクセス可能なので、メインビューが表示されたときにdispatchすべきですね。どっちにしろトップページに表示させるわけですし。そしたら表示上の遅延はなくなりますね。

ただ、こっちの場合、疎結合が失われることになります。ほんとはフォーム側のcreatedで一度だけ動作させるべきです。
vuex側にデータがあることを前提としちゃっていますからね・・・・・・。

とはいえ、じゃあget時にデータがなかったらアクション起動・・・・・・みたいな感じにすると、結局またフラグが必要になってきます。現行デザインを見ればわかりますが、フォームは2箇所から呼び出されるので・・・・・・。



うーん・・・・・・釈然としない・・・・・・まぁいいか・・・・・・。

2019.10.12
いい加減にしてくれ!!って思ったので・・・・・・

twitterでわめきましたが、ここ数日せこせこ書いたプログラムがMEGAによって消された・・・・・・・・・・・・


奇跡的に該当部分は日記のネタに取り上げてたのでサルベージできはしたんですが、今日書いたデータは全部飛んだ・・・・・・



なんかこれ前にもあったんだよなー・・・・・・。コロスコロスコロスコロス





で、MEGAのストレージを見てみるとこのような節操のない状態になっておりまぁそりゃバグるか・・・・・・?みたいな感じになってます。
うまく動いてくれてる時はいいんですけど、一旦崩れるとすぐにおかしくなるのがMEGAの悪いところですね。


しかし、大事なデータでそれが起こってはならないので、これを機にMEGA以外のクラウドストレージに手を出そうかなと。実はこれ何回も試みてはいたんですけどね
いままではストレージ容量を第一に考えてましたが、プログラム用のストレージを用意しようかなと思いまして。gitじゃん...

いや、gitでもいいんですけど、僕が手動でちゃんとコミットするとは思えないという理由で却下です。


そんなわけで、dropboxを採用しました。30日間なら巻き戻しができるそうなので。
ただ、容量に不安があるので、現在進行系で作ってるプロジェクト以外はフォルダに入れない、つまり開発用フォルダとしてdropboxフォルダを作りました、というお話です。



>>もっと読みたい


Contents
日記
過去ログです。
旅行レポートなどもこちらに置いています。

音楽素材
RPGツクール向けの音楽素材です。
現在の素材数は187曲です。

Ptutor
プログラミング対面指導サービス

Fashion研究学Note
地雷を踏まないファッション研究学。低予算でディスられないファッションを目指します。

Instagram
カクテルの「ちょっとふざけたレビュー」。
写真素材
旅行中、無駄に撮った写真を素材として並べています。
現在2600枚ほど。
そのうち更新します。

Products
カクテルデータベース
古今東西のカクテルと、その評価をデータベースにしちゃいました(笑)
現在の登録数 ⇒

Commnication
旧BBS
一応残しておきます。

Other

Author
twitterも気軽にフォローミー!おすすめはしない!笑
↓創作用アカウント(笑)