第1回 プログラマの道のりとコーディング
講義の前に
これから話す内容も同義で、今は通用しても数年後はどうかは誰にもわかりません。その為、当塾では用語や組織の仕組み等を詳しくは説明せず、大まかに把握できるまでに止めております。
そのようなものは、WEBで検索すれば最新の情報が得られるので、大事な講義時間を割きたくないというのが本音です。
当塾で身に着けるべきは、学習方法とプログラミングまたはIT業界への慣れと理解だと考えます。
上記内容をご理解頂いた上で、講義に参加いただけますよう、宜しくお願い致します。
リンクについて
講義内容に外部サイトへのリンクがありますが、参考になればと思って貼っているもので、特に重要ではありません。
しかし、このような情報がWEB検索によって得られるという事はとても重要なので、興味や不明点あれば検索して知識や情報を得ていくことを推奨します。
プログラマの道のり
WEB制作の立ち位置
上の画像は中小規模のWEB制作の際の人員配置例になります。
例えば、ある企業から会社のHP制作依頼が入ったとします。
その際に相手の要望を聞き取りに行くのがディレクタ、またはSEです。
依頼者にはWEBに詳しくない方も多いため、経験と知識、提案力が必要とされます。
依頼内容が固まったところで社に持ち帰り、その内容をプログラマとデザイナーに伝え、協議したうえで制作計画、見積もりを作成します。
その内容を依頼者に送り、GOサインが出たところで製作開始となります。
計画に沿って作業を割り振り進行します。
その際にコーダーにも仕事が与えられる場合が主です。
ものすごく簡易的な説明ですが、大きなプロジェクトでない限りは、これに近い形が取られます。
続いて、各肩書の役割を簡単に説明します。
SE（WEBディレクター）
色々な言われ方をしていますが、要は制作プロジェクトのチーム監督です。
小さい会社であれば、管理職のような立場でしょうか。
全体を把握し、仕事を割り振る。
依頼者との折衝も行い、正しく理解し、プログラマやデザイナーに伝える。
知識と経験が必要なため、プログラムやデザインにそれなりに精通していなければなりません。
それだけでなく、チーム全体に目を配り、円滑に製作が進行されるようにコントロールする能力も必要です。
WEBプログラマ
サービスに機能を与えるため、プログラミングする人。
受けてきた依頼内容に応じた技術を身に着けておく必要があります。
もしその知識がなかったとしても、その製作中にで覚えられるだけの知的好奇心と向上心があればなんとかなりますし、現場ではそれ以外では、なかなか新しい知識は得られる時間がないというのが現実です。
人手が足らなければ、コーディングもします。
Webプログラマーとは？Webプログラマーの仕事内容と年収
Webプログラマーとは – Web・IT業界におけるWebプログラマーの役割やキャリアについて解説 | マイナビクリエイター
Webプログラマーの仕事内容、なるには、給料、資格など | 550種類の職業や仕事を紹介 Career Garden
WEBデザイナー
依頼者が求める見た目を作り、ユーザーが満足するデザイン配置を行う人。
ユーザービリティと呼ばれる使い勝手をデザインで満たすのもデザイナーの役目です。
優秀なデザイナーは、コーディングの効率化も考えたデザインができるという点で重宝されます。
こちらも人手不足であれば、コーディングします。
Webデザイナーとは？Webデザイナーの仕事内容と将来性
Webデザイナーってどんな仕事をするの？-独学!未経験からWebデザイナーになる!!
コーダー
コーディングをする人。
プログラマ、デザイナーの殆どがここから始めるほど、重要な作業者であり、WEBの基礎を学ぶ上で素通りできない部門です。
そして、塾生のみなさんもここから始めてもらいます。
HTMLコーダー – Wikipedia
コーダーとは？仕事内容や将来性をご紹介
《よくわかる》コーダーとプログラマーの違い | MOREWORKS
コーディングとは
コーディングに必要な3言語
- HTML
- CSS
- JavaScript
WEBページというのは、上記の3言語から成り立っています。
すなわち、この3言語が使えれば、WEBページが作れるということです。
HTML
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、WEBページを作るための最も基本的なマークアップ言語のひとつ。
これがすべての基礎であり、土台となる。
CSS
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、WEBページのスタイルを指定するための言語。
装飾するための言語なので、これがなくともWEBページは表示されるが、見た目がボロボロになります。
JavaScript
JavaScriptはプログラミング言語であり、ユーザー側のWEBブラウザと、WEBサイトまたはWEBサービスの相互間のやりとりを、円滑にするために使われてる。
Javaと名前が似ているが、全く異なるプログラミング言語です。
JavaScriptとは何なのか！初心者向けに徹底解説 | TechAcademyマガジン
JavaScript – Wikipedia
コピー&ペーストを覚えよう
- ページ上で右クリックを押し、『ページのソースを表示』をクリック
- Ctrl + A で全選択
- Ctrl + C でコピー。
- Ctrl + V 貼り付け（ペースト）。
- 下の枠内に貼り付けたら『表示』ボタンをクリック。
※Macの場合はcommandキー
ここに貼り付けよう
ここに表示
ここで何よりも重要なのは、コーディングはコピペでも成立するという事です。
この発言は賛否ありますが、私はコピペで済むものはそれでいいと思います。
コーディング作業をこなしていくうちに、勝手に覚えていくので、学習の入口からガチガチに覚えようとせず、手を動かし続けることが重要だと考えます。
まずは、見て触って慣れることに集中しましょう。
ショートカットキー
| キー操作 | 目的 |
|---|---|
| Ctrl + A | ドキュメントまたはウィンドウのすべての項目を選択する |
| Ctrl + X | 選択した項目を切り取る |
| Ctrl + C (または Ctrl + Ins) | 選択した項目をコピーする |
| Ctrl + V (または Shift + Ins) | 選択した項目を貼り付ける |
| Ctrl + Y | 操作をやり直す |
| Ctrl + Z | 操作を元に戻す |
| Ctrl + R (または F5) | 作業中のウィンドウを最新の情報に更新する |
先程使ったもののほかに、上記のようなショートカットキーが存在します。
とても重要なので、これらショートカットキーは自然と使えるようにしましょう。
Windows のキーボード ショートカット
Macにおける時短ショートカット | TIPS | BOEL Inc. ボエル
コピペでHTMLファイルを作る
先程行った処理ですが、以下のコードを利用し、HTMLファイルを作って動作させましょう。
- テキストエディタを開く（メモ帳でも可）
- 黒のコード表の上でダブルクリックし、Ctrl + A で全選択
- Ctrl + C でコピー
- テキストエディタ上で Ctrl + V 貼り付け
- Ctrl + S でファイル名を『test.html』として保存
- 出来上がったファイルをブラウザ上にドラッグ＆ドロップで表示
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>講義1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">ここに貼り付けよう</h3>
</div>
<div class="panel-body">
<div class="form-group">
<textarea class="form-control" rows="5" id="put-data"></textarea>
</div>
<div class="form-group">
<button type="button" class="btn btn-lg btn-warning send-data">送信</button>
<button type="button" class="btn btn-lg btn-default reset-data">削除</button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div id="view-data">
<h2 class="text-center">ここに表示</h2>
</div>
</div>
</div>
</div>
<script>
// JavaScript Document
jQuery(document).ready(function($) {
//put_data
$(document).on('click','.send-data',function(){
var data = $('#put-data').val();
$('#view-data').html(data);
});
//reset_data
$(document).on('click','.reset-data',function(){
$('#put-data').val('');
$('#view-data').html('<h2 class="text-center">ここに出る</2>');
});
});
</script>
</body>
</html>
実際、パーツを色んなところからコピペしてきてWEBページを構成するのはままあることなので、こういう方法もあるという事を覚えておいてください。
まとめ
- WEB制作には複数の役割がある
- プログラミングを身に着けるにはコーディングから始めなければいけない
- コーディングにはHTML、CSS、JavaScriptの3言語が必要である
- コーディングはコピペでも成立する
- ショートカットキーは必ず覚え、身に着ける
- HTMLファイルもコピペで作れる
特にショートカットキーは、プログラミング関係なく必要な技術なので、絶対に身につけましょう。
次回講義までの自主学習
学習サイトをピックアップしたので、以下のリンクから自分に合ったものを使って自主学習しましょう。
HTML & CSS | プログラミングの入門なら基礎から学べるProgate[プロゲート]
HTML/CSS入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
HTML入門 (全15回) – プログラミングならドットインストール
CSS入門 (全17回) – プログラミングならドットインストール
実践！ウェブサイトを作ろう (全16回) – プログラミングならドットインストール
理想はすべてのレッスンをやることです。
今は目で見て手で触れる時間を増やすときなので、時間が許す限りやってみましょう。
