WEBデザイナー2年目

IT業界に入って苦労したことや、勉強になったことを書いてきます twitter@kswmch

「JSオジサンに怒られない脱初心者JavaScript」に行ってきました

html5j-begin.doorkeeper.jp

javascriptの勉強が一通り終わったので、参加してきました!

javascriptの勉強会に参加するまでの道のりが長かったぜ...(T_T)

 

話の内容

4名のJSオジサンからのありがたきお話+質問タイムって感じでした。

一つずつ、つらつら書いていきます(※長文注意ですぞ!)

 

 

1.ソースレビューから学ぶ Javascript + 1

株式会社サイバーエージェントの、宗定 洋平さんのお話です。

speakerdeck.com

ざっくりまとめると、以下の4点についてのお話でした。

  1. レビューでみているポイント
  2. 「バグがない」という言葉の定義
  3. 関数名のつけ方
  4. ステップアップするために必要なこと

印象的だったのが...ステップアップするために必要なこと...それは...

情報処理技術者試験を勉強する」です。

な、なんじゃそりゃー!初耳です。

f:id:kswmch:20151110235242j:plain

 

意図としては「デザイナーさんなど、システムの仕組みを知らない人は基本を知るために勉強しましょう、そしたら理解速度が高まります」的なお話でした。
sudoってなんやねん!黒いコマンドこわいーうひひな私は、勉強したほうがいいなーと思いました。

 

試験あると目標あってわかりやすいですよね〜

 

 2.JSおじさん as a Service

株式会社ミクシィのKuniwakさんのお話です。

JSオジサン as a Service.pdf - Google ドライブ(←登壇資料)

エラーチェックをしてくれるツール、lintを使ってミスをなくそう!的なお話でした。
今回はESLintの使い方の説明でした。

 

lintを使う意図としては、「typoミスなどに時間を取られることをなくして、本質的なことに集中できるようにしよう!!!」的な感じです。

 

ここでひとつ名言...

「lintは時々JSオカンとなる」です(笑)

f:id:kswmch:20151111002139j:plain

(私、sass lintつかってるんですが確かに、エラーがぴこぴこなってうるさいですよねwww)

だけど、うるさいからといって無効化するのでは、意味を成してないので、無効化するときはちゃんと「なぜ無効化するのか?」など気を付けましょう、とおっしゃっていました。

 

なんかふと思ったんですが、lintを擬人化して愛すると仕事楽しくなりそうですよねw

かあちゃん...ありがとう!的な

 

 

3."same code same result" なんて思うなよ!

株式会社シーピーエスの村地 彰さんのお話です。

docs.com

 

ざっくりまとめると以下の4点についてのお話でした。

  1. IEについて(なんでIE8まではこんなにゆうこと聞かないのとか)
  2. ブラウザはなんで、ブラウザによって挙動が違うのか
  3. ECMAScriptJavascriptってなんで2つあるの?
  4. 「標準化」の罠について

ブラウザの歴史って、普段滅多に聞けないのでとても貴重でした。

やっと、なんでIE8のサポートが切れるのかとか、IE8対応ってのをよくしなきゃいけないのかとかが理解できました〜あは

こういう話もっとききたいな〜

 

4.自分がJavaScriptを書き始めたばかりの時にやってしまっていた、パフォーマンスが悪くなる書き方

ラブライブ好きで有名な、株式会社グラニのkubosho_さんのお話です。

一番びっくりしたのが、オジサンだったことです。...童顔は罪ですね。

kubosho.github.io

jsPerfを使ってパフォーマンスを計測しよう!というお話でした。

 

推測するなら計測せよ!

ブラウザによってパフォーマンスも変わるよ!

 

という言葉にドキっとしてしまいました...w

パフォーマンスとか画像圧縮くらいしか見てなかったんですが、

ちゃんとできるようにならないとなーとしみじみ思いました。

 

 

質問タイム

登壇者4名が、twitterに寄せられた質問に回答してくださいました。
印象的だったのをピックアップします。
(Aの部分は私が勝手に要約してひとつにしているので悪しからず...)

 

Q.レビューってどうしていますか?

ツールとしてはGithubなり、Gitlabなりつかってレビューをします。
いちばん大事だとおもうのは、
「レビューはなんのためにあるのか定義付けをする」ことですね。
mixiでは、バグを見つけたり、粗探しをするのが目的ではなく。
「人のコードをよんで、質問があったらコメントをして、コメントだらけにするのが重要」だと定義しています。

 

かっこいい!!!
たしかに、「レビューはなんのためにあるのか」を足並み揃えたほうが困惑しなし、目的がはっきりしていいですよね。
なにより、コメントでばしばし質問できると、勉強にもなる!

 

Q.ひとりのときってどうしてましたか?

「とにかくドキュメントにしっかりコメントを書きました。」
コメントをたくさん書くということは、他の人に見せるための文章を書くことでもあるので
自分の頭の中も整理されますよね。
それで、リファクタリングをマメにするのも大事だと思います。
1ヶ月後の自分は他人ですし(笑)

あと、Githubでpull reqおくて、人のコードを添削することですかね。
最初はすごい勇気がいりますが...
成長スピードがはやくなると思います。

 

Q.初心者なんですが、どうすればいいですか?

ぜひこれをやってくださいw

2日でできる! JavaScript トレーニング - mixi Engineers' Blog

 

 

Q.JSオジサンより最後にひとことお願いします!

 

ひとつめ:

developers.google.com

GoogleのClosure Libraryのソースを読んで勉強してください!(googleが考える最高のコードです!) 

 

ふたつめ:

www.html5rocks.com

 inputの量がoutputの量につながると思います。個人的には、↑のhtml5rocksを読むのおすすめですね!

 

みっつめ: 

その言語の仕様書をちゃんと読みましょう!英語だけど、少しずつよんでいけば、英語も読めるようになりますよ!そういうもくもく会もあるのでぜひ参加してみてください。

 

よっつめ:

ブログを書いたり、勉強会に登壇してみたりして、コードを書くこと以外でのoutputもちゃんとしましょう
そうすれば、自分がわからないことが明確化すると思います!

 

総括 

JSオジサンすごいよかったです!
「なぜこれが必要なのか」「こういう考え方をすると良い」
「こういうサイトに情報が転がっているよ」
などの、お話をきけたのがすごい勉強になりました。

知らない情報をわんさかきけたので、自分がやるべきことが明確化されますね。

デザイナーの参加者が1割くらいで他がエンジニアの人だったのに驚きましたが...初心者じゃないやんてきな。

 

jsojisan.jp

JSオジサン、次回は12月15日〜17日で、三日連続開催するそうです。

興味がある方はぜひ行ってみてはいかがでしょうか?

 

★おしまい★ 

Dialog in the Darkに行ってきたお

ちょっと前の話になるんですが、

Dialog in the Darkに行ってきたのが良かったので日記に書いちゃう。

 

f:id:kswmch:20151002020348j:plain

 

Dialog in the Darkって何?

一言でいうと「暗闇のソーシャルエンターテイメントです」

参加者は完全に光を遮断した空間の中へ、グループを組んで入り、
暗闇のエキスパートであるアテンド(視覚障害者)のサポートのもと、中を探検し、様々なシーンを体験します。
その過程で視覚以外の様々な感覚の可能性と心地よさに気づき、
そしてコミュニケーションの大切さ、人のあたたかさを思い出します。

ダイアログ・イン・ザ・ダークより引用

 

参加メンバー

私のときは、6名で1グループでした。(+アテンドの方ひとり)

友人と2人で参加したので、他の4名は知らない方です。

1人で参加している方もいました。

知らない人とグループになるとか知らなかった私...

他の人もよそよそしい感じだったので、

知らない人たちと暗闇に入るのはちょっと不安でした。

 

部屋の中ってどうなってるの?

部屋の中は、本当に何も見えません。

アテンドの方の案内のもと、白状を使ってとことこ歩きます。

ですが6人いるので、みんなで声をかけていきます。

声をきいて置いていかれている人がいそうだったら、助け合います。

f:id:kswmch:20151002020414j:plain

 

プログラムの内容

私のときはこんなことをやりました:

  • コスモスの種を植える(鉢はお持ち帰りしました)
  • みんなで輪になって、雑談をしたりちょっとしたミニゲームをする
  • 喫茶店にはいって、机に座りのみものを飲みながらおしゃべりする(おしぼりもらったり、お会計したり本当の喫茶店です

最後の頃には、みんなでわいわい話している仲になりました。

目が見えないと、コミュニケーションを取ったり

声を掛け合って助け合いをしないといけないから

数時間なのに仲良くなったのかなあ、と思います。

f:id:kswmch:20151002020427j:plain

 

参加して得たこと

コミュニケーションの大切さ

当たり前のことかもしれないんですが、

「声を掛け合ってコミュニケーションをとる」って大事だな〜と改めて痛感しました。

コミュニケーションを取ることで、人とも仲良くなれるかもしれないし

社内でも「◯◯さん大丈夫かな、心配だな...」とか、

相手に対して気になることがあれば、ちゃんと声に出して伝えないと伝わらないんだよな...って思いました。

いつも、しなきゃしなきゃ...でもなんか嫌に思われたら嫌だから何もしないでおこう...って思う口だったのですが、実際にDialog in the Darkに参加すると痛感しました

 

視覚障害者×WEB

雑談をしている最中に

視覚障害者の人はスマホとかPCを使うのか?」という話になりました。

アテンドの方曰く「スマホもPCもバリバリ使うよ」とおっしゃっていました。

その中で印象的だったのが

「画像ばっかりのサイトがあって読み上げ機能が効かなくて困る」

とおっしゃっていたことです。

 

画像ばっかり〜っていう話からは脱線しちゃうんですが。

私、マークアップするときいつもどう書けばいいのかって悩むんですが

このときに気がついたのです

読み上げ機能がちゃんと説明できるマークアップをする」って考えたらスムーズにコーディングできそうだな!と。

 

f:id:kswmch:20151002020446j:plain

 

基本的なマークアップをするのもそうだけど

こういう、音声出力環境による記事も日々チェックせんとなあ...

w3g.jp

 

総括

5000円とちょっと高めなんですが、5000円以上の価値は買えたと思いました。

人に対するコミュニケーション力とか、優しさ薄れたな...私って思ったときにまた行きたいなあ。

 

気になる人は是非いってみてください。

ちなみに「今日一緒に行く人が誕生日」とか伝えておくと、プレゼントがあるかもしれませんよ(私のときはありました)

www.dialoginthedark.com

jsが無知な私がGulp.jsを美味しく飲めるようになりました

 

そもそもGulp.jsをいじることになったきっかけ

会社で、もともとGulp.jsを使っていたのですが

ひょんなことからタスクを追加しなくてはいけない状態になりました。

私の知識レベルは...あの黒い画面のターミナル

「gulp」とか「gulp build」とかの魔法の呪文を打ったらsassが動くと認識しているレベルです。

 

どうやって勉強したか

社内で既にあるのGulpファイルをいじらなきゃいけない方は...

いったんそのことは忘れて、1からつくってみて仕組みを理解すること

(なんでかというと、自分が既存のGulpファイルを最初、いじろうとして仕組みも知らずにいじろうとしたもんだから、何をどう触っていいかもわからず、1からやっとけばよかった...と後悔したので...)

 

参考したサイト

liginc.co.jp

とりあえず、最初の「Gruntの比較」とかは飛ばして

「1.Node.jsのインストール」から順にやってみてください。

不要なタスクの追加の項目(javescriptの圧縮とか)があったら飛ばしちゃっていいと思います。

 

自分との約束事

自分はすぐテンパってしまうので、以下の約束事を決めていました

1.ターミナルは怖くない

PCに直接喋り掛ける手段だと思って、ターミナルくんを擬人化して仲良くなる。

あと、背景を黒じゃなくしてお花の写真にしましたw

2.ターミナルでエラーがでても焦らない

Node.jsとかをインストールするときや何かでエラーがでて動かないかもしれません。

ですが、エラーを飛ばして次に行かずにエラー文言を読み解いてみましょう。

大丈夫!できるはずよ!!!その部分にはまった人は必ずいるはずだから!

インターネットさんに相談しましょう。

3.できるようになった自分を想像する

うう、わからない>< つらい><

となってもできるようになった自分を想像します。

Gulp.jsもとい、タスクランナーもとい、

黒い画面いじれるようになったら私カッコイイ!カッコイイ!カッコイイ!

 

怖がらずに冷静にやれば、きっとできます!頑張りましょう!

f:id:kswmch:20150929010809j:plain

 

ちなみに、Gulp.jsを勉強したのをきっかけに

jsの勉強をはじめたり、プログラミングはなぜ動くのか興味を持ち始めました。私。

共に頑張りましょう!おー!

 

 

...いや、こういう風に学習しろよってのがあったら教えてください。

 

UI Crunch UNDER25に参加してきました(後編)

UI Crunch UNDER25に参加してきました(前編)の続きです

section2.「デザインとキャリア」についてのライトニングトーク

section2では、各企業のaround25の方たちがライトニングトークをしていました。

section3.「各社デザイン文化」についてのパネルトーク

section3では、各企業のaround35の方たちが、パネルトークを行いました。

内容は、自社のデザイナーのあり方についてとか、デザインチェックの方法についてとかでした。

他者のデザイナーの立ち位置の話ってすごい新鮮ですね。おもしろかったです。

 

▼その中でもsection2とsection3で印象的だったことを下記に書いてみたり▼

UIデザイナーに必要とされていること:

section2でもsection3でも、

「UIデザイナーといっても一口じゃなくってもっとフォーカスを当てるべき」

というような会話がちらほらありました。

 

その中でも「ビジネスのことも考えられるUIデザイナー」がいま市場に少なくて価値があるときく。

なるほど。いろいろな選択肢があるのかー...

 

私の頭がプスプスしてきた中...section3で「面白法人カヤックの佐藤ねじさん」が仰てい

たのが印象的でした

 

f:id:kswmch:20150927235713j:plain

↑全然にてない...誰かに怒られるかな...

昔は「歌って踊れるアイドル=安室奈美恵=めずらしい」という形だったが

いまとなっては「歌って踊れるアイドル」は珍しくないけど安室なみえは今でもすごい的な話でした。(解釈違いだったらすみません...)

ちろっとしか話がなかったので、「安室奈美恵論」ぜひもっと詳しく聞きたかったです....

 

くるっとまとめるとUIデザイナーに必要とされていること、それは...

UIデザイナーの相棒」を決めましょうという結論だなと思いました。

(UIデザイン×マーケケティング、UIデザイン×プログラミング、UIデザイン×グラフィックデザイン的な)

 

UI Crunch UNDER25で勉強になったこと:

・自分がUIデザイナーであるうえで、相棒を決めましょう!(UIデザイン×ビジネスは市場価値が高いよ)

行動力と勇気を持とう

・自分のモチベーションの元、もとい働く原動力を決めよう

 

上記の3点ってうまくまとめられなさそうだなー...と思う私。(まとめても忘れそう)

なので最近さぼりがちな、フランクリンプランナーに書き込むことををまた始めよう。

 

勉強会ってなかなかいかないのですが、社内に閉じこっていないで

外にでて人の話きくのって大事だな〜と思いました(モチベーションあげる意味でも)

UI Crunch UNDER25は歳が近い人も多かったので楽しかったです。気が楽だったし...

 

また行きたいでおじゃる。

UI Crunch UNDER25 に参加してきました!(前編)

 

UI Crunch UNDER25に参加してきました

ui-crunch.com

 

幸運にも抽選で当たったので参加してきました!Foo!

男女比もいい感じでした!何より机があったので人と話しやすかったよ!

コミュ障、治し中の私には近くの人に話しかけやすくてとてもヨカッタヨ★

 

section1.DeNA会長 南場智子さんのお話

※私の脳内変換が入っているので、語弊があるかもしれません。ご了承ください。

とにかくかっこいい!!!!恥ずかしながらDeNA会長を知らなかった私...

 

DeNAの新規事業のワークフローについて:

話がもりもりで、勉強になりました...その中でも一番印象的だったこと

 

f:id:kswmch:20150926204405j:plain

 

ユーザーマターなのに、時間をかけてるバランスがおかしい

(経営会議の資料作成などに時間がかかりすぎている、それよりも

UX設計を先にやって、どんどんユーザーにつかってもらいましょう!的なお話)

 ※ただしサービスの規模による

 

モチベーションについて:

・褒められたい

・勝ちたい

・ユーザーコミュニティーにつくしたい

・自分の秘術力を貢献したい

・会社をつくり、採用した人としてプライドを持ちたい

 

モチベーションや野望って人それぞれあるんだなーと思いました。

ちなみに私は、「とにかく楽しく働きたい」です。

いろんな人のモチベーションとか、野望ってきになりますな。

 

採用などの人とのコミュニケーションのとりかたについて:

いかに、その人の本質を引き出すかが勝負

・個人的な話をとことんしましょう!

・いい人があったらとことん口説きましょう

・ひとりひとりと付き合い倒す

フラグを立てる!!!!(キャラ立たせる)

 

採用以外でも、普段の仕事やコミュニケーションとってるときも

大事だな...と思いました。

f:id:kswmch:20150926220417j:plain

フラグを立てるって目からウロコ!って思った私

(ゴールがないと行動できないので)

 

後編へ続く

自己紹介

WEBデザイナー2年目のMiki*:)と申します。

いまは、某ベンチャー企業で、

社内のサイトのデザイン・コーディグ(JSはわからない)をやっています。

 

IT系の会社に入って困ったことや、

勉強になったことがぼちぼちあるので

 

ぼそぼそ書いていきたいなーと思います。

入社する前にざっと勉強したこと

もともと、フリーターでコーヒー屋さんをやっていた私ですが、

ひょんなことからIT系の会社に入ることになりました。

(しかも職業がわからなかった....結局いろいろやらせていただきましたが

 

全く無知の私、入社まで一ヶ月しかありません。

 

f:id:kswmch:20150917234250j:plain

 

さあ...どうする

 

まずは専門用語を理解しよう

KPIとかCVRとか、CPAとか...IT業界は横文字が多くてわからない....

いまになっても、入社前にある程度理解しておいてよかったなーと思いました。

私のおすすめは「WEBマーケッター瞳」です。(書籍もありますよ)

何がいいって...漫画だから読みやすい

まったく無知な私にとって、何より大事なのが読みやすいことだったので...

 

WEBサイトを写経しよう

よく本屋さんで「1ヶ月でわかる!WEBサイトのつくりかた」とか売ってるので

それをやるのがいいと思います。

 

本を買うときにひとつだけ覚えて置いていただきたいのが...

HTMLでも、XHTMLとかHTML5とかってのがあるんですよ...

HTML5って書いてるのにしてください。※20150916現在

 

WEBサイトの写経についてですが、自分が勉強しているときに

「ああ...これ知っときゃよかったな...」

ってことが多くあったので、それは別の日記に書きます。

 

他に

もし入社とかがきまっているのであれば、

社内の人と飲みに行くのとかいいと思います。

で、何が必要か聴く的な...

ちょっと誘うのに勇気がいりますが...

いまになって、素直になるのって大事だなーと思いました。