やりたい事はあるけれど、まず、どんなプログラムを勉強すればいいのか、そこからが分からなかったんですよねー。プログラムとひと言でいっても、C言語系、PHP、Java、Perl、Javascript … 本当にたくさんあって、初心者さんには意味不明だと思います。各プログラム言語の入門サイトはいっぱいあるけれど、どれを勉強すればいいのかが分からないと、どこから手をつけていいのやら … と思っている人もいるかもしれません。
このブログの読者さんにはちょっと合わないテーマかもしれませんが、最近勉強を始めた友達のために、ブログにしておきます。Webサイトが基本的に HTML によって書かれていて、ページの装飾に CSS を使うってことは知ってるんだけど … という方が対象です！
目標：WordPressで自分らしいブログを作る！
ちょっと説明するのに、終りとなる目標がないと起承転結にならないので、目標は WordPress で自分らしいブログを作る！ということにしますね。
WordPress（ワードプレス）はデータベースに MySQL を利用し、PHPで書かれたオープンソースのブログソフトウェアである。b2/cafelog というソフトウェアの後継として開発された。GNU General Public License（GPL）の下で配布されている。
Wikipedia
初心者さんにとって、こういう文章って？？？だと思います。私も最初は、そもそも WordPressって何？MySQLって何？PHPって何よー？って感じだったんですから。でも今はそれで大丈夫。順を追って説明します。
どのプログラム言語を覚えればいいの？ 目次
1. クライアントサイドとサーバーサイド
HTML、CSS が分かってれば、簡単な Webサイトは作れますよね。で、そこにどうやってプログラムが関わってくるのか … を簡単にご紹介します。それからここまで分かりやすさを優先して、プログラムと表現してきましたが、語弊もあるのでスクリプトという言葉を使いますね。
スクリプトにはざっくりとクライアントサイド・スクリプトと、サーバーサイド・スクリプトというふたつに分ける事ができます。
サーバとはインターネット上のどこかにある、あなたの Webサイトを置いてある場所っていう感じです。クライアントサイドというのはお客さん側という意味ですけど、 Webサイトを見ている人のパソコン、もっと言えばブラウザってことです。
クライアントサイドとサーバーサイド
ブラウザ
あなたがインターネットを見る時に使っている Internet Explorer や Safari のことを総称してブラウザと言います。ブラウザにはたくさん種類があって、どれも無料でダウンロードして使う事ができます。下のアイコン見た事あると思いますが、これら全部ブラウザです。それぞれに便利な機能がついていて選びがたいのですが、自分にあったブラウザでインターネットをもっと快適に！
2. クライアントサイド・スクリプトで何ができるの？
スクリプトには、ざっくりとクライアントサイド・スクリプトと、サーバーサイド・スクリプトに分けられる事がわかりました。まずはクライアントサイド・スクリプトではどんなことができるのか？をご紹介します。
クライアントサイド・スクリプトといえば、Javascript が代表選手です（Java と Javascript とは別物なので注意してくださいね）。
2.1. クライアントサイド・スクリプトの例 #1
Javascript でどんなことができるかというと、本当にいろんな事ができちゃうんですけど、簡単な例から見ていきます。例えば、ユーザーにいろんな情報を入力してもらうフォームでも Javascript はよく使われています。
Javascript の一例
上の例では、確認用のメールアドレスが間違っています。確認用のメールアドレスは、上のメールアドレスと同じにしなくてはいけません。だから、入力内容が異なりますという警告を Javascript で出力しています。HTML だけじゃできませんよね！
-
SAMPLE
送信ボタンを押す → ページを移動 → 間違ってますよー！という流れよりも、その場（クライアントサイド）で警告を出してあげた方が親切だし、サーバ側の負荷も減ります。最近ではクライアントサイドでフォームの値をチェックするのが主流になってますね。
2.2. クライアントサイド・スクリプトの例 #2
Webサイト上で、色んなエフェクトを加えるのにも、Javascript は使われています。サムネイル（縮小画像）をクリックすると、元のオリジナル画像がドーンとポップアップ表示される Lightbox というプラグイン（後述）も、Javascript でできています。
SAMPLE
-
SAMPLE
それから、この記事のところどころに設置してある、↑ 目次へ というアンカーリンクをクリックすると、するするーっとページ内を移動します。これも Javascript です。
クライアントサイド・スクリプトは、ユーザーのブラウザ側で動くスクリプトのこと。だから基本的にはサーバ側には影響を与えないし、そういう意味ではできる事も限られてきます。
（注釈：Ajaxという手法もあって、上の表現は適切じゃないかもしれないけれど、クライアントサイド・スクリプトの基本はこんな感じです。）
だんだん分かってきましたか？注意することは、クライアントのブラウザで動くので、いろんなブラウザでキチンと動くかどうか確認が必要になりますね！
2.3. jQueryって何？
クライアントサイド・スクリプトの代表選手、Javascript について簡単に説明しましたけど、それでは jQuery って何でしょう？よく目にしますよね。
jQueryは、JavaScript と HTML の相互作用を強化する軽量な JavaScript ライブラリ。John Resig が2006年1月に開催された BarCamp NYC でリリースした。MIT License と GNU General Public License のデュアルライセンスであり、フリーかつオープンソースである。
Wikipedia
… さっぱりです … まず、ライブラリというのは図書館！じゃなくて、部品置き場みたいなものだと思ってもらって差し支えないと思います。他のスクリプトから呼び出して、組み合わせて使うっていう感じで、一から作るよりもずっと効率的に作業することができるようになります。
Javascript の代表的なライブラリには prototype.js というものもあり、jQuery も Javascript ライブラリのひとつです。
もちろん他のスクリプトにもライブラリがあったりします。例えば、PHP というスクリプトのライブラリでは、PEAR なんかがあります（部品というよりも拡張モジュールという感じですけど）。
2.4. じゃあplugin（プラグイン）って何？
プラグイン… よく聞きますよねー。jQuery のプラグイン、とか WordPress のプラグインとか。よくプラグ（コンセント）のアイコンで表現されてたりします。
プラグインという言葉は、あちこちで使われているので、とてもひと言で説明するのはちょっと無理な感じがしますが、ざっくりいうと、コンセントを入れると電化製品が動き出すように、プラグインを導入すると、新しい機能を使う事ができるようになるって感じです。
jQuery のプラグインといったら、jQuery にプラグを差し込んで（jQuery がないと使えないので）、とある機能を追加するっていうことです。
例えば、画像などをスライドショー的に表示してくれる NivoSlider なんかも jQuery のプラグインです。
簡単にスライダーを Webサイトに設置できる Nivo Slider
こんな風にたくさんのプラグインが、インターネット上にはたくさん公開されています（有料だったり、無料だったり様々です）。自分で 1から作らなくても、これらを利用することで、Web制作が効率的になりますね！とっても嬉しいしありがたいですよね。
他にも DropDown メニュー（マウスを置いたりクリックすると、でろでろーって出てくるナビゲーション）とか、さっき紹介した、フォームに入力された値が正しいかどうかを判断するプラグインなんかもあります。
クライアントサイド・スクリプトってどんな感じかが、大体つかめたでしょうか？ Webサイトを見ているみんな（クライアント）の、ブラウザで仕事をするのがクライアントサイド・スクリプトです。あなたのやりたいことが、クライアントサイド・スクリプトでできるんだったら、Javascript を勉強してみるといいと思います。
注記：Javascript でできることは本当にたくさんあって、ここで紹介していることはほんの一部、0.1%くらいだと思います。クライアントサイド・スクリプトというものがどんなものかということを伝えるために紹介したにすぎません。色んな可能性を秘めた Javascript … ぜひ学習したいスクリプトのひとつです！
Javascriptのおすすめ書籍
![JavaScript 第5版 [大型本]](http://webdesignrecipes.com/wp-content/uploads/2012/04/jsbook.jpg "JavaScript 第5版 [大型本]")
3. サーバーサイドスクリプトって何ができるの？
クライアントサイド・スクリプトに対して、インターネット上にあるサーバで動くスクリプトがサーバーサイド・スクリプトです。サーバーサイドスクリプトにはいろんなスクリプトがあります。
PHP（ぴーえいちぴー）、Java サーブレット（じゃばさーぶれっと）、Python（ぱいそん）、Perl（ぱーる）、ASP（えーえすぴー）など …私は PHP 以外は詳しくないので、紹介もおすすめもできませんが、本当にたくさんありますねー。
ではサーバーサイドスクリプトではどんなことができるのか、簡単にご紹介します。
3.1. サーバーサイドスクリプトの例
サーバーサイドスクリプトの特徴として、ユーザーからのリクエストを受けて、サーバーで処理、そしてその結果をユーザーに返すといったことができます。ちょっと分かりにくいですねー。
例えば、お問い合せフォームがあったとして、あなたが名前や電話番号、メッセージを入れて送信します。これがリクエスト。そのメッセージを、サーバーサイドスクリプトが受け取って処理をします。
例えば、メッセージに不備があったら、「記入漏れがあるのでやり直してください」的なページを出力したり、不備がないようなら「お問い合せありがとうございました」のようなページを表示させるとか。
何となくイメージが湧きましたか？例えば通信販売の注文の処理とかも、サーバーサイドスクリプトがあなたのリクエストを受けて仕事をして、その結果を Webページとして出力します。
他にも、このブログにも検索機能がついていますが（ページのいちばん上に検索窓があります）、キーワードを入力して送信 … これがリクエスト。リクエストを受けたサーバーサイドスクリプトが仕事をして、結果を Webページに出力。
こうやって動的に Webページを作成してくれるのがサーバーサイド・スクリプトの特徴のひとつです。クライアントサイド・スクリプトではできないこともサーバーサイド・スクリプトではできるんですねー。
3.2. 動的、静的って何？
HTML と CSS しか知らない頃は、この動的にページが作成されるってことすら知りませんでした。あなたは今、HTML と CSS で Webサイトを作ることはできるはずですよね。ファイルの拡張子は .html で。
でもその Webサイトは、あなたが HTML ファイルを書き換えてサーバーにアップし直さない限り、ずっと同じままですよね。こんな風な純粋な HTML で書かれた Webサイトを静的な（スタティックな）Webページと言います。
静的な Webページに対して、ユーザーのリクエストに応じて、自動的にサーバーサイド・スクリプトによって作られるページを動的なページと言います。
例えば Yahoo でキーワードを入れて検索すると …
Yahoo で検索
検索結果
こんな風に検索結果が表示されますよね。これはサーバーサイド・スクリプトによって動的に作られたページで、リクエストは URL にパラメータ（引数）をくっつけて送られています。
パラメータ
分かりやすく図にするとこんな感じです。
サーバーサイドスクリプト
これは一例ですけど、こんな感じで自動でページ作られています。検索結果一件一件のページを、誰かが手書きで HTML 書いてる訳ではありません …
3.3. データベースと組み合わせる
サーバーサイド・スクリプトでは、他にも掲示板や予約システム、通信販売用のカートなど、本当に色々なことができます。でもデータベース（データをしまっておく入れ物）と組み合わせることが多いので、データベースについても勉強したほうがいいかも。
データベースにも色んな種類がありますが、私は SQLite と MySQL というデータベースしか使ったことがないので、他のデータベースについては紹介できません。例えば MySQL というデータベースを操るなら、SQL文というものも覚えなくてはなりません…
4. WordPressって何ですか？
今までクライアントサイド・スクリプトとか、サーバーサイド・スクリプトを紹介してきましたが、WordPress（わーどぷれす）というのは何でしょう。WordPress とは、PHP（サーバーサイド・スクリプト）で作られた CMS（Contents Management System）です。
CMS（しーえむえす）を使えば、コンテンツを作るだけで自動的（動的）にページを作ってくれます。ブログをやったことがある人なら分かると思いますが、記事を書くだけで新しいページがどんどん作られていきますよね。別にブログじゃなくてもいいんですけど、コンテンツを書くだけで、自動的にページを作ってくれるので、Webサイトの構築がとっても簡単にできちゃいます。
他にも OpenPNE、Zen Cart、XOOPS、EC-CUBEなど、たくさんの種類の CMS があります。通信販売に特化したものや、ポータル、コミュニティーに特化したものなど、様々なタイプの CMS を無料で利用することができます。ここで紹介した CMS は、全部 PHP（サーバーサイド・スクリプト） + MySQL （データベース）で構築されています。
4.1. WordPress を使うのに覚える必要があるのはどれですか？
WordPress には、無料で利用できるテーマもたくさん配布されていますし、機能を追加できるプラグイン（jQuery のところでも出てきましたね）もたくさんあります。なので、特にスクリプトを覚えなくても、ブログくらいなら誰でも簡単にできてしまいます。そこが CMS のスゴいところですねー。
でも自分の思うような Webサイトを作るなら、少なからずカスタマイズする必要もありますから、スクリプトについての知識は必要になります。
注釈：WordPress のテーマというのは、Webサイトのデザインや最低限の機能がパッケージされたテンプレートのようなものです。
5. 結局どのスクリプトを勉強すればいいの？
やりたいことによって、覚えるべきスクリプトは変ってきますよね。でも Webサイトを作成するなら、クライアントサイドの Javascript は覚えた方がいいかもしれませんね！Javascript でできることはとってもたくさんあります。Javascript では、DOM、Ajax なんてものも出てきて、とっても勉強のしがいのあるスクリプトです。
サーバーサイドサイド・スクリプトについては、私が PHP くらしかできないので、PHPを簡単に紹介すると … 決して難しいスクリプトではありませんよー。もちろん完全に習得するにはたくさん学習する必要はありますが、初心者さんでも馴染みやすいスクリプトだと思います。
PHP を学習するなら、合わせて MySQL（データベース）についても少し学習した方がいいかもしれません。もちろんデータベースなんて使わないよーという人なら必要ありませんけど。
PHP、MySQL おすすめ書籍
5.1. スクリプトを勉強するには何が必要なの？
Javascript を学習するならテキストエディタとブラウザがあれば、特に必要なものはありません。最初のうちは、無料で利用できるテキストエディタで十分だと思います。
無料で利用できるテキストエディタ
- CotEditor
- Mac用。スプリクトごとにカラーリングもできたりするので使いやすいと思います。
- Fraise
- Mac用。フリーとは思えない素敵エディタです！
- さくらエディタ
- Windows用。機能的には十分な感じがします。
クライアントサイド・スクリプトである Javascript は、ブラウザがあれば動きますが、サーバーサイド・スクリプトを動かすためには、あなたのパソコンの中にサーバを用意しなくてはなりません。
サーバって聞くと、インターネット上にあるものでレンタルしなきゃいけないっていうイメージを持ってる人もたくさんいるみたいですが、サーバはあなたのパソコンの中に構築することかできます。ローカルサーバとか、ローカル環境とか言ったりします。
サーバをインターネット上ではなくて、自分のPCの中に置いてあるってことです。ローカルサーバで Webサイトを作って、完成したらインターネット上のサーバにアップするって感じです。
私は PHP + MySQL （サーバーサイド・スクリプト + データベース）で Webサイトを作っているので、他のスクリプトの環境は分からないです。なので PHP + MySQL 環境を簡単にローカルに構築する方法だけになってしまいますが、ご紹介します。
5.2. 無料で利用できる PHP + MySQL のローカルサーバ
サーバをセットアップして、PHPをインストールして、MySQL を構築して … なんて個別に難しいことをしなくても、Apache（あぱっち）というWebサーバ、PHP、MySQL がセットになっていて、無料で簡単に利用できるパッケージがあります！
- MAMP
- Mac用の Apache、PHP、MySQL のパッケージです。有料版のMAMP PROもあります。
- XAMPP
- Windows、Linux、Mac OS X、Solaris の Apache、PHP、MySQL のパッケージです。
- WampServer
- Windows用の Apache、PHP、MySQL のパッケージです。私は使ったことがありません。
これをインストールすれば、ローカルで PHP + MySQL の環境が簡単にできちゃいます！しかも無料なんてうれしすぎます。
6. あとはいろいろいじってスクリプトを勉強しましょう
これで、クライアントサイド・スクリプト、サーバーサイド・スクリプトの両方を勉強する環境は整いました。インターネット上のいろんな Webサイトを参考にして勉強するのもいいし、書籍を購入して勉強するのもいいと思います。
6.1. WordPressもダウンロード
PHP + MySQL 環境で使える CMS – WordPress もダウンロードして、あなただけの Webサイトを作ってみてはいかがですか？色んなスクリプトを覚えながら、自分だけの Webサイトを作っていくのは楽しいですよー。
-
DOWNLOAD
今回は、Webサイトで色々やりたいことがあるけれど、どんなプログラム言語を勉強すればいいのか分からないっていう人に、参考にしてもらえればいいな … という記事でした。私が PHP 以外のサーバーサイド・スクリプトに詳しくないので、こういうことがしたいなら、コレ！というような紹介ができなくてごめんなさい。
私自身、PHP、WordPress などで Webサイトを作ることが多いので、 PHP をお勧めするよう内容になってしまいましたが、人それぞれやりたいことがあって、それにあったプログラム言語があると思います。何を勉強すれば、自分の作りたい Webサイトが作れるようになるのか … その参考にしてもらえれば嬉しいです。
7. 追記：PHPのセキュリティーについて
PHP のセキュリティーについて … というコメントを頂いたので、追記させてください。最初からセキュリティーについて少し触れておくべきでした。ごめんなさい。
7.1. 入力のフィルタ
PHP のようなサーバーサイドスクリプトを扱う場合、常にセキュリティーの事を考えながらコードを書く必要があります。ユーザーからリクエストを受けて、サーバーが処理をするという流れの中では、不正なリクエストがあった場合の事を考えておかなくてはいけません。
インターネット上に公開する以上、これは必ず行わなければいけない大事な事なので、自分でコードを書いて Webサイトを運営する場合は気をつけてくださいね。
ユーザーからのリクエストに対しては、基本的にフィルタを設けて、Webサイト（あなた）が許可するもの以外は受けつけないようにしましょう。
簡単な例を上げると、お問い合せフォームに名前を入力するテキストボックスがあったとします。ここにデータベースの値を改ざんするような SQL コマンド を入力して送信するとどうなるでしょう？送られてきた SQL コマンドをフィルタを通さずに処理すると、データベースの値を改ざんされてしまう事だって起こってしまいます。
こういう攻撃を SQL インジェクションといいます。ユーザーからのリクエストは、常にフィルタを通して、通ったものだけサーバで処理をすすめた方が安全です。
7.2. 出力のエスケープ
今度は出力時、PHP が動的にコードを吐き出し、ブラウザで閲覧できるように出力した場合を考えてみます。これも簡単な例ですが、ユーザーの入力した値を出力するときは、必ずリスクが伴います。入力が適切にフィルタされて、エスケープされていなければどういう事が起こるでしょう。
初心者さんにも分かり易く説明するために、HTMLタグをエスケープせずに出力した場合を考えてみます。入力フォームの ”名前” を入力する欄に、“<h1>高橋 のり” と、終了タグのない h1 タグが入力されたとします。これをエスケープしないでそのまま画面に出力するとどうなるか？
<h1> タグによって文字は大きくなり、それ以降終了タグもないので、Webページ全体の文字が大きくなってしまいますよね。これは <h1> タグだから害はありませんが、悪質な Javascript のコードだったりしたら大変です。ブラウザのクッキーを盗み取られたりすることだってあります。
PHP で動的に作られた Webページを画面に出力する場合にも、入力時と同様に気を配り、エスケープ処理などをする必要があります。
PHP は初心者さんにも親しみやすいスクリプトだと思います。でも同時にセキュリティーについても学ぶ必要も出てきます。ここで紹介したことはセキュリティーについてのほんの一部です。
ファイルアップロード攻撃、クロスサイトスクリプト攻撃、HTTPリクエストの偽装、SQLインジェクションなど、様々な攻撃からサーバを守るため、セキュリティーについて勉強しなくてはなりません。
コメント欄で指摘されたように、こういう事は最初から紹介しておくべきだったなと反省しています。
Comments
Thank you for the comment.