コードへのこだわり

セマンティックとは、意味論的なという意味です。つまり、セマンティックなHTMLコーディングとは、HTML要素が持つ意味を理解し、意味合い通りにHTMLタグを使うことを指します。例えば、見出しにはHタグ（H1〜H6）を使い、段落にはPタグを使う、リストにはLIタグを使うなど、コンテンツのごとの役割を理解し、相応のHTML要素として記述、コーディングを行っています。セマンティックなHTMLコーディングを行うことで、Webサイトの構造が理解しやすくなり、検索エンジンにも好まれるWebサイトになります。

弊社ではHTMLの開発にテンプレートエンジン（PUG・旧JADE）を採用しています。テンプレートエンジンとは、HTMLの記述を簡略化し、効率的にコーディングを行うためのツールのことで、HTMLの記述を簡潔にし、可読性を高めることができます。また、テンプレートエンジンを使うことで、HTMLの記述ミスを防ぎ、コーディングの効率化を図ることができます。テンプレートエンジンを使ったHTML開発により、コーディングの品質を向上させ、Webサイトの制作効率を高めています。

CSSはHTMLを装飾するために使われるスタイルシート言語です。HTMLの拡張があれば、CSSもそれに合わせて拡張される必要があります。そのため、CSSの開発において、保守性と拡張性を考えた設計をすることが重要になります。例えば、レイアウトや共通の要素へのスタイルと、ページ固有スタイルの管理を分けたり、変数やmixinを使ってスタイルを効率的に管理するなど、保守性と拡張性を備えたCSS設計を行うことで、Webサイトのスタイルを効率的に管理し、コーディングの品質を向上させています。

CSS設計はその名の通り設計ですので、どのような構成で開発するかを考えるものですが、CSSの開発においては弊社では、PostCSS（ポストCSS・ポストプロセッサー）を採用しています。PostCSSはCSSの記述をよりダイナミック（動的）にさせるもので、プラグイン（拡張機能）を用いて強力なCSS開発を可能とする優れものです。PostCSSを活用することの一番の利点は、やはりCSSの記述を効率化させ、開発者の負担を大幅に軽減できることです。PostCSSを活用すれば、変数やmixin、クラスのネスティングを使ったスタイル記述はもちろんのこと、TailwindCSSなどの最先端CSSフレームワークをWebサイト制作に用いることができ、従来のCSSでは不可能だった動的言語としてCSS開発を行うことができます。

ボイラープレートとは、WordPressテーマを構成するための必須ファイルを予め用意しているもので、開発するWebサイトごとにこのボイラープレートを基礎としてWordPressテーマを開発していきます。WordPressサイトとしての基本機能の実装や、よく使われる拡張機能の有効化、WordPressデフォルトで有効化されている無駄な機能の無効化など、弊社にて考える優良WordPressテーマの特徴を盛り込んだ、弊社特製のWordPressテーマ開発スターターキット（ボイラープレート）を使って、WordPressテーマの開発を行っています。（特製WordPressテーマ開発スターターキットのダウンロードはこちら）

インタラクティブとは、相互作用、または対話的、という意味で、Webサイトにおいては、ユーザーの行動に反応してくれるような機能のことを指します。

その動的な機能をWebサイトに実装できる言語がJavaScript（JS・ジャバスクリプト）です。JSを使うことで、Webサイトに動きや変化をつけることが可能となります。例えば、ページのロード時にアニメーションを表示させたり、スクロール時に要素がフェードインするようにしたり、スライドショーの実装などです。これらの機能がなくてもWebサイトは成り立ちますが、Webサイト表現に動きや追加の機能を取り入れることで、Webサイトの操作性や理解度をアップさせることができます。その機能性を組み込むのがJavaScript言語です。弊社では、制作するWebサイトの表現に最適な機能やアニメーションなどを考え、JavaScriptを用いて機能の実装を行っています。

Codekitとは、Webサイトプロジェクトを管理するMac専用のアプリで、書いたコードを最適化してくれたり、エラーを見つけてくれたりする、Webサイト開発におけるプロジェクト管理ツールです。弊社では、このCodekitを使ってWebサイトのプロジェクト管理を行っています。

Webサイトを開発する際には、プロジェクトごとにフォルダを用意しています。そのフォルダ内には、HTMLファイル、CSSファイル、JavaScriptファイル、画像ファイルなど、Webサイトを制作する際に必要なファイルが格納されているのですが、Codekitはその全てのファイルを最適化し、エラーフリー（エラーのない）のコードでWebサイトデータを出力してくれます。

また、Codekitはファイルの変更を検知して自動的にコンパイル（変換）してくれる機能や、ファイルの圧縮や最適化、画像のWeb最適化、ブラウザのリロードなど、弊社の考える優良Webサイトを開発するための機能が豊富に搭載されています。Codekitを使うことで、Webサイト制作の効率化を図り、コーディングの品質を向上させています。

Git（ギット）とは、開発したコードをクラウド上に保管できるサービスです。制作したWebアプリやWebサイトデータをアップロードし、プロジェクトごとの保管庫に保管します。プロジェクトごとにGit利用の有り無しは変わりますが、中規模のプロジェクトからはGitによるバージョン管理を行っています。Gitを使うことでコードの変更履歴を辿る事ができたり、万が一の際にデータを失ってしまった場合に、データを復元することが可能になります。

開発するコードにこだわるだけでなく、制作するWebプロジェクトをしっかりと管理することも、弊社のコーディングへ対するこだわりのひとつです。

巷で話題になっているAI（人工知能）を、プログラミングの補助として使うことができるのがこのGitCopilot（ギット・コーパイロット）です。プログラミングにおけるコードの記述にAIのアシスタントが付いてくれるというもので、弊社ではGitCopilotを使ってWebサイトのコーディングを行っています。利点は、予測補完機能やコードの自動生成機能を使うことで、Web開発のスピードが飛躍的にアップすることです。

また驚くべきことに、コードだけでなく文章の記述にも対応しており、AIが文脈を読み取り、予測補完の提案してくれます。Webページのコンテンツの大半を占める文章をもAIが生成してくれるので、ライティングの作業も並行して進めることができるのも、GitCopilotの魅力のひとつです。（最後の文章校正はAIなしで実施しています）

クロスブラウザとは、異なるブラウザ間（Chrome、Safari、Firefox、Edgeなど）での互換性を意味するもので、弊社では制作するWebサイトがすべてのブラウザで正しく表示されるよう、クロスブラウザでの確認を行っています。また昨今ではパソコンだけでなく、スマートフォンやタブレット端末での閲覧も予測しなければならないため、クロスデバイスにおける動作確認も行っています。制作するWebサイトがすべてのユーザーに正しく届けられるようにすることも、我々Web制作会社のお仕事の一つです。