コーディングのプロが教えるプロに近づく最強勉強法【HTML・CSS編】

最近こういった記事を書く際は開発のエンジニアの方だったり、それに興味がある方に向けて、pythonやrubyやjavaだったり、インフラ系の話を書く事が多かったのですが、元々株式会社レベルスは前身の会社から含めて、WEB開発、WEBサイトの構築、WEBマーケティング、SEO、広告などを長きにわたり手掛けています。現在はSES事業(システムエンジニアリングサービス)も行っていますが、本業と言われるとWEB制作・開発です。当然社内にはエンジニア・デザイナー・コーダーがおり、日々WEB領域の事業も手掛けています。

今日はHTMLとCSSのいわゆる“コーディング”と言われる部分をまだあまり経験がない人に向けて、最強最速の勉強方法を社内の敏腕コーダーに聞いてきましたので、現在勉強中の方は参考にして下さい。また社内の研修会のやり方も最後にまとめていますので、興味がある方はぜひレベルスまで！

WEBサイトのコーティングは他の開発言語とは少し異なり、HTMLやCSS、Javascriptを使って、デザイン通りになる様にコードを書いて、ブラウザで表示が可能な状態に整えていう事を差します。最近だと管理や構築がしやすいWordPressのCMSを導入する事も多いですし、コーディングの品質がSEOにも大きく影響を及ぼすため、WEBサイトの最重要項目とも言えるかもしれません。

コーディングスキルは模写で学べ

ある程度基礎的な勉強が終わっている方にオススメなのは「徹底的に模写」する事です。レベルスのコーダーも模写する事で大枠が掴めて、添削を繰り返す事でスキルや実務的な構成が理解できる様になったと言っています。また模写をする事で普遍的なコーディング、SEOに強いコーディングや流行りのつくりなど多くの物が見えてくると思います。

1.コーディング模写

【1】ソースコードは見ない

模写をソースコードを見て、まるまる作れば同じのが出来ますが、それでは全く意味ないです。ソースコードを使わずに知識を結集して、構成をイメージして作っていきましょう。

【2】時間を決めてやる

プロに近づくという名目ですから、当然プロには仕上がりのクオリティはもちろんですが、スピードも求められます。いくらいい仕上がりでも、想定以上の時間がかかってしまっては価値は半減してしまいます。お金は対価に対して支払われます。同じ時間で同じクオリティのものが倍できるのであれば、その価値は倍以上になります。プロとして活躍する事を目的とするならば、タイムマネージメントも頭に入れて、模写もやってみましょう。

【3】チェック作業を行う

もちろん終わった後はしっかりとチェックを行う事が大事です。このチェックをしっかりやらないと模写をした意味すらなくなってきます。「レスポンシブ対応はスムーズか」「タグに不備はないか」「構成はおかしくないか」「動きはおかしくないか」「JavaScriptやマースオーバーは問題ないか」確認すべき点は数多くあります。またここで詰まった所やわからなかったところは実際のソースコードを見て、直してみる事をおススメします！模範サイトを見たうえでわからない事を整理して、苦手部分を潰す事が大事です！！

最初の模写はテキストベースのものを選んで、徐々に慣れてきたから動きのあるサイトを選んで進めていけばいいと思います。スキルにあまりに見合わない模写はやる気をなくすだけです…。あとはサイトのバリエーションを意識して変えていく事で、コーディングの幅が広がってくると思いますから、最初のサイト選定も意識的に知識が広がる様にしてみましょう。

2.レベルスのコーディング勉強会

もちろんレベルスでもHTMLやCSS、JavaScript、JQueryを使ったフロント側の業務で活躍してくれているエンジニアの方がいます。SESで案件ごとに活躍をしてくれていますが、常に勉強をする姿勢は大事ですよと話していますから、社内のコーディングの経験豊富なスタッフが週に1度勉強会を開催しています。これも基本的にはコーディング模写を元にして、進めています。

毎週ごとに経験が浅いエンジニアで希望者には、コーディングの課題を持って帰ってもらっています。現在の業務もありますから、毎日少しずつ進めて、次の週に報告をして、添削しながら改善をしていきます。

【1】気づきで成長スピードを早める

どうしても自分が作ったものの評価は自分でするのと、他人がするのでは全く異なります。自分の作ったものはどうしても主観的になりがちなので、客観的な判断を勉強会に出ている全員で行っています。
その為に、1つ1つ丁寧に見ながら他人の作品や仕事を見る事で自分への気づきが必ず生まれますし、他の人との競争やより良いものを作ろうとする意欲が高まり、1人でやるよりも成長スピードを高め合えるという好循環につながっています。

【2】勉強の習慣をつける

まるで小学生に話す様な事かもしれませんが、エンジニアは一緒勉強の仕事。仕事の後に少しでも毎日課題に向かう習慣をエンジニア歴が浅いうちからつける事で、最終的には勉強する習慣が身に付き、勉強をする事が当たり前のマインドが生まれます。それが最終的にはエンジニアとして一線で活躍する大きな力となります。

【3】コミュニケーション能力を高める

WEB制作においては、クライアントの要望、システムサイドの考え方、ユーザーの使い勝手などあらゆる折衝をする場面が当たり前の様に出てきます。レベルスでは活発な議論や生産性があり熱量のある議論が出来る環境を作る為に勉強会を行っている側面もあり、自分の考えを伝える、そして相手の話もしっかり聞く。コミュニケーション能力の前提をしっかり身につけると事は最終的にエンジニア自身の価値を高めるものになると考えています。

3.まとめ

WEB制作においてはクライアントやユーザーが満足をする使い勝手がいい、UIやUXがしっかり作り込まれているなど、どこを向いてコーディングやデザインをしていくかが大事になります。フロントエンジニアを志す方にとっては、相手からヒアリングをしっかりする力、相手から話を聞き出す力も重要になります。それもあって、レベルスでは制作・議論をするという工程を加えて、技術以上のプラスオンを身に着けてもらえる様に研修や勉強会を工夫しているつもりです。自由闊達な雰囲気で毎回開催されてるので、興味がある人はレベルスに縁もゆかりもなくても、覗きに来てみてください！

またレベルスはHTML・CSS・JavaScriptを使ってWEBサイトを作る事が可能な方を随時募集しております。
エンジニアさんそれぞれの希望や要望に合わせて、最適なプロジェクトで活躍して頂ける様に心がけています。
今の会社の待遇に満足できない、仕事での成長スピードを高めたい、将来経営者になりたい、そんな方はぜひレベルスで活躍して下さい！