- Javascript
- キャリア
未経験者は入社後3ヶ月でどんなことが出来るようになるのか
※注意※ この記事はQiitaに投稿したものを加筆・修正した記事です。 2019年2月頃のポエムです。
アバン
こんにちは、Shumpei(@seventhseven)です。
昨年の11月半ばに晴れてエンジニアとして入社し、あっという間に3ヶ月が過ぎてしまいました。 恐ろしいスピード感ですけど、毎日奮闘しています。
今回もポエム的な記事ですが、未経験者が入社して3ヶ月間何していたのかを残しておきたいと思います。 少しでも参考になれば幸いです。
はじめに
- バックエンドが強い自社開発のWeb系企業に入社しました
- まずは過去にも個人で経験したことがある、フロントエンド側のプロジェクトに入りました
- 先日試用期間が終わり、現在は正社員として勤務しています
開発環境
自宅ではmacを使用して開発していましたが、 社内ではWindowsにLinuxの仮想環境を入れて開発を行っています。
Linux環境にはCygwinを使用し、CUIにてコマンドで操作しています。 GUIでも色々とアプリはあるかと思いますが、 どんな環境でも出来るようなるべくCUIにて操作するようにというアドバイスがありました。
Cygwinとは、Windows上で動作するプログラムで、Unix系で利用できる一般的なシェルコマンドを入力・実行ができます。 引用：Cygwinを使って、Windows環境でシェルとjavaを実行する方法
取り急ぎPC起動時に自動で立ち上がるアプリとしてCygwinや自分が担当するプロジェクトのディレクトリを開くようにしてみたり Chromeを立ち上げ時にはよく開くサイトをタブで開くように設定したり、 環境構築を進めていきます。 すべてのファイルの拡張子を表示させるように設定するのも忘れずに。
Cygwinのエイリアス(ショートカットコマンド的なやつ)にもいくつか設定しました。
起動時はルートディレクトリにいるので、プロジェクトのディレクトリに一気に移動できるよう
cd 該当ディレクトリ などを設定したり、
cygstart 該当ディレクトリ と入力することで、該当ディレクトリのウィンドウを呼び出してGUI上で操作できるようにしたり、
好きなようにカスタマイズしています。
この辺も自分の手間を減らすように、当初設定したものです。
Cygwinのウィンドウを何個か開いてずっと作業していたので、 1枚のウィンドウで画面が分割できるScreenを導入して操作方法を先輩に教えて頂きました。 ちょっと慣れが必要でしたので毎日触りながらCUI環境を使いこなしていきたいと思います。
エディターはVisual Studio Codeを使用しています。 入社して初めて使ってみたのですが、今現在かなりお気に入りのエディターです。 とても軽く、拡張性も高いので、ストレスは感じません。
初学者の方向けに、Twitterで自分が使っているプラグインをご紹介しているので、もしよろしければ御覧くださいませ。 ●該当ツイートへ
社内環境
少数精鋭で強いエンジニアが技術力で殴るスタイルの会社ですが、 社長はじめ穏やかな人が多いので居心地がいいです。
自分は色々な領域を浅く広く知っているタイプなのですが、 先輩の中には自分の業務領域以外の分野でもやたらに詳しい方ばかりなので対等にお話できるようになりたいです。
勉強会などに関しては、会社の規模的に大々的なものはないのですが、Slackやら口頭で質問をすると丁寧に教えて頂けるし、 新人向けに社内での講習も慣れた方から教われるので、非常に良い環境だと感じています。
業務では何をやってきたか
通常業務として
自社のウェブサイトをリニューアルするということで、僕がメインで担当することになりました。 先輩にアドバイスを頂きつつ、コード書くのは自分だけです。
PhotoshopとIllustratorである程度しっかりしたモックを作成した後、 静的サイトのメインどころのページを一通りまず作り上げて、 更新作業の業務フローを考えてWordPressに移行させるというステップを踏むことにしました。 現在目下作業中です。
静的サイトを作成する際、タスクランナーというWEBサイトを作る際に自動で色々やってくれるプログラムや、 テンプレートエンジンやSassを初めて知りました。
フロントエンドをやられている方からすると何を今更という話かもしれませんが、 メモ帳やCot Editor(メモ帳に毛が生えたエディター)で、 がんばってコーディングして手作業ばかりしていた自分からすると革命です。
現在、自分はタスクランナーはGulpを使い、 テンプレートエンジンはPUGでHTMLを書き、 CSSはsassで書いています。
PUGはHTMLを楽に書けるようにしてくれるもので、 閉じタグを書かなくてもあとでゴニョゴニョしたらちゃんとHTMLとして読み込んでくれるものです。
変数やlayout、includeも使えるので、
header.pug、layout.pug、footer.pugなどパーツで管理できるので、
「footerのこの部分を変えたい！」となったときも、すべてのページ１つずつを修正するのではなく、
footer.pugだけを更新できれば良いのでメンテナンスも楽です。
sassも変数など使えるので、variable.scssという使う変数だけをまとめたファイルに繰り返し使う変数を登録しておくことが可能です。
# 例 # variable.scss $font-size: 16px; # nanika.scss font-size: $font-size # コンパイル後 => font-size: 16px;
その変数を別のscssファイルから呼び出すが可能なので、 何度も使う幅や高さなどの値を変数として登録しておけます。
そうすることでvariable.scssの中に登録した$font-sizeの値を16pxから18pxなどに変更することで、
この変数を使用しているすべてのところで値が変更されます。
Javascriptに関しては、今回はあまり使わないので個別に機能を持たせたファイルをそれぞれ用意するにとどめています。
Gulpは、PUGで書いたHTMLを自動でコンパイルしてちゃんと閉じタグなどを整形してちゃんとしたHTMLにしたり、 sassもちゃんとしたCSSに整形したり、 その整形したファイルはどのディレクトリに保存させるのか、 あらかじめ設定しておいた任意のタスク（スクリプト）が更新されたら自動でブラウザをリロードするように設定したり、 色々できるのでかなり強力です。
自分はこちらもまだ全然使いこなせていないので、こちらも勉強中です。
過去、半分趣味・半分仕事としてHTMLとCSSはある程度慣れ親しんでいましたし、 PhotoshopやIllustratorに関しては学生の頃から触っていたので何とかなるかなと思っていたのですが、 紙とWEBでは考え方やアプローチの仕方、概念などが異なり、まずそこに慣れるのに時間がかかりました。
PhotoshopやIllustratorも前は使わなかった機能を使ったりなど、 こちらもWEBデザイン向けの知識を入れているところです。
そして、現在は作成した静的サイトをWordPressに移行作業中です。 WordPress自体は触ったことがあったのですが、数年前な上に有料テーマを使ってブログを書いていたので、全然理解していませんでした。
投稿やテーマ、URLなどを管理しているダッシュボードから、 フロント側の構造を理解するところから再スタートです。
静的サイトは1ページ1ページそれ専用のページを作れば良いだけですが、 WordPressはブログ的な機能の一面があるので、 自分が作りたい箇所（例えば最新情報などこまめに更新されることが予想されるところ）だけはブログのように動的にしなくてはなりません。
そしてそれはWordPressにおいて静的な1ページを作成するのではなく、 投稿としてダッシュボードから行わなくてはいけないので、それ専用のテンプレートファイルを作成したりして実現していきます。
WordPress独自の呼び出されるページの優先度や関数の解釈、 functions.phpで行うURLのコントロールなどの独自の設定を書き加えたり、 アップデート対応を考えるとなるべくプラグインに頼らない方針でいきたいので ドキュメントと技術ブログを見て悶絶しながら覚えて理解して作っています。
さて、そんなことをしながらある程度出来上がったタイミングで都度都度全員の前でプロジェクターに写しながらプレゼンしていきます。 基本的に緊張はあまりしない方なのですが、イマイチ伝わっているのか掴みきれていないので、 パブリックスピーキングのスキルが欲しいところです。
社内講習
上記の業務に加え、今年の1月からずっと社内講習が週1回行われています。
はじめはコンピューター概論として、CPUやメモリなどの五大装置を含めた低レイヤーを学びました。 レジスタやバス、演算装置などを大まかに捉えることが出来ました。
次にアルゴリズムを学びました。 一つの検索結果を求めるにしても、結果が出る時間はn^2なのか2nなのかlognなのか…グラフやらを交えながら学びました。
パズルは元々好きですが、ソートに関しては脳に汗をかきながら取り組みました。 バブルソートや選択ソート、クイックソートやマージソート、ヒープソートなどほんのさわりを習ったのですが、 アルゴリズム図鑑がかなり理解の助けになりました。
アルゴリズム図鑑は無料のアプリですが、300円ちょっとの課金で色々なアルゴリズムについてや、 秘密鍵やデジタル署名などのセキュリティ方面の話などもわかりやすいビジュアルで学ぶことが出来るのでオススメです。
現在はフロントエンド講習を受けています。 こちらはHTTPやWEB、UI/UXについて学んでいます。
普段何気なく使っているブラウザですが、 CSSである色を指定しても、ブラウザエンジンによっては表示される色が異なることに驚きました。 差は微妙なのですが、結構気になります。 コントロールはできないのでどうしようもないのですが…。
フロントエンド講習が終わると、次にRuby講習が始まるので、ぼちぼち準備していきたいところです。 他社さんの教育環境はわかりませんが、新人教育に関してはすごく手厚い感じがします。 もちろん、受け身な姿勢ではよくないので、食らいつけるように努力しています。
小ネタ
HTTPについて、先日講習で行ったことをシェアしたいと思います。
まずChromeで適当なページを開き、
デバッグモード( F12 / Cmd+alt+i )にします。
最初はHTMLタグが開かれていると思いますので、
デバッグウィンドウ最上部にある ElementsやConsole、Sourcesなどがあるタブの、
Networkをクリックした状態で画面をリロードします。
そうするとそのページを開くまでにどんなリクエストとレスポンスが走ったか見ることが出来ます。
Nameに表示されているファイルを適当にクリックすると、ブラウザにレンダリングされる前に何が起きたかが見れます。
HeadersではIPアドレスやリクエスト・レスポンスの詳細(View parsedをクリックするとhttpステータスも確認できます)、
Timingでは実行された時間がビジュアルで確認することが出来ます。
個人での学習でやっている（た）こと
ニュースチェックははてなのIT・テクノロジー関連はとりあえずざっと見て、あとは社内で気になるnewsが取り上げられるとそれを読む感じですね。 SEO観点から見るレンダリングのタイミングについての議論など、レベルが高いので理解するのにはまだかかりそうです…。
また、先月から基本情報技術者試験に向けて勉強をしています。
資格に関しては色々な意見があるので置いておいて、 自分の目的は資格を取るのが目的ではなく、体系的に勉強することが目的です。
経験上、基礎練習を大切にしているので、それにあたるのがまずは基本情報かなぁと思いました。 今年は基礎固めの年として、知らないことをどんどん減らしていくのが目的なので 業界に馴染むためにもちょこちょこ進めています。
ただ、気負っても疲れてしまうので、スキマ時間を見つけたらやるスタイルです。 テキストも買いましたが、基本情報技術者試験ドットコムさんと併せて過去問対策をしています。
ただどうも試験となると答えるのが目的になってしまって、 答えを覚えちゃう方に頭が持っていかれるのは果たして意味あるのかなと頭によぎります…
また、Javascriptが全然わからないので勉強したいなと思って易しめの技術書を買ってやっていたのですが、 JSの皮を被ったjQueryのテキストだったので、完走はしましたがイマイチ身にならなかったです。
jQueryはパワフルなものですが、便利すぎてそれに頼ってしまうので、 まずはネイティブなものを知って思い通りにコントロールしたいので、また勉強し直しです。 僕はフロントエンドの方なので、サーバーサイド側のJSよりかはクライアントサイドのJSをまずは学ぶほうが良い気がしています。
今年やっていきたい学習
基礎固めをしつつ、まずは普通のJavaScriptを理解して書いていきたいです。
CSSはある程度書けるようになってきたのですが、JavaScriptはまだまだなので強化していきたいですね。
まとめ
長くなってしまいましたが、3ヶ月でやってきたことを書いてみました。 ここまでお読みいただき、本当にありがとうございます。
若い人のように爆速で成長するということは難しく、 正直亀みたいなスピードしか出せないのですが、日々淡々と勉強していく所存です。
少しでも参考になれば幸いです。
Twitter(@seventhseven)もやっているので、よろしければフォローくださいませ。 一緒に強いエンジニアを目指しましょう！