ふんばりフロントエンジニアのブログ

新米フロントエンジニアのふんばっている日々と備忘録です。

【css】git でコンフリクト起こした時に考えるべきこと

こんにちは、今回はバージョン管理ツール「git」についてのお話です。

gitって業界では知らない方、というか使っていない方がいないほど有名なツール。

ただgit初心者にとっては困ることも少し…

それが「コンフリクト」ですよね。

最初私がコンフリクトのメッセージを読んだ時なんか「え?犯罪犯したのかな???」くらい慌てましたが、コンフリクト自体は意外と起こります。

「え?起こんなくね?」と思うかたもいるかと思いますが、意外と起こります(怒)

私はフロントエンジニアですので、cssを使う機会が多々、というか毎日なのですがcss は「git管理するのにどうするべきか」が分かれる言語でもあります。

というのも、現在純粋なcssのみでコーディングする方はほぼおらず、scssなどのメタ言語を利用する方が多いため。

かくいう私も便利なのでscssでコーディングをするのですが、scssは最終的にcssコンパイルしないとHTMLが読み込んでくれません。

なので各自コンパイルすることになるのですが、今回の肝はここ!

私はgulpでscssをコンパイルしているのですが、scssをコンパイルすると「1行のcss」で出力されてしまいます。

gitは行単位的な判別をするようなので、1行にコンパイルされてしまっては「どこが変わった?ああ、この1行が変わってんのか」と単純に解釈されてしまいます。

なのでこのコンパイル後のcssはコンフリクトが起きるのは仕方ない。

そしてこのcssをgit管理するべきかしないべきか、という議論が起こるんですね。

git管理をしなくても、元のscssがコンフリクトを起こしていなければもう一度コンパイルしなおせばいいですから。

 

ということで、コンパイル後のcssをgit管理の対象とするかどうかは議論が分かれますがよっぽどのことがない限り、対象から外してしまってもいいんじゃないかな?と感じますね。 

displayにtransition効かないんだけどどうすんだよ…【対処法】

cssで最近「なるほど!」って思ったことを一つ。

transitionプロパティって便利ですよね。

知った当初は何にでもtransitionつけて「カッケエ...」とか思ってましたが、もちろん万能ではありません。

特に「display+heightでheightにtransitionつけたらいい感じのアコーディオンとか作れんじゃね?」って思った方も少なからずいるでしょう。

ただ、それを実現するには少し工夫が必要かもしれません。

codepen.io

今回作成したのは単純なアコーディオンです。

中のコンテンツ(ここでは.inner)のdisplayをnoneかblockにするクラス「accordion」とheightを変えるクラス「active」をjsのclassListで追加している訳なのですが、ここで私最初に「displayとheightの処理を一つのクラスにまとめて、heightにtransitionかけたらいけんじゃね?(浅はか)」と思ったのです。

まあご存知の方はお分かりかと思いますが、結論から言うと無理ですよね。

と言うのも、まずdisplayプロパティとは言ってしまえば存在自体を消すかどうか、というプロパティです。

同じ目に見えなくなるものとして、opacityがありますがここがopacityとは違う点ですよね。

このような実例を検索するとopacityとheightで実装、という例が出て来ますが私はどうしてもdisplayを使いたかった…(というよりopacityは結構使いどこ難しい気がする…

ということで、今回重要なポイントは二つ!

①displayとheightの制御クラスを二つに分ける

②setTimeout関数

「なんで分けんだよ!!!!」とお思いかもしれませんがこれが結構重要です。

まずdisplayの話に戻りますが、displayは存在を消してくれるプロパティ。

つまり「display:none」にすると、ブラウザにも認識されなくなってしまいます。

そのような要素に「heightを伸ばすんじゃボケ!」と言っても「はあ?」となってしまいすよね。

ただ、displayを表示してから「heightを伸ばすんじゃ!」と言えばあちらさんも鬼ではないのできっちり理解してくれます。

ただ、普通に同じクラスでdisplayとheightを指定していたのでは理解されるタイミングが一緒なので「はあ?」状態になってしまう訳ですよね。

そこで出てくるのがポイントにあげた二点!

まず、displayをblockにするクラスとheightを変えるクラスを作ります。

二つクラスを追加することによってどこでどっちのクラスを追加するか、という選択肢が生まれてきます。

なのでまずはじめにdisplayを制御するクラス「active」をOPENがクリックされたら追加するようにし、setTimeout関数でその10ミリ秒後にheightを変えるクラス「accordion」を追加するようにしている訳です。

これならしっかりどの要素の高さを変えるのか、ということは理解してくれます。

結論としては、display+heightで指定してるからtransitionが効かないのではなく、一緒に指定しているとdisplayがnoneの状態からheightのプロパティも認識されてしまうためtransitionが効かなくなってしまうんです。

タイミングを10ミリ秒ずらすだけでもheightに対するtransitionは効かせることができます。

これはランドスケープした時にどうこうする...とかOSやブラウザでイベントのタイミングが異なる時にも利用されがちな仕組みです。

灯台下暗し感が強い内容でしたが、displayを使っても実装できるのは自由度が高くていいですよね〜〜

はじめましてでございます

ブログを書こう!!!って思って早3ヶ月くらいが経ち、ようやく書き始めることになりました。

 

ふんばりフロントエンジニアなどと言っておりますものの、業界二年目の新人も新人野郎ですので生温かい目で見守っていただきたい…

 

現在はHTML、CSSJavascriptを中心に取り組んでおります。

最近はPHPなんかにも手を出しはじめまして、wordpress のテーマづくりにも興味が出てきました。

 

ここでは日々の備忘録も兼ねて、業務以外の日頃の発見なども書いていきたいと思っております。

 

お気付きの方もいると思いますが、シャーマンキングと猫が好きなんですよね。

ちなみにお酒も好きなんですよね。

 

とまあ自己紹介が苦手な感じは伝わったところで、とりあえずこれから出来るだけ更新して行こうと思いますのでよろしくお願いしゃっす!!!!!!!