今回のイベントでは株式会社nehan様のWebサイト( https://nehan.io/ )を制作したエンジニア2名が、Webサイト制作における実務での考え方や気をつけるべきポイントを語りました。
Webサイトならではの更新や拡張の容易さ、実務で意識すべき納期や予算など、クライアントワークにおけるリアルな現場感も交えてのトークは、これからWeb業界でチャレンジしたいと考えている方に参考になる内容だったのではないでしょうか。
本記事では8/8(木)エンジニアが語るWeb制作実例／株式会社nehan様Webサイト制作事例のレポートをお届けします。
（※登壇者の意図が伝わりやすいように、一部編集しています）
技術選定の重要性。jQueryやWordPressは本当に時代遅れなのか！？
「さっそくですが、今回使用した主な技術についてお話します！」
そういって話を切り出したKROWLのフロントエンドエンジニア『たくみ』です。
今回は、株式会社nehan様のWebサイト制作で使った技術の中でも下記についてお話しました。
- WordPress
- Docker
- jQuery
まず、jQueryとWordPressについて簡単な説明からスタート。
jQueryはブラウザ上で動くプログラミング言語であるJavaScriptを簡単に書けるようにしたもの。
WordPressは主にブログシステムを含むWebサイトを簡単に作るための仕組み。
そしてこれらの技術にはある共通点があるとのことでした。
一部では「時代遅れ」「オワコン」といった声が上がっている
！！！？？？
なんと、衝撃的なセリフが飛び出してきました。
試しに「WordPress 時代遅れ」で検索してみると、「使わない」「やめた」「オワコン」「古い」…
なるほど。確かに時代遅れのような扱いを受けているというのも事実のようです。
では、WordPressを使わないとなると、ブログはどうやって作成するのか？
と。確かにその通りですね。
その答えのひとつとして、Headless CMSと呼ばれる「ブログの管理画面と記事データの保管場所だけ持ったWordPressのようなもの」という仕組みが昨今の流行りのようです。
気になった方は検索してみてください。
そして話は本題に入ります。なぜそれでもWordPressを使うのか。
（Q-Success社が運営するW3Techによると、世の中の34%のWebサイトにおいて使われているようです）
時代遅れだとかオワコンだとか言われていたとしても使うべき理由がそこにはちゃんとあるようです。
その答えとしては超簡単。合理的だからでした。
３つの例で説明がありましたのでみていきましょう。
- 利用料金がかからないこと
先に挙げたHeadless CMSはほとんどがサービスとして展開されており、一定の範囲を超えると利用費がかかります。それに対してWordPressは無料で使用できます。 - 親切設計のエディタとわかりやすいUI
WordPressは、ブログ初心者でもわかりやすいエディタが売りのひとつです。クライアントの中にはこういったシステムに慣れていない方もいらっしゃるので、管理画面（ブログの編集画面）にもわかりやすいUIが必要です。 - プラグインが豊富
「ここを更新できるようにしたい」「人気の記事を上に表示したい」「お問い合わせフォームを設置したい」といった要望があった場合、大抵はプラグインをインストールすることで解決できます。こういった機能はゼロから作成するよりもプラグインに任せるほうが効率的な場合があります。
以上の3点が合理的といえる理由でした。
だからといって全てのWebサイトをWordPressで作るべきというわけではありませんが、今回のようにブログ機能を有した一般的なコーポレートサイトの場合であれば非常に現実的な選択肢と言えますね。
次にjQueryについて話は進んでいきます。
WordPress同様にjQueryも「脱jQuery」「jQuery必要ない」と言われているようです。
じゃあどうすればいいんでしょう。素のJavaScriptを書くんでしょうか。
その答えは、“フレームワーク”の台頭です。
一部が例として挙げられましたが、たくさん存在していますね。
では、なぜ今回の案件ではjQueryを使ったのか。
ページ右下にある「ページトップに戻るマンボウのボタン」を例を挙げ、VueとjQueryそれぞれで書いたコードを比較しましょう。
一目瞭然ですね。jQueryの方がはるかに記述量が少ないことがわかります。
ここで、勘のいい方なら疑問を感じると思います。
じゃあ全部jQueryでいいのでは？
ではなぜ全てjQueryにしないのでしょうか。
これについては「そもそもJSフレームワークとjQueryでは役割が違う」という話がありました。
※口頭での説明に適した形の図をそのまま掲載しています
この記事で全てお伝えすることが難しいので重要なところだけ切り出しますが、大まかに言うと
- JSフレームワークはHTMLの構造を制御するのに適している
- jQueryはひとつずつのHTML要素を制御するのに適している
ということだそうです。
画面上に存在しているパーツがそれぞれ密接に連携しあって動くようなものはJavaScriptフレームワークを使った方が適しているけれど、今回のような「このボタンをクリックしたらページトップにスクロールする」であればjQueryで十分とのことです。
今回挙げた昔ながらな技術、WordPressとjQueryについてですが、
いずれも「かなり前からある」「世界的に有名」という共通点が挙げられます。
つまり様々な案件で使われている実績があり、それはもし開発中に何かしらの問題に直面した時、解決策が見つかりやすいということになります。
また、クライアントは「モダンな技術が使われたWebサイト」が欲しいわけではありません。納期と予算の範囲内で出来うる限りの成果物、そして今回のようにブログシステムが入る案件であれば、その使い勝手が良いものを求められます。
開発者としては新しい技術を使いたい気持ちもありますが、「お客様が本当に必要なもの」が何であるかという視点はきちんと持っておかなければいけません。
仮想環境構築「Docker」とは？
さてここからは「モダン（今風）」な技術の話に変わります。
みなさんはDockerをご存知でしょうか。
重要なところだけ簡潔に話しがありましたが、詳しく知りたい方は、
ご自身で検索してみてください。
今回の案件で使ったWordPressは、PHPというプログラミング言語で作られているため、PHPが動くことがまず第一の条件になります。また、ブログの記事データなどを保管するのにMySQLというデータベースシステムも使っています。（細かく挙げれば他にも必要なものがありますが）
開発を行うコンピューターにこれらをインストールするところが、今回のスタートになります。
しかし、時期によっては複数の案件の開発期間が重なってしまうことがあり、全ての案件で同じバージョンのPHPやMySQLといったソフトウェアを使えるわけではありません。
本番環境で動作しているものと異なるバージョンのソフトウェアをインストールした状態で開発を行った結果、「開発中では動いたのにいざ公開したら動かなかった」ということが起こらないとも限りません。
こういった場合においては、DockerでPC上に仮想環境を構築し、そこに案件ごとの領域を作ることで、異なるバージョンのPHPやMySQLをインストールして開発を進めることができるということです。
「開発作業は可能な限り本番と同様の環境で行う」ということは、近年のWebサイト制作においてはもはや常識となりつつあります。複数の案件が同時進行しているとき、案件ごとにいちいち環境を作り直すのはとても非効率なのでこういった技術を使い、効率的且つ合理的に開発が行えるようにしています。
技術選定まとめ
- 古い技術＝悪ではない
- 新しい技術は必要な箇所を見極めて使う
特に新しい技術は情報が少ない分、学習にかかる時間や問題に直面したときの解決できるまでにかかる時間が、昔ながらの技術のそれに比べて多くなってしまうことがあります。「本当にその技術が必要か」ということをしっかり考えて導入することが大事です。 - 世の中のWeb制作会社はまだ割とjQuery使っている
- 世の中のWeb制作会社はまだ割とWordPress使っている
- （未経験からのチャレンジについて）ReactとかVueとかは使えなくても就職できる
もちろん使える方がいいですが、使えないとエンジニアになれないのかと言うとそんなことはありません。使えるとしても「本当に使うべきか」を考える必要は常に考えないといけません。
デザインカンプからでは読み取れない「アレ」を考える
「マークアップとは外側（未来）を見る仕事である」と、話を切り出したKROWLのフロントエンドエンジニア『くめ』です。
なんかかっこいい話が聞けそうな予感に期待が高まります。
まずはじめに、サイト制作におけるマークアップ領域の実装とは具体的に何をすることなのかという話から始まりました。
「デザインカンプを再現すること」自体はものすごく大事ですがそれだけではないとのこと。
では発想を変えて、実装においてデザインカンプの再現以外にやらなければいけないことってなんだと思いますか？
同じ案件を題材にして行われた前回のイベントの中で紹介したクイズを例に、画面のサイズを変えた時の挙動など「デザインカンプを見ただけではわからない部分」があることを紹介していました。
確かに画面のサイズやユーザーの動きというのはデザインカンプだけでは判断できないですよね。
今回は実際のサイト制作においてデザインカンプの再現以外で気をつけたポイントをピックアップして解説してもらいました。
一見、普通のページネーションに見えますが、この情報だけではわからない点があります。
それはページが増えた時の挙動です。
確かにブログですもんね。デザインは4ページのようですが、常に変動します。
その場合、横にどんどん数字を増やしていくのか、ある程度多くなった際に点などを使って省略するのかなどを決めるそうです。
実際にどの方法で実装したのかをクイズ形式で説明していました。
参加されたみなさんも普段様々なサイトを見ているだけあってなかなか高い正解率でした。
次の例はブログの記事ページです。
デザイン上では既存の記事を元に作成したようですが「最低限、ブログとして成立するようにする」にはたくさんの要素を実装しなくてはなりません。
普段、何気なく見るブログの各要素もこのように細かく実装していたんですね！
今回は右下のコードブロックなど特殊な要素もあったのでチームのみんなと話し合って各要素のスタイルを確認しました。
案件ごとに要件は様々ですが、
- 普段からどのような要素が使われているか
- 一般的なブログ構造の知見
- サービスや商品の理解
などに目を向けることでこのような対応や提案ができるようになるとのことです。
次はブログから離れてグローバルナビゲーションです。
先ほどまでのWordPress特有の動的な要素ではなくHTML・CSSだけの静的なサイトでも非常によく見かけるものですね。
こちらはブラウザの開発者ツールや動画にして実例を確認しました。
要素の内側に余白をつけることでクリックの範囲を広げているとのことです。
普段何気なく使用するこのようなリンクにも工夫が隠されているんですね。
やろうと思えば上下にもクリック範囲を広げたり、もっと細く計算して出すこともできるんですがそこは工数や予算との兼ね合いです。そこばかりこだわってサイト制作が進まなかったら本末転倒ですしね。
工数や予算など実案件ならではのお話しも聞けてよりリアルな現場感を感じられますね。
この技術に関してはみなさんもすぐに活用してほしいポイントとのことです！
最後はスマートフォンのグローバルナビゲーション。
スマートフォンで横向きにした時の挙動について紹介していました。
今回の案件はPCとスマートフォンの2つのサイズを基本として進めていたとのことですが、要件以外のサイズで見たときも要素が見えなくなるということがないようにスクロールできるよう実装したそうです。
イベントに参加されたみなさんもご自身のスマートフォンで確認しながら聞けたので非常にわかりやすかったのではないでしょうか。
最後に、このKROWL MAGAZINEで掲載しているWebエンジニアとは？仕事内容〜年収まで徹底解説！という記事の中で「フロントエンドエンジニア」について書かれていることを例に上げ、今回のことを踏まえて違う表現をしていました。
ユーザーが実際に使っている様子を想像したり、デザインカンプのその先を読み取り
「見た目の実装」はもちろん「ユーザーが触れる箇所全て」まで、
「見えない部分も作る」のがフロントエンドエンジニアである！(ﾄﾞﾔ
このような部分も考えてこそのフロントエンドエンジニアなんですね！
質問タイム・交流会
Q.今回紹介していただいたJSフレームワークはどのようなサイトで使用するべきなのでしょうか。
入れようと思えばどんなサイトにも入れられますが、アプリケーションっぽいものに使われることが多いですね。有名なところだとTwitterとかnoteとかで使っていたと思います。
Q.(jQueryは現場でもまだ使用しているとのことですが、)それ以外に何か勉強するとしたらどのような技術が良いですか？
使いこなせるまでいかなくてもいいですが、「タスクランナー」とか「メタ言語」と呼ばれる類のものに触れておいて、どんなものかなんとなく把握しておくといいですね。
現場によって求められる技術が全然違うので「何を勉強するか」より「何をしたいか」を考えてからそれに対して学習を進めていくのがいいかと思います。
Q.(デザインカンプでわからない部分を実装で考えると言っていましたが)どのようなデザインカンプなら嬉しいですか？
例えば要素間の余白が一定の法則で空けられているとかデザインの意図していることが読み取れるようなものだと、今回お話したようなエンジニア側で考えなきゃいけないところも対処しやすいので嬉しいですね。
Q.nehanさんのHPで、PCサイズだとマンボウが震えながら上昇していきますが、モバイルだと動かないのはなぜですか？
あくまでもオプショナルな演出であるっていうのと、nehanさんのお客様は法人の方で、一般的なWebサイトよりPCで閲覧している人の割合が高いでしょうから、納期と工数を考えてスマホ版の実装は省略しました。
質問タイムが終わったあとは自由に交流会。
飲み物を片手に、エンジニアの2名やKROWLメンバーとご参加いただいた方同士でざっくばらんにお話いただける場になりました。
質問も絶え間なく、もっと時間があればいろいろ聞きたかったと言っていただけるほどの大盛況！
今回も、Web業界への転職を目指されている方や、現在Webのプロとして活躍している方など、様々な方にお集まりいただきましたので、業界や職種関係なく気軽に情報交換ができたとご好評の声をいただきました。
KROWLでは他にも様々なイベントを開催しているので、今回参加できなかった方も他のイベントを是非チェックしてみてください！
