めるノート

一児の母 兼 へっぽこWebエンジニアの内省ノート

「はじめてのCSS設計 - フロントエンドエンジニアが教えるメンテナブルなCSS設計手法」を読み終えた

 

このツイートを見かけて、本屋に行って速攻お買い上げしました。

今月14日に出たばっかりだったんですね。

 

以前読んだ「Web制作者のためのCSS設計の教科書」よりも良かったなあと思ったのは、設計を活用する場面のイメージが具体的に書かれていたことです。逆に、手法とその名前・定義を明確に知りたいなら「Web制作者のためのCSS設計の教科書」の方がいいかなと思いました。

 

part1の、継承やカスケードについての説明は、今まで読んだ本の中で一番分かりやすかったです。
実践編であるpart4は、結構長い上にプラスアルファの応用もそこそこあったので、結構読むのがしんどかった印象。自分がまだ理解しきれていないだけかもしれないけれど。
SVGアイコンとグリッドシステムについてが難しくて、、、誰か詳しい人、教えてください。。

 

flexboxについては一番最後に詳しく説明がありました。flexbox使うときに引きながらやったら捗りそうな感じでした。
流れの早いフロントエンド界隈なので、タイムリーな本が出版されるのは、非常に貴重でありがたいです。

 

f:id:c5meg1012:20170320182557j:plain

 

せっかくなので、同シリーズの「HTML5/CSS3 モダンコーディング」Amazonでポチりました。今の会社に入ったときに借りれるチャンスはあったのですが、そのときはRubyRailsのお作法を覚えるほうが急務だったのでお断りしてしまっていたのでした。早く届かないかな〜。

 

初心者がUI・UXまわりのデザインについて勉強するのに役立ちそうなものまとめ

めるです。

f:id:c5meg1012:20170310194856j:plain

最近、コード書いてばっかりもいられないので、UI・UXまわりのデザインについて勉強しています。

 

こちらでも、UI担当と紹介されています。汗

blog.rista.jp

 

まず、もくもく寺さんのSlack(参加自由)で紹介があったのがこちら。

f:id:c5meg1012:20170310191924p:plain

Amazonはこちら。

デザイン入門教室[ 特別講義 ]

 

また、五反田ともだちの@ymrlさんにも聞いてみました。

f:id:c5meg1012:20170310192823p:plain

ということで、早速お買い上げしました。

誰のためのデザイン? 増補・改訂版 ―認知科学者のデザイン原論 

ノンデザイナーズ・デザインブック [第4版] 

それから、

Googleのガイドライン(マテリアルデザイン)

Appleのガイドライン

のほうは、いま読んでる途中です。

 

そして、お買い上げした翌日に会社で@mikedaさんから「あげる」と渡されたのが

デザイニング・インターフェース

ですが、こちらは古いので、4章のページレイアウト、5章のリスト、10章のモバイルのところだけ読みました。他に読むべきところがあったら教えてください。

 

同じタイミングで「◯◯◯◯◯◯社のときに読めって言われた」と渡されたのが

スマートフォンサイト設計入門
こちらはスマートフォンに絞った話なので、とても実践的でした。

そして、今日会社で@dim0627さんから貸していただいたのが

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

こちらは読むのがとても楽しくて、お昼休みに一気読みしちゃいました。

今月お財布がピンチなので、お給料が入ったら自分用に買おうと思います。

 

ノンデザイナーズ・デザインブック [第4版] に関しては、会社のエンジニアみんなでそれぞれ買って、勉強会をすることになりました(`・ω・´)

 

そういえばIT業界にきた当初は、デザイナーになりたかったんだってことを思い出しました。UI / UX頑張ります〜。

Wordpressのおもひで

今日は久しぶりにWordpressのオリジナルテーマ構築作業をしていました。

Wordpressには前職でお世話になったのですが、当時、受託開発のコーダー・デザイナーとしてある程度こなしたあたり(半年くらい)で、ふと感じたことがありました。

わたしが静的な状態で作ったWordpressのテーマは、エンジニアに引き渡され、動的な部分の開発に入ります。
その開発が終わると、かなりの確率で表示崩れを起こして、ディレクターがわたしのもとへ差し戻しにくるのでした。
エンジニアとの引き継ぎを一生懸命したり、コメントをたくさん書いたりしても、改善される様子がなかったのです。

「(クソコードであれ)曲がりなりにもピクセル単位で厳密にコーディングしたHTML/CSSが、いったいどうして、エンジニアによってぶっ壊されてしまうのだろうか」

それがエンジニアに対しての最初の疑問、そして関心でした。

もちろん、この現象にはエンジニアだけでなく、ディレクターや、動的出力に対して想像力が足りなかったうえにクソコードを書いた自分にも原因があったのですが。

要するに、このへんの確認ができていなかったんですね。

qiita.com

で、エンジニアになってしみじみ思うのは、よく言われているとおり、隣の技術を知ることがとても大事だということです。

だって、上記のエンジニアがCSS書ければ差し戻しは必要なかったわけですから!(根に持っているだけ)

いま自分が何のエンジニアなのかはよくわかりませんが、仮にフロントエンドだとすると、デザインやサーバーサイドの勉強をしておくことが非常に大事です。というか、今の会社はまだ規模が小さいので、そのへんのことは普通に境目なくやります

専門性が大事なのもわかりますが、ひとりでフルスタックなときに限らず、チームでやるときこそ、視野を広く持つことが大事だよなあ、と思う今日このごろでした。

 

写真は小田原のフラワーガーデンの建物内に販売していた「モスボールくん」

f:id:c5meg1012:20170302002341j:plain

Web制作会社から自社サービス会社に転職して4ヶ月くらい経った話

こんばんは。めるです。

転職したてホヤホヤでもない中途半端な時期ではありますが、ようやく慣れてきたなぁという感覚が持てたので、ここらで表題の件について書いてみようと思います。

Web制作会社でやっていたこと

HTML/CSSマークアップjQueryの実装

数ページ〜300ページまで手広くやっていました。
自分が実装するマークアップに関しては、ページ数に関係なく、ほぼ協業なしでした。

Wordpressテーマ作成

最初はテーマ化だけしていましたが、最終的にはカスタムフィールド周りも出力までやってました。

オフショアコーディング(ベトナム)のディレクション

ディレクションと言っても決まったルールができていたので、英語が必要だったのは補足説明程度でした。実際にベトナムにご挨拶へも行きました。

jQuery屋さん

CSS3と合わせ技でインタラクティブなツールを作ることもあったし、ちょっと入り組んだGAイベントの仕込みなどもしていました。

Laravel実装

フロントエンド〜Viewのサーバーサイドまで。システム部だけ一時的に会社として独立していたときのお仕事でした。

EC-CUBE実装

2も3もやりました。こちらもフロントエンド〜View。プライベートでSymfony本を読む機会があったので助かりました。

転職したきっかけ

おそろしいくらい優しい人たちに囲まれていたのですが、技術的に社内での天井が見えてしまったことが一番大きいです。
あとは受託制作だと納期がタイトだったり、自分が作ったサイトに関する最終決定権が自社にないので、ちゃんとサービスにコミットしたいなあ、と思ったのもありました。
当時、残業でつらくなることは半年に一回くらいでした。ああいう業界にしては少なかったと思います。

いまやっていること

CSS芸人

最初はSassさえも戦々恐々としていましたが、おそらく現在のサービスのCSSのうち90%くらいは触ってます。書くだけならたぶん早い/デザインに忠実なのですが、設計がまだ身についていないので、そのあたりはレビューされながら勉強中です。

CoffeeScript

いま?なんてヤジが飛んできそうですが。そもそもオブジェクトとして書くのに慣れてなかったので...(汗)いつかリプレースするのが夢です。

Ruby on Rails実装

基本的な部分であれば触ってます。ネストなどで構造上難易度高そうなところは都度相談しながら実装したり、おまかせしちゃったりしています。

UI改善ディレクション

最近はこちらに時間を使うことが増えてきました。
まだ技術的な部分に自信がないので歯切れの悪いことしか言えない傾向があるのですが、もうちょっとちゃんとしよう!と頑張っています。

変わったこと

エンジニアの基礎力が身についた

初期はRailsでがっつりペアプロをし、現在もしっかりコードレビューがあるので、めちゃくちゃ苦手意識のあったサーバーサイドも、そこそこマシになりました。
CSSの設計を通してWebコンポーネントの概念がだいぶ理解できたので、個人的に勉強しているJSフレームワークの勉強にもとても役立っています。

まとめ

そういうことで、ちょっとずつできることが増えてきました。
ただ、今のところはひとつのサービスだけを触っているので、感覚が鈍らないように個人的な勉強や個人プロジェクトもやったりしています。
めずらしいことにエンジニアが全員朝型で残業なしなので、助かっています。

 

↓よかったらぜひおいでください!

www.wantedly.com

フロントエンドエンジニアのための現在とこれからの必須知識」を読み終えた

f:id:c5meg1012:20170215010127j:image

 

フロントエンドの担当領域は広いなぁ、と改めて実感しました。

 

ターゲットとしては、ちょっと前の自分みたいな、コーダーからフロントエンドへ、という方が読んだら一番いいんじゃないかな、と思います。あと、独学でフロントエンドをはじめた方。

 

前半はエディタについてや、Gitについて、コマンドラインの使い方についてなど、基礎的なことでした。

中盤はGulp, Gruntの使い方とWebpackの解説があり、後半はReactやES6の特徴だったり、ローディングにおける体感時間の短縮について、でした。

後半はページ量としては少ないのですが、自分はこの辺りがまだ初心者なので、充分読み応えがありました。

 

去年出た本ですが、そこはやはりフロントエンド界隈、若干古めだな〜、とも思ってしまいました。Vue.jsが全く紹介されていない(^^;)

 

それでも今ならまだ、役立つレベルで手広く基礎知識をまとめてくださっている本なので、フロントエンド初心者の方にはオススメです。

Rubyのイベント@Speee に行ってきた

Speeeさんは会社からめっちゃ近いので、なにかイベントがあるたびに行きたかったのですが、今日ようやく行けました。

(実はお邪魔するのは2回目ですが…。笑)

 

f:id:c5meg1012:20170118230326j:image

 

で、こちらに行ってました。

speee.connpass.com

 

会社のランチの時に、情報通なメンバーからスターエンジニアの話をちょくちょく聞いていたのですが、本物が!本物がいた!

というのは置いといて。笑

 

前半は2016年の振り返りということでしたが

 @_shiro16さんによる「minneのAPI改善」

www.slideshare.net

 

takamitoさんの「PHPで運用中のサービスをRubyに切り替える」

speakerdeck.com

ということで、なんだか「2016年いちばん辛かったこと」みたいな感じでした。笑

 

どちらも、このケースだからというよりも日々のプロジェクトに活きそうなお話で、適切なツールを見つけることと地道な努力が大事、みたいな感じでした。

 

後半のLTは、この方三種の神器の話がおもしろかったです。

speakerdeck.com

 

ghqとgem-src、うまく使えればかゆいところに手が届く感じでした。試してみたい!

ghqとgem-srcに関する詳しい話は、こちらの記事と中のスライドがとても分かりやすかったです。(一見関係なさそう...)

koic.hatenablog.com

 

レベル高い話がいろいろ聞けて楽しかったのと、コーヒーが美味しかったです。

モチベーション上がるイベントは定期的に参加していこう。

 

 

 

 

 

 

Dive into Codeさんの「DIVER」を読みながらやってみた

前の会社でエンジニアになってから、当時の上司に紹介されたのがDive into Codeさんのこちらの講座でした。

www.street-academy.com

こちらの野呂さんという方が地元が近い(神奈川県西)うえ、お姉ちゃんと同じ地元の有名校出身ということで、ついつい応援してしまうのですが、わたしも転職してからRubyの人になったので、ちょいちょい当時の資料なんかを見返したりするのです。

HerokuやCloud9、あのとき触っておいてよかったなぁ。ほんと。

ちょっと前から法人研修もやっていらっしゃるみたいなので、今思えば前の会社でそれをお願いしておけばよかったんじゃないかと思うのですが(^^;)、前の会社はレンタルサーバーで作業することが多いためメイン言語はPHPで、そういう話にはならなかったんですよね。

当時は有料講座の生徒にRubyのティーチングをしている様子がFacebookで見られたりして「わあ、すごく丁寧に、一生懸命教えてくださるんだな」なんて思ったわけです。

で、当時の資料などを見返していたところ、ちょっと前から無料で一部テキストを公開されているということで「DIVER」を見てみました。

ちょうどRailsチュートリアルで苦労したログイン・セッション周りのテキストがあって、試しにやってみました。 Railsチュートリアルよりも、図があったり、難しすぎるところを省いていたりで、めっちゃわかりやすかったです!!

ただ、書いてある通りにやったらSessionsHelperの関数が全部undefinedでエラーになる...? と思ったら、ひと手間が抜けていたようでした。

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  include SessionsHelper    # この行を追加して下さい
end

endの前でincludeしてあげてください。そしたら動きます^^

ターゲットが基礎の基礎なので、できるエンジニアさんには必要ないかもしれませんが(泣)、もっと記事ができたら初心者にとって、Railsチュートリアルの前段階として非常に役に立ちそうでした!

同じ地元から東京に出てきて、IT業界で頑張ってい[る方はあまり他に存じ上げないので、引き続き応援していこうと思います!

f:id:c5meg1012:20170115004027p:plain

「オブジェクト指向設計実践ガイド」を読み終えた

f:id:c5meg1012:20170112012358j:image

 

Webコーダー(当時)としてWebの世界に入りこんでから2年、プログラムをかじり始めてから1年ちょっと、そしてRubyをまともに始めて2ヶ月強。

Rubyを始めた当初から知っていた本ですが、この手のやつは苦手だなぁという思いがあり、こっちを買ってササッと流し読みしたところでした。

そんなときにやってきたサンタさん。

www.instagram.com

包装を解くと...

www.instagram.com

こうして、この本を読むことになったのでした。


各章の始めに、それぞれの手法(依存関係の管理、インターフェース、ダックタイピング、継承、モジュール、コンポジション...)についての概要が説明されるのですが、他の方も仰っているように、この説明が抽象的なため、理解していない状態で読むとすごく辛いです。

まずは一回流し読みして進んで、コードを見て理解してから戻ってくるくらいでちょうどいいと思います。

 

これまで自分は、実装レベルできちんと設計あるいはリファクタリングされたコードに向き合う機会が少なかったので(githubから探してコードリーディングもしてみたけれどひたすら辛かった)、この種のコードが全然読めませんでした。

なので「コードを見て理解してから戻ってくるくらいで」と言っておきながら、個人的にはコードを読んでいくのも結構気力が要ったのですが、何度も読み返して噛みしめるようにして進んでいたら、ちょっとずつ読めるようになってきて、楽しさを感じられました。今はいろんなコードが読みたいな、と思います。

 

ちょっと前にはCSS設計についても(苦しめられながら)取り組んでいたので、再配置できるように、というイメージは以前よりラクに持てるようになったと思います。

自分でうまく設計・リファクタできるかはまだ全然自信がないのですが、いろんなコードを読んだり、人によって解釈が微妙に異なってきそうな概念・用語についてもうちょっと調べてみたりすれば、見えてくるものがありそうな手応えを感じました。


先述のサンタさんからのプレゼント画像をアップしたところ、
「なんてひどいサンタさんだ!」という意見が外部からちらほらありましたが、
なんだかんだ必要だったなぁ、と実感するのでした。ありがとうございました。

Yahoo!株式会社の「LODGE」に行ってきた

ずっと行きたかったLODGE(コワーキングスペース)、やっと行けました。

きょう会社で「行ってきたよー」って話を聞いたら居ても立ってもいられなくなり、退社後にドロップイン。

ポップでかわいくて、積み木の中に住んでる気分になれるスペースでした。

 

セキュリティがすごいという話を昼間に聞いていたので戦々恐々としながら向かったのですが、ちゃんと利用者向けのルートが用意されており、18階の受付までは手続き要らずでした。

警備員さんは中も外もいらっしゃったので、そのことを言ってたのかなあ。

 

さて、手続きをするともらえるシールに名前を書き、見えるところにぺたっと貼って、開放されている17階へ。

床板の印字がそのままある感じが、わたしのハートをわしづかみ。木材いいよ木材。

 

イベントもやってたので一部入れませんでしたが、グループ向けの机がほとんどだったかな。なので、大体みんな打ち合わせしてました。

けたたましくはないけれど、もくもくするならイヤホンは必須かと思います。

 

まだできたばかりでキレイなスペースなので、とても集中できました。

土日は人が多いそうですが、平日夜は、少ないとはいえなくとも、そこそこ空いてます。

次に行くときは、ドリンクを注文してみようと思います〜

 

f:id:c5meg1012:20170110214202j:image 

pepperくんの人形、ほしいなあ

 

 

新年の目標

あけましておめでとうございます。
本年も、どうぞよろしくお願いします。

 

f:id:c5meg1012:20170105141738j:image

 洗足池の鯉

 

昨年の目標

 

この目標を決めた時点では結婚はおろか、旦那さまとは知り合ってすらいなかったので、そういう意味があるとしたら「彼氏作るぞ」くらいの意味でした。

 

そういうのよりも音楽や仕事を通して尊敬できる方々と一緒に活動することが多くなったので、目の前の人についてちゃんと考えよう、と思ったのがきっかけでした。

 

あとは、音楽でもお仕事でも、だれかの右腕になることが多かった年なので、「トップサイダー」という造語を胸にひそめつつ、右腕になっている相手について慮っていこうという思いもありました。

 

今年の目標

 

「エンジニアとしてのわたし」は
・引き続き、目の前の課題を着実にこなすこと
・楽しいコードをめいっぱい書くこと
・エンジニアとして会社や家庭の外に出て、べつのコミュニティを見つけること
が目標で、

 

「経済活動のなかのわたし」は
・お金について自分なりの考えを持つこと
が目標です。

 

昨年が、ゼロをイチにする年だなぁという感じだったので、今年はそこに掛け算をする年だと思っています。
いくら掛けられるかは自信ないですが、がんばります!