はたらくプログラミング
どうもミトコンドリオンです。
昨今、副業を認める企業が増えてきました。
自分のスキルアップ、収入を増やす、働き方改革等を目的に副業を始める人も増えてきたと思います。
副業の種類にもいろいろありますが、私が気になっているのは「プログラミング」です。
副業目的以外でもプログラミングを理解する、構築できると日常生活にも活かせると思うからです。
プログラミングに興味を持ったのですが、どう始めたら良いかわかりませんでした。ネット検索してもいろいろ言語やソフトの情報が出てくるのですが、仕組みについてあまりイメージができていませんでした。
そこで出会ったのがこの本です。
「はたらくプログラミング」
著者 とりたす
監修 ウェブカツ！！
テレビアニメの第2シーズンがはじまった「はたらく細胞」にちょっと似ているような気がします。
擬人化することでどんな動きをしているのか、どんな関係性なのか、がわかりやすくなっていました。
まんがになっているので、専門家の方にしてみたら、間違っている部分があるかもしれませんが、初心者、素人の私にしてみたら、イメージしやすい内容となっていました。
下記に登場人物や用語の説明を記載していきます。
JavaScript（ジャバスクリプト）
プログラミグ言語の1つ。WEBサイトに動きをつけるために使用されることが多い。
新入社員としてドメインに配属になる。女性。
はじめてなのでどうしてよいか分からない。また、自分についても知らないことが多い。
帽子をかぶっているが、髪の毛が一部はねている。「はたらく細胞」の主人公である赤血球のはねた髪の毛っぽい？
PHP（ピーエイチピー）
サーバー側で動くプログラミング言語。
新たに配属されたJavaScriptに対して、はじめは冷たく接する。男性。
次第に仕事ぶりを評価し、協力するようになる。
HTML（エイチティーエムエル）
WEBサイトの構造を作るマークアップ言語。
WEBサイトの土台を作る大工さん的容姿の男性。
細かいことは気にしない。CSSとは昔からの仲。
WEBページのスタイルを指定する言語。
JavaScriptにいろいろと教えてくれる。おしゃれで露出が多めな服装の女性。
HTMLとは昔からの仲。
HTTP（エイチティーピーピー）
インターネットの通信方式の1つ。サーバー／ブラウザ間のファイルのやり取りを行っている。
HTMLやCSS、JavaScriptをサーバーからブラウザに運んでくれる。
船の船長さん。ワンピースの白ヒゲっぽい髭を蓄えている。笑い方はガハハ。
ブラウザ
HTMLやCSSなどのファイルを解析してWEBページを画面に表示する。
海に浮かぶ島にたとえられている。
サーバー
海の上に建てられたオフィスみたいにたとえられている。
ここにJavaScript、PHP、HTML、CSSは待機している。
ユーザー
ブラウザを通してWEBページを見ている。
空に浮かぶ太陽みたいな眼にたとえられている。JavaScriptたちは眼が開き切る前に仕事を終わらせないといけない。じゃないとWEBページが表示されないことになる。
エージェント・スミッス
ブラウザのルールに反するものを察知して捕える。めっちゃ強い。
ブラウザの管理人。マトリックスのスミスみたいな容姿。
WEBサイトの開発に関するさまざまなツールを提供している。
設計書
本作ではHTMLファイルを指す。HTTPを介してリクエストされ、PHPの処理が終わった後の状態。
これをもとにWEBページが構成される。
body（ボディ）タグ
HTMLの記述のうち画面上に表示する部分。コンテンツの土台となる。
h1タグ
文章の「見出し」を定義するタグ。
HTMLの子分。
pタグ
文章の「段落」を定義するタグ。
HTMLの子分。
img（イメージ）タグ
WEBページの中に画像を挿入することができるタグ。
HTMLの子分。
CSSプロパティ
大きさ、色、フォント、余白、境界線、配置、アニメーションなど、さまざまな種類のスタイルを指定することができる。CSSの能力（妹たち）。
width/height
要素の幅と高さを指定するプロパティ。
CSSの妹分。
border
要素の境界線の太さ、色、種類を指定するプロパティ。
CSSの妹分。
background-color
背景の色を指定するプロパティ
CSSの妹分。
color
文字の色を指定するプロパティ。
CSSの妹分。
ブラウザ側をフロントエンド、サーバー側をバックエンドと呼ぶ。
つづく
