• 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

ひよっこエンジニアの自分が、今後数多のWeb制作を通して成長していく過程を綴っていきます。ひよこのサイト航海日誌

2020年9月11日(金曜日)  (田中 紀輔)

コーディング時に意識すべきこと

「サイト航海日誌(公開日誌)」ということで、
ここ数ヶ月で2つのサイトのコーディングに携わらせて頂いた中で
気づいた点を共有させて頂きます。


——————————————
目次
1スケジュール感の把握
2デザインの全体像を意識する
3躓いた箇所はメモしておく

——————————————


1スケジュール感の把握


納品までの工程で、コーディングというのは一部分ですが、
コーディングの工程だけ考えて作業していると、自分が担当するページの優先順位がずっと分からず、後工程とのやり取りがスムーズに行きません。

例えば、お問い合わせフォームの仕組みなどは、コーディングだけでは作れません。
裏側のプログラム実装が必要です(実装の分量も多い)。
つまり、お問い合わせフォームは作業優先順位がかなり高いです。

基本は上司から的確な指示があるので考えなくても大丈夫だったりしますが、
普段から自分で考えることを意識してやらないと、いつまでたっても仕事を回せないままで終わってしまいます。

これはコーディングだけでなく、すべての仕事でも言えることではないでしょうか。
そういう基本的な部分は、Web制作も同じだと思います。




2デザインの全体像を意識する


デザイナーさんからデザインカンプ(設計図)を頂いたら、一番最初に全体的にページのデザインを確認するべきです。
目的としては、各ページでの共通部分を把握するためです。

ですので、共通部分のCSSは基本まとめて一箇所の記述で終わらせる方が良いかと思います。
そうしないと、その分何回も繰り返して記述しなくてはいけなくなります。

もしかしたらここで、「コピペすれば一瞬で終わるじゃん」と考えた方もいるかも知れません。
しかし、あとからこの部分を修正したり、追加や削除する箇所が出てきたときに、その複製した回数分記述量が増えますし、
数が多くなりすぎると修正箇所を管理できなくなります。
もちろん、別の方が後からコーディングするときにもかなり苦労させてしまいます。

それらを回避するためにも、「後から追加/修正が出る」前提でCSS設計したほうが、
かえって全体の作業時間が早くなります。




3躓いた箇所はメモしておく


コーディング作業が完了して「やったー」と思うのもつかの間、
納品前の最終段階では、実機(スマホ・タブレット)を実際に使ってみたり、各ブラウザで見てみたりとテストしなければいけません。

その際に、予想もしなかったエラーが出てきます(safariやIEで見たら表示がおかしい、スマホだとAndroidとiPhoneの表示が異なるなど)。

これらのエラーはその都度解決していくことになるのですが、その際は必ずメモを取っておいたほうが良いです。

なぜかというと、普段コーディング作業をやってる時に起こるエラーは、何回も修正対応することによって知識に定着しやすいのですが、
テスト段階のエラーは、経験することが少なく、すぐ忘れてしまうので、1回経験した記述の修正は必ず「Boostnote」などにメモしておいて、
次回のコーディング時にすぐ対応できるようにしておくのが、後々困ることが少なかったりします。


以上、コーディング作業の中で気づいた点でした。

AliveCastIPのみ表示されます

OK

管理側

残り

javascript css html VIEW側

php matchルーチン