コーディングの流れ

これは、jQuery/JavaScriptにかぎらず、大抵のプログラミング言語・HTML/CSSまでを含んだ「コーディング」全般に共通した、制作の作業フローです。

  1. まず、言葉の世界で、これからつくるものの動作を把握する
    「どういうとき・どういう順番でどういう処理をするのか」
  2. プログラムコードを書き始める前に、言葉でコメントを書いていく
  3. コメント各行の次の行に、実際のコードを書いていく
    (埋めていく・置き換えていくイメージ)
  4. 確認→修正 の繰り返し
  5. テスト
    最も愚かなユーザー・最も意地悪なユーザー・悪意のあるユーザーとして様々な操作を行ってみた時に、どのような動作をするか?

 

ポイント

  • 何度も繰り返し実行される処理は、関数として括る(くくる)
  • 複数の処理は、同時に動作して良いのか、終わってから次の動作に移るのか?

 

基本的なjQueryのおさらい(1)
http://zokei.koekatamarin.com/archives/647
の続きです。

(1)がわかりにくかったですか?
ここではより具体的かつ根本的な解説を試みます。

 

準備と書き方の流れ
1. jQueryを読み込ませる
2. “おまじない”を書く
3. [主語] 要素を選択して、
4. [動詞] 何かを行う
5. [イベント] いつ・どういう時に

 

1.jQueryを読み込ませる

 

2. “おまじない”を書く

「ページがロード完了したら、以下の処理を実行」という意味

 

※. [主語]と[動詞]

$(セレクタ).メソッド(引数)

 

3. [主語] 要素を選択

$(‘div’).css(‘color’,’red’);
セレクタ

CSSで馴染み深いセレクタ

  • IDセレクタ $(‘#container’)
  • classセレクタ $(‘.selected’)
  • 全称セレクタ $(‘*’)
  • 子孫セレクタ $(‘p span’)
  • グループ化 $(‘p, div’)

IE6のせいで使えなかったセレクタも使える

  • $(‘ul > li’) 子セレクタ
  • $(‘dt + dd’) 隣接セレクタ
  • $(“a[target=’_blank’]”) 属性セレクタ

フィルター系

  • li:first 最初のもの
  • td:even 偶数番目
  • p:contains(‘重要’)

 

4.[動詞] 何かを行う

$(‘div’).fadeIn();
   メソッド
 
取得と設定

2つ目の引数があるかないか
取得  $(‘p’).css(‘color’);
設定  $(‘p’).css(‘color’,’red’);

引数があるかないか
取得  $(‘div’).width();
設定  $(‘div’).width(‘150px’);

 

メソッド例

attr(‘href’)
width()
height()
css()
html()
text()
val()
addClass()
removeClass()
toggleClass()
fadeIn()
fadeOut()
show()
hide()
animate()
ajax()

5. いつ・どういう時に → 「イベント」

クリックされた → 「クリックイベント」

イベント例
dblclick
hover
keydown
scroll
resize

はじめに
この授業は、ノンプログラマーを対象にしたjQueryの入門・復習を目的としてきました。

ここでは、jQueryに代表されるクライアントサイドのコーディングとは異なる、サーバーサイドの世界について説明します。

サーバーサイドとは
サーバーサイド

サーバーサイドプログラム構築フロー
サーバーにはsshで接続します。
サーバーに、PHP・MySQLなどが適切にインストールされている必要があります。
サーバー上のMySQLは、コマンドラインから操作できます。
ターミナル

phpMyAdminを使えば、ブラウザから簡単に操作できます。
phpMyAdmin_img

空のDATABASEを作成します。(CREATE DATABASE)
テーブルを作成します。(CREATE TABLE)
試しに、テーブルにテストのためのデータを作ります。(INSERT)
サーバーサイドプログラムからデータベースに接続して、このデータを表示してみます。

ログインフォームの例

次に、簡単なログイン画面のコーディングについて考えてみます。

実際にはこの基本的なコードに加えて、
・エラーメッセージの表示
・sessionによるログイン状態の維持
・遷移後のページでsessionからログインしているかどうか確認
・cookieで入力した内容を保存
・セッションハイジャックへの対応
・サニタイズ
  ・クロスサイトスクリプティング(XSS)対策
  ・クロスサイトリクエストフォージェリ(XSRF)対策 ※遠隔操作事件
・パスワードを暗号化する(ハッシュする)
・通信を暗号化する(SSL)
・何度も認証に失敗したら画像認証を表示させる・アカウント凍結
などの処理が必要です。

 

フレームワークを使う意味

このように、ログインフォーム一つ作るだけでも結構大変です。
ウェブプログラムはこのようなお決まりの処理のカタマリですので、もっと簡単に扱えるような仕組みが存在します。
それが、「フレームワーク」および「ライブラリ」です。

「ライブラリ」とは、よく使う機能を簡単に呼び出せるようにした、関数の詰め合わせのようなものです。PHP標準の関数に食わせて、ライブラリで拡張された関数を使うことが出来ます。
「フレームワーク」とは、「ライブラリ」の集合で、PHPであることを意識せずにコーディングすることが出来るまでに便利に関数が詰め込まれた、文字通り大きな「枠組」になります。
jQueryが、JavaScriptの「フレームワーク」であるのと同様です。
WordPressは、フレームワークではなく、完全に構築された「製品」「ソフトウェア」です。
WordPressが、インストールしていじるだけでシステムが完成するのに対し、
フレームワークは、インストールした上で、それを使ってプログラミングをしてシステムを開発していきます。

フレームワーク

今日のウェブ開発においては、何らかのフレームワークを用いてウェブシステムを構築することが一般的です。

言語ごとに、様々なフレームワークが存在します。
http://ja.wikipedia.org/wiki/Web%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF

フレームワークを使うには当然、使えるようになるための学習コストが発生しますが、一度覚えてしまったら高速な開発が可能になります。

フレームワークを理解するには、そのフレームワークのマニュアルを使います。
また、フレームワークという概念そのものに関連する考え方、すなわち「MVC」「OOP」「デザインパターン」といった事柄も基本的に理解しておくとさらに学習がスムーズになるでしょう。

 

以上がPHPとMySQLの大まかなイメージ説明です。
具体的な内容についてはこの授業では触れませんが、興味がある方は一冊本を買えばかなり掴めるはずです。

次のステップとしては、
PHP + MySQLでサーバーサイドをやってみたい | メディアデザイン実習J
http://zokei.koekatamarin.com/archives/111
をまず一読してください。

 

さらに今は、オンラインの入門用コンテンツが充実していますので、こういったものを積極的に利用して下さい。

プログラミングのレッスン検索 – プログラミングならドットインストール
http://dotinstall.com/lessons/search#!/filter/PHP

PHPの学習ならPHPBook
http://www.phpbook.jp/