はじめに
「このWebサイトは、どのプログラミング言語で作られているの？」
「気になるサイトと同じ仕組みを使いたいけれど、PHPやJavaScriptなど何を確認すればいいの？」と迷っていませんか。
参考にしたいWebサイトを見つけても、画面に表示されている文章やデザインだけでは、裏側で使われている言語や技術まで判断するのは難しいですよね。
この記事では、Wappalyzerを使って使用技術を確認する方法と、ブラウザのソースコードからHTML・CSS・JavaScriptを確認する方法を紹介します。
Webサイトの言語を調べる方法は？
Webサイトで使われているプログラミング言語や技術を調べるには、1つの方法だけで判断せず、確認できる情報を順番に見ていくことが大切です。
まずWappalyzerを使えば、ブラウザ上から検出された技術を確認できます。
さらにHTMLソースや開発者ツールを開くと、ページを構成するHTMLや読み込まれているJavaScriptなどを直接確認できます。
Wappalyzerで使われている言語や技術を確認する
Wappalyzerをブラウザに導入して調べたいWebサイトを開くと、検出された技術をカテゴリ別に確認できます。
JavaScriptライブラリやCMS、Webサーバー、プログラミング言語などが表示されるため、どのような技術が使われているのかを手軽に調べたい場合に便利です。
HTMLソースから言語や技術の手がかりを確認する
調べたいページで「ページのソースを表示」を選択すると、HTMLソースを確認できます。
<script>タグや読み込まれているファイル名、URLなどから、JavaScriptやライブラリを判断する手がかりを探せます。
ただし、サーバー側で使われている言語はHTMLソースだけでは確認できない場合があります。
開発者ツールでHTMLやJavaScriptを確認する
Chromeなどの開発者ツールを開くと、「Elements」でHTML構造、「Sources」で読み込まれているJavaScriptファイルを確認できます。
ファイル名やコードを見ることで、ブラウザ上で動いているJavaScriptやページの構成をより詳しく調べられます。
WappalyzerでWebサイトの言語を調べる手順
Wappalyzerを使うと、Webサイトで検出されたプログラミング言語やフレームワークなどの技術情報をChrome上で確認できます。
表示されたカテゴリや技術名を確認し、どの言語やフレームワークが使われている可能性があるのかを判断していきましょう。
ChromeにWappalyzerを追加する
Chromeウェブストアで「Wappalyzer」と検索し、拡張機能のページから「Chromeに追加」をクリックします。
確認画面で「拡張機能を追加」を選択すると、ChromeからWappalyzerを利用できるようになります。
調べたいWebサイトを開いて技術情報を確認する
調べたいWebサイトを開き、画面右上の拡張機能からWappalyzerを選択します。
解析が完了すると検出された技術がカテゴリ別に表示されるため、プログラミング言語やフレームワークなどを確認しましょう。
表示された情報から言語やフレームワークを判断する
検出結果では、「Programming languages」や「JavaScript frameworks」などのカテゴリを確認します。
言語名やフレームワーク名が表示されていれば、そのWebサイトで使われている可能性がある技術として判断できます。
Wappalyzerで「WordPress」と表示され、自分でも同じ仕組みでサイトを作れるのか気になった場合は、WordPressでできることも確認しておくと分かりやすいです。
▶WordPressとは？できることや仕組みを初心者向けに解説
ソースコードからWebサイトの言語を調べる方法
Webサイトのソースコードを確認すると、ページ内に記載された情報から使用されている言語や技術の手がかりを探せます。
JavaScriptファイルやコードの特徴を見ることで、使用されているライブラリやフレームワークを判断できる場合があります。
HTMLソースからメタタグやURLパターンを確認する
対象ページで「ページのソースを表示」を選択し、HTML内の<meta>タグや<script>タグを確認します。
技術名のほか、URLやファイル名にCMSやフレームワーク特有の文字列があれば、使用技術を判断する手がかりになります。
HTTPヘッダーからサーバー側の情報を確認する
Chromeの開発者ツールで「Network」タブを開き、ページ本体の「Response Headers」を確認します。
ServerやX-Powered-Byなどにサーバー名や言語、フレームワーク名が表示されていれば、サーバー側の技術を判断する手がかりになります。
JavaScriptやフレームワークの使用状況を確認する
Chromeの開発者ツールにある「Sources」タブでは、ページが読み込んでいるJavaScriptファイルを確認できます。
ファイル名やコードにライブラリ、フレームワーク特有の名前や特徴があれば、使われている技術を判断する手がかりになります。
JavaScriptが使われていることは分かっても、どのような役割を持つ言語なのか分からない場合は、基本的な仕組みから確認してみましょう。
▶JavaScriptとは？できることやHTML・CSSとの違いを解説
Webサイトの言語を調べるときの注意点
Webサイトで使われている言語を調べるときは、HTMLソースや検出ツールに表示された1つの情報だけで断定しないことが大切です。
HTMLソースやHTTPヘッダー、JavaScript、検出ツールなど複数の情報を照らし合わせて判断しましょう。
HTMLを見ただけではサーバー側の言語を断定できない
HTMLソースで確認できるのは、ブラウザに送られたHTMLやJavaScriptなどが中心です。
サーバー側で処理されるプログラミング言語のコードは通常そのまま表示されないため、HTMLだけで使用言語を断定することはできません。
検出ツールの結果だけで使用言語を決めつけない
Wappalyzerなどの検出ツールは、Webサイトから取得できる情報をもとに使用技術を判定します。
実際に使われていても検出されない場合があるため、表示された結果だけで使用言語や技術を決めつけないことが大切です。
複数の情報を組み合わせて判断する
使用言語を調べるときは、HTMLソースやHTTPヘッダー、JavaScript、Wappalyzerなどを組み合わせて確認します。
複数の方法で同じ技術を示す情報が見つかれば、1つの結果だけを見るよりも判断しやすくなります。
まとめ
Webサイトで使われている言語や技術を調べるときは、Wappalyzerなどのツールを使うと手軽に確認できます。
ただし、すべての技術を正確に特定できるとは限らないため、HTMLソースや開発者ツール、HTTPヘッダーなどもあわせて確認すると安心です。
まずはWappalyzerで全体像をつかみ、気になる部分があればほかの方法でも確認しながら、複数の情報をもとに使用言語や技術を判断してみましょう。
