自分でWebサイトを作りたいそして、Web制作を仕事にできたらいいな......!あなたもこんな風に考えて、Webサイトを作る言語について調べているのではないでしょうか?しかし調べてみるとHTMLやCSS、Javasvript・PHP・Rubyなどなど、たくさんの言語が出てきて混乱しちゃいますよね。そこでこの記事ではWebサイトを制作するためにはWebサイト制作にはどんな言語が必要なのかそれぞれの言語の役割を初心者でもわかりやすく解説します。Webサイトがどうして言語で動くのかや、Web制作に関わるお仕事のこと、オススメの言語についてもご紹介します。この記事を読んでWebサイトを作るために必要な知識を身につけましょう。まとめなぜ言語でWebサイトは動くのか?Webサイトはインターネット上で動く一つのサービスです。他にもファイル転送やメール、チャットなどインターネットには様々なサービスがありWebサイトはそのうちの一つなんですね。Webサイトには私たちが見たり触れたりすることができないサーバーと、私たちが見たり触れたりすることができるクライアントという2つの種類があります。スマホやパソコン(クライアント)からWebサイトを見たいというリクエストを送り、サーバーが情報を渡す仕組みになっています。クライアントとサーバの関係サーバーから送られてきた情報が、そのままパソコンやスマホに表示されている訳ではありません。サーバーから送られてくる情報は、コンピュータが理解できる言語(コード)です。画像や色なども全て言語を使って記述され保存されています。そのためサーバーから送られてきた情報をクライアント、つまり私たちが理解できる形に翻訳しなければいけません。そこで活躍してくれるのが、Webブラウザです。ExplorerFirefoxWebブラウザがサーバーとクライアントを橋渡ししてくれるので、私たちは快適にWebサイトをみることができます。Webサイトを作るお仕事Webサイトを作る職種には大きく分けて管理・進行マーケティング制作があります。今回は制作に関わるお仕事を紹介します。どんな業種があるか知ったうえで、あなたがどんな仕事に関わりたいか考えてみてくださいね。WebデザイナーWebサイトの見た目を作るお仕事です。Webサイト全体のデザインだけでなく、素材と言われるアイコンやバナーなどを作ります。フロントエンドエンジニアWebデザイナーが作ったデザインをもとに、HTML・CSS・JavaScript(jQuery)、PHPなどの言語を使って設計や実装を行います。近年、世界的に大人気のCMS(コンテンツマネジメントシステム)であるWordPressなどの構築やカスタマイズも主な仕事ですね。フロントエンドエンジニアもWebデザイナーと同じで見た目の部分を作る職種です。フロントエンドエンジニアは、Webデザイナーのようにサイトをデザインするのではなくでき上がったデザインをプログラマーとして作り込んでいく作業を行う人のことを指します。バックエンドエンジニアWebサイトで利用するサーバーやデータベースなどのシステム側の構築や管理を行う仕事です。バックエンドという名称でなんとなく想像がつくでしょうか。Webデザイナーとフロントエンドエンジニアはユーザーの目に触れる部分を作成し、バックエンドエンジニアはユーザーが見れない部分の構築や管理を行う業務です。実は知らないWebサイトとWebアプリ(サービス)の違いWebサイトとWebアプリは見た目に大きな違いがなく、なかなか見分けるのは難しいですよね。そのためどちらも作り方は同じだと思っている人や、Webサイトが作れればWebアプリを作れると勘違いしている人が多くいます。実際は必要なスキルや知識が違うので、注意が必要です。サイトの最も簡単な定義は、情報提供を目的としたサイトであることです。Developer)https://www.ibm.com/developerworks/jp/web/library/wa-websiteapp/index.htmlというようにWebサイトはユーザーへ一方的に情報を提供するためのツールです。このような動きがなく情報を提供するだけのページを静的ページと言います。企業の公式ホームページやWikiPediaのようなサイトが代表的な例ですね。そのため作業もどのような情報をどのような内容や順番・デザインで提供するのかが重要になってきます。フロントエンドに関わる作業がほとんどです。Webアプリケーション(サービス)Webアプリケーションやサービスは対話型とよく表現されます。Webアプリやサイトは、ユーザーが起こすアクションによって表示内容が動的に変化します。物を購入できるECサイトや乗換案内サイト、カレンダーなどが挙げられます。Webアプリケーション(サービス)はユーザーが文字を入力したりボタンを押すなどのアクションが前提となるため、制作するうえで「どのような機能が必要か」が大切になります。Webサイトよりもデータのやりとりが多く発生するため、バックエンドの知識やスキルも必要になります。Webサイトに必須な基本のプログラミング言語Webサイトを作る場合、実はこれから解説する3つの言語を使いこなす必要があります。3つの言語の大まかな役割をザックリ理解してから、それぞれの言語の特徴や役割を理解しましょう。Webサイトを作る3大言語HTMLCSSJavaScript(jQuery)Webサイトを作るために必要な言語が3つ必要だと聞いて、あなたも「どれか一つじゃできないの?」と思いますよね。HTMLだけでもWebサイトを作ることは可能です。優れたデザイン・動きのあるWebサイトを作ろうと思うと、CSSとJavaScriptが必要になります。HTMLとCSSは切っても切り離せない関係にあります。次の図をみてください。HTMLはWebサイトの土台や骨組みと言われる言語です。HTMLを使ってWebサイトがどういった構造なのかを定義するため、土台や骨組みと表現されます。そこにCSSを使って見た目、つまりデザインを作ります。JavaScriptはWebサイトにプラスαの要素である動きを作ります。何枚かの写真をスライドさせて表示したり、地図やメッセージボックスを表示させたりします。このように、日頃あなたが利用しているWebサイトを作るためにはHTML・CSS・JavaScriptが必要不可欠です。この3つの言語はWebサイトを制作するなら必須のスキルになっています。余談ですがWebサイトを制作する求人もこの3つのスキルが必ず求められます。そのためWebサイト制作に関わる仕事がしたいあなたは、必ず使えるようになる必要があります。次の項目では、それぞれの言語についてもっと詳しく解説します。Language(ハイパーテキスト・マークアップ・ランゲージ)の略です。Webサイトを作る土台や骨組みとなる言語です。インターネット上で公開されてるWebページのほとんどに、HTMLが使われています。HTMLはMarkup(マークアップ)言語と呼ばれる言語の一種です。Markupとは印をつけるという意味で、文字にタグという印をつけていくことで画像や表を見れるようにします。ちなみにHTMLの基本構造は以下のような要素で成り立っています。</body></html>この構造にさらに他のHTMLやCSS・JavaScriptの要素が付け足されてます。上記のようなタグや文章の集合体をソースコードと呼びます。ちなみにソースコードは、ウェブサイトの余白部分で右クリックすると表示されるポップアップの「ページのソースを表示」を選択すると表示されます(下記画像参照)。画像:ページのソース画面HTMLを勉強する際に意識して欲しいのが規格(ルール)です。Consortium)というWeb技術の標準化を行う非営利団体が制定しています。Webで使用される技術を標準化し、よりスムーズな開発や品質向上を目標に規格が作られています。この規格に沿ってWebサイトを作ることによってユーザーの使い勝手をよくするだけでなく、制作側の負担軽減や品質保証につながります。5.2が最新版になっています。Sheets(カスケーディング・スタイル・シート)の略でスタイルシート言語と言われています。HTMLで作った骨組みに背景や文字の色・サイズなどのデザインを追加していきます。それくらいならHTMLでもできるんじゃないかと思われるでしょう。CSSを使うことでHTMLの記述がシンプルになり記述間違い減少し管理がしやすくなります。CSSはHTMLよりもはるかにデザイン性に優れているので、より詳細なデザインを作ることができます。私の名前はナナミです。音楽を聴くのが好きです。邦ロックが大好きです。*/}上記のようにCSSだけでは、追加したデザインの要素が反映されません。CSSはHTMLを装飾する物なのでCSSで定義されたデザインを読み取りHTMLに反映されます。CSSはスタイルシートと呼ばれるファイルで管理されています。スタイルシートのファイル名はstylesheet.cssとするのが一般的です。ファイルの拡張子を「.css」とすることでデザインの要素がつまったスタイルシートだとコンピュータが判断してくれます。CSSにもHTMLと同じように規格があります。HTMLと同じW3Cが作成しています。2.1を中心に、新しい機能の追加や改良をモジュールとすることで実現するCSS3・CSS4があります。JavaScriptJavaScriptとはHTMLやCSSと親和性が高い言語で、Webサイトに動きをつけるために使われます。画像を自動でスライドさせたり、お問い合わせフォームなどの文字を打ち込むような機能もJavaScriptで作ることができます。JavaScriptもCSS同様になくてもWebサイトは制作できます。動きがない(静的な)サイトはできることが限られてしまいます。私たちが利用しているWebサイトのほとんどが動きがあるサイトなので、ユーザーによって動きがないサイトは、味気ないサイトだと感じてしまうかもしれませんね。他にもJavaScriptには、フロントエンドとバックエンドの橋渡しを行うという重要な役割があります。先ほど例にあげたお問い合わせフォームでは、打ち込まれた文字データを取り込んでメールとして送信する処理がユーザーには見えないバックエンド側で行われています。2019年12月5日Webサイト制作にオススメなプログラミング言語ここからはHTML・CSS・JavaScriptにプラスαで学習するのにオススメの言語を紹介します。PHPPHPはWebサイトを作る言語の中でも人気があり、初心者でも習得しやすいと言われています。PHPはサーバーサイドのスクリプト言語で、サーバー側にあるデータベースと簡単に連携することができたり、HTMLに埋め込んで使うことができる便利な言語です。Webサイトだけでなく、Webアプリケーション(サービス)の開発にも利用される言語です。そのため仕事にもつながりやすいと同時に、応募条件にPHPのスキルを求められるケースが非常に多くあります。世界的に人気のCMSであるWordPressもPHPを使って作られています。PHPが扱えれば、WordPressをカスタマイズすることができます。2019年4月27日スクリプト言語とはスクリプト言語とは習得するのを簡単にするために工夫されたプログラミング言語のことです。コンピューターが命令文を読みながら実行する(動作する)スタイルで、簡単にプログラムを組むことができます。詳細はこちらRubyRubyもPHPと同じスクリプト言語です。Rubyは日本で生まれたプログラミング言語なので、最新情報もヘルプも日本語で読むことができます。そのため学習が行いやすく、日本人にとって扱いやすい言語です。多くの企業でも採用されている言語で、SNS・マッチングサイト・ソーシャルゲームなどに使われています。Railsというフレームワークの習得も視野に入れましょう。開発効率が非常に良いのでRubyを使って開発する場合、このRailsも利用されています。そのため求人でもRailsのスキルが求められます。Rubyを使って開発したい人は、Railsも一緒に習得するとより有利に案件が獲得できるでしょう。フレームワークとは頻繁に必要とされる基礎的な機能をまとめて提供してくれる枠組み・テンプレートのようなものです。2019年11月21日JavaJavaとは、アプリ開発など幅広い開発に使用されている人気のプログラミング言語です。JavaとJavaScriptは全く別の言語なので、注意が必要です。2019年11月7日Javaの最大の特徴は、どんなコンピュータ上でも利用することができる点です。実はプログラムは全てのパソコンやスマホで利用できるわけではないのです。Apple製品とAndroid製品では規格が違うため、それぞれに合ったプログラムを作らなくてはいけません。Javaは製品の規格に関係なく利用できるため、非常に重宝されます。人気言語であるJavaは技術的に安定していて、バクなどが見つかってもすぐに修正されます。人気な反面、設計や組み込みが複雑なため簡単なプログラムを作る場合は手間がかかります。そのため大型案件での利用が多く、小規模な開発であればPHPが採用される場合が多いです。いえ、Javaは昔から人気が高く、Javaを扱えるようになると他のプログラミング言語の学習が楽になると言われています。需要も高く求人案件も豊富です。学習環境も書籍や学習サイト・プログラミングスクールなどが豊富で整っています。将来、大規模な開発にも関わりたいというあなたはJavaも勉強してみると良いでしょう。Webサイトを作る上で大切な三大言語はHTMLCSSJavaScriptの3つです。HTMLとCSSはWebサイトを開発する上で必須の言語となります。仕事としてWeb制作に関わるのであれば、JavaScriptもかならず必要になります。Webサイトは便利なツールの普及により、専門知識がなくても誰でも簡単に作れるようになりました。自分好みのデザインや欲しい機能など、思い通りにWebサイトを作るためにはプログラミング言語でのカスタマイズが必要となります。初心者でもできるのか不安に感じるかもしれませんが、無料でできる学習環境も整っています。無料で学習を始めたいと思うあなたは、下記の記事をご覧ください。独学で勉強するのは不安というあなたには、プログラミングスクールをオススメします。弊社侍エンジニア塾では、現役エンジニアがマンツーマンで学習をサポートしています。通うのは敷居が高いと思うあなたは、まずは無料体験レッスンを受けてみましょう。プログラミングスキルを身に付けて、エンジニアを目指したい方はぜひ侍エンジニア塾をご利用ください。いまなら無料体験レッスンを受講することで「Amazonギフトカード」「電子書籍」「あなただけのオリジナルカリキュラム」をプレゼントいたします。下記カレンダーから簡単に予約することが出来るのでぜひご活用ください。TweetPocket「プログラミング、右も左もわからない...」という方にオススメ当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。書いた人モリシタ猫をこよなく愛する、侍エンジニア塾ブログ編集部のモリシタです。Reserved.現役生徒500名以上が在籍する弊社のプログラミング学習プランをあなたに合わせて最短1分で診断します。