BRIDGE

タグ TechAcademy(テックアカデミー)

子供向けプログラミングの自習教室を開ける「TechAcademyキッズ」、4月からプログラム提供開始へ

SHARE:

オンラインプログラミング教育を手がけるキラメックスは2月26日、小・中学生向けのプログラミング教室運営支援パッケージ「TechAcademyキッズ」を4月から提供開始すると発表している。 TechAcademyキッズは2020年から始まる小学生向けのプログラミング教育に照準を当てたもの。マサチューセッツ工科大学メディアラボが開発したビジュアルプログラミング言語「Scratch」を使った学習コー…

TechAcademy

オンラインプログラミング教育を手がけるキラメックスは2月26日、小・中学生向けのプログラミング教室運営支援パッケージ「TechAcademyキッズ」を4月から提供開始すると発表している。

TechAcademyキッズは2020年から始まる小学生向けのプログラミング教育に照準を当てたもの。マサチューセッツ工科大学メディアラボが開発したビジュアルプログラミング言語「Scratch」を使った学習コースを用意しており、子供たちはブロック状になっているプログラミング内容をブラウザ上で組み立てることで、キャラクターの動きなどの制御をゲーム感覚で覚えることができる。

TechAcademy_001

今回、同社が提供するのはレクチャー内容をまとめた動画をレッスンに組み込んだ教育事業者向けのパッケージ商品で、主に対象となる子供たち向けにプログラミング教室などを始めたいスクール経営者に対して販売される。教育コンテンツ自体は自主学習できる形式で設計されているため、事業者は分からない場合のサポートのみで学習教室を開くことができる。

同社に価格を確認したところ、導入にあたっての初期費用と生徒一人あたりの月額費用を徴収するモデルということだった。また、各教室で目安となる価格設定についても設けるということで、このパッケージを使ったスクールによる極端な価格差がなくなるよう調整する。今後はウェブアプリケーションやスマートフォンアプリ、ゲーム開発などより高度な学習教材の提供も予定している。

via キラメックス

ユナイテッドが約6億円でTechAcademy運営を買収、クーポンからのピボットを経てスクール事業を拡大

SHARE:

スタートアップ村からまたひとりスター選手が巣立っていった。 アドテクを中心とするネット総合事業を手掛けるユナイテッド【2497】は2月3日、オンラインスクール事業「TechAcademy」を運営するキラメックスの発行済株式100%を取得し、完全子会社化すると発表した。 開示された情報(リンク先はPDF)を確認すると、取得にかかる費用は総額で約6億円。内訳としては現在の経営陣の株式332株をユナイテ…

IMGP0237
キラメックス代表取締役社長の村田雅行氏とユナイテッド代表取締役社長COOの金子陽三氏

スタートアップ村からまたひとりスター選手が巣立っていった。

アドテクを中心とするネット総合事業を手掛けるユナイテッド【2497】は2月3日、オンラインスクール事業「TechAcademy」を運営するキラメックスの発行済株式100%を取得し、完全子会社化すると発表した。

開示された情報(リンク先はPDF)を確認すると、取得にかかる費用は総額で約6億円。内訳としては現在の経営陣の株式332株をユナイテッド株16万3012株にて交換(注:本日時点の株価約1500円で計算)し、残りの外部株主が保有する473株については約3億5500万円の現金にて取得することとなっている。本日付の取締役会にて決議し、全株式の取得完了は2月19日としている。

ユナイテッド代表取締役社長COOの金子陽三氏にコメントを求めたところ、キラメックス社との間で話が始まったのは昨年の11月から。ユナイテッドとして順調な事業成長を続ける中、さらなる拡大に向けた施策として企業買収についてはずっと検討を続けていたという。

ちなみにユナイテッドの直近3期(3月期)の上半期の売上は2014年が27億2400万円、15年が39億6100万円、16年が50億8400万円と増収増益傾向を続けている。(同社決算資料より

「元々、TechAcademyという事業には興味があり、コンタクトをさせてもらいました。サービスを広げる感じを掴んでいる様子もあるので、今後についてはコース数を増やし、受講者数を増やすという掛け算で拡大できるのでは」(金子氏)。

ユナイテッドは元々、アドテクに強いネット企業だ。キラメックス代表取締役の村田雅行氏の説明では、2012年11月に開始したスクール事業「TechAcademy」はこれまでに全国で7000名の受講生を獲得、企業研修についても100社ほどが導入しており、メンタリングに関わる外部メンターの数は50名の規模になっているという。今後TechAcademyは、ユナイテッドのマーケティング力を背景に拡大を目指すことになる。

クーポン共同購入「KAUPON」の栄枯盛衰

stores_top1
ソーシャルコマースに舵きりした時期のKAUPON。

もしかしたらキラメックスのことをKAUPONという事業で覚えている方もいるかもしれない。

2010年ごろから始まったクーポン狂想曲は、米GROUPONの上陸、リクルートの参入、雨後の筍のようなコピーキャットの出現から「おせち事件」などの一時的な社会現象にも発展し、その後、ジェットコースタービジネスのアップダウンに耐え切れず、多くのサービスが閉鎖の憂き目に遭うという道筋を辿ることとなった。

キラメックスが参入したのは2010年5月10日。忘れもしない、国産スタートアップ第1号の産声が上がったニュース記事を書いてるその日に2号となるKAUPONがリリースされ、この後、週単位でサービスという名のコピーが生まれ続けた状況は正直、異常だった。

キラメックスはこの波にいち早く乗り、サービスインの翌月、6月には個人投資家からの資金調達を実施し、さらに9月には当時として大型の金額となる2億円の資金調達をグロービス・キャピタル・パートナーズから受けることとなる。

しかし前述の通り、クーポン共同購入レースは熾烈を極める。米GROUPONが類似サービスを世界各地で次々と買収し、日本国内はリクルートが「ポンパレ」を開始するなど、資本力勝負の様相が強くなっていった。

当時の話を村田氏に聞いたところ、最盛期には4000万円ほどあった月商が、みるみる目減りし、8分の1の500万円ほどに落ち込んでいたという。このタイミングで村田氏ら経営陣はこのクーポン事業から撤退することを決断する。(完全な事業譲渡は2013年8月)

ただ、当時はまだクーポン事業からの延長を模索しており、ソーシャルコマースなどの方向性を考えて右往左往している様子がインタビューから伺える。最盛期には20名ほどいたスタッフも事業変更のタイミングでは4名ほどに減っていたそうだ。

<参考記事>

TECHACADEMY_002

そんなソーシャルコマースと並行して彼らが立ち上げたのがこのTechAcademyだった。2012年11月に開始したスクール事業の話を聞いた時、私はクーポンからスクールとはまた節操がない変更だなと首を傾げたのを覚えている。

でも村田氏はこの当時、ひとつ繰り返してた言葉がある。

それがキラメックスという会社に込めたビジョンだ。前述のインタビューの終わり、村田氏に「事業の方向転換で大切なことは?」と聞いた時、彼はこんな風に答えている。

村田氏:事業に対するビジョンです。「埋もれているいいものをインターネットを使って表に出そう」という理念を表現するためにクーポンという方法をとりました。もしこの手段にほころびがあるのであれば、その手段を変えればいいだけのことです。この軸がブレないことが大切だと思います。(当時のインタビュワーは筆者)

今から思えばキラメックスは村田氏ともう一人の共同創業者、取締役COOの金麗雄氏の二人から始まった小さな受託事業だった。

そんな二人がインターネットの力でまだ見ぬ可能性を発見することに魅力を見いだし、サービスを立ち上げていった。私はKAUPON好調の時、何度か二人に「社名を変えないのか?」と聞いたことがあった。しかしそんなことはそぶりも見せなかった。

新しい可能性を発見するーーここに二人の起点があるから、お店やサービスを発見するクーポンも、新しい時代にふさわしい人材を見つけ出そうというスクール事業も、彼らにとっては同じ目的であり、やってることは何も変わっていないのだ。

オンラインスクール事業「TechAcademy」の積み上げ

TECHACADEMY_001

2012年11月に開始した当初、スクール事業はインターネットとは全く関係なく、キラメックスがオンラインビジネスをやっていた頃の面影はなくなっていた。オフィスは教室に変わり、サイトは申込するためのフォームだけしかなかった。

<参考記事>

そんなTechAcademyがオンライン化されたのが昨年5月のことだ。村田氏や金氏はこのオンライン化の構想を持ちつつ、最初の立ち上げ期は地味にオフラインの受講ビジネスを続けていった。

結果として積み上がった数字は冒頭の説明の通り。彼らはこれまで自分の可能性に気がつかなかった人たちに、新しい未来を見出す手伝いを続けている。

「KAUPONでわかったのはあんまりメディアに出ちゃダメだってことですね(笑。TechAcademy開始当初は教室なども使っていつでも受講できることがメリットになるのではと考えたのですが、あまりワークしませんでした。代わりに始めた期間限定のブートキャンプが形になったので、今後はこれを全国津々浦々に拡大させていきます」(村田氏)。

信念を持って事業に臨むというのが如何なることなのか。

村田と金の両氏はキラメックスという事業を通じて、私たちにスタートアップのある一面を教えてくれたように思う。

TechAcademyがオンライン学習をスタート、クラウドソーシングでプログラミング教育を変える

SHARE:

プログラミング特化のスクール「TechAcademy」を運営するキラメックスは3月2日、オンライン学習サービスの提供開始を発表した。 PHP、MySQL、JavaScriptなどがオンラインサービス上で学習できる「PHPエンジニアコース」から開始、利用料金は月額3万円で1週間のフリートライアル期間を設けている。受講者はオンライン学習サービスを通じて動画視聴による学習を進めながら、不明点については…

D1AC9F87-E33C-42B7-B1AA-18693A4B9ED4

プログラミング特化のスクール「TechAcademy」を運営するキラメックスは3月2日、オンライン学習サービスの提供開始を発表した。

PHP、MySQL、JavaScriptなどがオンラインサービス上で学習できる「PHPエンジニアコース」から開始、利用料金は月額3万円で1週間のフリートライアル期間を設けている。受講者はオンライン学習サービスを通じて動画視聴による学習を進めながら、不明点についてはオンライン上で待機している現役のエンジニアにチャットで質問をすることができるほか、課題で出されたコードのレビューなども実施してくれる。

チャットサポートの時間は平日が10時から13時と17時から22時の間。土日祝は10時から18時までとなっている。キラメックス取締役COOの金麗雄氏の話によれば、リアルスクールのTechAcademyに在籍するエンジニア講師の数が約100名ほどで、今回新設されるオンラインスクールのサポートにはこの内、約半数ほどが対応するということだった。なお、彼らはクラウドソーシングの方式で場所を選ばずこの業務に対応することになる。

なお、TechAcademyはすでにスクールとしての運用実績を2年経験しており、今回のオンラインサービスも一部企業に研修用として導入を進めていた。結果として同社が比較するプログラミング研修時間よりも半分で習得が完了した事例も出てきているという。

「企業研修の依頼は結構あります。大手上場企業でプログラミング未経験の方々をトレーニングして、会社でOJTが受けられる程度にまで持っていくというようなタイプですね」(金氏)。

オンラインでのプログラミング学習は海外でCodecademyを始め、国内でも最近になってProgateシラバスドットインストールなどがあったが、実際の先生をクラウドソーシング方式で配置する「ハイブリッド」なスタイルは珍しい。

データベース基礎、モデルとビジネスロジックの関係 ーー「非エンジニアの起業家が知っておくべきプログラミングの知識 #09」

SHARE:

編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから 「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第…

TechAcademy__テックアカデミー____ITに特化したスクール編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから

database plan
photo credit: tec_estromberg via photopin cc

「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第9回目のテーマは「データベースの基礎」です。

前回は「これから始めるRubyのエッセンス」というテーマでお送りしました。今回は、PHPやRubyなどサーバーサイドで動作するプログラミング言語と合わせて、ユーザーの登録情報といったWebサービスを構築する上で必要不可欠な「データベース」の考え方についてご紹介します。

本連載は、インターネット業界で、これまで技術的なバックグラウンドを持たないまま起業した方や、これから独立・起業しようと思い立った方をサポートするための、連載記事です。

データベースを学ぶ上で、書店に並んでいる技術書やWebの学習サイトなど多くの教材と同じく、まず「データベースの概念・本質」の理解、そして「リレーショナルデータベース」の概念を理解することからスタートしています。本稿でも、それらを初学者を対象にして広く浅く取り扱いつつ、後半は近年話題のトピックも交えたコラム形式でお届けします。

そもそもデータベースとはなにか?

IT・Web業界以外の一般の職種の人にとって、「データベース」は全く馴染みのない言葉かもしれません。データベースは、高等数学のように目に見えない「概念」を扱うものに近い存在のため、頭の中でその姿を連想することは非常に困難です。日常業務の中で、Excelなどで多くの「データ」に触れていても、データベースの意味合いとは異なります。

「価値のあるデータ」とはなにか?

データベースの学習を始める上で、まずは「データ」と「情報」の違いについて整理してみましょう。データを「客観的な事実性がある、数字や文字、バイナリデータ(画像/音声)で表すもの」と定義したとき、「8月1日の日経平均株価の終値」や「今日の東京都の最高気温」であったり、「B事業部の◯月◯日の売上金額」だったりと、世の中にあふれている普遍的なものです。これらを単なる「データ」として無機質に存在するものと考えたとき、改めて「情報」は何を指すか考えてみてください。

「情報」を辞書を引いてみると、”ある特定の目的について、適切な判断を下したり行動の意志決定をするために役立つ資料や知識” (大辞林 第二版) とあります。何らかの意思決定を下すとき、「参考に値する(価値ある)データ」=「情報」である、ということですね。人や組織ごとに「価値あるデータ」の基準は異なりますし、時勢やとりまく市場環境によっても変化するでしょう。

データを扱うときに価値を生むとき、それは「情報」となります。ここで、価値あるデータの要件とは何か、Web上で動くアプリケーションがデータをやり取りをすることを前提にして、いくつか例を挙げて考えてみましょう。

  • データの正確性:当然ですが、データそのもの間違っていると本末転倒です。
  • データの独立性:データの構造が変更されても、アプリケーションに対して影響を及ぼさないことが重要です。
  • データの整合性:データ同士に矛盾がなく正確で、それらの関係構造が保たれている度合いを意味します。
  • 冗長性の排除:データを論理的な関係に基づいて設計されていた場合、データの重複による矛盾を防ぐことができます。
  • 同時処理の制御:同じデータを複数のアプリケーションからアクセスした際に、データを保護します。(排他制御)
  • データの可用性:データをすぐに取り出せる状態で保持しておくことを意味します。

上記にあげた項目は、データベースの特徴として一般的に箇条書きにされるものと、ほぼイコールです。現代は、非常に複雑な情報社会です。様々なデータがデジタル形式で偏在している中で、大量のデータを保持し、正確に管理する手法がデータベースです。

Webサーバー上のデータベースも、アプリケーションと連携して「情報」を作り出し、意思決定の判断を下すことを目的として、データベースが活用されています。
データベースを一言で要約すると「たくさんの情報を一元的に管理でき、いろいろな目的のために使用できる」。説明のための言葉はとても平易ですが、実際どのようになっているのか、背景知識から少しずつイメージを掴んでいきましょう。

データベースの背景知識

「人が利用可能な形式(モデル)を持ったデータの集積」という意味でのデータベースの概念が誕生し、コンピュータの世界で成立したのは20世紀の中盤頃のことです。1970年頃、当時IBMに在籍していた技術者 E.F.Codd氏によって「リレーショナル(関係)データベース」という革命的な概念が提唱されるまで、コンピューターサイエンスのデータベースは抽象度の低い、階層モデル(物理層をダイレクトに反映)やネットワークモデルが主流でした。

階層型モデルとは、データをツリー状の構造で管理する仕組みです。パソコンのファイル管理がイメージしやすい例でしょう。ファイルをフォルダの中に分類して整理し、またフォルダの中にフォルダを入れることもできる、階層型構造になっています。これはツリー構造(木構造)とも表現できます。

データベースの分類(一例)

  • 階層型(ツリー)ネットワークデータベース 木のような構造を持ち、各レコードは、ただ1つの親レコードを持っています。パソコンのファイル構造が一例です。
  • 網型(ネットワーク型)データベース 各レコードが複数の親レコードをもつことが出来ます。全体として「網目」になっています。
  • リレーショナル(関係)データベース 1970年に理論化されたモデルで、Excelのような表形式でデータを管理しています。本稿でこのあと解説します。
  • オブジェクト指向データベース オブジェクト指向型プログラミングの設計思想を、データベース設計に適用したモデルで、対象世界をデータとそのデータに対する操作を持つ「オブジェクト」の集まりとして定義します。

リレーショナルデータベースの考え方

現在、最もポピュラーとされているデータベースモデルは、リレーショナル(関係)データベース(RDB:Relational Data Base)です。1つのデータ郡(例えばユーザー情報、商品情報など)を「テーブル」として定義し、その中は利用者から見ると2次元の表としてデータが取り扱われます。

「社員情報」というテーブルがあったとき、その中には「社員コード」「名前」「入社年月日」などが「カラム」(列)として存在し、実際に存在する社員1人に対してデータの行(レコード)が存在します。

他のテーブル同士とリレーション(関係性)を持てる

9bcaf4ba2d920d5c1bbfafcb376a9a52

さて、データベースの中にある「社員情報」テーブルには、名前や社員コードなどの情報が保持されていますが、ここに「部署」の情報を記入することを想定してみます。社員情報テーブルの中に「部署名」を入れることも出来ますが、リレーショナルデータベースの考え方では、「部署」という新たなテーブルを作成して独立させることが一般的です(既存のデータベースに対して行う場合、「正規化」と呼ばれます)。

「部署」のテーブルには、「部署コード」「部署名」といったカラム情報が定義されており、レコードとして「商品開発部」「営業部」などのデータ(レコード)が1件ずつ保持されています。

社員が1つの部署に所属するとしたとき、「社員情報」テーブルと「部署」テーブルにリレーションを張ることができます。「社員情報」テーブルに外部キー(他のテーブルと関連付けをするためのカラム)として「部署コード」を持ちます。「社員情報」テーブルには部署名のデータは存在しませんが、外部キーとして部署コードを持つことで、社員がどの部署に属しているか、「部署」テーブルから部署名を参照することができます。

データベース操作言語「SQL」

データベースと一緒に学ぶ必要がある「SQL(Structured Query Language)」とは、このデータベースを操作するための言語(記述)のことです。RubyやC言語などのアプリケーションのプログラミング言語とは異なり、リレーショナルデータベースを定義・操作することを目的としており、問い合わせ(クエリ)を記述します。

例えば、上記の2つのテーブル情報をもとに「広報部に所属する社員」の情報を取得したり、「商品開発部に所属している男性社員の数」などをカウントすることができます。本稿では一部のみしか紹介できないため、より具体的なSQLクエリの書き方については、SQLの学習サイトや、ITパスポート試験/基本情報技術者試験などの参考書籍を参考にすると良いでしょう。

SQLにも様々な種類がある

SQLはあくまで一般的な名称で、その中にはオープンソース・ソフトウェアの「MySQL」「PostgreSQL」や、米オラクル社が提供している「Oracle Database SQL」、よりミニマムなデータベース設計を想定して作られた「SQlite」などが挙げられます。

SELECT文

先ほど紹介した社員情報と部署のテーブルを使って、男性社員を取得するSQL文を書いてみましょう。

SELECT 名前 FROM 社員情報 WHERE 性別 = “男” //男性社員の名前を取得するSQL文

SELECT文は最も一般的なSQL文ですが、WHEREで条件を指定したり(この条件には、数字などで比較演算子 >= などを使うこともできます。)、ORDER BY句を用いることで、データ取得時の昇順・降順などを指定することができます。

231c77958de92d750e63774562225c25
「Oracle Database」を提供する米オラクル社/photo credit: yanec via photopin cc

リレーショナルデータベースは、ローカルネットワーク内で「顧客管理」「売上管理」「従業員管理」などに用いられていましたが、連載2の「インターネットとブラウザ」で紹介したWorld Wide Webの登場以後には、サーバーサイド上で動作するデータベース管理ソフトが誕生し、いわゆるユーザーが会員登録するCGM(Consumer Generated Media)アプリケーションや、商品情報データと顧客情報データ、そして決済するECサイトのような様々な「Webサービス」が誕生しました。

オブジェクト指向型言語の登場により変化した「リレーショナル」の概念

プログラミングを学ぶ上で「オブジェクト指向」といった言葉を耳にする読者も多いことでしょう。本連載の対象である初学者の場合は特に、プログラミングの勉強の独学の過程で、つまづくポイントの一つでもあります。(一方で、腹落ちできてしまうと、その後の学習効率が上がるでしょう。)

1990年代後半より、オブジェクト志向型プログラミングが勃興したことにより、従来のリレーショナルデータベースとの相性の悪さが問題として生じました。リレーショナルデータベースは、データを「テーブル」単位で管理して、オブジェクト指向型言語では、データは「オブジェクト」そのものとして扱います。

設計思想や構造が異なるため、データベースから取得したテーブル形式のデータを手動でオブジェクトのプロパティに割り当てる作業などが必要で、その逆も然りでした。このようにアプリケーションとデータベースの構造のギャップのことを「インピーダンスミスマッチ」と呼びます。

データベースから抽象化した「モデル」という考え方へ

オブジェクト指向とリレーショナルデータベースの相性の悪さ(インピーダンスミスマッチ)について触れましたが、現在はこれらを解消し、アプリケーションとデータベース間の橋渡しを受け持つ「O/Rマッパー(Object/Relational)」といったライブラリが登場しています。

よくスタートアップ企業で採用されている「Ruby on Rails」などのWAFにおいては、O/Rマッパーの標準ライブラリとして「Active Record」が有名です。このActive Recordの強力な機能が標準搭載されていることが、Railsを普及させた一つの要因ともいえます。

昨今のWebアプリケーション開発において、オブジェクト志向プログラミングとリレーショナルデータベースを橋渡しするメリットを2つ挙げるとすれば、(1) データベースにあるテーブル1つを1つのモデルクラスとして表現することができ(上記例では、社員情報というテーブルが1つのモデル)、リレーショナルデータベースとのギャップを防げます。

そして (2) MySQLやSQliteなど、データベース製品固有の方言については、O/Rマッパーが内部的に吸収するため、SQL命令文の微妙な違いに依存せず、アプリケーションへの影響を最小限に抑えることのメリットを享受できます。

脱リレーショナルのデータベース

データベースをとりまく近年の状況として、リレーショナル以外のデータモデルを持った「NoSQL」(一般的に”Not only SQL”と解釈)などが提唱されており、リレーショナルに依存しない KVS(Key-Value-Store)というモデルが普及しています。

KVSは、配列データでKeyに対してValueを1つ定めてデータを保持します。ハッシュ計算を行うことができるため、データマイニングなどより高速な処理が可能になります。GoogleのBigTable、アマゾンのAmazon DynamoDBなどで採用が行われています。NoSQLを広義の分類語句とすると、その中にある技術として「Redis」や「MongoDB」、以前までFacebook社の大規模データ格納に使われていた「Apache Cassandra」などが挙げられます。

データ構造(モデル)=ビジネスロジック?

あくまで初学者向けにコラム形式で、広く浅くトピックを扱っている本連載ですが、この記事のボリュームからもわかるように、広義の「データベース」は非常に奥が深く、コンピュータサイエンスの学問体系の中で、技術的/研究分野としての日々開拓が続けられているほか、ビッグデータ・データマイニングなど、統計学・数学的アプローチ、現場のビジネスニーズからも最重要視されるようになりました。

個人開発者や、アジャイルソフトウェア開発を中心思想に据えたスタートアップが、Web上でのサービス・スマホアプリなどを企画するとき、そのサービスを構成する要素を洗い出して、データ構造(モデル)を設計するプロセスがあります。

極論すると、このデータ構造の設計プロセスのタイミングで、ソフトウェアが完成せずとも既にそのサービス(ビジネス)の将来価値は半分決まっているといっても過言ではないほど、モデル設計がビジネスロジックに直結していることもあります。

プログラミングの教養・開発スキルだけでなく、データベースの概念を本質的に理解し、世の中にあふれる無秩序なデータ群の中から、社会に影響力を与える新たな「価値」をどのように生み出していくか ─ アプリケーションでモデル設計をする際には、その設計から生み出される「価値」にフォーカスして、度重なる試行錯誤からソフトウェア開発・設計の「センス」を、読者の皆さんが身につけられることを願っています。

次回はいよいよ最終回です。

これから始めるRubyのエッセンスーー「非エンジニアの起業家が知っておくべきプログラミングの知識 #08」

編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから 「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第…

TechAcademy__テックアカデミー____ITに特化したスクール編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから

e1dfff81991da328100035c7a4ba08ce

「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第8回目のテーマは「これから始めるRuby基礎」です。いよいよこの記事を含めて、残り3回となりました。

前回は「これから始めるPHP基礎 – 動的なサイトを作るためのエッセンス」というテーマでお送りしました。今回は、PHPと同様にWebサーバー上で動的なWebサービスなどを開発する言語として、特に小規模な新規のスタートアップ企業などで採用が普及している「Ruby」について解説します。本連載は、インターネット業界で、これまで技術的なバックグラウンドを持たないまま起業した方や、これから独立・起業しようと思い立った方をサポートするための、連載記事です。

「Ruby」は日本発のプログラミング言語

ここ数年、Rubyという言葉を耳にすることが多くなりました。特に、本誌「THE BRIDGE」を読んでいるような方は、2〜3人の技術者チームから始まる「スタートアップ」企業の多くで、採用されやすい主要言語としてRubyが挙げられていることをご存知のことでしょう。Rubyについて、簡単な基礎知識を振り返ってみます。

  • 日本人のまつもとゆきひろ氏(通称 Matz 氏)が1995年、個人で開発をスタートした言語
  • プログラマーが楽しめることを設計思想としている
  • シンプルな文法にも関わらず、本格的なオブジェクト指向プログラミングが可能
  • コンパイルが不要なインタプリタ言語である
  • 変数にはどのような型の値でも代入することが可能な、動的型付け言語
  • コミュニティが存在し、Ruby on Railsなどのフレームワークにより世界的に認知が広がる

他にも数多くの特徴は列挙できますが、本記事を書く上でいくつかピックアップしてみました。

Rubyの公式サイトはこちらです。最新のアップデート情報は、こちらのサイトをチェックするようにしましょう。

Rubyは楽しい = 初学者の最初の選択肢になりやすいか?

開発者の本人が監修した『たのしいRuby』という書籍が有名です。Rubyは、コードを書く人自身の「楽しさ」を尊重した設計思想で誕生し、現在もコアな価値として残されたまま、オープンソースプロジェクトとしてアップデートを重ねています。プログラミング初学者にとって、その謳い文句は非常に魅力的なものに感じることでしょう。

「RubyやPHP、Java、Objective-C、どの言語から始めれば良いか?」という疑問から始まることが多い、初心者の最初の一歩。Rubyを薦める理由を挙げるとすれば、「今日からすぐにでも始められ、日本人コミュニティが確立して日本語でのブログ記事などが多く、コードを書きながら一歩一歩の学習に手応えを感じられる」ことでしょうか。

Macユーザーであれば最初からRubyがインストールされていますから、難しい環境構築(プログラムを動かすための設定)をしなくとも、簡単にプログラミングに触れることができます。

Rubyが日本発であることの強み

Rubyは日本発のプログラミング言語ですが、日本だけでなく(特に「Ruby on Rails(以下RoR)」などのフレームワークが世界中で受け入れられるようになって以降)、小規模なスタートアップが最初に採用する言語として、その傾向が顕著になっています。例えば、開発初期のTwitterは、RoRで書かれていました。その他にもRoRで構成されているWebサービスとして、Ask.fm、SlideShare、GitHub、COOKPAD、食べログ など挙げればキリがありません。

まつもとゆきひろ氏の功績のおかげで、Rubyを主要言語として選んだ日本人プログラマは、世界に浸透しつつあるRubyの世界で、日本人であることに「ある種の誇り」のようなものを感じることもあるでしょう。昨今の日本において、IT教育の制度や、技術者の絶対数が足らない状況において、一人ひとりのエンジニアがそうした自尊心を持ったモチベーションで、世界中に潜在している問題解決のためのWebサービスや技術イノベーションを生み出すことは、とても良い状況だと考えられます。

cc428863871dbd7b84f5197181e9841d
photo credit: elliottcable via photopin cc

Rubyで “Hello World!”

前置きはさておき、定番の「Hello world!」を書いてみましょう。JavaScript、PHPでも同様におこなってきましたので、前回までの連載と合わせて、ぜひその違いなどを見比べてみてください。

Rubyでワンライナーを書いてみる

せっかくですからRubyの魅力を伝えるために、Hello World! をテキストエディタで保存するのではなく、直接コマンドライン上でワンライナー(1行で書く処理のこと)を書いてみましょう。Macの方はTerminalを開いて、以下のコマンドを入力してみてください。

ruby -e 'print "Hello world\n"'

Windowsの方は、OSや環境によってRubyのセットアップが必要な場合もありますので、ここでいったん環境構築のためにGoogle検索などを活用して、コマンドライン操作ができるまで保留にしておいてください。

Hello World! が画面上に表示されれば成功です。Rubyは文法がシンプルで柔軟性があり、助長な表現を省いた「ワンライナー」の記述が、ほかの言語に比べて比較的好まれやすい傾向にあります。より高度なアルゴリズムや処理を実現するワンライナーの洗練さを競い合う人たちもいます。(Perlのほうがより短く書けますが、Rubyでも十分です。)

実際に使える便利なワンライナー

デジタルカメラから取り込んだ9枚の画像が入った、「/2014/0725 」というフォルダがあることを想像してみてください。フォルダ内のそれぞれの画像は、1.JPG、2.JPG といった連番名で 9.JPG まで保存されています。

7bc151a1f7a7d674670342e0aa1296c1

これらの画像に対して、一括してリネーム(名前変更)する処理を、Rubyのワンライナーで記述することができます。まずは、要求定義(どうしたいか?)を考えてみましょう。

ここまでの連載で使ってきたアルゴリズム(関数、繰り返し処理など)を組み合わせて考えてみます。

  • 特定のフォルダに含まれる画像ファイルに対して操作をおこないたい → 処理を1回ずつ、終わるまで10回繰り返す
  • ファイル名は、Webにアップロードすることを想定して、「img_002.jpg」という形式にリネームする

まずは、コマンドライン上でで、リネームしたいフォルダ階層に移動(cd)します。

ruby -e '(1..9).each { |i| system "mv #{i}.JPG img_00#{i}.jpg" }'

586da7cdb0e3f08133daeba1041f881f

上記のコマンドを入力すると、そのフォルダ階層の 1〜9.JPGのファイル名が、img_01.jpg といった名前に変更されます。このように、シンプルな記述でも簡単な処理をおこなうことができます。

Rubyの学習方法と、コミュニティについて今日6時間だけ勉強すれば、明日からあなたもRubyist

Rubyは入門しやすいことが特徴です。学習方法のステップとして、以下のようなものを参考程度にご紹介します。

  • 丁寧に解説されたWeb上の無料学習リソース、ブログサイトを活用して、「まずは6時間だけ」と決めて夢中になってみましょう。定番のドットインストールや、まつもとゆきひろ氏も関わっているミニツクといったWebサイトを読んでみましょう
  • Code SchoolCode AcademyなどWebブラウザ上でコマンドライン体験ができるサイトを活用してみる
  • まず6時間は、Webで手に入る情報だけでRubyについて全体像を掴んでみましょう。そのあとに、入念な編集作業を経て発刊された書籍での学習をお薦めします。入門書は、前述した『たのしいRuby』など複数ありますので、書店のコンピュータ書籍コーナーで見比べてみると良いでしょう
  • 次のステップとして、Rubyの言語仕様から「実際にWeb上で動くサービス」にするために、Ruby on Railsや、より軽量なフレームワークである「Sinatra」などを学んでみてください。「Ruby on Railsチュートリアル」という書籍並みの情報量を扱って無料で公開しているWebサイトのほか、書籍では『パーフェクトRuby』『パーフェクトRuby on Rails』を机の上に置いて、リファレンスとして何度も読み重ねつつ、自分が作りたいもののイメージを手を動かして作り始めるのが、上達のコツです

中学生も、女子大生も触れているRuby

“元”中学生Rubyコミッターとして有名になった「そらは」さん(@sora_h)は、当時14歳でRubyの言語仕様の改善に関わる「コミッタ」として史上最年少で参加し、話題になりました。

彼は高校進学せず、現在はクックパッドで働いています。また、テレビCMにも出演する女優で、慶應義塾大学の学生でもあった池澤あやかさんは、大学の授業や研究室でRubyやRoRを学んだことがきっかけでWeb上でも情報発信するようになり、ちょうど2014年7月に『小学生から楽しむ Rubyプログラミング』という本を刊行しました。最近では、より下の年代へと、Rubyでプログラミングを学ぶような機会がみられるようになりました。

Rubyのフレームワークやライブラリ、定番ツール

「Ruby」を用いた開発で採用されることの多いWebアプリケーション開発フレームワークや、定番ツールには、RoRのほか、luentd、Chef、Capistrano、Vagrant、Redmine、Sass、Compassなど数多く挙げられます。中には、これらのツール群の充実のお陰で「Ruby」自体の存在価値が高められたと言っても過言ではないものも存在します。

RubyGemという圧倒的なライブラリの存在

一般的にはプログラミング言語と同様、Rubyにも外部の開発者が提供している、サードパーティ製のライブラリが提供されています。 それらの多くは、 “gem”(ジェム)という形式で公開されています。公式サイトから引用すると、”RubyGemsとはライブラリの作成や公開、インストールを助けるシステム” です。Ruby のバージョン 1.9 以降、RubyGems は標準添付となっています。

例えばRoRでよく使われるRubyの定番Gemとして、ユーザー登録認証の「Devise」、オブジェクトをページング制御してくれる「kaminari」、デプロイツールの「Capistrano」、デバッグツールとして「pry」などが数多くあります。

まとめ

世界には様々な性格・志向性のプログラマーがいますが、Rubyを自ら選択して活躍しているプログラマの多くには、Rubyの特徴のような性格の共通点が挙げられることも、しばしばあります。「設計思想を尊重し、きれいなコードを書く(=他の人が読みやすいコードを書く」「助長な表現を省いて、同じ記述を繰り返さず、なるべくシンプルに実装する」「楽しみながら仕事をする」といったように。あなたの身の回りや、メディアに出ているエンジニアの方々で、そんな気概をもってプログラマとしての職業に取り組んでいる人が、何人か見当たりませんか?

ffd12e13d1bc397e2c7c2cb6ae3ba84e
photo credit: Batuhan Kök via photopin cc

「シンプル」ということは、同時にそれだけ奥が深いということも示唆しています。あるいは、同じ言語を選んだときに「初心者と上級者がはっきりと区別できる」とも言えるでしょう。つまり、初学者が入門しやすく、上級者にとっては磨き上げることができる言語 ─ 数あるプログラミング言語の中で、ただ単に技術的な特徴を列挙するのではなく、1つのコラムとして説明するならば、それがRubyの真髄のような気がします。

この記事も含めて過去3回で、Webブラウザ上(クライアント側)で動作するJavaScript、サーバーサイドで動作するスクリプト言語のPHP・Rubyについて、初歩的ですが、基礎的な構文やコミュニティについて紹介しました。

次回の第9回は、データベースについて解説していきます。

これから始めるPHP基礎 – 動的なサイトを作るためのエッセンス ーー「非エンジニアの起業家が知っておくべきプログラミングの知識 #07」【ゲスト寄稿】

SHARE:

編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから photo credit: nyuhuhuu via photopin cc 「非エンジニアが知っておく…

TechAcademy__テックアカデミー____ITに特化したスクール編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから

bd97d9310eda701130716c41291ac190

photo credit: nyuhuhuu via photopin cc

「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第7回目のテーマは「これから始めるPHP基礎 – 動的なサイトを作るためのエッセンス」です。

前回は「これから始めるJavaScriptの基礎と全体像」というテーマでお送りしました。今回は、より具体的にプログラミングを学んでいただくために、PHPについて紹介していきます。本連載は、インターネット業界で、これまで技術的なバックグラウンドを持たないまま起業した方や、これから独立・起業しようと思い立った方をサポートするための、連載記事です。

PHPの基礎

これまでの連載記事の中で、マークアップ言語のHTMLと、スタイルに関する情報を記述していくCSS、そしてそれらの要素に対して操作や制御を行うための、JavaScriptについて解説しました。

  • HTMLとは、HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略称で、Web上の文書を記述し、またブラウザがそれを解釈するためのマークアップ言語(構造化言語)。
  • CSSとは、HTMLタグや独自で定義した要素に対して、大きさ・配置(余白)・レイアウト/色・タイポグラフィ(フォント) の指定など、スタイルに関する情報を、連続して記述していくもの。
  • Javascriptとは、ボタンをクリックした時にアラートを出す、文書の情報を書き換えるなど、HTMLやCSSを制御し視覚的な動きをつけていくもの。

そして今回解説する「PHP」は、これらのプログラミング言語で書かれた静的なウェブページに埋め込み・併用することにより、検索ができるデータベースサイト、ユーザーログイン/会員登録を想定したコンテンツ投稿型のWebサービスなど動的なウェブページを実現することを主な目的とした、サーバーサイドのスクリプト言語です。

一般的な通称として「PHP(ピー・エイチ・ピー)」が浸透しているため、なかなか聴いたことがありませんが、正式名称は「Hypertext Preprocessor」と呼ばれています。正式名称からも分かるように、Web上の「ハイパーテキスト」に対して処理を行うという設計思想が、予想できます。

初期のFacebookは、PHPで書かれていた

一般的にあまり知られていないかもしれませんが、Facebookは今から約10年前、PHPで記述されたウェブサービスとしてスタートを切りました。Facebookは、開発言語としてPHPを採用した理由について「シンプルな言語で学びやすいから。書くのも簡単だし、読むのもデバッグも簡単であるからだ」と公式に説明しています。

このことからもPHPがいかにシンプルで導入が簡単なのか、初心者にとっていかに敷居が低い言語かがうかがえます。2013年には、PHPで書かれていたコードのほぼ全体を社内で独自開発している「Hack」と呼ばれる新しい言語に移行させて運用しているものの、いまや12億人のユーザーを抱えるまでに成長したサービスのはじまりが、私たちに馴染み深いPHPだった事実を知っておくと、学習のモチベーションにつながるかもしれません。

静的サイトと動的サイトの違いについて

私たちが普段、何気なく使っている、FacebookやTwitter、YoutubeなどのWebサービスやWebアプリケーションのほとんどが、HTMLやCSSやJavascriptに加えて、PHPや次回で解説するRubyというサーバーサイドで動くプログラミング言語が使われて、設計・運営されています。ユーザーがマイページを持ちコンテンツを投稿したり、ログイン機能を持つものは「動的サイト」という位置づけになります。

一方で、「静的サイト」とはどのようなものでしょうか。個人のウェブサイトや学校、公的機関のウェブサイトは、HTMLやCSSだけで書かれているものが数多く存在します。このような静的サイトでは、すべてのユーザーに対して全てのページで全く同じコンテンツを表示させることしかできません。

PHPベースの「WordPress」は、世界のトップ1,000万サイト中、22.6%で採用

静的サイトは、PHPやRubyのようなサーバーで動作するプログラム言語を用いることよって、動的ページにすることも可能です。ブログツールとして有名なWordPressもまた、PHPとデータベース(MySQL)で作られた「コンテンツ・マネジメント・システム(CMS) 」です。

WordPressは2003年、Facebook創業者のマーク・ザッカーバーグ氏と同じ1984年生まれのソフトウェアエンジニア、Matt Mullenweg氏(現Automattic社 CEO)が当時19歳のときに開発したオープンソースのソフトウェアで、2014年7月現在、世界中のトップ1,000万サイトのうち、22.6%はWordPressで構築されていると統計データがあります(CMSの中でのシェアは60.4%)。

HTMLやCSS、そしてJavascriptを「クライアントサイド・スクリプト」と呼ぶのに対し、PHPはユーザーからのリクエストを受けてサーバーと通信をしながらページを表示するため、一般的に「サーバーサイド・スクリプト」と呼ばれています。RubyやPerl、そしてPhythonといった言語もこの中に分類されます。これらは、第2回「インターネットとブラウザ」でも少し解説しましたが、もう一度ここでポイントを押さえておくと良いでしょう。

PHPにおける環境構築

前述しているように、PHPはブラウザからアクセスし、サーバーとやり取りしながらリクエスト(結果)をユーザーに返すため、「サーバー」を構築する必要があります。JavaScriptはブラウザベースで動作するため環境構築は不要でしたが、PHPの場合は、実行するための「環境」をつくる必要があります。

ですが、現在のPHP(バーション5.4以降)は開発用のWebサーバーを内蔵しており、PHPのみをインストールするだけで利用できるようになりました。PHPの詳しい導入手順については本記事では割愛させていただきます(Macユーザーの方は「MAMP」、Windowsユーザーの方は「XAMPP」などで検索してみてください)。

まずは「Hello world」してみよう

43c1bda9b39a75cc0aa8d16e118ffad7

手始めに、最も簡単なPHPプログラムを書いて、動かし方を覚えましょう。プログラミング言語を学ぶ際にお決まりなのが「Hello, World」という文言を出力することです。PHPはサーバーで動作する言語として広く知られており、HTMLファイルのタグ の中に記述して、簡単なスクリプトを動かすことが出来ます。

<html>
<head>
  <meta charset="utf-8">
  <title>PHPでHello,world</title>
</head>
<?php
  echo "Hello World";
?>
</body>
</html>

続いて、少し応用してみます。以下は、簡単なおみくじを実装したものです。ランダムな数値を生成する「rand」という関数を使って、0か1かを生成し、$numという変数に代入しています。もしランダムで生成された数値が0なら「大吉」を表示し、それ以外なら「吉」を表示させるといった処理を、PHPを組み込んで書いています。これにより、HTMLやCSSだけでは実現できなかった動的な処理を行うことができます。

<html>
<head>
  <meta charset="utf-8">
  <title>PHPで簡単なおみくじ</title>
</head>
<?php
$num = rand(0, 1);
if ($num == 0) {
echo "今日の運勢は大吉です。";
} else {
echo "今日の運勢は吉です。";
}
?>
</body>
</html>

通常の静的Webページ(omikuji.htmlなどで保存するHTMLページ)に上記のソースコードを書き加えて、omikuji.php と、拡張子を変えて保存してみましょう。それをレンタルサーバーや、自分で用意したサーバー上でアクセスすると、PHPの処理が実行されます。

PHPの特徴は、これまでHTMLやCSSを用いて開発していたページから特に変更を加えることなく、そのまま部分的にプログラムの構文を記述することが出来ることです。初心者にとって敷居が低く学習しやすい反面で、コードが膨大になってしまいメンテナンス性が損なわれてしまうデメリットもあります。こうした問題を解決し、大規模なアプリケーションを構築したり、チーム開発を効率的に行うために考え出されたものが「フレームワーク」と呼ばれる概念です。PHPやRubyには、多くのフレームワーク(WAF)が存在します。

充実したフレームワークやライブラリ

簡単なPHPプログラムを書いてみたところで、目的に応じてPHPをより便利に扱えるようにした、有名なフレームワークをいくつか紹介してみましょう。

Webアプリケーションフレームワークとは、ユーザーの登録・編集・削除・ログイン機能といった、Webアプリケーションで汎用的に用いられる機能について、あらかじめ決め事(=フレームワーク)をもとに、簡単に実装することを目的としています。これにより、開発者は必要最低限の実装をするだけで目的の処理をスピーディに実装することができるようになります。

ただ簡単だったり、高速に開発できるようになるだけではありません。ファイル名の付け方、ディレクトリ構成といった、細部における命名規則など厳密に定められているフレームワークも存在します。プログラムを書く上でのスキーム、設計思想などが作りやすく、結果としてセキュリティ対策にも一定の効果があります。

CakePHP

日本国内に限らず、海外でもっとも人気のあるフレームワークです。もともとは「Ruby on Rails(Rubyのフレームワーク)」のPHPクローンを目指して設計されていましたが、現在は独自の進化を遂げており、手軽にWebアプリケーションが開発できるようになっています。

CakePHPでは、アプリケーション開発に必要な機能はすべて一つのパッケージにまとめられており、公式サイトからダウンロードした本体をWebサーバーにアップロードして、簡単な設定を行うだけで動作させることができるのが特徴です。このような設計思想は「フルスタック型」と呼ばれています。

また、CakePHPには独自のコーディング規約が存在します。データベースのテーブル名・ファイル名・クラス名などを規約通りに定義することで、もっとも簡単かつ、最短の手続きで目的の処理を実現できるように設計されています。規約が存在することで、どこの誰が見ても直感的に理解がしやすいコーディング目指すことができるため人気があります。

FuelPHP

PHP5で書かれたオープンソースのHMVCパターンを用いるフレームワークで、MITライセンスで提供されています。PHP5.3で書かれているため、開発に用いるにはPHP5.3.3以上のバージョンが必須になります。MongoDBやMySQLなどの「RDBMS(リレーショナルデータベースを管理、運用するためのシステム)」を標準でサポートしており、RESTfulなコントローラーもすぐに作成できるという点と、後述するCodeIgniteと同様のマイクロフレームを採用しているため軽量で高速に動作する点が特徴となっています。

CodeIgniter

CakePHPやFuelPHPに次いで最近人気のあるフレームワークです。CakePHPのフルスタック型のような、必要のない機能まではじめに全部パッケージに入れてしまうのとは本質的に異なり、必要な機能をその都度追加していく設計になっているために大変軽量に動作させることが出来る点が特徴です。またコーディング規約などに縛られないため自由にコーディングすることが可能ですがその反面、大人数でのチーム開発にはあまり向いていないという側面を持ち合わせます。

Symfony

Sensio Labsというフランスの会社が中心となって開発している、オープンソースのフレームワークです。最近では日本語の参考文献が徐々に増えてきたこともあり、人気が出ているフレームワークの一つになっています。メジャーなバージョンとして1.4系と2.0系があり、より柔軟な開発ができるように改良が重ねられています。またSymfony2.0から派生した「Silex」と呼ばれるマイクロフレームワークも存在します。

Zend Framework

PHPのコアエンジンを開発しているZend社がオープンソースとして公開しているフレームワークです。非常に柔軟に設計されており、各機能が独立しているためZend Framework単体で用いたりすることが容易にできるのが特徴的です。またAdobe Dreamwerverで直接コードを扱えるのも、このフレームワークの特徴です。

特にCakePHP、CodeIgniterは日本でも海外でも人気があり、大きなシェアを占めています。本記事では触れられないものの、他にも数多くの有志によるフレームワークが公開されており、日々アップデートされています。日本ではまだあまり主流ではありませんが、最近ではLaravelというフレームワークも登場し国外を中心に人気を集めています。PHPで開発されているWebサービスは非常に多いため、開発スキルを身につけることで、クラウドソーシングサービスを使って開発受託などのフリーランス活動も始められることでしょう。

3f1aa9af419a6043eb8cd9338bdceb31

photo credit: ryanoshea via photopin cc

PHPの効率的な学習方法

本記事で、PHPをとりまく周辺環境やコミュニティ、最初のスタートを切る上での教養知識について、少しでもエッセンスとなったとは思います。では今日からPHPを学習するとして、何をすればいいのでしょうか。「HTMLの設計思想と、2014年に最適な学び方」で紹介した内容と重なるところもありますが、ここでは3つだけご紹介します。

1. PHPの解説書やリファレンスを買って読む

Web上に無料で学習リソースが溢れている中、あまり今風の勉強法ではないかもしれませんが、書籍あると学びやすいという方もいるでしょう。「PHPによるWebアプリケーションスーパーサンプル 第2版」のような逆引きリファレンスを1冊購入しておくと重宝するでしょう。

2. 動画で学べる学習サイトでPHPの文法・知識を身に付ける

中でもドットインストールやCODEPREP、Codecademyなどの無料の学習サイトがお勧めです。 最近はどんどん初心者に優しい環境が整ってきましたので積極的にこれを活用するようにしましょう。

3. 実際につくってみながらトライ&エラーを繰り返す

まずは、自分が作りたい or 使いたいと思える「小さなWebアプリケーション」を構想してみます。「完成図(ワイヤーフレーム)」を手書きで描いてみて、ユーザーに提供する機能(「◯◯の価値のために、◯◯ができる」という形のユーザーストーリー)を箇条書きにしてみましょう。全体像から逆算して覚えるべき知識を整理することが重要です。

挫折しそうな自分を繋ぎ止めるモチベーションの源には「小さな成功体験(書いたコードが動いた!という実感)」の繰り返しが、重要な秘訣としてあります。知識を吸収するのはすごく大切ですが、インプットに集中して満足してしまっては本末転倒です。実際に自分でコードを書き、エラーが出たらその度にエラーコードの意味を調べる習慣をつけるようにします。

どんな優秀なエンジニアでも、必ずエラーは起こっており、試行錯誤を繰り返しています。大切なのは、どういう手順でエラーが起こっている原因を探り、トライ&エラーを繰り返しながら解決していく、というプロセスなのです。

以上、連載企画7回目では、PHPに関連するコラム記事をお届けしました。次回の第8回では、最近のスタートアップの多くで採用されている「Ruby」や、Webアプリケーションフレームワークである「Ruby on Rails」の話題に触れてみます。

これから始めるJavaScriptの基礎と全体像 ーー「非エンジニアの起業家が知っておくべきプログラミングの知識 #06」【ゲスト寄稿】

編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから photo credit: nyuhuhuu via photopin cc 「非エンジニアが知っておく…

TechAcademy__テックアカデミー____ITに特化したスクール編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから

e48dc8b5ac1706d03b91d9c3a2278957

photo credit: nyuhuhuu via photopin cc

「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第6回目のテーマは「JavaScriptの基礎」です。

前回は「これからプログラミングを学び始める方へ」というテーマでお送りしました。今回はより具体的にプログラミングを学んでいただくために、JavaScriptについてご紹介していきます。本連載は、インターネット業界で、これまで技術的なバックグラウンドを持たないまま起業した方や、これから独立・起業しようと思い立った方をサポートするための、連載記事です。

本記事では、数あるプログラミング言語の中でJavaScriptがどういった背景や性格を持つ言語なのかを解説し、動作するソースコードを交えてJavaScriptに触れるきっかけを提供します。

JavaScriptとは何か?

以前の記事で、マークアップ言語のHTMLと、スタイルに関する情報を記述していくCSSについて解説しました。

  • HTMLとは、HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略称で、Web上の文書を記述し、またブラウザがそれを解釈するためのマークアップ言語(構造化言語)。
  • CSSとは、HTMLタグや独自で定義した要素に対して、大きさ・配置(余白)・レイアウト/色・タイポグラフィ(フォント) の指定など、スタイルに関する情報を、連続して記述していくもの。

主にこれらの要素に対して操作や制御を行うために使うのがブラウザ上で動作するJavaScriptの役割です。具体的には、ボタンをクリックした時にアラートを出す、HTML文書の情報をページを書き換える、などです。HTMLは文書構造を定義し、CSSでは定義された情報に基づいてスタイルの適用させます。そしてJavaScriptは、さらにその情報を操作することを可能にします。

ちなみに、初心者でJavaScriptとJavaを混同される方がいますが、まったくの別物ですのでご注意ください。

生い立ちから仕様の標準化まで

JavaScriptのプログラムをブラウザで動かす前に、JavaScriptの生い立ちについて知っておきましょう。

JavaScriptは、Netscape Navigator 2.0で実装されたプログラミング言語です。開発当初はLiveScriptと呼ばれていましたが、1995年にJavaScriptという名前に変更されました。 1996年にマイクロソフトのInternet Explorer 3.0に搭載、1997年にはJavaScriptのコア部分の仕様がECMAScriptとして標準化され、ウェブブラウザ間の互換性が高まりました。

JavaScriptに限りませんが、プログラミング言語にとって「どの環境でも動く」というのは大事なことです。Google Chromeユーザーには使える一方で、Internet Explorerユーザーには使えないウェブアプリケーションを書いているとしたら、それは大きな機会損失となります。

そのためECMAScriptとして仕様が標準化されていることは、JavaScriptにとっても開発者にとっても、さらにはアプリケーションを利用するエンドユーザーにとっても、とても重要なことなのです。

JavaScriptで「Hello world」

010589f63fed01583685acd0207d53f0

photo credit: oskay via photopin cc

では手始めに、最も簡単なJavaScriptプログラムを書いて、動かし方を覚えましょう。プログラミング言語を学ぶ際にお決まりなのが「Hello,world」という文言を出力することです。JavaScriptはブラウザで動作する言語として広く知られており、HTMLファイルのscriptタグの中に記述して簡単なスクリプトを動かすことが出来ます。

<html>
<head>
  <meta charset="utf-8">
  <title>javascriptでHello,world</title>
</head>
<body>
  <script>
    alert("Hello, world");
</script>
</body>
</html>

この記述をしたhtmlファイルをブラウザで表示すると、問題なくHello,worldというアラートが出力されるはずです。このように面倒な環境構築が必要ないという意味では、初学者に易しいプログラミング言語と言えるでしょう。

JavaScriptというスクリプト言語の良いところは、学習の最初のハードルが下がることです。オブジェクト指向でありながら関数型言語としての一面も持ち、ブラウザ上だけでなくサーバーサイドのプログラミング言語としても使われるJavaScriptは決して簡単な言語ではありませんが、使い慣れたブラウザを仲介することで学習を始めやすい言語であることは確かなのです。

イベントドリブンな言語

JavaScriptのもう一つの特徴として、イベントドリブンというキーワードが挙げられます。イベントドリブンとは、ユーザーのアクションやその他のイベントによってプログラムが作動するという意味です。

// HTMLに<div id=”my-button”></div>があるとする
var btn = document.getElementById("my-button");
btn.onclick = function(){
  alert("ボタンがクリックされました!");
}

このように、ドキュメントの要素をオブジェクトとして取得して、そこに関数を割り当てることで、イベントドリブンの挙動を実現しています。

JavaScriptで作るミニアプリ

2760d8b4f6120c36ded636c7b2cd4bb1

ではいよいよ、JavaScriptで簡単なアプリケーションを作りながら、JavaScriptに触れていきます。

カウントダウンタイマー

身近な例ということで、2020年の東京オリンピックまでのカウントダウンタイマーを作ってみます。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カウントダウンタイマー</title>
  <script type="text/javascript" src="app.js"></script>
</head>
<body>
  <div id="timer">
    東京オリンピックまであと<br />
    <span id="days"></span>日
    <span id="hours"></span>時間
    <span id="minutes"></span>分
    <span id="seconds"></span>秒
  </div>
</body>
</html>

HTML中から外部のJavaScriptを呼び出すには、<script>タグを使って、src属性に対象のスクリプトを指定します。今回はtimerというID名を指定した場所に、オリンピックまでの残り時間を表示させます。 次に、index.htmlと同じ階層にapp.jsというファイル名でJavaScriptファイルを作り、プログラムを書いていきます。

function countDown() {
// オリンピックまでの秒数を取得
var olympicDate = new Date(2020, 6, 24, 00, 00, 00);
var diff = olympicDate - new Date();

// 取得した秒数を日、時間、分、秒で表す
var secondsPerDay = 60 * 60 * 24 * 1000;
var days = Math.floor(diff / (secondsPerDay));
var hours = Math.floor(diff % (secondsPerDay) / (60 * 60 * 1000));
var minutes = Math.floor((diff % secondsPerDay) % (60 * 60 * 1000) / (60 * 1000));
var seconds = Math.floor((diff % secondsPerDay) % (60 * 1000) / 1000);

// HTMLに反映させる
document.getElementById("days").innerText = days;
document.getElementById("hours").innerText = hours;
document.getElementById("minutes").innerText = minutes;
document.getElementById("seconds").innerText = seconds;
}

// ページの読み込み後にカウントダウンを開始
// 1000ミリ秒ごとに繰り返す

window.onload = function() {
  setInterval(countDown, 1000);
}

このプログラムを書いてから先ほどのHTMLファイルを表示すると、カウントダウンが動作しているはずです。

ここでは、オリンピックまでのミリ秒を取得してそれを各単位(日・時間など)に変換、最後にHTMLに反映させています。ただ、この処理だと読み込み時に1度だけ実行されてカウントダウンにならないので、処理を関数にまとめておいて1000ミリ秒(1秒)ごとに繰り返し実行しています。

JavaScriptの各種ライブラリ・フレームワーク

簡単なJavaScriptプログラムを書いてみたところで、目的に応じてJavaScriptをより便利に扱えるようにした有名なライブラリやフレームワークをいくつか紹介します。

jQuery

jQueryとは、簡単に言うとJavaScriptをより直感的に扱うためのライブラリです。代表的なのが$関数で、たとえば先に書いたコードを例に出すと、以下のように書き換えることができます。

jQueryを使わないコード

document.getElementById("days").innerText = days;

jQueryを使ったコード

$("#days").text(days);

jQueryを使わないコードに比べて短くなり、可読性も向上しました。

CoffeeScript

CoffeeScriptとは、JavaScriptを書きやすくするためのもので、スタートアップのWebアプリケーションなどで積極的に採用されています。

daba17e1f9be93ebc9994fd7d11c072a

photo credit: garrettc via photopin cc

CoffeeScriptを使わないコード

function hello(name){
   alert("Hello," + name);
}
hello("taro");

CoffeeScriptを使ったコード

hello = (name) ->
 alert "Hello," + name
  return
hello "taro"

セミコロンや丸かっこを書かなくて済むので、スリムな見た目のコードが書けるようになります。

AngularJS

AngularJSとは、クライアントサイドのMVCフレームワークです。HTML5以前のJavaScriptはウェブアプリケーションにおいて、見た目を操作したりちょっとしたアニメーションを付けたり、という補助的な役割を担っていたケースが多かったため、クライアントサイド(ブラウザ側)のフレームワークはそれほど必要とされていませんでした。

しかし近年、クライアントの役割がより重要になり、大規模なJavaScriptを書く必要が出てきたため、このAngularJSのようなフレームワークが人気となっています。

Node.js

Node.jsとはサーバーサイドのJavaScript環境です。ウェブアプリケーションのサーバーサイドというとPHPやRuby、Javaなどが一般的ですが、これらに加わるサーバーサイドプログラミングの選択肢として注目を浴びています。

JavaScriptの学び方

dbec5819b1f11d19f583056bb164db6d

photo credit: Pragmagraphr via photopin cc

本記事で、JavaScriptの基本的なところは知って頂けたと思います。さて、ではこれからさっそくJavaScriptを学習するとして、何をすればいいのでしょうか。HTMLの設計思想と、2014年に最適な学び方で紹介した内容と被るところもありますが、ここでは3つだけご紹介します。

1. 動画学習サイトで学ぶ

HTMLの記事でもおすすめしましたが、動画で学ぶのは何も知らない状態から勉強するのに、とても適しています。まずは人がコードを書いている所を眺めるだけでも、勉強になります。

2. 動いているサンプルをいじってみる

ある程度つかめてきたら、実際に動いているサンプルコードをいじってみることをおすすめします。jsdo.itのようなサイトで簡単なJavaScriptプログラムを検索して見つけてみて、手元でいじってみてはいかがでしょうか。

3. 簡単なツールを作ってみる

最初のうちは、JavaScriptでどういったツールを作れるのかわからないと思います。しかし、動画で学習したり実際に動いているサンプルをいじってみると、ある程度難易度がつかめると思います。

たとえば占いアプリのように、簡単なプログラムでも見せ方次第で面白いツールになり得ます。HTMLとCSSとJavaScriptさえ知っていれば、そういうものを今すぐ世界に公開することができるのです。

以上、JavaScriptについて見てきました。次回の第7回は「PHP」をテーマにお送りします。

これからプログラミングを学び始める方へー「非エンジニアの起業家が知っておくべきプログラミングの知識 #05」【ゲスト寄稿】

編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから photo credit: elliottcable via photopin cc 「非エンジニアが知…

TechAcademy__テックアカデミー____ITに特化したスクール編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから

cc428863871dbd7b84f5197181e9841d

photo credit: elliottcable via photopin cc

「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第5回目のテーマは「これからプログラミングを学び始める方へ」です。

前回は「CSS3からSassまで ─ これから学ぶ人のためのCSS全体像」というテーマでお送りしました。今回からいよいよ「プログラミング」の記事テーマで、考察・ご紹介します。本連載は、インターネット業界で、これまで技術的なバックグラウンドを持たないまま起業した方や、これから独立・起業しようと思い立った方をサポートするための、連載記事です。

プログラミングといっても、カバーされる非常に広範囲なため1つの記事だけでは表現できません。そこで、本記事では「プログラミング的な考え方」について中心に解説します。

0と1の世界へようこそ

コンピューターの世界では、0と1という情報しか扱うことができません。普段手にしているスマートフォンのディスプレイの発色も、0と1の組み合わせによって発色が表現されています。プログラミングを学び始める上で、情報工学の基礎となる「bit」について正しく理解をしておきましょう。

よく喩えられる表現が、電球(ランプ)の ON / OFF の状態です。ある1つの電球によって表現できる状態は「ON」または「OFF」の2種類です。では、3つの電球を組み合わせるとどうなるでしょうか? 2^3=8種類となります。コンピュータ内では、2進数計算の0と1を高速に、かつ大量にやりとりしています。1bitが8つ集まった単位を1バイトと呼び、その後キロバイト、メガバイトと単位が増えていきます。

f35e9ce427437c57c75dc337d7795f73

コンピュータに表示されている1つの文字(英数字、ひらがな、カタカナ、漢字も含む)も、この組み合わせ(bit)で表現されています。しかし、1バイト=8つの電球(8bit)だけでは、2^8=256通りの組み合わせしか表現できず、アルファベットと数字くらいです。日本語やひらがなは、どのように表現すればよいでしょうか。

日本語の表現では、それを2倍にした16bit、すなわち2バイトで表現します。日本語が2バイト文字と呼ばれるのは、16bit(2^16=65,536種類)で表現することができるからです。

bitは、binary digitの略で、情報工学における最小単位として知られています。bit単位に意識をおいたプログラミングをする機会は減ってきていますが、高機能なウェブアプリケーションや、スマートフォンアプリなども、メモリ管理など、最終的には「bit」の思想に行き着くのです。

そもそもプログラミングとは?

プログラミングは、0と1だけで構成されたデジタルの世界に登場した概念です。プログラミングとは、そもそも何なのでしょうか?

一般的に、プログラミングとはコンピュータに対して「指示や命令を伝えること」です。そして、先に述べたような0と1の世界に 人間の意図を正しく伝えるために、プログラミング言語というインターフェースがあります。私たちはプログラミング言語を使うことで、0と1の世界のコンピュータとコミュニケーションを取るのです。

アルゴリズムとは何か?

プログラミングを学ぶ上で、「アルゴリズム」という存在を知ることになります。

アルゴリズムを簡単に説明すると、「問題解決のための考え方」です。問題の数だけ、もしくはそれ以上にアルゴリズムが存在し得ます。しかし、世の中には常に新しい解決法が求められているわけではないので、「◯◯ということがしたい」という希望に大して、「それでは、XXというアルゴリズムを使おう」と言えることもあるのです。

後述するFizzBuzz問題も、「反復構造」「条件分岐」といった、プログラミングの考え方を組み合わせたものとして有名なもので、プログラミングとアルゴリズムの基礎を学ぶのに最適なことから、研修や大学の情報工学の授業でも、頻繁に取り上げられます。

【コラム】FizzBuzz問題

FizzBuzz問題という、有名なプログラミングのアルゴリズムに関する問題があります。

1から100までの数をプリントするプログラムを書け。 ただし3の倍数のときは数の代わりに「Fizz」と、5の倍数のときは「Buzz」とプリントし、 3と5両方の倍数の場合には「FizzBuzz」とプリントすること

この問題に対する答えは無数にあります。それぞれの言語で、何十通りの答えがありますが、一つの例として、Rubyでこの問題をシンプルに解くと、以下のようなコードを書くことで実現できます。

(1..100).each do |num|
  if num % 15 == 0
    puts :FizzBuzz
  elsif num % 5 == 0
    puts :Buzz
  elsif num % 3 == 0
    puts :Fizz
  else
    puts num
  end
end

Macの環境の方は、Rubyの動作環境が最初から入っているため、上記コードをテキストエディタで「fizzbuzz.rb」等という名前で保存したあと、ターミナルを起動し「ruby fizzbuzz.rb」というコマンドで実行してみてください。以下のような結果が出れば成功です。

55539aab80530e437e9566229441c293

【コラム】世界でもっとも強力な9のアルゴリズム

英ディッキンソン大学のコンピュータ・サイエンス教授、ジョン・マコーミック氏の『世界でもっとも強力な9のアルゴリズム』という書籍が発刊されています(日本国内では日経BP社が発刊)。こちらで紹介されている9つのアルゴリズムは、以下の通りです。

34705ead62b66e1e5d220434a856ca91

  • 1. 検索エンジンのインデキシング
  • 2. ページランク
  • 3. 公開鍵暗号
  • 4. 誤り訂正符号
  • 5. パターン認識
  • 6. データ圧縮
  • 7. データベース
  • 8. デジタル署名
  • 9. 決定不能性

初心者の方が手にとっても、内容を理解するのは難しいかもしれませんが、デジタル化された現代社会で成り立っている、もっとも高度なアルゴリズムを「読み物」として知っておくためには、あなたの学習のモチベーションをアップさせる一冊になるかもしれません。

プログラミングを支える基礎的な考え方

これからRubyという言語を通して、どの言語にも共通するプログラミングの基本的な概念を一部だけ、ご紹介します。

変数

変数とは、情報を格納しておく箱のようなものです。名前を付けて管理することで、値を処理しやすくします。値とは具体的に、”Hello”という文字列や、1という整数などのデータのことを指します。

x = 1
y = "Hello"

上のコードを日本語で表現すると、「iという変数に1という値を代入する」となります。

条件分岐

条件分岐とは、「〜なら…しなさい」という命令の出し方です。たとえば「変数に入った値が1なら”Hello”と出力しなさい」というようなことができます。

i = 1
if i == 1
  puts “Hello”
end

反復構造

反復構造とは、繰り返し行いたい処理を行う際に用います。ほとんどのソフトウェアにおいて、条件分岐とともに反復構造も基礎構文として使われています。

i = 1
while i < 10
puts i
i += 1
end

上のコードは、変数iが10未満の間、iを1ずつ増やし、その値を出力します。反復構造は、検索アルゴリズムの「線形探索」など、多くの場面で登場する基礎的な概念です。

配列

配列は、複数のデータを一つのまとまりとして扱う仕組みのことです。配列にデータをまとめて入れておいて、それぞれに対して処理を行うようなケースはとても多いです。

numbers = [1,2,3,4,5,6,7,8,9]
numbers.each do |n|
puts n
end

また、上のケースで特定の値、たとえば8だけを取り出したして出力したいときは以下のようにアクセスできます。

puts numbers[7]

この [] の中に書いた数字を、インデックスと呼びます。注意したいのは、インデックスは1ではなく0からスタートするということです。そのため、8という値にアクセスするためには、7というインデックスを指定しています。

プログラミングの学び方まず作りたいものをイメージし、その方法を探ろう

6374ade1236c7737e698c967a6b7bfd8

photo credit: hackNY via photopin cc

さて、プログラミングの考え方について大まかにつかんだところで、これから勉強を始めようと思ったら何から始めるべきでしょうか。

プログラミングを始めるにあたって、書店に出向いたり、Google検索などをすると様々な言語・開発環境が見つかりますが、プログラミング上達のもっとも速い方法は、「最初に作りたいものを明確にイメージすること」です。あなたが身の回りにある、ちょっとした不便や、自分が使いたいと思うもの(たとえプログラミング学習ノート共有のWebサービス、位置情報をもとに現在地に最も近いバス停からの、次の出発時刻を出すスマートフォンアプリなど)をイメージしてみましょう。

世界中には、似たようなアイデアを実現している人がたくさんいます。まずGitHubにアカウントを登録し、さまざまなアプリケーションがどのように構成されているか覗いてみるのも良いかもしれません。

まずはHTMLと組み合わせてブラウザ上で動く「JavaScript」から始めてみよう

HTMLの学習を終えた方は、JavaScriptを用いて「自分が生まれた日から現在までの日数をカウントする機能」など、20〜30行程度でサンプルソースコードも多く出回っている題材を探してみて、実際に手を動かして作ってみてください。JavaScriptは、HTML内に埋め込むことで動作して、難しい環境構築なども不要です。

その次は、流行のWebアプリケーション開発フレームワークである「Ruby on Rails」などで、タスク管理ツールを作る、といった目標を立ててみると良いかもしれません。

2014年現在、Web上にはチュートリアル動画サイトなど無料の学習サイトが豊富な時代です。書籍を買って積ん読にするのではなく、1日1時間ずつ学習を進めてみましょう。一冊の本をおすすめするとすれば、『コーディングを支える技術 ~成り立ちから学ぶプログラミング作法』(技術評論社)など良いかもしれません。

【よくある質問】最初に何の言語を学べば良いか?

何の言語を学べばよいか、多くの人が質問をします。まずはそんなことは考えずに、自分が作りたいものをイメージしてみましょう。無数にある「プログラミング言語」は、どんな種類があり、どのようにカテゴライズできるのか。歴史や、設計思想についても、まずは自分なりに調べてみてください。

「何の言語から学ぶか?」この答えの一つに「最も身近にいる人が使っているプログラム言語から始める」というものもあります。

その他にも「実現したいサービスに合わせて学ぶ」「環境構築が不要なJavaScriptから学ぶ」や、「WordPressなどでも採用され、2000年代に多くの開発者が誕生したPHP言語」、その他にも「楽しくプログラミングするという設計思想のRuby」「スタートアップを中心に盛んに採用されている、RubyをもとにWebアプリケーションの枠組みを作りやすくするRuby on Rails(これ自体はプログラミング言語ではありません)」など、選択肢は様々です。

今の時代、新しいプログラミング言語・派生型言語もどんどん登場していますので、1つの言語に強くこだわる必要はないでしょう。まずはJavaScriptなどすぐに書けるもので「動くシステム」という成果物の創造の成功体験を小さく積み重ね、全体像から広く浅く学んでいくことをおすすめします。

【最後に】挫折ポイントは「環境構築」です

多くのプログラミング独学者に共通している挫折ポイントは、実はプログラミングそのものではなくて、自分のコンピューター上でプログラミングを行うための環境構築(=設定)です。環境構築の壁を超えて初めて「ものづくり」の楽しみを味わうことができます。本記事では全てを解説することはできませんが、環境構築には1週間や2週間かかったとしても、根気よく取り組んでみてください。今日から、あなた自身とコンピューターとの対話が始まります。

まだ、デジタルの世界は始まったばかりです。これから30年、50年後の世界をイメージしてみましょう。様々な社会問題や、人々のビジネスニーズ、経済的な課題が溢れているはずです。プログラミングを学び、アルゴリズムを通して問題解決手法をスキルとして身に付けることは、もはや専門職ではなく、全てのビジネスパーソンや、10代の教育にも良い影響をあたえることでしょう。

次回以降の連載では、PHPやRubyなど、各プログラミング言語ごとの設計思想や、簡単な構文などについて解説する予定です。

CSS3からSassまで ─ これから学ぶ人のためのCSS全体像 ーー「非エンジニアの起業家が知っておくべきプログラミングの知識 #04」【ゲスト寄稿】

編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから 「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第…

TechAcademy__テックアカデミー____ITに特化したスクール編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから

image01

「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第4回目のテーマは「CSS」です。

前回は「HTMLの設計思想と、2014年に最適な学び方」というテーマでお送りしました。今回は「CSS3からSassまで ─ これから学ぶ人のためのCSS全体像」という記事テーマで、考察・ご紹介します。本連載は、インターネット業界で、これまで技術的なバックグラウンドを持たないまま起業した方や、これから独立・起業しようと思い立った方をサポートするための、連載記事です。

「構造化言語としてのHTML」を説明した前記事は、CSSを学ぶ上で前提となるため、まだ読んでいない方は前回の記事も合わせてご覧ください。

CSSとは何か?

前回の記事で、Webページを表現するHTMLは、構造化言語(マークアップ言語)ということをご紹介しました。

  • (1) 特定の表示領域に対して意味を定義し(それを要素を呼ぶ)
  • (2) 定義された要素間の関係性を作ること

しかしながら、HTMLで文書情報を定義しただけでは、ユニークなWebサイトは実現できません。そこにCSSを用いて、HTMLであらかじめ決められたタグ、あるいは自分で名前をつけて定義する要素(class要素/id要素)に対して、レイアウトや装飾などのスタイル効果を加えます

HTMLは文書構造を定義し、CSSでは定義された情報に基づいてスタイルの適用させるという、その使い分けがポイントです。

CSSの基礎

CSSは、Cascading Style Sheetsの頭文字を取った略称です。Cascadingとは、ここでは「連鎖的に伝わるもの」と表現しましょう。HTMLタグや独自で定義した要素に対して、大きさ・配置(余白)・レイアウト/色・タイポグラフィ(フォント) の指定など、スタイルに関する情報を、連続して記述していくものです。

CSSは、HTMLと同じくテキストファイルで記述し、HTMLの <head>〜</head>タグ内に、<link>タグを用いて、CSSファイルを読み込み、適用させることができます。

外部からCSSファイルを読み込む記法:
<link rel='stylesheet' href='CSSのパス' type='text/css' media='all' />

CSSの基本記法

CSSの基本記法は、以下のとおりです。

セレクタ名 {
  プロパティ: ;
  プロパティ: ;
}

ここでは改行を用いていますが、1行で以下のような記述も可能です。

セレクタ名 { プロパティ: ; プロパティ: ; }

セレクタ名とは、スタイルを適用するHTMLタグや、class/id属性(後述)を指します。プロパティとは、「width」「font-size」「color」など、CSSで設定する数々のスタイルの書式で、あらかじめ決められたものです。そして値は、その名の通りプロパティに対しての「実体」となるものです。プロパティの種類は数多くあるため、学習の過程には、まずプロパティの一覧などが掲載された、リファレンスサイトを活用すると良いでしょう。

例として、セレクタの <body>タグ(通常ブラウザが読み込む、表示領域の全体)に対して、CSSを記述してみましょう。

body {
  background-color: #F0F0F0;  /* 背景色を薄い灰色にする */
  padding: 20px;  /* 上下左右の余白を20px取る */
}

次に、ページ内の画像 <img> タグに対して、スタイルを適用させてみましょう。

img {
  border: 1px solid #767676;  /* 画像の枠に灰色の1pxの罫線を引く */
  padding: 2px;  /* 画像と罫線の間には、2pxの空白を作る */
}

【重要なポイント】プロパティと値をセットで覚えよう!

HTMLタグの種類と比べると、CSSで覚えるべきプロパティと値の組み合わせの数は、その何十倍もあります。学習において重要なポイントは、「プロパティと値」をセットで覚えていく、ということです。簡単なプロパティを使って基本的な記法や覚えたあとは、CSSに関するリファレンスサイトを索引しながら、実際に手を動かしてコーディングを行うことが、効率のよい学習方法だと言えます。前回の記事同様、Google ChromeのDeveloper Toolsで「要素の検証」機能を活用してみましょう。

class属性とid属性の違い

CSSで指定するセレクタは、上で解説したHTMLタグだけではありません。全てのHTMLタグは、それぞれに「class属性」というものを付与することができます。

例えば、<a href=”URL”> 〜 </a> タグに対して、”active” というクラスを付与すると、<a href=”URL” class=”active”>〜</a> という記述になり、CSS側では「active」という定義された情報を、認識することができます。CSSファイルでは、class属性のセレクタは、先頭に半角ドットをつけて「.active」のように記述します。class属性は、1つのページで複数指定することが可能です。

a .active {
  font-weight: bold;
}

一方で、id属性とはHTML構造の中で、一意(ユニーク)な定義を行うときに用います。id属性はページの中で1箇所だけ存在するため、主に「レイアウト」を定義する要素名などに用いられます。id属性で指定した名前は、CSSでは「#main」のように、頭に半角シャープをつけて記述します。

#main {
  width: 600px;
  float: left;    /* floatプロパティは、ブロック要素の回りこみを指定する */
}
#menu {
  width: 300px;
  float: right;
}

擬似クラス

CSSの疑似クラスは、HTMLタグ内には記述されていなくても、CSS側でセレクタとして利用できるクラスのことを指します。一番わかりやすい例が、<a>タグに対する擬似セレクタでしょう。未訪問・訪問済み・マウスオーバー時などでリンクテキストの色が変わるスタイル指定は一般的です。これらを実現しているものが、擬似セレクタと呼ばれています。

a {
  color: #008800;
  text-decoration:none;
}

a:hover {
  color: #ff0000;
  text-decoration: underline;
}

擬似セレクタは、「セレクタ:擬似セレクタ」という記述で行います。

CSS3で実現できるようになったことの一例

現在、新しい標準化規格であるHTML5が草案勧告されているように、CSSにもバージョンがあります。最近のスマートフォンに搭載されたブラウザや、Safari/Google Chrome/IEの最新版などのモダンブラウザでは、CSS3がサポートされています。

html_css

CSS3が取り沙汰され始めた頃、「画像を一切使わずにCSS3だけでドラえもんを描いてみた!」という記事が話題になりました。HTML5とCSS3を使えば、様々な技巧表現が可能になります。それでは、CSS3では、一体どのような仕様変更が行われたのでしょうか。数多くありますが、その一部をご紹介します。

プロパティの追加

ブロックレベル要素に対して角丸を実現する「border-radius」プロパティや、影を実現する「box-shadow」プロパティなどが追加されています。そのほか、時間的変化の「transition」プロパティ、アニメーション効果を表現する「animation」プロパティ、要素の透明度を指定する「opacity」プロパティなども、最近のWebサービスの中で用いられるようになってきています。

値の追加

また、プロパティに対しての「値」が追加されたものも存在します。

例えば「display」プロパティは、ブロックレベル要素・インライン要素などを指定することができるプロパティですが、CSS3では「display: table;」「display: table-cell;」といった記述が追加されました。display: table; の記法は、floatプロパティに変わる新しいレイアウト組みの手法として、注目されています。本記事では全ての紹介がしきれないので、詳しくは是非プロパティ名で検索してみて、動作デモなどをご覧ください。

その他にも、「color」「background-color」などのプロパティに指定するカラーコードの値は、16進数(#2B4B65など)記法で記述されていましたが、CSS3では値として「RGBa」を指定することにより、色の透明度(アルファ値)を含めて指定することができます。(例:color: rgba(0,0,0,0.5); 黒色の50%の透過)

擬似クラスの追加

CSS3では、擬似クラスにも追加が行われています。たとえば、A:nth-child(n) { プロパティ: 値; } という記述では、Aセレクタに対してn番目の要素のみに、そのスタイルが適用されるといったことが可能になります。セレクタに ul li:nth-child(2n)、ul li:nth-child(even) と記述すると、liタグの偶数番目のアイテムに対してCSSを適用できます。(奇数なら ul li:nth-child(2n+1) または ul li:nth-child(odd) と記述)

この方法を用いると、<table>タグで作ったカレンダーの土日だけに、文字色を変えるといったCSSの記述が可能になります。

table.calendar tr td:nth-child(6) {
  color: #009;  /* td要素の6番目(土曜日)には青色の文字色のスタイルを適用 */
}

table.calendar tr td:nth-child(7) {
  color: #900;  /*  td要素の7番目(日曜日)には赤色の文字色のスタイルを適用 */
}

cal

Media Queries(メディアクエリの追加)

近年のトレンドとして、多くの主要サイトでスマートフォンデバイスからのアクセスが半数を超えるなど、「複数デバイス対応」がより重要になっています。よく聞く「レスポンシブデザイン」(ブラウザ幅に合わせて要素のサイズなどが可変する)等を実現する上で、主に採用されている技術がCSS3の「メディアクエリ」です。メディアクエリは、<head>〜</head>で読み込むファイルをそもそも変える方法と、CSS内での記述で、条件分岐する方法などがあります。

<!-- 表示領域が480px以下のデバイスから閲覧したときに読み込まれるCSS -->
<link rel="stylesheet" media="screen and (max-width: 480px)" href="smartphone.css" />

@media screen and (max-width: 480px) {
  /* 表示領域が幅480px以下の場合 */
#sidebar { width: 100%; }
}
@media screen and (min-width: 760px) {
  /* 表示領域が幅760px以上の場合 */
#sidebar { width: 300px }
}

いろんなデバイスからのアクセスを想定して、それぞれに最適化されたCSSを書けるようになるのが学習のゴールになります。

CSS3のデメリット

一方で、CSS3のデメリットもあります。 CSS3が表示できないブラウザもあるため、各ブラウザでどう見えるのかのチェックが必要です。また、表示できないブラウザに対応させるために、CSSの記述が複雑になるというデメリットもあります。

SCSSとは?

最後に、SCSSについてご紹介します。最近のWebサービス開発においては、コンパイルにより CSS を出力する拡張メタ言語の「SCSS」や、さらにコンパクトを追求した「Sass」記法が、積極的に採用されています。基本的にはCSSの設計思想と同じですが、書き方が若干異なります。

【SCSS】セレクタのネスト(階層化)、入れ子にできる

通常 CSSでは、親セレクタ・子セレクタと指定する際には、何度も助長な繰り返し記述が必要になりましたが、SCSSではセレクタにネスト(階層化)・入れ子の概念が存在し、セレクタ管理が効率化できます。コーディングするときの速度・量ともに削減されます。

/* CSSでの一般的な記述方法 */
#content h1 { margin: 20px; padding: 5px }
#content p { font-size: 90%; }
/* SCSSでのセレクタのネスト */
#content{
  h1 { margin: 20px; padding:5px; }
  p { font-size:90%; }
}

2つを比較してみて、いかがでしょうか。こちらのほうが、複数のコーダーと共同作業する際にも、すぐに理解ができ、より直感的にコーディングができます。

【SCSS】数値・カラーコードを変数に格納して呼び出す

変数とは、プログラミングにおいても一般的なもので、「データ(情報)」を入れておく箱のようなものをイメージしてください。SCSSでは、よく使うカラーコードや数値などを、名前をつけた変数に格納しておき、その変数を呼び出すことができます。大規模なWebサイトのコーディングにおいて重宝するでしょう。変数名は、最初に「$」記号をつけます。

/* カラーコードを変数として定義する * /
$onepoint_color: #EF454A;
/* 実際のSCSSコーディング * /
p{ color: $onepoint_color }
/* ブラウザが処理するときの状態 * /
p { color: #EF454A; }

【SCSS】値の演算処理

SCSSでは、値の欄に以下のように四則演算などが可能です。

#container{ width: 800px - 200 }

Sassとは何か

Sassは、SCSSと同様のCSS拡張のメタ言語で、素早くコーディングすることを最も重きにして開発された記法です。Sassでは、{ } といった記号が不要で、半角スペース2つのインデントによるネストにより、要素に対してスタイルを記述することができます。慣れると通常のCSSの1.5倍相当のスピードで開発ができ、ファイルの容量も30%以上削減されるはずです。

【Sass】サンプル

body
  header
    background: #FFFFFF
    margin-top: 20px
    .logo
      text-align: center
    img
      width: 150px
      height: 30px
      padding: 5px

Sassは、半角スペース2つのインデントを用いてネストを行うことで記述ができます。また、最後のセミコロン「;」を省くことができます。

【参考】Sass公式サイト(Syntactically Awesome Style Sheets)

本記事では、CSSを初めて学ぶ人が「どんな専門用語があるのか」「どんな表現ができるのか」など、全体像を掴んでいただくことを目的に執筆しました。HTMLやCSSは学習人口が非常に多いため、無料の学習リソースが、Web上には数多くあふれています。本記事が、少しでも学習する背中を押す一因になれば幸いです。

次回の記事は、いよいよ「プログラミング全般」をテーマにお送りします。

HTMLの設計思想と、2014年に最適な学び方 ーー「非エンジニアの起業家が知っておくべきプログラミングの知識 #03」【ゲスト寄稿】

編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから Image by Flickr 「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10…

TechAcademy__テックアカデミー____ITに特化したスクール編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから

3899114449_ec210c67d5_z

Image by Flickr

「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第3回目のテーマは「HTML」です。

前回は「インターネットとブラウザ」というテーマでお送りしました。今回は「HTMLの基礎と、現代的な学び方」について考察・ご紹介します。本連載は、インターネット業界で、これまで技術的なバックグラウンドを持たないまま起業した方や、これから独立・起業しようと思い立った方をサポートするための、連載記事です。

はじめに

プログラミングはできなくても、HTMLとCSSなら少しは書ける、といった方は日本中にたくさんいると思われます。2000年代前半では、ブログ黎明期・個人ホームページ黎明期ということもあり、情報感度の高い若者や、IT業界に属する個人の会社員でも、趣味的にWebサイトを作るということがありました。書店にはHTMLに関する解説本が並び始めます。

また今では、WordPressなどのCMSツールを使って独自ドメインでブログを書いていて、その延長で、HTMLのタグ記法を覚えていったという方も多いでしょう。

HTMLとは何か

HTMLとは、HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略称で、Web上の文書を記述し、またブラウザがそれを解釈するためのマークアップ言語(構造化言語)です。中学校の情報処理の授業などでも取り扱われているため、リンクテキストを生成する<a>タグや、強調テキストを意味する<strong>タグなどは、Web以外の業種の方でもご存知かもしれません。

一方で、<div>タグや、<span>タグは、Webサイトの制作(デザイン・コーディング)に関わったことがない人にとっては、ほとんど馴染みのない言葉でしょう。またHTML4.01において分類されている、インライン要素・ブロックレベル要素といった分類の概念があることも、きちんと体系化して勉強したことがない方は、知らないかもしれません。

構造化言語とは何か?

HTMLの基礎を学ぶにあたって、「構造化言語」についての理解が必要不可欠です。現代では、様々なWebアプリケーション開発フレームワークが登場し、単純なHTMLによる静的ページ作成とどまらず、データの非同期通信など、サーバーとクライアント側で処理を分けるなど、技術は多様化・複雑化してきました。しかしながら、HTMLが草案されたときから、今でも設計思想として残っている「根本的な考え方」を抑えておくことで、今後の学びはより一層、効率化するはずです。

Webページの製作において構造化とは下記のように表現できます。

  • (1) 特定の表示領域に対して意味を定義し(それを要素を呼ぶ)
  • (2) 定義された要素間の関係性を作ること

皆さんが今見ているこのWebページも、WebフロントエンドエンジニアによってHTMLが書かれ、それらは構造化されて記述されています。たとえば上部にはサイト共通のヘッダーエリア(ナビゲーション)があり、右側にはメニューエリアがあり、左側には記事エリアがあるといったように。

HTMLと親戚関係に、XML(Extensible Markup Language)と呼ばれる構造化言語があります。XMLの特徴は、その名の通り「拡張可能なマークアップ言語」で、具体的には「タグを自由に定義できる」という点です。例えば学生名簿を作るときに、以下のような記述を繰り返し、構造化文書を作成することができます。

<学生>
  <学籍番号>20140001</学籍番号>
   <氏名>
    <姓>田中</姓>
    <名>太郎</名>
   </氏名>
  <学部>経済学部</学部>
</学生>

上記の構造化言語においては、意味のあるタグを定義し、その中にある情報に「値」を付与しています。田中さんの名前という値にアクセスしようと思った場合、学生 > 氏名 > 名 という階層で、取得することができます。XMLは、皆さんが普段使っているブログやニュースサイトなどの更新通知を受け取る「RSSフィード」などで、お馴染みです。

HTMLは、あらかじめルールが決められた構造化言語

HTMLは、ティム・バーナーズ=リーが創始した「W3C」が定めている標準化規格により、構造化を実現するための定義が、あらかじめルールとして決められている言語です。ですから、タグの種類と適切な使い方をセットで覚えてしまえば良いので、抑えどころさえ間違えなければ、あまり時間をかけずに学ぶことができます。一方で、HTMLをただ単に「Webページを作るための言語」とだけ雑に解釈し、本質的な「構造化」「情報を定義する」といった理解が抜け落ちていると、今後プログラミング等を進めていく上でも、非効率になるかもしれません。

一番シンプルな例を取ってみましょう。<strong>というタグで囲った文字は、別途CSSによる命令がない限り一般的に太字になります。これは、デザイン上の事情から太字にするためのタグではなく、その文字が「重要であること」を意味付けるための構造化タグです。重要だから太字になる、ということが仕様としての「結果論」であって、装飾として太字にしたいから、という理由で使ってはいけません。HTMLの学習では、この違いについて理解することから始まります。

この話は、次回のテーマ「CSS」でも扱いますが、タグや要素の命名規則など、その意味については、しっかりと歴史的背景を理解し、本質的な部分から理解しておくと良いでしょう。タグとして採用された言葉の意味、語源をたどっていくのも、楽しい勉強法の一つです。<a href=””> のaは、「アンカー(anchor)」のaです。hrefは、hypertext referenceを指しています。

8134400255_a580283e4c_z

Image by Flickr

HTMLの基本文法

HTMLは、開始タグと閉じタグによる記法が一般的です。タグは数十種類存在しており、それぞれに意味を持っています。HTML5は、W3Cにより草案段階ですが、すでに多くのモダンブラウザでサポートされており、2014年では様々なWebメディア・Webサービスでも標準採用されています。HTML5の雛形を、以下に示します。

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>HTML 5 complete</title>
<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js“></script>

<![endif]–>
<style>
 article, aside, dialog, figure, footer, header,
 hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>

<head>〜</head>が、ブラウザがHTML文書をレンダリング(解析)する上での最初に読み込むヘッダファイルで、<body>〜</body>タグが、実際にWebページに表示される領域の記述です。<head>〜</head>の中には、<title>〜</title>タグがあり、この中に記述したテキストは、ブラウザのタイトル欄などに表示されるテキストになります。

【補足】SEO対策の内部対策とは、構造化を徹底すること

SEO対策(検索エンジン最適化)という考え方が叫ばれて、早いもので10年以上が経ちます。当初はページランクなどの概念が話題の中心となっていましたが、現代では非常に複雑なアルゴリズムにより、議論も多様化してきました。

Webについて本質的な設計思想を理解すると、SEO対策というのは実は難しいことではありません。適切に文書構造を定義して(内部対策)、そこに存在する情報がエンドユーザー(訪問者)にとって有益な価値を生み出しているか(コンテンツ)ということです。

その結果、多くの他サイトから引用されたり、リンクされるといった事象は自然な形で増えていき、ページランク(被リンクの数など)は徐々に高まっていきます。これらを「対策」と呼んで取り組むこと自体、Webの設計当初や、検索エンジンの設計思想の立場からすると本末転倒なのですが、経済原理の上では仕方のないことなのかもしれません。

例えば、良質なコンテンツを提供していても、サイトの構造化が間違っていた(改善すべき部分が多い)場合には、損をしていることになります。SEO対策のコンサルティングを担う専門業者は、そうした視点から構造化のための技術的アドバイスを行ったり、そもそもコンテンツ自体を質の高いものへと変えていく作業をサポートします。(単に見せかけのリンク数を増やし続けるなど、短期的な結果にしかならない粗悪な業者にはお気つけください)

サイト情報を構造化し、良質なコンテンツを掲載する。その結果、被リンクが増えていき「外部対策」となります。検索エンジンのアルゴリズムは日々複雑化しており、それだけで何冊も本が書かれているほどの情報量ですが、まずはWebページの掲載順位を決める上でのベースとなる普遍的な事実として、Webのルールに則した構造化、ユーザー視点で考えられた良質なコンテンツの提供という2つを覚えておくと良いでしょう。

インライン要素とブロック要素

HTMLのタグには、ブロックレベル要素とインラインレベル要素というものに分類することができます。(他にも要素の分類は存在しますが、本記事では入門編ということで割愛します)

ブロックレベル要素

ブロックレベル要素は、文書における見出しタグ <h1>~<h6> や、文章の段落(パラグラフ)を示す <p> タグなど、構造化において「ひとかたまり」を定義する際に用います。ブロックレベル要素は、別のブロック要素やインラインレベル要素を含むことができます。一方で、インライン要素の中にブロックレベル要素を置くことはできません。

タグなど、構造化において「ひとかたまり」を定義する際に用います。ブロックレベル要素は、別のブロック要素やインラインレベル要素を含むことができます。一方で、インライン要素の中にブロックレベル要素を置くことはできません。

ブロックレベル要素のHTMLタグは、以下のようなものがあります(HTML4.01 Strict)

p div table dl ul ol form address blockquote h1 h2 h3 h4 h5 h6 fieldset hr pre

インラインレベル要素

インライン要素は、ブロックレベル要素に対して文中の一部分にだけ意味付けをする場合や、 書式設定を行うものを指します。

インライン要素のHTMLタグは、以下のようなものがあります。(HTML4.01 Strict)

a abbr acronym b bdo big cite code dfn em i kbd label q samp small span strong sub sup tt var

【補足】ブロック要素、インライン要素の分類は「HTML5」では無くなる

HTML4.01の仕様では、Webページを構成する要素は、大きくブロックレベル要素とインライン要素のいずれかに分類されることを上述しました。将来的にHTML5が勧告された場合、HTML5においてはブロックレベル要素とインライン要素を分類する概念はなくなります。HTML5では、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブと呼ばれる、コンテンツの種類がそれぞれ定義されています。

通常、HTMLなどの仕様は「草案」「勧告草案」「勧告」という段階で、数年単位での見直しが行われますが、現在HTML5は「勧告草案」の段階です。

これから学び始める方は、HTML5における「コンテンツ・モデル」について独学を始めると良いでしょう。しかしながら、現時点でもCSSと学ぶ上で、HTMLのブロック要素・インライン要素の区別は重要ですので、早い段階でその違いについて理解する必要があります。また、HTMLの新規格が誕生しても、「エリアを定義して、構造化する」という根底の思想は変わりません。

HTMLの学び方

HTMLの基本がわかった上で、いったいどのように学べばよいでしょうか?本項で全てのタグを解説しても良いのですが、そうするとこのメディアの中で最も長い記事になってしまいます。基本的な考え方、設計思想については解説し、学習方法についてのアドバイスに留めたいと思います。

1.HTMLの解説書を買って読む

→Web上に無料で学習リソースが溢れている中、あまり今風の勉強法ではないかもしれませんが、書籍があった方が学びやすいという方もいるでしょう。

2.「HTML入門」や「HTMLの基礎」といった古くからあるWebサイトを読んで勉強する

→古くからあるWebサイトは、検索で調べ物をする際にたどり着くことが多いため、必要に応じて活用します。

3.動画で学べる学習サイトでHTMLの文法・知識を身に付ける

ドットインストールなど国内外に多数の無料動画学習サイトがあるので、それを活用します。

4.Google ChromeのDeveloper Toolを使って学習する

→Google Chromeのブラウザを使っている方は、Webページ上で右クリックし「要素の検証」をクリックすると、その領域がHTMLとCSSではどのように定義されているか、ということを見ることができます。「ソースの表示」よりも見やすく色分けされており、実際にWebブラウザ上でテキストや値を書き換えることもできます。

5.自分の作りたい完成図(ワイヤーフレーム)を手書きで描き、HTMLのリファレンスサイトを片手に作りながら覚える

→Developer toolでの学習と組み合わせてお薦めする学習方法です。

この中からお薦めする4と5の学習方法について詳しく紹介します。

ChromeのDeveloper Toolsを使って学習しよう

Webページの特定の領域を右クリックし、ポップアップした中の「要素の検証」をクリックします。

dd61e04a6719d14fb9e5a171af40a864

その領域がどのようにHTMLで記述されているか、HTMLタグのネスト(階層)や構造化について、直感的に理解できるはずです。右側には、次回のテーマとなる「CSS」のプロパティなども記述されています。

また、ダブルクリックすると、内容を書き換えてWebページ上でプレビューすることもできます。(書き換えはブラウザのクライアント側で保持する一時的なもので、再読み込みすると元に戻ります。)

98295f9ad43cb53fa307bef2863c099b

ぜひ自分が参考にしたいWebサイトを使って試してみてください。

手書きのワイヤーフレームをつくり、HTMLを描いてみよう

5371776333_a06d01e367_z

Image by Flickr

Google ChromeのDeveloper Toolを使って、ほかのサイトがどのようにHTMLで記述されているかを実践的に学びつつ、自分では「作りたいページのイメージ」を実際に手書きのワイヤーフレームという形に書き起こし、それを実現するためのHTMLを記述してみましょう。

Webページでレイアウトなどを作成していくためには、CSSに関する知識も必要になります。次回、第4回はCSSをテーマにお送りします。