PointWEB制作で使われるいろいろな言語を紹介しますいつもWEB制作をささえてくれるいろいろな言語を紹介しています。WEB制作HTMLからCSS、Javascript、Jquery、PHPを中心にAjaxとかサーバーサイド、クライアントサイド、動的処理とはなどいろいろな言語紹介をしています。フロントエンドとバックエンド両方できると楽しいです。私がWEB制作に使ういろいろなものをまとめて全部、どういう役割なのかを説明したいと思います。厳密に言うと、と注意書きをいれたくなので最初に断りを入れさせていただくと「概念」的な話なので、多少間違ったり、拡大解釈したりすると思いますが何卒ご容赦ください。気軽に読んでもらえれば幸いです。Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、タグと呼ばれる<>で囲われた色んな種類のタグを使ってブラウザを通して見れる状態にするための言語です。タグには色々な意味があって、役割があるのですが、その役割を無視して適当に作っても、表示上の問題はあまりなく、エラーなども出ません。(表示が崩れるくらい)本来の役割に沿った使い方を厳密に行い、なるべく無駄なタグを使わないのが美徳とされています。タグの一例タグの役割に基づく使用方法などをめぐってしばしば論争が起きます。HTMLはプログラミング言語かどうか、HTMLは簡単だ、いや難しい、ソースが汚い、<img>タグはH1で囲うべきではない、などその火種が尽きることはないでしょう。コーディングを正しく、美しく組めるコーダーの人は尊敬されます。HTMLの純度をどこまで高められるかという点において、妥協しない人ほどHTMLは難しいと言い、見た目が良ければよいという人には簡単と言われる不思議な言語です。Sheets、カスケーディング・スタイル・シートと呼ばれる、主に見た目のレイアウトや色、文字の大きさなどを担当しています。CSSがなかった(一般的でなかったのか)頃は、タグに文字の大きさやセンタリングのタグがあったのですが、それらのタグはCSSでやることを前提とされ、HTMLのバージョンによっては廃止タグという扱いで、使わないことを推奨されています。いうとtableタグでレイアウトしてたんだぜ。CSSの役割CSSのおかげで、WEBページのスタイルに一貫性を持たせることが可能になり、HTMLは論理構造にそって作れるようになった。CSSはバージョンアップを重ねるたびにできることが増える反面、ブラウザによっては思い通りに表示されないスタイルがあったり、めんどくさいところもあります。IE(インターネットエクスプローラ)で見られると、意図しないデザインになることが多い。IE10まではサポート終わってんだからIEは使うなと、WEBデザイナーはもれなく思っている。IE11は2025年でサポート期間終了と。最近では、この次に紹介するJavascriptのように、色々な動きを付けることもできるようになってきました。動きやインタラクションの担当インタラクションは双方向という意味で、ユーザーのアクションに応じて何かをさせることを指します。Javascriptの役割Javascriptは昔、ユーザー側がJavascriptをオフにしている場合があるから、Javascriptを切られても表示できるようにWEBを作れと言われていました。最近はそんなことを気にしなくなりましたね。Ajaxが生まれたころから、一気に息を吹き返し、一気に覇権をとったイメージ。AjaxはGoogleマップのように、ページ遷移することなくどんどん情報を読み込むことができる仕組み、と思ってください。非同期通信と呼ばれます。サーバーサイドJavascriptと呼ばれるものまで生まれてきて、大活躍しています。私はサーバーサイドジャバスクリプトは使ったことがありません。node.jsとか興味はあるんですけどね。プログラミング言語のJavaとは一切互換性がないので、Javascriptが使えてもJavaは使えないです。HERBくらい違います。画面を遷移させずに、色々な動きを付けることができるのが特徴。役割やできることはJavascriptと同じです。いうかJavascriptです。Javascriptのめんどくさい記述を劇的に簡単かつわかりやすく使えるようにしてくれたのがJquery。HTML、CSS、Javascriptは何もしないで、HTMLファイルに記述すれば使えるけど、JqueryはJqueryのファイルを読み込まないと使えません。Jqueryの特徴Jqueryの登場以前と以後で、WEBの世界は大きく変わったと思ってます。簡単な記述で、表現の幅がものすごい広がり、思わず使いたくなるサンプル集が世界各地で作られ、それをコピペして使うWEBデザイナーを量産しました。アコーディオン、タブ、フェードイン、フェードアウト、トグルなどなど、Jqueryによってもたらされたものは数多い。JavascriptなのでJavascriptと同様、画面を遷移させずに、色々な動きを付けることができるのが特徴。ここをクリックすると隠れてた要素が表示されます。これはアコーディオンと呼ばれます。最近はWEB高速化のトレンドが逆風になり、脱Jqueryの動きが広まっている。便利だからなかなか忘れられない。花の慶次でいうおまつ様的なポジション。補足すると、慶次はおまつに惚れていたわけですが、おまつは前田利家の奥さんなので、道ならぬ恋なわけですよね。なんやかんやでおまつ様のことは忘れるんだけど、慶次の心の中にはおまつ様がいるわけです。今あげた4つはクライアントサイドで動く言語です。サーバーサイドの反対語で、簡単に言うとHTMLを開けばそのままちゃんとブラウザで見れる言語。最近の言い方でいうところのフロントエンドです。サーバーのレスポンスが不要で、手軽に確認もできるというナイスな特徴があります。Toolsの略で、動的なページを作るために作られた言語。サーバーサイドの処理担当。ここからへんから説明が一気に難しくなってきます。サーバーに情報を送って、そのレスポンスに応じた内容をHTMLとしてレンダリング(描画)するため、開発環境と呼ばれるものを準備する必要があります。Apache(アパッチ)と呼ばれるサーバーを個人のPCにインストールするのが一般的で、これがないとPHPファイルは動きません。サーバーサイドってなんだ?バックエンドサーバーサイドのサーバーはWEBサーバーです。WEBサーバーがサーバーサイドの言語を読み取って、HTMLの状態を返す処理をします。最近の言い方でいうところのバックエンド。