この記事について
◆へっぽこWebエンジニア誕生
2019年1月1日、私はとあるWeb制作会社に入社した。
社会人になって5年が経ったが、Web制作はまったくの未経験。前職は企画やマーケティングが主務だった。Webデザイン周りの知識はすべて独学だったのだが、幸運にもご縁があった。そのあたりの来歴は別記事にて詳しく。
投稿：へっぽこWebエンジニアが誕生するまで（自己紹介）
◆この記事の内容
そんな私が入社1ヵ月目を振り返る記事。初めて出会う言語、ツール、用語、エラー、etc...
タイトルに「Webエンジニア」と入れてみたものの、ぶっちゃけまだそんな肩書きにふさわしい仕事はほとんどしていない。先に謝っておこう。ごめんなさい。現状はただの雑用です。
◆こんな方々に向けて
- 今まさに私と同じ状況でプログラミング業界に入りたての方（喜びや苦しみ、教材を共有したい）
- これからプログラミング業界に入ろうと思っている方（あくまでも一例だけど検討の参考になれば幸い）
- ド新人の教育担当/上司の方（へっぽこ新人の戸惑い・躓きが少しでも伝われば）
入社1ヵ月目
◆使った言語
HTML/CSS/JavaScript
- ゼロからコーディングした案件はほぼなく、過去に作ったページのコードをコピペして、新しい原稿を流し込むのが主なタスク。独学で培った知識でほぼ問題なくこなせた。
JSON
- 名前は聞いたことがあるが、何にどう使う言語なのかもわからない状況で、いきなりファイル修正のタスクが降ってきた（たしか入社2日目とかそんなタイミングだった。）先輩からの指示と、Google先生の助けを借りて無事クリア。
- 参考：非エンジニアに贈る「具体例でさらっと学ぶJSON」
◆使ったソフトなど
Atom
- エディタは好きなもので良いということだったので、勉強を始めた時から愛用しているAtomをインストール。ただ、社内はDwを使っている人が多い印象。ちなみにAtomのSyntax ThemeはPhoton Light。目にやさしくて好き。
- 参考：https://atom.io/themes/photon-light-syntax
SmartGit
- Git/GitHubについては、ある程度勉強しておいたつもりなのだが、SmartGitは完全に初めまして。調べてもあまり参考になるサイトがなく（特に日本語サイトが少ない）、先輩に言われるがままメモを取り、使い方を覚えた。未だにちょっと自信がない。conflictした時の焦燥感といったらない。
GitHub
- 上記と並行してこちらも使用。プロジェクトごとに使い分けているようなのだが、まだよくわかっていない。とりあえずログインして、必要に応じてSmartGitにCloneしてきた、というぐらい。でも、世の中的にはメジャーなツールなので、マスターしておきたい。
Photoshop
- リサイズやトリミングの作業がほとんどだったが、何個かバナーを作った。初めてのバナー制作。見よう見まねで作ったが、先輩方が作られたバナーと並ぶと、明らかに見劣りする部分があり、スキルというよりむしろセンスを磨く必要があるんだろうな、と思った。でも、センスって一朝一夕でどうにかなるものじゃないですよね。
- それから初めて知った機能「アクション」。これが複数の画像を処理する時にめちゃくちゃ便利で、おそらく使い慣れている人からすれば当たり前の機能なんだろうが、初心者は最初に覚えるべきポイントのひとつだと思った。新人に真っ先に教えてあげてほしい機能とも言える。
- 参考：アクションの作成および再生方法 （Photoshop CC）
InDesign
- まったく使ったことがなかったため、テキストの流し込みだけでも四苦八苦。調べても、初心者向けの解説がなかなか見つからず。こちらは引き続き2ヵ月目以降も課題としていきたい。正直、資料なら前職で死ぬほど作ってきたので「こんなんパワポでやったら一瞬やろ！」と思いながら作業した。パワポと同じぐらい使いこなせるようになりたい。
◆使った教材など
Progate（有料プラン） https://prog-8.com/
- HTML/CSS、Javascript、jQueryは3周しなさいとのお達しだったので、帰宅後や週末を使ってごりごり進めた。おかげさまで、基礎が身についたというか、何度も繰り返し同じ構文を打つことで手が覚えていく感覚があった。とにかくUIが良いので、飽きずに楽しく学べるのがいい。
ドットインストール（無料プラン） https://dotinstall.com/
- もともと独学していたころからお世話になっていた、泣く子も黙るTaguchiさんの動画講座。最新のJavascript講座が、ちょうど今の自分にぴったりの内容で、寝る前に何レッスンか見るのを習慣化していた。
LearnWebCode https://www.youtube.com/user/LearnWebCode/
- こちらもJavascriptの勉強で大変お世話になった、Youtubeチャンネル。「The 10 Days of JavaScript」のシリーズが本当にわかりやすく、ドットインストールでは付いていけなかった部分なども、初心者向けに丁寧に解説してくれている。英語に抵抗がなければ、おすすめ。もっと評価されるべき。
Qiita https://qiita.com/
- 巨人の肩の上に立つ。
◆困ったこと
ここまではただの記録、ある意味ここからが本編とも言える。1ヵ月目のへっぽこド新人は何につまずいたのか。
聞いても調べても全然わからないことにぶち当たる
- 筆頭がコマンドプロンプト（ターミナル）。そして、タスクランナーと呼ばれるGruntとgulp。調べても「自動化」「ミニファイ」「コンパイル」などなどさらに馴染みのない単語ばかりで読んでも読んでもサッパリ分からない。とりあえず言われた通りにコマンド画面に謎の文字列を打ち込み、するとさらに謎の文字列が並んでいく。打ち込む。謎の文字列。打ち込む。謎の文字列。打ち込む。謎の文字列。
- ひとつわかったのは、リアルタイムプレビュー（HTMLやCSSの編集結果がサーバーへのアップやブラウザの更新なしに反映される）が便利ということ。でも、たぶんそこがメインではないので、これは2ヵ月目以降の課題としたい。
- 参考：ブラウザ確認が一瞬！Gulp・Gruntと始めるBrowsersync入門
初めて見る拡張子たち
- 「.tpl」「.jade」「.pug」「.tif」…などなど、メモしきれていないものもあるだろうが、聞いたことのない拡張子がついたファイルを編集する機会もあり、それはそれは、開くのも上書きするのも怖かった。未知のものに出会うと感じる潜在的な恐怖だ。でも、開いてみると記述はただのHTMLだったり、ただの画像だったりするから、ますます謎は深まる。なぜ「.html」や「.jpg」じゃないのか。
- 上記は調べれば比較的すぐに答えにたどり着けるものが多かったのだが、わりと説明なしに「じゃあこのファイル編集しといて」みたいな感じで先輩からタスクが振られるので、見かけに惑わされて必要以上に焦ることもあった。ぜひ新人に教えるときは、中身は君の知ってる○○で書かれてるから安心してね、と一言添えてほしい。
早くもスパゲティコードに出会う
- 鰻屋のタレのように長年継ぎ足されてきたコード。噂には聞いていたが、1ヵ月目にして出会うとは思っていなかった。CSSを編集して見た目を整えるタスクだったのだが、CSSファイルには書かれていない謎のclassがjsで追加されていたり（しかもjs自体の動作には関係ない）、CSS内で「!important」が殴り合いをしていたり、開発ツールでひとつひとつ見ても何がどう影響しあって現在の見た目になっているかわからない状況。無論、そのコードを書いた張本人はすでに退職している。
- 結局、先輩のアドバイスを仰ぎつつ、なんとか指示された通りの形に修正できたが（もちろん!importantで殴りながらだ）、先輩の見解としても、遅かれ早かれ丸ごとファイルを作り直すことになるような話だった。
- ※良い子のみんなはわかってると思うけど!importantで殴り合っちゃだめだよ。
- 参考：!importantはもう使わない！CSSの優先順位をおさらいしよう
SmartGitに馴れない
- 1ヵ月経ってようやく仕組みがわかってきたかな…というレベル。この1ヵ月の間になんどもpullを忘れたままブランチを切ろうとしたり、違うプロジェクトのブランチで作業しかけたり、連番を振らなければいけないはずなのに「02」のコミットを3つも4つも作ったりと、重大なミスではないものの、いつかやらかすのではないかと、終始ドキドキしながら操作している。
- とはいえ、一歩間違えれば重大なミスにつながりかねないのは重々承知しているので、今後も適度に緊張感は持っていたい。
入社月が年イチの繁忙期
- これはもう致し方ないのだが、ただでさえコミュ障の私が、明らかに忙しそうにしている先輩方に超初歩的な質問をするのはハードルが高かった（それでもミスするよりは良いので、最終的には頑張って話しかけたが）。そのおかげというべきか、まずは自分で調べてみる、という癖がついたのは良かったかもしれない。
- 今でも後悔しているのは、上述したGrunt周りのメモがうまく取れず（背景知識がまっさらだったせいだ）、Gruntを実行するたびに、似たような質問を3回も繰り返してしまったことだ。本当に申し訳なかったので、3回分のメモを統合し、Google先生の助けも借りながらノートに簡易マニュアルを作成した。2ヵ月目には使いこなせるようになりたい。
まとめ
という程まとまってないので加筆修正の可能性大
◆1ヵ月目を振り返って
まずはただの感想だが、とても楽しく刺激にあふれる1ヵ月だった。ずっとやってみたかった仕事に就けたこと、別業界からの転職で何もかもが真新しく感じられること、職場の人々にも恵まれたこと、などなど、とにかく転職してよかったと思えた。
だからこそ、もっと勉強しなければいけないと思った。ゼロからコーディングするようなタスクもしてみたいし、ツールやソフトも使いこなしてレベルの高い成果物を作りたい。
◆2ヵ月目に向けて
1ヵ月目の渦中、下記の記事を読んだ。1/20。大きな反響があった記事だ。
参考：文系でプログラマーになったけど色々失敗して３年半で会社を辞めた話
かなり状況は異なるものの、自分も文系でプログラマーを志したわけで、まったく他人ごととは思えなかった。その中で印象的だったのは、下記の部分。
冒頭でも言ったとおり、私はこの３年半の間に２つの失敗をした。
1. プログラミング入門の仕方に失敗した
2. プログラミングを覚えてから何をすればいいかわからなかった
このうち、1.に関しては、世の中のプログラミング学習支援サービスが進化し続ければいずれ解決されるだろう。しかし2.が解決される日はなかなかやってこないと思う。
もしこれからプログラミングを学ぶことを考えている場合は、2.について真剣に考えてみてほしい。2.をあやふやにしたまま突き進むと、おそらく私のような悲惨な結末が待っているかもしれない。
プログラミングを覚えてから何をすればいいか。記事の彼とは違い、私は転職でこの業界に入ったので、まったくビジョンがないわけではない。でも、たしかに、その点についてちゃんと考えていなかった。プログラミングを身に付けること自体は目標ではなく手段なのだ、と改めて思った。
私はどんなプログラマーになって、どんな仕事をしたいのだろうか。どんな成果物を出したいのだろうか。あるいは、どんな人生を送りたいのだろうか。これは2ヵ月目と言わず、この先長く検討すべき課題になるんだろう。今は目の前のタスクを問題なくこなせるようになり、早く職場に馴れることが目下の課題だ。
◆おわりに
2月も私が元気に働いていたら、また書きます。