こんにちは！WWGに入社してまだ間もない新人webコーダーです。

実務未経験でしたので、初めてコーディングのお仕事をいただけたときには本当に嬉しくて内心かなり高揚していました。

スピーディかつ綺麗に仕上げようと意気込んだものの、蓋を開けてみればものすごく時間をかけてしまったりして反省点だらけでした…。しかし、落胆して終わりではいけません。この苦い経験を自分のスキルアップにまで昇華していかないといけないと思います。

そんな辛酸を舐めた経験の中で、自分の中の気づきやコーディングする際に現時点で心がけていること、先輩に教えていただいたことなどをまとめてみました。

ひとまず以下のことを意識してコーディングの速度を上げていけるように努めたいと思います。

新人の考え方や気づきでしかないですが、あたたかい目で見守っていただき、少しは頭を使って作業しているんだな、と思っていただければ幸いです！同じ新人さんの参考にもなればと思います。

目次

1. ショートカットキーを覚えて駆使する
2. 自社の制作実績の模写をする
3. GitHubを活用する
4. 出来なかった事、わからなかった事をメモして復習する
5. 最初の準備をしっかりとする
6. コードの原理を理解する
7. 最後に

私は、コードを書くときのエディターはVisual Studio Codeを使っています。

入社する前から「Ctrl +C」「Ctrl +X」「Ctrl +V」などの基本的なショートカットキーは知っていたのですが、「Ctrl + F(検索)」「Ctrl + H(置換)」といった便利なツールを知らずにここまできました。

恐ろしく非効率なことをしていましたね…。

こういったショートカットキーを駆使することで、作業のスピードが上がるのはもちろんのこと、ミスも少なくなると思うので重要性を痛感しております。

一気に全てのショートカットキーを覚えることはできないので、何日かに一個くらいのペースで少しずつ覚えていきたいな、と思っています。

休日や出勤前の朝の時間を使って、WWGの制作実績の模写を少しずつやるようにしています。

先輩の書いたコードから学ぶこともできるし、似たようなレイアウトやパーツが出てくることが今後の案件でもあると思います。その際に自分が練習で書いてきたコードが役に立ったり、応用が効くようになったりするのではないかと期待しています。

本来の使い方とはかなり違っているのでしょうが、私はコーディングする際の参考やチートシートとしてGitHub（ギットハブ）を活用しています。

私のGitHubには自分の作成したポートフォリオや先程あげた会社の模写のコードや備忘録、コードを書く際の注意点などが書かれています。

これらを用意しておくことによって実装方法がわからない時の参考にしたり、使いまわせる部分があればそのままコードを流用したりして時間の短縮化を図っています。

これからも自分のGitHubの中身を充実させて、業務をより効率化できるようにしていきたいと考えています。

GitHub（ギットハブ）とは？

知っている方も多いかと思いますが、GitHub（ギットハブ）はコードやデザインのデータを保存しておけるサービスです。

公開して他の方と共有したり、共同で編集したりすることもできるので、基本的には大勢で使うものとして導入している方が多いかもしれません。

非公開設定にもできるので、私のようにメモとして使うのもおすすめです！

個人的に1番大事にしていることだと思います。
コーディングをしていてわからなかったところや躓いたところを調べたり、教えていただいたりすることで、その場では解決しても、次また同じような実装をするときにすっかり忘れてしまう。そしてまた同じ失敗を繰り返す…では成長は望めないと思います。

なので、一度躓いたところや教えていただいたところはその一回で覚えられるようにしっかりメモを取って、後に復習するようにする。

たとえば、「アイコン付きのお問い合わせボタンの実装に時間がかかってしまった！」となった場合は、その旨と解決方法などをメモしておき、自宅で勉強しなおします。

「GitHubを活用する」でもあげたGitHubにメモやコードを書いておく、一つの実装パターンだけでなく、他の類似した実装パターンも制作実績を見て練習しておく。

ここまでやるようにしたら、次もまた同じ失敗をするというのはなくなり、成長も見込めるのではないかと考えています。

「早く仕上げなければ」という思いが強すぎると、下準備の時間すら惜しいと思いがちです。

ですが、どんなに急いでいても、下準備だけはしっかりとしておきます。

というのも、以前、レイアウトやデザイナーさんが作ってくださった仕様書の確認もほどほどにいきなりコーディングに入ってしまい、結果的に余計に時間がかかってしまう…という本末転倒な事態になったことがあります。

なので、「z-indexの順番」「フォントのサイズや種類」「コンテンツの余白」「配色などの確認」「画像をあらかじめ全て書き出しておくこと」や、「htmlの構造を大まかに紙に書き出して把握する」など、最初の段階で整理しておいたほうが良い情報は、焦ることなく確認しておきたいと思います。

急がば回れ！最初の準備はしっかりと行いたいですね。

過去の自分の失敗談で、たとえば、上下の余白をつけられないインライン要素に上下の余白をつけようとして、つかなくて時間をロスしてしまったことがありました。

こういったようなHTML・CSSの原理の部分を知っていないがゆえにコーディングがうまくいかず、躓いてしまうということが多々ありました。

この原理の部分を理解していないと、同じ轍を何度も踏んでしまいコーディングの上達に繋がらないと思います。

なので、CSSの最新の実装方法やJSのカッコいいアニメーションの実装方法を学ぶのも良いですが、時には基礎や原理に立ち返って学習するのも大事だと痛感しています。

いかがだったでしょうか？何も特別なことなどやっておらず、結構当たり前で泥臭いことばかりですね・・・。でも、コツコツ毎日地道に努力を積み重ねるということが結局は一番の近道で、王道なのだと信じています。

今後もどれだけ上達しようとも驕ることなく、常に高い向上心を持ってスキルアップを図りたいと思います！

数か月後の私の成長を楽しみにしていていただけると幸いです。

担当：もぐら（コーダー）

愛知県内から名古屋市を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17　花車ビル南館5F

TEL： 052-890-7007（2021-12/16～変更）
※ ホームページ制作や活用サポートのお問い合わせはコチラから