ウェブにようこそ

ウェブの自己紹介

ウェブページ、ウェブサイト、ウェブシステム

ウェブは、蜘蛛の巣という意味です。ウェブページがリンクでつながっている様子を表しています。ウェブページの集まりをウェブサイトといい、そのトップページをホームページといいます。また、データベースをつなげて動いているウェブサイトをウェブシステムといいます。

ホームページとは、ウェブサイトのトップページのこと

ＷＷＷ（ワールド・ワイド・ウェブ）、インターネット、ウェブページ、ホームページ、ウェブサイト、ハイパーリンク、ウェブシステム、サイトマップ、データベース

現代を変えている犯人、ウェブ

現代は変化の早い時代だ、としばしばいわれます。情報が伝わる速度が昔より圧倒的に早くなったためです。そして、情報を早く伝えられる道具こそ、ウェブです。情報を扱っている出版・印刷、マスメディア・放送、大学・教育機関。事業を情報化しやすい、金融機関、流通・小売、人材サービス。情報システムを製造する、家電、ゲーム、機械・プラント。コンピューターが導入され、情報にまつわる業務が自動化・省力化され、社員の仕事内容はまるきり変わりました。

また、ウェブによって活かせる技能がある人は重宝されるようになりました。大学でアートやデザインとプログラミングを必修化する学部も増えました。若者の労働環境、生活環境も大きく変わり、歴史上もっとも暮らしやすい時代を享受しています。未来の仕事は多かれ少なかれ、プログラムを必要とします。そうした仕事しか残らない時代が、もう来ています。

情報を早く伝える道具こそ、ウェブ

サービスサイト、ｅコマース、ｅラーニング、ソーシャルゲーム、ビジネスチャット、仮想通貨、マイクロブログ

ウェブの誕生から現在まで

ＵＲＬ、ＨＴＭＬ、ＨＴＴＰを発明したティム・バーナーズ・リーは、Ｗ３Ｃを設立し、その後２０年以上にわたりウェブの先端技術を指導しています。彼は、ＣＥＲＮ（スイスのジュネーブにある欧州原子核研究機構）の素粒子物理学の研究者でした。競争の激しい素粒子物理学業界の論文の速報性を実現するシステムとしてＷＷＷを考案し、実用化しました。

ＣＳＳも、同じくＣＥＲＮのデータサイエンスの研究者であるホーコン・ウィウム・リーが提唱しました。ＣＥＲＮは加速器で有名ですが、ウェブの発祥の地としても有名です。

ＵＲＬ、ＨＴＭＬ、ＨＴＴＰを発明したのはティム・バーナーズ・リー

ティム・バーナーズ・リー、ヴァネヴァー・ブッシュ、ＡＲＰＡＮＥＴ、ホーコン・ウィウム・リー、ブレンダン・アイク、マーク・アンドリーセン、６次の隔たり

最近の会社組織はなぜフラットなのか
最近、特にＩＴ企業では、若い社員もベテラン社員も、同じ立場で仕事をすることが増えました。上下関係が厳しい組織ではなく、フラットな組織が増えています。なぜでしょうか。ＩＴ業界は若い人のほうが新しい技術を吸収しやすく、能力が伸びやすいようにみえますが、本当でしょうか。

ＩＴ業界の技術は、ある時期に世界で同時に広まり始めます。例えば、ＨＴＭＬ５が世に出たのは２０１４年です。今は２０１９年ですから、「経験年数１０年のＨＴＭＬ５プログラマ」は、世界のどこにもいません。新しい技術を使うとき、技術者は同じ土俵に立つのです。

８０歳を超えたプログラマもいますし、小学校では近々プログラミングが必修科目になります。先生の技術を超えてしまう生徒が多く出現するでしょう。始めるに遅いことはないのです。脳はたとえ一時的に機能が衰えても、年齢にかかわりなく、使うほど機能が高まります。ＩＴにはそんな希望もあると思います。

ウェブはことばでできている

ウェブ３大言語、ＨＣＪ

ウェブページは３種類の言語で書きます。ＨＴＭＬは文書構造、ＣＳＳは視覚デザイン、ＪａｖａＳｃｒｉｐｔは動作を担当する、としばしば説明されます。

ＨＴＭＬは<body>というように、「<」「>」で囲んだタグを使います。

<body>
    <div>hello</div>
    <img src="example.png" alt="画像例">
</body>

ＣＳＳは、セレクタとプロパティを並べていきます。

body {
    margin: 0 auto;
    padding: 0;
    font-family: sans-serif;
}

ＪａｖａＳｃｒｉｐｔは、ウェブに関する大抵のことをプログラミングで実現できます。

$(function(){
    var hello = 'こんにちは';
    alert(hello);
})

ウェブページは、ＨＴＭＬ、ＣＳＳ、ＪａｖａＳｃｒｉｐｔの３言語で作れる

ＨＴＭＬ５、ＣＳＳ３、ＪａｖａＳｃｒｉｐｔ、ウェブ標準、ＥＣＭＡＳｃｒｉｐｔ

プログラミングの目的
プログラムを書くための「言語」と言われても、日本語や英語と似たものなのかと考えると合点がいかないと思います。ＨＣＪはブラウザが読める言語、と言われてもなかなかしっくりこない。なぜならば、その言語を書くのは私たちだからです。プログラムにも文法があります。ひとつ使えるようになれば、欧米の外国語のように、他の言語も似たようなものなので、使うことができるものです。表現したいことがあるから、外国語の文法を学べる。これと同じで、作りたいものがあるから、プログラムできるようになるのだと思います。特にウェブの言語は、作りたいもののイメージを考えやすく、作るとすぐに目に見えるので、上達が早い言語です。コピー用紙とペンで完成図を書き、パワーポイントで具体的なイメージを書ければ、プログラミングの目的が定まります。やみくもに文法を覚えるより、作ろうとしているものが決まっているほうが、必要は発明の母、上達も早いです。

もっといろいろ作るための言語

ウェブにできないことは、あまりありません。こういうことがしたい、と思ったら、検索すると実現方法がいくつか得られます。たいていのアイデアは実現できるようになってきています。

ウェブで便利な機能を実現する言語は、ほかにもいくつかあります。

ＰＨＰは、データベースを簡単に接続できることが魅力です。ＷｏｒｄＰｒｅｓｓやウェブシステム開発で選ばれています。

<?php
    $hello = 'hello';
    echo $hello;
?>

Ｐｙｔｈｏｎは、ＣＧＩの開発に使われてきましたが、最近は数式を早く処理できるようになり、人工知能や大学レベルの科学技術計算に使われるようになりました。

import cgi
the_world_is_flat = True
if the_world_is_flat:
  print("Be careful not to fall off!")

Ｐｅｒｌは、かつては掲示板を作る言語でした。ＳＮＳが普及した今ではあまり使われなくなりましたが、最新版のＰｅｒｌ６は非常に書きやすくなり、世界的に注目されています。

"Hello, world!".say

Ｒｕｂｙは、ウェブシステムがＲｕｂｙで手軽に作れる「Ｒａｉｌｓ」が登場してから、すぐに普及しました。もともと日本人が作った言語として有名です。

say = "I love Ruby"
puts say

ＡＳＰ．ＮＥＴは、マイクロソフト社が作った言語です。この言語で開発しても、運用できるサーバーがあまりないことが難点です。

<%@ Page Language="C#" %>
<p>
<% 
     Response.Write("Hello, ASP.NET!"); 
%>
</p>

Ｇｏは、グーグル社が作った言語です。古くからある言語に似た文法で、かつ早く処理できるため、今後普及が見込まれています。

package main
import "fmt"
func main() {
  fmt.Println("Hello, 世界")
}

ＳＱＬは、データベースを操作するための言語です。データベースに値を保存・更新・削除する機能をはじめ、単純な文法と１００余りの単語で書きます。

SELECT hello FROM table WHERE age = 65 ORDER BY age;

ウェブにできないことは、もうあまりなくなってきている

ＰＨＰ、Ｐｙｔｈｏｎ、Ｐｅｒｌ、Ｒｕｂｙ、ＡＳＰ．ＮＥＴ、Ｇｏ、ＳＱＬ、まつもとゆきひろ

先に誰かが作ったものを利用する

プロのウェブプログラマでも、システムをすべて一から作る人はいません。大抵は、開発プロジェクトごとに使うツールを決めることから始めます。ツールはそのソースコードをウェブで公開しているものが多く、世界中の開発者が平日の自由時間や休日に開発を進めています。

ネジやばねなど、機械が部品から組み立てられているように、ウェブページも部品を組み合わせて作ります。スライダー、アイコン、見出しなど、様々なサイトから部品を拾ってきて、ファイルにソースコードを書いてとっておきます。必要な時にふさわしい部品のソースコードをとってきて、組み合わせます。この方法で部品は使い回せるので、部品ファイルが充実するほど、制作時間は短縮できます。

部品をとっておけば、何度も同じソースを書かずに済む

ライブラリ、プラグイン、ＣＤＮ、ウェブアプリケーションフレームワーク、ＭＶＣ、ＧｉｔＨｕｂ、ＤＲＹ原則、車輪の再発明

実習：サンプルページ

なんでもウェブになる

ウェブの便利な使い方

ウェブは、情報をすばやく得ることができ、また、情報を自由に公開できるので、広まりました。このインフラは失われることがないでしょう。必要な情報を自在に検索できれば、生活に困ることが格段に減ります。検索語を自在に案ずれば、新しい世界に触れることも簡単です。自分で作ったページのＵＲＬを渡せば、まとまった情報を伝えることができます。

ウェブが印刷物に比べて優れている点を挙げると、

ウェブは一度公開した情報を更新できるので、誤植や訂正箇所、デザインの変更点をひっそりと修正できる
掲示物は、掲示場所に行く必要があるが、ウェブは空間の制約がないので、ＵＲＬさえ知っていれば、見てもらえる
印刷物は紙や布など物理的なものなので、雨風や落書きで損傷しうるが、ウェブページはいつでも同じ品質を保てる

他にも、拡大できる、明るさを変えられる、上下左右に繰って読む、などあると思います。ですが、最も大きな特徴は、簡単にリンクできること、つまりハイパーリンクです。このおかげで、ウェブは様々な便利さを提供してくれます。

簡単にリンクできることが、ウェブの最大の特徴

ソーシャルブックマーク、リーディングリスト、絞り込み検索、パスワード管理、Ｗｅｂ資格情報、ＱＲコード、プライベートモード、夜間モード、ダークモード

ウェブデザインの５大要素
ウェブデザインをどう見るかについては、さまざまな考えがあります。私は、次の５大要素でできていると思っています。フォント（文字とそのデザイン）、配色（色とそのバランス）、レイアウト（あらゆる要素の配置）、素材（写真、動画、画像）、動き（要素のそれぞれが動く仕組み）です。ウェブサイトの印象や機能を、これら５大要素を組み合わせて実現する。これがウェブデザインです。重要なことは、印象や機能は、試行錯誤の結果でもなく、偶然の産物でもなく、すでに知っている要素を組み合わせて作るということです。なので、要素を知ることや、要素を研究することで、実現できることや配慮できることが増えます。アートは１を生みますが、デザインは組み合わせるところが肝です。

ウェブ関連の職業について

ウェブ開発では、フリーランスの場合はひとりの人が初めから終わりまで手掛けるケースもありますが、ふつうはチームで役割を分担します。それでも３～６名の小規模なチームであることが多く、必要な技術や知識は、個人で持ち寄るか、検索して、制作します。ウェブ関連の求人は多く、２年以上の実務を経験した技術者は職に困らない状況です。