こんにちは。のぶ(@n0bu0810)です。
入社してから約半年が経過しました。いやー早い。
私はこれまで【看護師→海外生活→Web制作会社のエンジニア枠】としてキャリアを歩んできました。
今は「Webエンジニアです。」と名乗っていますが、それまでは独自ドメインをとってワードプレスでブログをやってはいたけれど、【Webの知識は全然ありません】というレベルでした。
Webエンジニアに転職したきっかけは「自由な時間が増えて、自分のブログをもう少しカスタマイズしてみよう。」というところから始まって、ブログのカスタマイズの勉強を継続していたら「カスタマイズ楽しい!」というふうになり、そのまま独学でhtmlやcssを学び続けたら制作会社に転職できました。
転職活動をするにあたってポートフォリオとなるサイトを作ったのですが、そのサイトで実装したことといえば
- ヘッダー
- メインビジュアル(slickを用いたスライドショー)
- 更新情報表示
- 横並びの画像をdisplay:flexで実装したもの
- フッター
- トップに戻るボタンの設置
- レスポンシブ
- ハンバーガーメニュー
です。
先日久しぶりにそのサイトを見たのですが、「成長したな、、」って思います。笑。
過去の自分の作品を見て、このころの自分は一生懸命だったな、、、って思うことができるので、間違いなくこの時よりは成長しているかなと。実感できるぐらいになってよかった。。
漠然と成長したことはわかったけど、何ができるようになったのでしょう。というわけで半年と区切りもいいので、もう少し深入りしてみて【半年経って何ができるようになったんだろう?】っていうのを振り返っていってみようと思います。
Web制作会社に転職して半年でできるようになったことできるようになったこと
cssのtransitionを使った動きを取り入れられるようになってきた
いきなり技術的な話なのですが、transitionでどの動きにしようかな!って選択肢ができるようになってきました。(transitionやanimationを上手に使うことができたらcssだいぶ使いこなせるようになったなーという個人的な固定概念があります)
hoverした時のカクカクした動きじゃなくって滑らかに動きをつけれるようになったなと。動きのついたサイトをみると(この動きかっこいいなー)どうやっているんだろう?って思っていた立場からその動きを自分でも実装できるようになりました。
といってもまだシンプルな動きしか取り入れることができないので、もっと色んな動きを取り入れられるようになっていきたいなと。
cssでflexをバリバリに使えるようになった
転職する前はfloatを使って調整に苦労していました。flexが敷居が高く感じてしまっていて、なかなか使いこなせていたんだけど。
“flex-wrap” “justify-content” “align-items” “flex-direction”
もう大好きです。これら。
コードのストックが増えてきた
過去に書いたコードがストックとして残る量が増えて、過去に自分が作った作品が参考サイトとして使えるようになってきてきます。
表現したいのをググって「求めている情報はこれじゃないんだよなー」と思うことが多くって調べることに時間がかかっていました。(これも必要な経験なんですけどね)実務で毎日コード書いていると「あっ。この表現過去にあのサイトでやったな」と自分の作ったサイトを参考サイトとして使うことができるようになりました。
参考サイトを基に引用もするし、毎回登場するのは書くべきことが記憶として定着してきているからスラスラでてきたり。これは毎日のようにコードと向かい合ってきた産物です。今はEvernoteにまとめているんだけど培ってきた技術やコードをこのブログに今後はのこしていきたい。
どのセレクタが正しいだろうか?という点を意識しながらコードを書けるようになってきた
コードを書いてる方なら共感していただけると思うのですが、過去に書いた自分のコード見ると「なんでこんな書き方してるんだろう?」とか。「読みづらいコード書いてるなー」って思うこと多々ありませんか?
一ヶ月前に書いたコードの修正したら「はっ?何これ?うわーこれ直したくないわー」って思ったから一ヶ月前よりは成長できてるっぽい!良かった!
— nobu@Webエンジニア (@n0bu0810) November 5, 2018
class名がなくって属性でcss当ててるから全体に影響しちゃってて修正や追記が大変だったり。無理矢理cssで表現していたり。このように感じるってことはそれだけ成長できるているという証拠なんですよね。(最初に書いたコードを今見たらなんて思うんだろう、、笑)
フォトショップでの画像の加工や自分の使いたいサイズへの加工ができるようになった
転職時の募集要項で【フォトショップやイラレが使えると良い】という記載がありました。(今でもこのように記載してある求人情報は多いですよね。使うソフトが多様化しているのも事実ですが)
当時、「少しでもフォトショップを使えるようにならないと!」と思いできるようになったことは【サイズのリサイズをすることだけ】でした。
入社時たったこれだけのスキルだったのですが、今では画像のサイズを調整したり使いたいサイズで切り出したりできるようになってきました。(まだまだなんですけど。)
マスクという言葉が私の口から出てくるようになるとは思ってなかったwスライスを使って画像を切り抜いたり。jpgとpngの違いがわかるようになったり。
用意していただいた画像サイズでは上手に調整できないことがあるから、自分で使いやすいサイズに調整できるとコーディングも楽になりますよね。
画像の加工はボチボチな頻度であるので、使っていくうちに覚えていきます、やはり。デザイナーさんにデータをもらって自分自身がコーディングしやすいように画像を調整できるということはそれだけ時短にも繋がっていくはずだから、加工ソフトはもっともっと使いこなせるようになっていった方がいいはず。
ワードプレスでのサイト作成ができるようになった
繰り返しになりますが、転職のきっかけとなったのが「自分のブログをcssでカスタマイズできるようになりたい、、」と自身のサイトをカスタマイズすることからでした。
それが半年経った今ですとhtml、cssのみの静的なサイト作成のみならずPHPを用いた(動的なサイト作成)ができるようになりました。まさかこんな日が来るなんて。
Web制作会社に転職して半年での気づき
次は、学んではなく、意識して取り込むべきことについての気づきをまとめていきます。
デザイン通りにコーディングやする大切さ
最初の頃は、デザインを渡されてその通りに再現するので必死でした。大枠は再現できててもpaddingやmarginの修正をたくさんいただいていました。
デザイナーさんにとってはそのバランスが大切なわけで。さらにhtml、cssのみでなくそこに動きがついていることが多々あるので、どのような動きになるのか。ではそれに適したマークアップはなんだろう?とそこまで考えなければいけないということに気づけただけでも大きな成長です。
納期を考えた時にどのタイミング確認してもらうかを考える必要がある。
これは与えられた納期のみでなくどのような工程になるのだろう?という風に考えられるようになってきたのかなと。提出がギリギリになってしまったら私のみでなく、確認・修正をするデザイナーさん・ディレクターさんなどに迷惑をかけてしまうわけであって。もちろん先方さんにもね。
だから、いつぐらいに提出して確認してもらって、確認してもらっている間に別の作業して、、、という全体の工程が見えるようになったのも大きな進歩です。自分の作業量やかかる時間も見えるようになってきたってことなので。
ちなみに「これぐらいでできるかな?」と思っている時間の倍の時間を見積もっておくと少し余裕を持って行動できるようになってきたかも??
今後の課題
全体を見てどこを共通化することができるのか。テンプレート化する
要らないコードを書いていることが多いなーって思う。まとめれるところはもっとまとめれるのでは?と。汎用性がないというか。「どうしていじりたくないな、このコード。」というふうに思うのかをもっと掘り下げて考えていかないといけないですよね。
そうすることで時間の短縮化にも繋がっていくし、他にもできることが増えていくわけだから他にも学べることが増えていくようになるわけだし。
JavaScriptの脱初心者
JavaScriptが書けるようになってきたといったけど、本当まだシンプルなものしか書けていないのが現状です。()の中に値を入れて動かそうとすると全然動かない。つまり基礎がまだできていないということ。基礎づくりはしっかりとしていかないといけない。
まとめ
この半年間で【デザインを形にする】という段階はある程度クリアできるようになってきているのかな?というのがこの半年間の感想です。
コードを書くだけじゃなくって、納期のことや段取りのことを気にしたりと周りが見えるようになってきていて少し余裕ができてきたのかな?とも思ったり。
といっても納期が迫ってくるといつもてんやわんやで同僚には多大なご迷惑をおかけしてしまっていますが。
twitterを見ていると「半年で独立しました!」とか。「こんなアプリ作りました!」と、ものすごい成長スピードの方がいらっしゃいます。
そんな方に比べたら、「全然できるようになっていないな、、、」と思うこともあります。
が他人は他人です。自分自身ができることを毎日必死に頑張っていくことが一番。毎日一歩ずつ成長できるように継続することが今後の成長にも繋がっていきます。
転職できる前は独りで勉強していた時期もあって心配や不安の方が大きかったけど、もくもく会に参加したりしてモチベーションを維持できました。
「やりたい!」と思えたことを仕事として取り込むことができると、仕事の時間(約1日8時間)も楽しい時間になるから。
つらいこともあるけれど、楽しいことの方が多いです。少しでも一人前として活躍できるようになれるために、また明日からもコツコツと一日一歩でも前進できるように学び続けていこうと思います。
学べば学ぶだけできることができるWebの世界。次は1年経った時かな?半年後に読んで「懐かしい。成長したー」って思えるように。
勉強するから偉いんじゃなくって、勉強しないと置いてけぼりになってしまうから勉強してるんです。。
やればやるだけできることが増えて面白いから勉強してるんです。。
勉強してるってよりもゲームを攻略するためのレベルアップみたいな感覚なんです。。— nobu@Webエンジニア (@n0bu0810) November 8, 2018
・Web制作会社に転職する際に使った転職会社はこの4つ。
・30歳未経験はなぜWeb制作会社に採用された?担当者に聞いてみた
・【初心者】Webサイト制作を勉強するための参考書・参考サイト5選