初めてのWebサイト開発は体内時計が狂うほど大変だった件

システム開発
初めてのWebサイト開発は体内時計が狂うほど大変だった件

入社3か月目にしてWebサイト開発の案件に携わりました。

何もかもが分からないという状態からは脱していましたが、実力はまだまだ。研修でRubyを中心にHTMLやCSSなどを1か月程度学習し、その後の案件でJavaを少し書いた程度。一からモノを作っていくというのは未経験でした。

そんな私にWEBサイト開発という案件が舞い込んできたのです。一体どうなる!?

WordPressならプログラミングそんなにしないですよね?

「こんなヒヨッコがWebサイトの開発!?」

正直不安でいっぱいでした。研修もありましたし、マスタメンテナンスを行うJavaプログラムを組む案件を多少経験しはしましたが、プログラミングの知識はまだまだです。

一からサイトを作るとなると、もう何をやったらいいのか見当もつかなかったのです。

ただ、不安の中にも少し安心感といいますか、安堵感といいますか、何かそういったものはありました。

というのも、WordPressを利用することになっていたからです。WordPressはブログなどではよく見かけるCMSで、私自身ブログを書いていた時期があり似たようなものだという期待がありました。

「WordPressならプログラミングをそこまでやる必要もなさそうだな」

余裕

不安の中にも根拠のない自信があったのは否定できません。

油断大敵

WordPressでのサイト開発が始まってすぐに気づきました。

「意外に覚えることが多い・・・(汗)」

困った

慣れてしまえばなんてことはないのでしょうが、私にとってWordPressを触るのは初めて。あれ何?これ何?と疑問だらけです。

いやあ、すごいですよねWordPressって。カスタマイズできるところがたくさんあって、想像以上に細かいところまでいじることができたのは少し感動しました。

ただ、どれが重要でどれがそうでもないのかの区別もつかないわけでしたので、使い方を覚えるのにも一苦労しました。デザインテンプレートであるテーマがかなり重要だということに気づいたのは、WordPressを触り始めてからだいぶ経った頃でした。

プラグインに関しても「何それ?」状態でした。

それでも、多種多様なプラグインによって、単なるブログサイトがマウスポチポチしていくだけで、様々な機能を備えた本格的なサイトになっていくのは面白かったです。

やっぱりプログラミングが必要

しかし、ある日気づきました。

「これ、プログラミングしないといけないやつだ」

困った

プログラミングしなくてもいけるとタカをくくっていた自分が恥ずかしい。

そうです。お客さんの要望に応えるためには、WordPressといえどプログラミングをしなくてはなりません。というより、WordPressの案件でプログラミングしないなんてことはありえないのかも。

邪魔し合うプラグインたち

プラグインの微調整のために、プラグインを提供している公式サイトのドキュメントを読みながら頑張る日々。PHPを触るのも初めてでしたし、独特な記述の仕方をするのに戸惑いもしました。

ただ、それだけならまだ良かったのです。

色々苦労しながらなんとか必要な機能を揃えつつあったある日、それは起こりました。

「あ、ログインできない」

サイトにログインして開発作業を行えなくなる、という事態が発生したのです。

完全に手出しできなくなってしまったこのサイトが、プラグインの動作確認用のテストサイトだったのが不幸中の幸いでした。

その後も、WordPressとの格闘は続きました。

  • リリースされているプラグイン自体の不具合
  • 必要な機能が実装されていない
  • 無料版での限界
  • あるプラグインが、他のプラグインやサイトの動きを邪魔する

方針変更

そして最終的に、ある判断が下されました。

「独自でやろうか」

頑張れ

「!?!?」

驚き

Webサイトって作るの大変!

さあ、いよいよ大変になってきました。PHPも初めての私が、一からWEBサイトを作っていくことになったのです。

また新しいことが次々とやってくる日々の始まりです。

処理は1つ1つ丁寧に

これまではWordPressで実現できていた機能を、今度は一つ一つ実装しなくてはなりません。

先輩や他メンバーの助けを借りながら外部設計と内部設計を終えると、いよいよコーディングです。

しかしといいますか、やはりといいますか、エラーが出てきますね、たくさん。

  • 変数が空っぽ。
  • SQL構文が間違っている。
  • 条件がおかしい。

ありがたや、デバッグ機能。処理途中の変数などがばっちり見れるのは、自分の間違いが明白になって恥ずかしいですが、ありがたさが圧倒的に上回ってます。
もしデバッグできない環境だったら・・・。考えるだけで恐ろしいです。

コーディング時でもそうですが、設計段階で間違いに気付けるようになりたいです。

意外に多い!Webサイト開発で使う言語

開発するサイトは会員制機能がありますので、データベースを使います。

SQLを初めて使ったのですが、なかなか大変でした。何度SQL構文を間違えたことか。

しかし、それも次第に慣れました。何がエラーの原因なのかも段々分かってきました。ここで恥ずかしながら少し慢心します。

「もしかしたらPHPとSQLに慣れてきたかもしれない」

余裕

JavaScript登場

そのようなことを思っていた矢先、

「ここJavaScriptでの入力チェック必要だね。やり方わかる?」

「分かりません!」

困った

Webサイト開発には、たくさんの言語が関わってくるのですね。PHP、SQL、JavaScript、HTML、CSS・・・。外部APIを利用する時はjQueryも使いました。

正直「覚えきれませーん!」と絶望しかけていたのを覚えています。

ただ、プログラミングについての理解は深まりました。サーバー上で動く言語ではRuby、Java、PHPに触れてきましたが、記述の仕方でいえばJavaScriptもこれらに近いと感じました。

また、JavaScriptはサーバー上ではなくブラウザ上で動くということも今回の案件で理解できました。

WordPressから独自のサイト開発にかじを切ったことで、結果的に勉強になりましたね。また再びWebサイトの案件に関わる時までに忘れてしまいませんように!

デザインが一番厄介!?

ひいひい言いながらも、かろうじてPHPやJavaScriptで必要な部品は作り上げることができました。

この時点で多少達成感を抱いていたことは否めません。しかし、最後にして最大の課題が残っていました。

デザインです。

Webサイトを見てもらえるかはここにかかっています。また、PC版・スマホ版などデバイスごとの対応もしなくてはなりません。

ただ幸いなことに、顧客からデザインを頂けることになっていました。なので後はコーディングだけ。のはずだったのですが・・・

うまくいかない!

怒り

思わぬ刺客、CSS!

ブラウザで見てすぐに変なところが分かるのは良いのですが、それが逆にうれしくない場合があるのです。

PHPやJavaScriptの場合はデバッガでどの変数に何が入っているのか分かるのですが、CSSの場合は今一つ分かりにくいのです。

ある箇所であるCSSを適用したHTML要素に対して、別の箇所の別のCSSが影響を与え、さらにまた別の箇所の別のCSSが別の影響を与えて・・・もう何が何だか分からなくなってきます!

プロパティの定義を正確に把握していないことも問題でした。ブラウザでチェックして「あ、できてるできてる」とスルーしていたものが、実は完全に意図通りでないこともしばしばありました。見てすぐ分かる、というのはありがたいようなありがたくないような感じですね。

この問題が顕著に現れてきたのがレスポンシブデザイン対応の時です。

「できたー」

画面サイズを変えてみる

「うっ、型崩れしよる・・・」

これの繰り返しでした。永遠に終わらないかと思いました。

その場限りの微調整をするのではなく、しっかりと理屈を知ってやる必要があるとしみじみ実感しました。そしてそれがなかなか厄介だったのです。

今回参画してみて

今回の案件は

「大変だった」

この一言に尽きます。

何もかもが初めてだらけの数か月。WordPress、プラグイン、PHP、データベース、デザイン・・・。もがいてもがいてもがき続けました。

風のうわさ程度に聞いていたリリース前の追い込み、というものもしっかり味わいました。(できれば味わいたくはないですが)

ただ、独自でサイトを開発する路線になってから、モノを作っていくのは思ったより楽しかったです。

PHPやJavaScriptなどで処理を組む際、エラーを出しつつもどこでどうエラーが起こっているのか読み解いて、「ならこれでどうだ」と修正したものが狙い通りに動いてくれた時には、心の中で小さくガッツポーズしたりしましたし、デザインをいじっている時も、どのようにしてラフ通りのデザインを実現しようか思案するのも楽しかったです。

嬉しい

楽しかったのも相まって、時間が経つのは恐ろしく早かったです。確実にあの頃の自分の体内時計はバグを起こしていたと思います。

終わりに

最初から最後まで大変続きでしたが、学ぶこともたくさんありました。案件が始まる前の不安で仕方なかった時よりは少し成長できた気がします。

これからも大変なことがあると思いますが、今回のことを次の成長へつなげていければと思います。

最後に1つ。

Internet Explorerをお使いの方が、可及的速やかにChromeを使い始めますように。