実務体感!Webコーディング編

「自分が働いているイメージがつかない」というのは、未経験からWeb業界に入る人の大きな悩みの一つではないでしょうか。
インターンシップやセミナーで業界と会社の雰囲気は掴めるものの、実際に自分がどのような仕事に携わるのか想像しにくいですよね。

今回は「ひとつの案件」を舞台に、どのように仕事を進めていくかをフロントエンドエンジニア視点で具体的に紹介しようと思います。

▼こちらでは同じ案件をWebディレクター・Webデザイナーそれぞれの視点で紹介しているので合わせてご覧ください

実務体感!Webディレクション編

実務体感!Webデザイン制作編

架空の案件ではありますが、内容は出来る限り実際の仕事内容に近づけてあります。

  • これからWeb業界を目指す人
  • Web業界への就職を検討している人
  • 職種別の仕事を知りたい人
  • チームで仕事をすることに興味がある人

このような方は、ぜひ読んでみてください!

工数の確認

Webディレクター

A社から依頼が来ています。この作業内容だとどれくらいの作業工数がかかりますか?

Webディレクター視点はこちら
Webデザイナー視点はこちら

作業工数を算出するためには、「どのような機能を実装し、それはどの部分に影響するのか」という情報が明確になっている必要があります。
今回は「ニュースリリースにキャンペーンのお知らせ情報追加」という依頼を受けています。
言葉だけでなんとなくイメージがつくので問題なさそうに感じますが、実装においてはまだまだ情報が不足しています。

例えば、お知らせ情報を1件追加すれば、その要素分の高さが増えることになります。この場合は全体のレイアウトに影響がないかを調べる必要が出てきます。
また、運用のルールとして「トップページのお知らせに表示させるのは最大5件まで。古いものは過去分一覧ページに掲載する」というように決められている場合もあります。そのような場合、

  1. お知らせ情報を1件追加する
  2. 一番古いお知らせ情報を1件削除する
  3. お知らせ情報を過去分一覧ページに1件追加する

というように、単純に3倍の作業が発生することになります。

作業内容が軽微であればそこまで気にすることではないのですが、作業量が多くなればなるほど影響範囲も大きくなります。

新規の要素を実装する場合はブラウザやデバイスなどの実際の環境での検証作業が必要になる場合もあります。
代表的なところだけでも、「Google Chrome」「Microsoft Edge」
「Mozilla Firefox」「Safari」「Internet Explorer」に加え、PCは「Windows」「MacOS」、スマートフォンは「iOS」「Android」で検証が必要になることもあります。
機種ごとの画面サイズやタブレットまで含むと、検証作業だけでもかなりの時間がかかってしまうこともあります。
どの環境をカバーするかは案件によって異なりますが、検証作業の工数も確保しておく必要があります。

もし不明点や問題点があればWebディレクターに共有し、対策を考えましょう。

エンジニア

新しい画像が掲載されるので、見映えの調整が必要になりそうですね。
この作業なら確認含めて3営業日で出来ると思います!

Webディレクター視点はこちら

実装を行う時に気をつけること

Webディレクター

画像のクライアント確認が取れましたので作業をお願いします!
指示書と素材をお渡しします。

エンジニア

ありがとうございます。
テストアップが出来ましたら確認をお願いします!

Webディレクター視点はこちら

1.実装に取り掛かる前に

初めて作業を行う場合は、Webサイトの設計を確認しましょう。
職業訓練校やWebスクール等で学ぶ場合、最新に近い技術で勉強することが多いです。しかし、Webサイトの運用は5年、10年といった長期的なプロジェクトです。
10年前の技術ベースで設計されていて驚いた、というのはよく耳にする話です。(実際に私も驚いた経験があります)

また長期的なプロジェクトであれば、実装者が何人も入れ替わるということもあると思います。誰がやってもサイトの状態に変化がないように設計ルール(標準仕様)が定められていることがほとんどです。
今回行う作業にどのルールが適用されるのか、あらかじめ確認しておく必要があります。

2.実装中に気をつけること

実装では、何よりも人の手が入らないようにすることが大切です。
1文字違うだけで機能しなくなることがあり、更にミスに気がつけないまま公開してしまうと大変な事故につながってしまいます。
以下にいくつか、ミスが発生しやすい状況を紹介します。

マウスで操作をしてしまう

マウスは直感的に操作ができるので便利ではありますが、意図しない動作をしてしまう可能性があるので注意が必要です。
「1行分を選択したと思ったら、最後の句読点が抜けていた!」というのはよくあるミスです。

人の手が入らないように、できる操作はショートカットキーで対応するのがベストです。
ツールを使用したファイルのアップロードなど、マウス操作でしか対応できない場合は細心の注意を払って操作を行いましょう。

目視で確認してしまう

どんな簡単な確認でも、目視で行うことは危険です。先入観や慣れからミスを見落とし、発見できないままになってしまう可能性があります。
そんな時は、「差分比較ツール」を利用しましょう。

ソースコードや文章データはツールを使って機械的に差分を抽出することができます。
原本となるデータを必ず準備するようにし、作業が終わったら差分比較をおこないましょう。

(差分比較ツール例)
https://difff.jp/

全ての作業をまとめてしまう

複数の作業が発生している場合、作業の種類に応じて区切りをつけることがおすすめです。
「文章の追加」「画像の差し替え」「CSSの調整」といったように区切りをつけて実装を進めると、作業漏れや確認項目の見落としなどのリスクが減ります。
表示が崩れるなどのバグが発生した場合に、原因の特定がしやすくなるというメリットもあります。さらに、区切りをつけて作業をしたログを残しておけば、誰かに引き継がなくてはならない場合もスムーズになります。

エンジニア

テストアップを行いましたので、確認をお願いいたします!

Webディレクター

ありがとうございます。確認して問題なければ、クライアントに展開します!

本番公開に向けて

テスト環境での作業が終わったあとは、本番サーバーにアップロードするために、作業を行なった差分のみを抽出したファイルを作成します。
複数の作業が並行している場合は、間違ったものを巻き込まないように注意が必要です。

差分ファイルのアップロードはWebディレクターやエンジニアが行います。
アップロードが終わればすぐに確認作業です。今まで作業していた環境からファイルの移動を行うので、バグが発生する可能性があります。
事前に決められた検証範囲と検証項目に基づいて、確認作業を行なっていきます。
人的なミスを防ぐためにWebディレクターとエンジニアの2人体制で確認作業を行なったり、作業を行なっていない別の人が確認作業を行なったり、案件によってやり方は様々あります。

エンジニア

本番公開が完了しましたのでご確認をお願いします!

Webディレクター

ありがとうございます。確認して問題なければ、クライアントに展開します!

まとめ

今回は「ひとつの案件」を舞台にフロントエンドエンジニアがどのようなことを考え、どのような業務を行っているかをお伝えしました。
Webディレクター編Webデザイナー編と合わせてみると、チームがどのように動いているのか具体的に想像ができるのではないでしょうか。
仕事の現場に入ってみると、クライアントやチームメンバーとコミュニケーションを密に取りながら、案件を進めていくことになるでしょう。
この記事がこれからWeb業界にチャレンジする人の後押しとなると幸いです!

HTMLやCSS、JavaScriptの学習をしている方に向けて無料のコーディング課題をKROWLサイトで配布中!
難易度別に用意してあるサンプルサイトのデザインデータを元に、サイト制作のスキルを磨こう!

関連記事