この記事について

◆前回のへっぽこWebエンジニア

2019年1月1日、私はとあるWeb制作会社に入社した。
社会人になって5年が経ったが、Web制作はまったくの未経験。
そんな私が入社2ヵ月目を振り返る記事。これまでのへっぽこ投稿は以下から。

◆こんな方々に向けて

今まさに私と同じ状況でプログラミング業界に入りたての方（喜びや苦しみ、教材を共有したい）
これからプログラミング業界に入ろうと思っている方（あくまでも一例だけど検討の参考になれば幸い）
ド新人の教育担当/上司の方（へっぽこ新人の戸惑い・躓きが少しでも伝われば）

入社2ヵ月目

◆使った言語

HTML/CSS/JavaScript

前月からほぼ変化はなく、テキストの流し込みや過去の流用でなんとかなるものが主で、ほとんど困ることなくこなせたと思う。ただ、他人が以前作ったコードを読むのは、新しく作るより難しいこともあるんだなと思った。
クライアントからフィードバックが届いて、それに沿ってひたすら修正…なんていう作業も増えてきた。
1件だけとんでもなく苦労した案件があったのでそちらは後述。

◆使ったソフトなど

Atom

引き続きエディタはAtomを愛用しているが、こちらも1つだけ困ったことがあったので後述。
それから、コードがめちゃくちゃ長いファイルを開くと、エラーになることがわかった。そんな時は安心安定のTerapadを使おう。

SmartGit

ようやくGitの仕組みが頭に入ってきた感じ。更新したファイルをstageしてcommit＆pushして、masterにcherry-pickして…という基本的な作業であれば問題なく進められるようになった。1ヵ月目は毎回先輩に聞きながら作業していたので、かなり進歩したのではないかと思う。

Photoshop

今月はあまり使わなかった気もするが、1件気づいたことがあったので後述。

InDesign

こんなんパワポでやったら一瞬やろ！という印象は先月からまったく変わってないのだが（そもそもAdobeはどれも重いのでストレスフル…）、Photoshopと同じようにレイヤーが使えるということは発見だった。構成が同じで原稿だけが変わる、なんていう時はレイヤーを分けて文字だけ入れていく、ということもできるからその点は便利。

gulp・Grunt

先月、散々苦労したこのタスクランナーたち。今月も頻繁に起動する機会があったので、どうすればどのように動くのかは粗方わかってきた。下記の記事がシンプルで分かりやすかったです、感謝。
Qiita - はじめてのgulpでの環境づくり
ちなみに、お馴染みドットインストールにもgulpとGruntの解説動画があるのだが、わたしのような初心者向けではない内容だったので、いきなり見ると逆に混乱する可能性も。

◆使った教材など

『Web制作の現場で使うjQueryデザイン入門』西畑一馬

通称ドーナツ本。
サンプルがどれも程よくシンプルでわかりやすく、コードの説明も1行1行書いてあるので、隣で開きながら実際に打ってみるとかなり頭に入ってくる。
若干、サンプルの雰囲気が古かったりはするのだが、基本的な機能が紹介されている点では初心者向けでありがたかった。
jQueryに限らず、jsは実際にブラウザで動いたときの感動がひとしお。自分でコードを書いたアコーディオンやスライドショーって何回クリックしても飽きないんだよな（わたしだけだろうか）

『JavaScript本格入門』山田祥寛

こちらはまだ買ったばかりで読み途中なのだが、上記のjQueryの本を一通り終えたところで「あ、まだまだjsの基本ができてないわ」と思う部分があったので、評判も良かったこちらを購入。
ES6には対応しているものの、基本的にはES5準拠。まだまだ企業のWebサイトとかES5で記述されているところが多いので、まずはしっかりES5を学んでES6を勉強したほうが良いかなと思っている。即戦力として必要されているのは、ES5だと思う。上司からもまずES5を身につけなさいと言われた。

Qiita　https://qiita.com/

今月も大変お世話になりました。

◆困ったこと

1ヵ月目に引き続き、2ヵ月目のへっぽこド新人は何につまずいたのか。

「このライブラリ読み込んで、デモにあるこんな感じのページ作って」

上司から、さらっと飛んできた指示。それが「このライブラリ読み込んで、デモにあるこんな感じのページ作って」だったのだが、具体的にどんなライブラリのデモだったかというと、こちら。
Scroll Magic - Parallax Sections
この時、わたしのjsの知識はProgateをようやく終えた程度。シンプルなjsのコードでも、まだ調べながらでないと書けないような状態。「ライブラリ」も「Scroll Magic」も「パララックス」も初めて聞く言葉だった。デモを見てもいまいち何がどう動いているのかもよくわからない（背景画像のせいで余計わかりにくい）
さて、わたしはこの指示にどう対応したか。最初は、デモページに「ソースを見る」リンクがついているので、「なるほどそのままコピペすれば動くのだな？」と思ったのだが、まっっっったく動かない。
それから、わたしはググりまくった。色んな解説を読んで、先輩にも色々と質問して、家に帰ってもデモページを見ながらコーディングして。でも思う通りに動かなかった。最終的にそのページは他の先輩が作ることになった。
めちゃくちゃ悔しかった。ので、再チャレンジしたいと思う。そして、Qiitaに解説記事を書きたいと思っている。「このライブラリ読み込んで、デモにあるこんな感じのページ作って」と言われた初心者エンジニアの人も作れるような記事を書きます。ちょっと時間ください。

SmartGitがCheckoutしてくれない問題

なぜかわたしのSmartGitだけ挙動がおかしくなり、Checkoutができなくなる、という現象が何度かあった。周りの先輩に聞いても原因がわからず、再起動したりなんなりしてるうちに、いつの間にか直る、という感じだった。
それの原因が先日判明した。AtomとSmartGitを同時に起動していたからだった。あまりそんな環境の人は多くないかもしれないので（会社の人はみんなDWだし）、参考にはならないかもしれないが、対処方法を簡潔に記載。
Atomにはどうやらデフォルトでgitのパッケージがいくつかインストールされているようで、特に設定をしていなくても、勝手にファイルの変更とgitのステータスを追うようになっている。Atomだけを使っていれば問題なかったのだろうが、そこで並行してSmartGit側で操作をすると、Atom側がそれを追い、気づくと保存済みのはずのファイルに未保存のマークがついていたりする。
というわけで、対処法はAtom側のgit関連のパッケージを全部無効にすること。それからというのもの謎のCheckoutできない問題は起こっていない。

「縮小専用。」はPhotoshopほど真面目じゃない

前職（企画職）ではサムネイルなどを作るときによくフリーソフトの「縮小専用。」を使っていた。複数の画像をドラッグ＆ドロップするだけで一気に同じサイズに整え、リネームまでしてくれるので、使っている人は多いのではなかろうか。
たぶんこれから書くことは超常識なのかもしれないが、わたしは知らなかったのであえて書く。「縮小専用。」は出来上がった縮小画像がにじんだり、色が変わったり、ノイズが発生したりする。びっくりしたのは白背景に文字が入っている画像を縮小したら、背景の白が#FFFFFFではなくなっていた（#FDFDFDみたいな微妙な差ではあったのだが…）。
というわけで、「縮小専用。」は軽くて速くて便利なのだが、色味や画質を大事にする場面では、やはりPhotoshopが真面目に仕事してくれるんだということがわかった。さすが有料なだけある。

ブラウザチェック・デバイスチェック・js無効時チェック

今月に入ってタスクとして増えてきたのが、このチェック作業。自分が作ったページ以外にも、先輩や上司の作ったページをダブルチェックするような場面も多かった。趣味で作っていると、あまりわざわざやろうとは思わない作業だと思うが、仕事としてやるなら確かに必須な作業。なので、簡単に概要を記載。
ブラウザチェック・デバイスチェックはそのまま名前の通り、Chrome、FireFox、Safri、IE、Edgeなどのブラウザと、Windows、Mac、iPhone、iPad、Androidなどのデバイスで、それぞれ正しく表示されるかを確認する作業。大抵引っかかるのはIE。でも、先日Windowsさんからも発表がありましたね。
Internet Explorerの今後について
js無効時チェックというのは、なかなか面倒。たとえば、Chromeだったら検証ツール→Setting→Enable Javascriptのチェックを外して検証する。そうするとjsで組んだ動的な部分がすべてjsを抜いた形で表示されるので、その状態でもきちんとすべての要素が表示されているか、激しい表示崩れがないかなどを確認する。ちなみに修正するのも結構面倒だった。
ほかにもアクセシビリティのチェックなどもした。対応の詳細は控えるが、こんなランキングもあるそうです。
Webユーザビリティランキング

まとめ

◆2ヵ月目を振り返って

課題などは上記の通りとして、2ヵ月目に入っていよいよ困っていることがある。それは肩こり。
エンジニアの皆さんは、どうやって肩こりや腰痛、頭痛、むくみ等々と戦っているのでしょうか？もともと頭痛持ちで姿勢もあまりよくないので、余計に悪化しているのもあるのだが、帰宅後に入浴してストレッチしたぐらいではどうともならないぐらい、カチンコチンになってしまい、週末は毎週のように整体やらマッサージやらを受けている。このままだと収入の大半が体のメンテナンスに持って行かれてしまうので、どうにか改善したい。
その改善策の一つとして、ブルーライトカットメガネを買った。これがなかなか良い。目の疲れが明らかに軽くなった。ただ、視界が若干黄ばむのでデザインなどするときは注意。
それからまったく別件になるが、iPad Proを購入した。出先でコーディングできる環境がほしかったのと、Kindleで買った大判本をカラーで見たい時などに重宝しそうだなと思い。そんなわけで、iPadでコーディングできるように環境を整えているところ。おそらくAWS Cloud9を使うことになるかと。

◆3ヵ月目に向けて

さて、課題も徐々に明確になり、とにかくjsがまだまだだということがわかったので、来月は集中的にjsの勉強ができたらいいなと思っている。
それにともなって、勉強したことはしっかりアウトプットしていきたいと思う。前述のScroll Magicもそうだが、他にもアウトプットできそうな内容があれば、こちらでまとめていきたいと思う。

◆おわりに

2月もお疲れ様でした。花粉がいやな季節に突入するが、健康第一でがんばりたい。

この記事について

◆前回のへっぽこWebエンジニア

◆こんな方々に向けて

入社2ヵ月目

◆使った言語

HTML/CSS/JavaScript

◆使ったソフトなど

Atom

SmartGit

Photoshop

InDesign

gulp・Grunt

◆使った教材など

『Web制作の現場で使うjQueryデザイン入門』 西畑一馬

『JavaScript本格入門』 山田祥寛

Qiita https://qiita.com/

◆困ったこと

「このライブラリ読み込んで、デモにあるこんな感じのページ作って」

SmartGitがCheckoutしてくれない問題

「縮小専用。」はPhotoshopほど真面目じゃない

ブラウザチェック・デバイスチェック・js無効時チェック

まとめ

◆2ヵ月目を振り返って

◆3ヵ月目に向けて

◆おわりに

『Web制作の現場で使うjQueryデザイン入門』西畑一馬

『JavaScript本格入門』山田祥寛

Qiita　https://qiita.com/