- Webサイトの開発とか興味があるけど、何からすれば良いの？
- Web開発って例えば何を作れるの？
- どのプログラミング言語・開発環境を使えば良いの？
Webサイトの開発に興味はあるけど、どういうブログラミング言語・開発環境を使えばいいか分からない、そもそもWeb開発とは何なのか基本的なところも含めて解説していきます。
最近では、Web開発の需要も高く、IT企業への転職のためやフリーランスになるために勉強するケースも増えているようです。
Web開発は、私がプログラミングに興味を持つきっかけにもなり、実際にいくつかサイトを作りました。
そんな経験を元に、Web開発のプログラミングを始める前に知っておくべき知識を解説していきます。
目次
Web開発とは？
Web開発とは、Webサイト、WebアプリケーションやWebシステムの開発のことです。
簡単に言うと、普段みなさんがブラウザ上で見ているサイト全般のことを指し、ホームページ、ブログ、動画投稿・配信サービス、ECサイト、SNS、クラウドストレージなどですね。
最近では、プログラミングを始めるきっかけとして人気が高く、仕事としても需要のある開発ジャンルになっています。
CMSを利用した開発について
CMS（Content Management System）とは、コンテンツ管理システムのことで、コンテンツを構成するテキストや画像などを統合・体系的に管理し、配信など必要な処理を行うシステムの総称のことです。
Webサイトなどを開発するにあたり、ブログやECサイトなど、1から開発すると大変なものがあります。
ブログであれば、記事などのユーザーが見れる表側だけでなく、記事作成画面、記事・コメント・編集者などの管理などの裏側の部分もあります。
このブログの記事などを管理するシステム周りも1から作るのは非常に大変です。
また、ECサイト（通販サイト）では、商品・ユーザーの管理が必要で、住所やクレジットカードなどの個人情報・機密性の高い情報を扱うので、セキュリティ面も重要です。
このように、1から開発するには規模が大きかったり、技術スキルが必要だったりするものは、CMSを使うことで開発を大幅に短縮することができます。
Web開発の勉強として、CMSを使わずに1から作ることは構わないのですが、サイトを運用したり、仕事で受注したりするのであれば、開発期間を短く、簡単にする方が良いので、1から開発せずにCMSを使うことが多いです。
ブログやECサイトなどのCMSには、次のようなものがあります。
他にも色々ありますが、とりあえず主要なものを取り上げたので、気になる方は調べてみて下さい。
ひとまず、ブログなど記事を追加したり、ユーザーとコミュニケーションを取ったりなど運用を目的としている場合は、CMSという仕組みを利用しましょう。
また、後程紹介するブログラミング言語を使って、カスタマイズ性の高いWordPressなどのCMSであれば、ある程度自由に機能を拡張したり、デザインを変更したりすることができます。
そのため、CMSで簡単に作れると言っても、プログラミング言語を使いこなせるようにしておくのは重要ですね。
Web開発の主要なプログラミング言語
Web開発の主なプログラミング言語は次の通りです。
- HMTL/CSS
- JavaScript
- PHP
いくつプログラミング言語かありますが、この内のどれかを選んで開発をするわけではありません。
HTML/CSSは必須で、必要に応じて追加で JavaScript, PHP, Rubyを使う形となります。
とは言え、今ではほとんどのウェブサイトにおいて、JavaScriptやPHPが使われているので、基本的にそちらも使っていくことになると思います。
HTML/CSS
HTMLとCSSはウェブサイトを開発する上では必須です。
HTMLは、タグを用いてウェブページの構造を表現する。
CSSは、HTMLのタグ（要素）をどのように表示するか、デザイン・レイアウト部分を指示するためのもの。
CSSは、HTML内に書き込むことができるが、ウェブページの構造とデザインを分けるのが一般的です。
ケンさん
HTMLのタグには、次のようなものがあります。
見出し：h1, h2, h3…タグ
画像 ：imgタグ
表 ：tableタグ
リンク：aタグ
タグは、<>で囲われた部分で、<h1>…</h1>のように囲って使います。
このようなタグを使って、見出し、画像や表などの構造を表現します。
aタグを使うことで、青文字のテキストリンクを表現することができ、ユーザーがクリックするとタグ内で指定したURLへジャンプすることができます。
ただ、HTMLの構造だけでは、レイアウトが無いので、とても見にくいウェブページになってしまいます。
実際に表示すると分かりますが、タグを除く文章が黒文字・白背景で、行間や文字サイズなど均一に表示されるので、全く見やすくありません。
HTMLのタグ構造は、コンピューターやブラウザがウェブページの構造を理解するためにありますが、これでは人には優しくありません。
膨大な数値をグラフによって視覚化することで見やすくなるのと同じに様に、ウェブページもレイアウトで視覚的に分かりやすく情報を伝える必要があります。
その役割がCSSと言う訳です。
JavaScript
JavaScriptは、パソコンのソフトウェア、スマホアプリ、ゲームなど多岐に渡るところで使われているプログラミング言語で、Web開発においては、動的なウェブページを作成するために使われます。
動的なウェブページとは、視覚的に分かることで言うと、何かしら動きのあるウェブページです。
例えば、通販サイトや公式サイトを見た時に、画像が並んでいて一定時間に入れ替わるようなメニューを見たことは無いでしょうか？
このように、動きのあるページを作りたい場合は、JavaScriptを使わないと作ることができません。
動的なウェブページに対して、HTMLとCSSで作られた動きのないページを静的なウェブページと言います。
PHP
PHPは、サーバー側で動的なウェブページを作成するためのプログラミング言語で、通販サイトや会員制サイト、ブログなどで使われます。
例えば、
- URLに含まれる商品IDを使って、データベースから商品情報を取得して、そのデータを表示する。
- 会員IDを使って、データベースからユーザー情報を取得し、そのデータを表示する。
- ブログのCMSであるWordpressでは、PHPやデータベースを使って様々なことを管理している。
このように、サーバー側で何かしら情報を処理した上で、ウェブページとして表示することができます。
データベースとのデータのやり取りをするための仲介役としてもよく使われるので、何かしらの情報を元に、データベースの情報を表示したい際によく使われます。
JavaScriptのところで、動的なウェブページとして視覚的に分かる部分を例に挙げましたが、この場合はサーバー側で色々な処理を行っているので、ユーザーには見えないところで動的にウェブページを作り上げています。
Web開発の主要な開発環境
Web開発の主な開発環境は次の通りです。
- Atom
- XAMPP
Atom
Atomは、オープンソースのテキストエディタで、HTML/CSS, JavaScript, PHPなどWeb開発に必要なプログラミング言語をサポートしています。
開発環境には大きく分けると、総合開発環境（IDE）とエディタの2種類があります。
IDEは、高機能・多機能ですが動作が重めです。
これに対して、エディタは、機能は比較的少ないですが、動作が軽いです。
私は以前IDEを使っていたのですが、Web開発ぐらいであれば、機能はエディタで十分です。
その分、立ち上げなどが速く、動作の軽いものの方が自分には合っていましたね。
ケンさん
XAMPP
XAMPPは、ウェブサイトの実行に必要なソフトウェアや環境をパッケージにしてまとめたもので、ローカル環境でサーバーを構築することができます。
パッケージには次のものが含まれています。
- Apache（Webサーバ）
- MariaDB, MySQL（データベース）
- PHP
- Perl
また、Windows, Linux, macOSなどのクロスプラットフォームで利用することができるので、クラスプラットフォームのXと他4つの頭文字を取って、XAMPPという名前になっています。
XAMPPの使いどころとしては、次のような場合です。
- 非公開のサーバーとして、Web開発のためにテスト環境として使う場合
- 企業などの組織内で使う情報ページ（＝イントラネット）を構築したい場合
個人でWeb開発をする場合は、1つ目の理由が主になってくると思います。
通常、個人でWebサイトを公開しようとすると、レンタルサーバーを借りて、そこに作ったHTMLやCSSファイルを置くことになります。
しかし、レンタルサーバーの場合、基本的に全世界に公開されている状態なので、誰でも作ったWebサイトを見ることができます。
Web開発や他のプログラミングでも同じですが、一発で期待通り処理を書くことは、ほぼ確実に不可能です。
- プログラムを書いて
- 実際に動作・表示してみて
- 期待通りでは無いところを確認して
- プログラムを修正する
この繰り返しで、プログラムを作り込んでいきます。
そのため、開発途中・未完成のWebサイトを誰でも見れる状態にしておくのは良くありません。
もし、開発途中でエラーログが表示されたり、IDやパスワードなどの重要な情報が表示されていたりするかもしれません。
それらの情報を元に、第三者からハッキングされて、サーバー内のデータを改変・削除される可能性もあります。
そのため、開発途中のWebサイトは基本的に公開したくないわけですが、Webサイトを表示するためには、サーバーを用意する必要があります。
そこで出てくるのが、XAMPPです。
XAMPPを使うことで、自分のパソコン、または同一のローカルネットワーク内に接続されているパソコンからしか見ることができないサーバー環境を作ることができます。
このローカルのサーバー環境で開発をして、できあがったものをレンタルサーバーにアップロードして公開するというのが基本的な流れです。
まとめ：Web開発は仕事の需要も高いからおすすめ！
Web開発について、プログラミング言語や開発環境など、実際にプログラミングしていく前に知っておくべきことを解説してきました。
最近、Web開発の需要も高く、IT企業への転職のため、またはフリーランスで仕事を受けるために、Web開発を学ぶ方も多いです。
プログラミングスクールでは、このWeb開発のコースが多く、どのスクールにもほぼ確実にあるぐらいです。
趣味目的や学生で勉強の時間を長く取れる方は、書籍やWeb学習サイトなどで独学するのも選択肢の一つです。
しかし、IT企業への転職など仕事で使うスキルとして身に付けたい場合は、学習効率や挫折リスクを減らす意味でも、プログラミングスクールがおすすめです。
学習効率や挫折リスクなどスクールのメリットも含め解説しています。
≫ 関連記事：【初心者向け】プログラミングのスクールの特徴とおすすめのスクール紹介
コメントを残す