【普通にホラー】 私が実務でフロントエンドを始めた頃の技術力について

*この記事は普通にホラーです。心臓の弱い方や気分の優れない方はご遠慮ください。
*“クソ”という言葉がクソ多いです。この言葉に抵抗のある方には、この記事を読むことをおすすめできません。
*今回のタイトルにあるフロントエンドは定義が曖昧な言葉であるため、この記事ではHTML、CSS、JavaScriptのコーディング+Webデザインを指すこととします。
*偉そうに記事を書いていますが、技術的なところや知識はまだ初学者に毛がやや生えた程度です。どうか攻撃をしないでください。
*もし誹謗中傷などの攻撃があった場合、もちろん僕は抵抗します。“拳で!!!”

注意書きを理解していただけた方のみ、この先を読み進めていってください

今回は私が実務でフロントエンドを始めた頃の技術力について書きます。

この記事を読むことで、主にWeb系企業への挑戦のハードルが、くるぶしまで下がったような錯覚を起こせます。

これから書いていく内容は結構恥ずかしいのですが、Web系の学習をしている方の励みにでもなれば嬉しい限りです。

では、早速。

事前の学習

まずは事前にどんな学習をしたかについてです。

私はとりあえずProgateをやっていました。

何をすべきかわからなかったのでHTML、CSS、JavaScript、PHP、Rubyなど全体的に色々触っていました。

とあるエンジニア界隈の方が「理解が100%じゃなくてもいい。わからないことは飛ばしてやれ!」といっていたので、恥ずかしながらすごく(85%以上)飛ばしまくりました。

ただProgateは正解のコードを書くまでは先に進めません。なので僕は回答コードを模写したり、コピペしていました。

本当にクソみたいな学習です。

そんなことをしていたら結局のところ何も理解していないし、自分で簡単なウェブサイトも作れませんでした。

headタグの中に何を記述すべきかもわからず、「HTMLエグ!!」とか思っていました。(ここは笑われるべきところです…)

WordPressを触る

そんなこんなであまり面白くなくなったので、なんとなくWordPressで筋トレ系のサイトを作りました。

収益は合計で2,000円ぐらい。一応アドセンスとAmazonアソシエイトの承認はもらっていたのでクソサイトではないと思います。

ここだけの話ですが、自分が紹介したものはあまり売れず、私の貼ったAmazonのリンクを踏んだお買い物での収益でした。

下品な話ですが、誰かさんのアダルトグッズ(紫のローター)の購入による収益も含まれていたことは、誰にも内緒です。

そう考えるとクソサイトだったのかも…ぴえん。

まあいいや。とりあえずここでWordPressを触りました。(後にこの経験が活きる時が来ました)

もうすぐ実務

そして時は流れ11月ごろ?ベンチプレス競技の大会も落ち着いたので12月からジョインすることになりました。

このままではまずいと思い、またProgateをはじめ、HTMLとCSSの理解をしようとしました。

あと買ってもらった本をマッハで読みました。

全体的にクソみたいな理解でしたが、自分の絵の販売サイトっぽいものを作成しました。(GitHubにコードを載せていたのですが、最近見返したら恥ずかしくなったので今は非公開です。)

そんなこんなで実務の時がやってきました。

事前の学習としては以上です。一旦5分間休憩してください。

実務スタート

はい、ここから後半です。

こんなクソみたいな学習をしていたので当然何もできません。

自分の書いたクソコードしか読んだことがないので、他人の書いたコードを読めませんでした。

index.htmlをコピーして、そのコードを参考にhoge.html(仮です)を作成してみてと、いきなり腕試しをされました。そして絶望しました。

display:flex;の理解がクソすぎてレイアウトは崩すし、svgタグが良くわからず、これはなんかのプログラムに違いないと思い、残していました。なのでずっとへんな位置にロゴがありました。

余談ですが、svg(スケーラブル・ベクター・グラフィックス、Scalable Vector Graphics)とは、jpegとかpngみたいな画像の一種です。ズームしても荒くならないので彼はいいやつです。よくロゴとかに使われる画像ぐらいの認識で間違っていないと思います。間違っていたら明日から1日だけ甘いものを控えます。

↑こんな感じのやつ。これはカメラのアイコンのフリー素材。

詳しく知りたい方はこちら

少し話はそれましたが、初日は絶望と恥ずかしさを感じ、なんだか惨めな気持ちになりました。

その後も理解していないことが多いので、​色々と恥ずかしかったです。

過去を思い出すいい機会なので、恥ずかしいことをいくつか挙げてみます。

恥ずかしエピソード

・position難しい!absoluteで消えるホラー現象。
・擬似要素とは?特にこれは難解。
・セレクトボックスの初期化と矢印作成に4時間!!
・なんでデザインが1400px以上あるの?私のMacは1400pxなんだけど
・Sassムズカシイ、ターミナルコワイ
・「すみません、Sassで書いても反映されません…(1時間経過)」→ただコンパイルしてないだけ笑
・「クラスの命名規則を学んでください」え、むず…BEMって妖怪人間じゃん。
・「全角入ってますよ。閉じタグないですよ。エラーチェッカー入ってますか?」→エディタを全然拡張していない
・CSSの記述順がクソ
・他のページのレイアウトが崩れる→自分の都合で勝手にクラスをいじりまくり。
・いらないと思ったコードをコメントアウトではなく一括削除したらオワタ。泣きそうになった。Gitに感謝した。Git愛してる。
・コンポーネント化してあることを知らない。既存のコードを使い回さないから記述量が半端じゃない。なんでも自分で1から作ろうとする。無駄な努力家
・全部の画像にalt入れない。alt入れたら独特の入れ方と言われた…
・なんでもwidthやheightを指定する→レスポンシブできない、要素が頻繁にはみ出る
・「トップページをもとに下層ページのデザインを作成してみてください」→「できました!!」→「あの、関係ないところのデザインがずれているので、余計なところは触らないでください」→AdobeXDむずい…

全部本当の話です。

もっとありますがこのぐらいにしておきます。もし共感できるところがあったら嬉しいです。

私の実務開始時はこんなにも酷かったです。技術もクソもありません。

笑いたければ笑ってください。では次にいきます。

現状は?(参考までに)

実務を始めてから半年ちょい経ちました。参考までに現状を紹介します。

現状をとしては、表現するのが難しいですが、自社サービスのフロント部分のコーディングを1から任せていただき、少し訂正が入るぐらいで、以前のようにコードが全消し、あるいは大幅修正がなくなったと思います。

HTMLは?

HTMLに関しては、会社としてやっていることなので、もちろんセマンティックにマークアップすることが求められます。(この言葉を使ってみたかったです)

ただ表示するだけは誰でもできます。HTMLは簡単そうですがSEOとか考えると複雑なので難しいです。まだまだ学習が必要そうです。

CSSは?

最近いい感じのCSSの記述がわかってきました。これに関しては別の記事で。

また、私が働いている企業の案件では、基本的にIEに対応させているのでなかなか難しいです。いちいちJS書かないといけないし、IEキライ。

JavaScriptは?

んー、素のJSってあまり使ったことないですね。jQuerryに依存してしまっています。いいんだか悪いんだか。

最近はjQueryで機能を追加したり、ライブラリで機能を追加し自分でカスタマイズできるようになりました。

これができると割とリッチなフロントは作れますね。ただ実装に時間がかかってしまうのが課題です。

Qiitaに記事があれば比較的早いと思うのですが、なかったらかなり躓きます。

以前slickをカスタマイズしたときに、どうしてもいい参考記事が見つからず、4時間ほどかかってしまったのでまだまだカスだと思います。もっと勉強します。

これから

これからは、PHPを触らせていただくので、より一層学習が必要そうです。頑張ります。

PHPの学習はProgateとUdemyでざっとやりました。コンタクトフォームとショッピングサイトの管理画面と販売ページ、従業員の登録画面を作成しました。

そしてLaravelに手をつけました。しかし、MVCモデルとかよくわからないので難しいです。

なので一旦WordPressに逃げました。ただWordPress案件は多いので実用的なスキルだと思います。

このブログを拡張しながら学びを深めたいです。

まとめ

ここまで私の恥ずかしいエピソードを交えながら、実務前の学習、それから実務でフロントエンドを始めた頃の技術力について書きました。

振り返るとこんなクソなやつを雇って丁寧に指導してくれた今の会社には感謝しかないです。

私は実務にいきなり入って、恥ずかしい思いをたくさんしましたが、その分たくさんのことを学び、わりと成長しました。

この経験から自分ができないことでも、それなりの時間をかけ、情熱を注げたらきっとなんとかなるということを、身をもって学びました。

どんなこともはじめは初心者、初学者なので、自分のバックグラウンドに囚われず、なんでもやってみたら人生はいい感じかと思いました。

この記事を読んで何かに挑戦する勇気が出てきたり、ウェブサイトやウェブサービスを作りたい、ITいいかもと感じた方がいれば嬉しい限りです。

以上です。最後まで読んでいただきありがとうございました。