新潟グラム2017 Vol.1「レスポンシブ & jQuey」に参加してきました。

最近、ブログを全然更新しないので、こういうのに参加したときくらいはちゃんと書こうと思ったり思わなかったりする今日この頃な私です。
参加してきました。
https://connpass.com/event/50766/

新潟グラムは、参加2回目ですが、有料のイベントのわりに(もしくは有料だからこそ?)、たくさん人が集まりますね。
4〜50人くらいの教室がいっぱいになっていました。

最近のレスポンシブウェブデザイン対応の勘所と実装方法あれこれ

講師: 長谷川広武(´ oムo `) さん
株式会社HAMWORKS 代表取締役
https://ham.works

実は今回遅刻しての参加になってしまったので最初のほうが聞けなかったのですが、レスポンシブな案件を請けるときに気をつけること、お客さんと事前確認したほうが良いことなどをまとめて発表いただきました。

ありがたいことに、私の場合はこまかいところはざっくりおまかせでお仕事をいただいたときにも、ちゃんとこちらの判断や提案をとりいれてくださるお客様が多いので、つい甘えてしまいますが、取り決めをちゃんとやることで、制作の際に迷うことがなくなって工数がへったり余計な手間がなくなって、本来頑張るべきところに集中できることも多いと思うので、事前確認とかちゃんとやろうと思いました。

講義いただいて一番気になったところが、最後におまけ的に発表されていた

「うちはSASSでメディアクエリーこうやって書いてます」

というところ。

この後の交流会のときに、そんなに質問するほどのことじゃないんじゃね?とか言われたので、おそらく一般的なやり方なんだろうと思うんですが、一応有料セミナーってことで、見せていただいたコードをそのまま書いていいのかわからないので、ざっくり説明するけど
こんな感じでメディアクエリー書くやり方。

親ファイルで

各ブレイクポイント毎にフラグを準備

フラグ1 をtrue
 メディアクエリー1{
  ここで子ファイルをインポート
 }

フラグ2をtrue
 メディアクエリー2{
  ここで子ファイルをインポート
 }

子ファイル

if フラグ1
 いろいろ書く
if フラグ2
 いろいろ書く

という書き方。
私は、@cotentを使ったやり方でやってきたので、このやり方は新鮮でした。

小生のやり方。

/*こういうのを定義しておいて*/
@mixin media_query_pc{
    @media (min-width: 768px){
        @content;
    }
}
@mixin media_query_mobile{
    @media (max-width: 768px){
        @content;
    }
}

/*こんなふうに書く方法*/
.body{
  width:1100px;
  @include mediaquery-mobile{
    width:1000px;
  }
}

@contentを使うほうが、同じセレクタに対するスタイルが離れないので見やすいかなというのはありますが(このあと発表された西畑さんも、自分の書き方を発表してくれて、こっちは覚えられなかったのですが、たしかおなじような書き方で、同じような事言われていました)
でもIF使うやり方は、このパターンを覚えておくと、ほかのときにもいろいろと流用できそうな気がしたので覚えておこうと思います。

SASSのメディアクエリーは勝手に、@content一択だと思っていたので、他の人のやり方を見るって大事だなぁて思いました。

ステップアップjQuey -jQueryをもうすこしだけ上手に書くための10のTIPS-

講師: 西畑 一馬 さん
株式会社トゥーアール代表取締役
https://www.to-r.net

JQueryを書くときに、便利になったり楽になったり、「過去の自分のコードに苦しめられたり」しないためのちょっとしたTips集の発表でした。

実は、PHPとかHTMLとかCSSとかって、最初に触り始めたときは右も左もわからず、ネットにもあまり情報がなかった時代なので、とにかく本を読みながら体系的に覚えてきたのですが、javascriptって、昔はサイトの一部をピカピカさせたりするためのプログラムという認識で(個人的な意見)、そんなに本気で学んでいませんでした。そうこうしているうちに、jQueryとかがでてきて、ドロップダウンメニューとか画像の表示などサイトの一部をかっこよく動かしたりする流れがきて、そのままjavascriptをCSSみたくいじれるやつ。ってことで、やっぱり断片的に、「そのとき実現しなきゃいけないこと」を学んできたのみでした。

なので、よく考えると本を読んだりして体系的に学んだ事がなくて、結構自己流でやっつけちゃってるところが多いかも。。なんて思っていたので、こういう場で、一般的にはこうやってるよ。的なTipsは結構役に経ちました。

初心者向け的に発表されていたけど

  • 同じ要素にイベント仕掛けるときに、わかりやすくするためのjsプレフィックスをつけましょうというお話(固有名詞はうろ覚え)
  • 変数名の付け方 とくに jQueryオブジェクトには $をつけようとか、定数は大文字スネークケースとか
  • javascriptでの、ネームスペース風な書き方
  • 等々、実は結構ためになりました。

    大まかにみれば、自分用のノウハウのなかで同じような課題解決はしていたけど、他の人がどうやっているかとか、一般的なお作法とかって、一人で仕事しているとついつい学ばずに進んでしまうので、とても参考になります。
    おそらく、こういう気付きが、私が勉強会にでる一番の目的だと思ったり思わなかったり。

    最後に交流会と懇親会

    今回もいろいろな人に出会えました。新潟ってITの人いっぱいいるんだなぁ。。ってこういうの出るたびに思います。
    あと、個人的に感じただけなんで、実際はどうなのかわかりませんが、「最近、ここの会社なんかすげーな」っていう会社に、優秀な技術者さんがだんだん集まってきているように思います。
    ちょっと前は、他の会社だったり、フリーランスだったりした人が、だんだん勢いのあるところに集まってきているという感じです。

    そういう先頭をぐいぐい行くIT企業みたいところが新潟に増えてきたのかなぁ。。。
    新潟のIT界隈も変わっていくんだなぁ。。なんて思ってみたりしたりしなかったり。そんな交流会でした。