Webページが表示される仕組み
Webページが表示までの仕組みを
理解されているでしょうか？
ここは大変初心者向けですが、
理解していないと
大変なことになります。
社会人になったら
すぐに返せるという
なんの根拠もなく
奨学金を借りたとします。
そして、無事大学を卒業し、
中小企業に就職。
奨学金を
20年間かけて返済する
生活が始まります。
給料は月収15万
お金が全くたまらない。
家賃5万円に食費、
光熱費、スマホ代を入れると
生活がギリギリ……
毎月たった2万円の返済が
厳しすぎる…
そんなある日、
断れずに会社の同僚と飲みに行ったため
奨学金を初めて滞納してしまう…
日本学生支援機構から
電話がかかってきて
滞納分を来月に
支払うよう要求される。
もちろん払えるはずもなく
副業するしかないと思い、
深夜にコンビニのバイトを始める。
きついスケジュールで
体が悲鳴を上げ、
5ヶ月後に仕事を退職。
バイトをしても生活費しか稼げず
払いたくても払えない……
弁護士に相談すると、
自己破産するしかない
と言われ、
連帯保証人である親にまで
迷惑をかけ、
家族もろとも
破産へと追い込んでいきます。
そうならないためにも、
スキルをつけることで、
将来、お金に困らないために
勉強していかないといけません。
お金に余裕を持って
生きていけるようになり、
誰もが思い浮かぶ充実した生活が
できるようになります。
それではやっていきましょう！
1 Webブラウザについて
Webブラウザとは、
Webサイトを閲覧するための
アプリケーションです。
例えば、
などは聞いたことが
あると思います。
これらが
Webブラウザ
です。
どのWebブラウザも、
Webサイトを閲覧することが
最も重要な機能と
なっています。
より高速なWebページ表示や、
独自機能などを
開発することによって
他のアプリケーションと
覇権を争ってます。
それでは、
ブラウザが表示している
Webページについて
説明していきます。
2 Webページの構成
Webページは、
リソースによって
構成されます。
リソースとは
HTML
その他リソースファイル（画像など）
の4つのことを指します。
HTMLは
Webページにおける
文書を担当します。
Webページを表示する際、
HTMLが中心となって
構成されてます。
リソースファイルも
HTMLによって
繋がっています。
CSSは
Webページにおける
デザインを
担当します。
デザインとは
Webページのレイアウトや
色、背景、フォントの
ことです。
HTMLだけだと
普通の箇条書きになりますが、
CSSを適用させると
見た目がキレイに
デザインされます。
ブラウザ上で使用できる
唯一のプログラミング言語です。
JavaScriptを使用すると、
HTMLやCSSを
動的に操作できる
ようになります。
マウスのクリックなどの
イベントに反応して、
ある情報を表示させたり
非表示にしたりといった
制御できることが
できます。
なお、HTMLやCSSは、
プログラミング言語ではなく、
文書やデザインを
記載するための言語です。
その他のリソースファイルとして
代表的なものは、
画像ファイルです。
他にも、
動画ファイル、
フォントファイル、
Flashファイル
などがあります。
リソースファイルは
HTML内に埋め込むことで、
Webページの一部として
表示できます。
3 Webページの表示
Webブラウザは
特定のWebページを表示する際、
下記のような流れで動作します。
指定のURLへアクセスし、
リソース
（HTML, CSS,
JavaScript, 画像、動画など）
を取得します。
取得したHTML, CSS,
リソースを解析をします。
解析結果を基に、
文字や画像を適切に配置、
あるいは文字の大きさを
調整したり、
色をつけるなどして
Webページとして統合し、
表示します。
Chromeでは
Webページを表示した際、
右クリックで
「検証」
を選択すると、
表示しているWebページの
HTMLコードが表示されます。
ぜひ見てみてください。
Webページの本来の姿が見られます。
P.S.
プログラミングを
学びたいが
何をすればいいのか
わからない方や、
独学で勉強している方
に向けて、
Webサービスを作れる
までに必要だと思う
プログラミングの知識を、
LINE@で発信し
始めました！！
無料で登録できますので、
これから
プログラミングのスキルを
本気で
身に着けたい人、
大歓迎です！！
ぜひ、この機会に
登録してみてください！！
⇩ ⇩ ⇩ ⇩ ⇩ ⇩ ⇩
ここでやるかやらないかで、
将来後悔するかが決まります！
オブジェクト指向の考え方
「オブジェクト指向」
という言葉を聞いたことがありますか？
プログラミングの勉強をし始めて
間もない方でしたら
聞いたことがない
または
聞いたことあるけど
あまり理解していない。
という方がおられるでしょう。
今回はそんな人のために
オブジェクト指向における
オブジェクトの特徴を
まとめてみたいと思います。
今後のコーディングでも
必要になる知識ですので、
ぜひ理解してください。
ここを理解していないと
プログラミングを
理解することができないです。
すなわち、
スキルをつけて、
就職、独立など問題外です。
コロナウイルスの影響で
職を失い、
FX取引に失敗
してしまいます。
多額の借金を抱えたまま、
無職になります。
新しい就職先も
コロナ禍で
なかなか決まらないです。
やりたくもない
アルバイトを
し続けないといけません。
FXを辞めることができず、
また失敗します。
家賃を支払うこともできず、
家族からの信頼もなくなり、
最悪自ら命を落としてしまうことも
あるでしょう。
スキルをつけることで、
就職、独立に成功し、
家賃を返せるようになり、
家族からの信用を取り戻せます。
お金に余裕を持って
生きていけるようになります。
誰もが思い浮かぶ充実した生活が
できるようになります。
そのためにも、
つまずいてはいけません。
考え方があやふやだと、
理解できないです。
プログラミングの勉強を
辞めないためにも
今から簡単に
説明していきます。
オブジェクトの特徴
objectを訳すと
「物、物体」
という意味になります。
オブジェクト指向を使う
プログラミング言語では、
ひとつひとつのデータを
オブジェクトとして
扱います。
オブジェクトを
「人」や「動物」に例えると
わかりやすくなるでしょう。
地球上にいる人全員が
オブジェクトと
考えてください。
属性情報を持っている（プロパティ）
たとえば、
自己紹介をするときに、
相手に伝える情報を
思い浮かべてください。
氏名、年齢、出身地、
現住地、勤務先、
などがあげられます。
こういった情報ひとつひとつは、
あなたの
「属性情報」
です。
オブジェクトも同じで、
ひとつひとつのオブジェクトは
属性情報を持っています。
振る舞いを持っている（メソッド）
わたしたちは
話す、食べる、
寝る、自己紹介する
などの行動ができます。
ひとつひとつの行動が
「振る舞い」
です。
さきほどの自己紹介も
振る舞いのひとつです。
ひとつひとつのオブジェクトは唯一無二である
同じ人間でも
「わたし」と「あなた」は
異なる人間です。
人間の特徴は、
さきほどと同じように
人間クラス
として定義できます。
ただ、
同じクラスから生まれた
「わたし」と「あなた」は
同じ種族ではあっても、
違う人です。
「わたし」と全く同じ人間は、
この世に存在しません。
オブジェクトも同じです。
クラスという金型を用いて、
個体として異なる
オブジェクトを生成します。
Human yamada= new Human();
Human tanaka = new Human();
Human という金型から
yamada さんと tanaka さんを
作ることができます。
同じ Human ですが、
人としては違う人です。
オブジェクトとオブジェクトに関係性を持たせられる
たとえば
School のオブジェクトである
school_aを作ります。
School school_a = new School();
このとき、
yamadaさんは
school_a に通学している
という情報を持たせれます。
yamadaさんの持つ
school のプロパティに
school_a のオブジェクトを
代入することができます。
yamada.school = school_a;
以上がオブジェクト指向の
簡単な考え方です。
今まで話してきた内容を覚えておけば、
オブジェクト指向で悩むことは
なくなるでしょう。
P.S.
プログラミングを
学びたいが
何をすればいいのか
わからない方や、
独学で勉強している方
に向けて、
Webサービスを作れる
までに必要だと思う
プログラミングの知識を、
LINE@で発信し
始めました！！
無料で登録できますので、
これから
プログラミングのスキルを
本気で
身に着けたい人、
大歓迎です！！
ぜひ、この機会に
登録してみてください！！
⇩ ⇩ ⇩ ⇩ ⇩ ⇩ ⇩
ここでやるかやらないかで、
将来後悔するかが決まります！
WEBサイト制作までの流れ
突然ですが、
Web制作会社が
Webサイトを受注して
制作する際の流れを
ご存知でしょうか？
コードを打つだけでいいんでしょ
と思われている方いらっしゃると思います。
僕もそうでした。
ただ、
コードを打つだけだと
いつまでもプログラマーのままで
終わってしまいます。
ブラック企業に就職し、
誰でもできる仕事、
上司からのパワハラ、
低収入で仕事へのやりがいがなくなり、
自分の時間、
睡眠時間が削られます。
収入はすべて生活費に消え、
最小限の食事しかできなくなり、
頭が回らなくなります。
さらに仕事が終わらず、
パワハラが増え、
ストレスを抱えてしまいます。
最悪、自ら命を立ってしまいます。
そのようなことにならないために、
より高収入を目指すには
上流工程を担当する
必要があります。
そのためには、
全体の流れを
しっかり
理解する必要があります。
新車を買い、
新型の家具を買い、
タワーマンションに住めます。
お金をできるだけ使い、
自己投資にお金をかける
ことができます。
アニメ鑑賞、映画鑑賞、旅行などの
趣味にも
お金や時間を
使えるようなり、
人生を楽しみながら生きことができます。
格闘技などの今までに
やったことのない事にも
積極的に行え、
自らの可能性を
見つけていくことができます。
今回は
Webサイト制作までの
一般的な流れを
ご説明していきたい思います。
役割
まず、大きく分けて役割が4つ存在します。
1つ目は、ディレクターです。
クライアントと話し合い、
どのようなサイトを作るのかを考え、
全体を指揮します。
次に、デザイナーです。
レイアウトや配色など
サイトの見た目を決定して
完成イメージを作ります。
そして、フロントエンドエンジニアです。
利用者が直接、見たり操作したり
する部分を作成します。
最後に、バックエンドエンジニアです。
データベースとの連携など、
フロントエンドだけでは
実現できない目に見えない部分を
実装します。
このように、
四つの役割を説明してきましたが、
デザイナーとフロントエンドエンジニアを
同じ人が兼ねたり、
フロントエンドとバックエンドを
同じ人が実装したりなど、
フルスタックエンジニアも存在します。
企画・要件定義
ディレクターが中心となって
クライアントと話し合い、
どんな情報を載せ、
どんな機能を実装したいのかを、
ヒアリングします。
この流れを要件定義と呼んでいます。
クライアントにとって
何が必要で、
何を実装するのが重要なのかを
明確にします。
サイト設計
ワイヤーフレーム制作
要件を元にディレクターやデザイナーが
サイトの骨組みを考えます。
サイトのページ構成や、
各ページにどんな機能を持たせるか
を決めます。
この時に作るラフスケッチを
ワイヤーフレームと呼んでいます。
この時、大まかなデザインが
伝わればいいので
手書きの方もいます。
カンプ制作
ワイヤーフレームを元に
デザイナーが完成形の
見本を作ります。
完成形の見た目を
ページごとに一枚の画像
として作ります。
この画像のことを
カンプと呼んでいます。
画像なのでボタンやリンクを
クリックしても反応しません。
プロトタイプ制作
カンプ画像を使って、
クリックなどの操作に反応する
紙芝居のようなものを作ります。
これをプロトタイプと呼びます。
プロトタイプは実際にブラウザ上で動きます。
実際のユーザーと同じ感覚でサイトを
眺めることができます。
中身の機能はまだできておらず、
あくまで使い勝手が良いかどうかを
確認するためのものです。
コーディング（実装）
ここから皆さんがご存知の
本格的に使っていきます。
デザイナーが作った素材から、
フロントエンドエンジニアが、
実際にブラウザ上で動くよう実装していきます。
この作業をコーディングと呼びます。
サーバサイド処理が必要な場合は
バックエンドエンジニアと協力して、
開発を行います。
コーディングによって実装された制作物を
ソースコードと呼んでいます。
テスト
本番とほぼ同じテストサイトを用意して、
不具合がないかどうか確認し、
クライアントと一緒に最終確認を行います。
公開
ソースコードや画像など
一式を本番環境にアップロードして
公開すればWebサイトの完成です。
Webサイト制作までの流れを
簡単に
説明してきました。
収入アップには、
必要な知識なので覚えましょう。
P.S.
プログラミングを
学びたいが
何をすればいいのか
わからない方や、
独学で勉強している方
に向けて、
Webサービスを作れる
までに必要だと思う
プログラミングの知識を、
LINE@で発信し
始めました！！
無料で登録できますので、
これから
プログラミングのスキルを
本気で
身に着けたい人、
大歓迎です！！
ぜひ、この機会に
登録してみてください！！
⇩ ⇩ ⇩ ⇩ ⇩ ⇩ ⇩
ここでやるかやらないかで、
将来後悔するかが決まります！
プログラミングに興味を持ったが何をしたらいいのかわからなかった学生が、自分の力でWebサービスを作り、将来無双する方法
My Profile
はじめまして。
「こうし」と申します。
僕のオフィシャルブログに
訪れていただき、
ありがとうございます。
さっそくですが、
ここからは、
プログラミングを
本気で学びたい方
以外は
読まないでください。
では、
気を取り直して
話を進めたいと思います。
僕は、プログラミングで
- メッセージボードの構築
- 日報管理システムの構築
など作ることができます。
ここでは
僕のこれまでの過程を、
簡単に
紹介させてもらいます。
特にやりたいことがなく
単位取れればいいや
としか考えてなかった
意識低い系大学生が、
プログラミングの
スキルをつけて、
無双していこうという話です。
プログラミング初心者の方や、
独学で行き詰まっている方に、
役に立ってもらえればと
思ってます。
ぜひ、最後までお付き合いください。
プログラミングを始めたきっかけ
僕は
サークルや部活に入らず、
スマホいじってばかりの
つまんない大学生でした。
特にやりたいこともなく
周りに流されながら
大学に進学したのですが・・・
700万の奨学金、
親が投資に失敗し
500万失ったことにより、
残り2000万の家のローンなど
お金に困ることになることが、
目に見えていたのに、
将来のことなんて
後で考えればいいやと
考えてました。
そんなある日、
何も考えずに
ニュースを見てみると、
・終身雇用の崩壊
・自分にスキルがない
ことに気づき、
将来に対して
不安を持ち始めました。
将来リストラされるのは、
何の取り柄のない
自分であると・・・
さらに、
再就職すらできない・・・
そもそも、
就職すらできないと・・・
そんなある日、
YouTubeを見ていると、
某ビジネス系YouTuberの
１つの動画を目にしました。
プログラミングのスキルを
つけることにより、
仕事に困ることが
なくなり、
副業としても
稼ぐことができて、
になれば
年収１０００万は
夢ではない。
という内容でした。
将来について悩んでいる
僕にとっては、
希望の光
だったのです。
今まで、
何もしてこなかった僕が、
人生で初めて、
ここで変わって、
成功者になるんだ！
と心に決めました！
そして、
大学生のうちに、
プログラミングのスキルを
身に付けること
に決めました。
ここが僕にとっての
人生の
ターニングポイント
ですね。
プログラミングを独学で学んでみたが…
プログラミングを
学んでみておもったことは・・・
難しい
ということです。
「やさしいJava」
という参考書を
買ってみたのですが、
ページ数が多くて、
内容も難しく、
全然、
やさしくなかった
のです。
まず、環境設定が難しく、
自分で打ったコードを
実行してみると、
エラー文が出たりして、
メンタルがめちゃくちゃに
なりそうでした。
そして、
何故間違っているのか
見つけるまでに
たくさんの時間を
使ってしまったのです。
１日費やして見つけた
間違いが、
スペルミスだったときは
一日捨ててしまった
と悔しくて仕方なかったです。
そこで、
参考書は諦めて、
プログラミング学習サイト
Progateを
試してみたところ・・・
参考書との違いに
驚きました。
環境設定をしなくていい
ということで、
最初のステップで
つまずく事はなくなり、
自分の打ったコードが
解答と比較できるため、
スペルミスなどの
どうでもいいところで
時間を取られることは
なくなりました。
今まで、
プログラミングを難しい
と思っていた
僕にとって、
Progateは理解しやすくて、
最強だ！！
と思ってました。
しかし、
そんなProgateでも
デメリットが
存在しました。
それは、
自分が何を
作っているのか
わからない！！
ということです。
学んでいると、
それがWEBサービスに
どのようにして
関わってくるのか、
わからないのです。
最後までやってから
気づいたのですが、
ProgateはWebサービスを
作るところまでは、
教えてくれないのです。
そこで、僕は、
プログラミングの独学に
限界を感じ
始めていました。
スクールに通うべきなのだが…
そんなとき、
「プログラミングの独学に
限界を感じたら、
TechAcademy」
という広告を
YouTubeで目にしました。
そこで、普通の人なら
プログラミングスクールに
通うべきだ！！
と思うはずなのですが、
僕は違いました。
なぜなら、
プログラミングスクールは
何十万も
お金がかかるからです。
僕の家族は至って
裕福ではありません。
親に土下座して払って
もらえたという人が
いますが、
お金がないことは
事実なので、
土下座したところで
お金なんて
出てこないのです。
学費や食費、家にお金を
納めたりしている中で、
毎月少しずつ
貯めていくことになるので、
１年以上は
かかってしまいます。
正直、それでは
間に合わないです。
4回生になれば就活が
始まるので、
それまでには
身につけておきたかったのです。
そこで、
僕はある決心をしました。
ここで
立ち止まっていては
今まで
学んでいたことが
もったいない、
スクールに通って、
もっと
実践的なことを
学ぼう！
そして、
不安でしたが、
なけなしのお金と
クレジット分割払いで
スクールを受けてみました。
スクールに入って思ったこと
スクールに
入って思ったことは
独学とは違って
わかりやすい
ということです。
例えば、
開発までの
カリキュラム
が備わっている
ところです。
今までは、
なんとなく
理解はしてるが、
作るまではできず、
HTML,CSSと
連携させたり、
サーバーをしっかりと
理解して
使うことは、
独学では
大変難しいことでした。
しかし、
スクールでは、
まず、
ネットワークの説明
から入り、
今までなんとなくしか
わからなかったことが、
これはこういうこと
だったのかと
ひとつひとつ
納得することが
できました。
さらに、
エラー文の処理など
わからないところは、
メンターに聞く
ことにより、
素早く対処
できるように
なりました。
わからないことを
聞くことによって、
１人で悩んで、
無駄な時間を
取られることが
一切なくなることは
本当に良かったと
思ってます。
ここは、
前にも話したように、
独学している人に
とっては難敵です。
そこで
プログラミングの勉強を
やめてしまう人もいます。
しかし、
僕のスクールでは、
わからないところを
Slackで聞くと、
すぐに返答してくれて、
時間をかけずにすぐ、
解決できました。
今までスクールのいいところを
話していましたが、
独学で
できる人もいます。
しかし、
スクールは、
情報を集める手間を
なくしてくれて、
プログラミングを
やめてしまう原因を
解決してくれます。
家に帰ると
ご飯を作ってくれていて、
悩みを聞いてくれる、
お母さんみたいな存在です。
スクールに入ることは
結構なリスクを
背負いますが、
将来に向けての投資
だと考えてみると、
スクールに
入ってよかったな、
と今では、
思ってます。
スクールを卒業すると…
スクールを卒業すると、
実際にWebサービスを
作れたことにより、
他のサービスも
つくれるように
なりました。
クラウドソーシングで
案件を取ったり、
プログラマーなどに
就職する際に、
オリジナルの
必要になってきます。
スクールで作った
Webサービスでは
誰もが作れるサービス
と思われ、
相手にされません。
そこで、
自分はここまで作れるのだと、
新たなサービスを
作らないといけません。
そんなときのために
他のWebサービスを
作れるようになる
ということは
大変必要なことです。
さらに、
他の言語の理解も早くなり、
成長の速度、
理解度が
すごく良くなってきました。
何より１番良かったことは、
作れた
ということが
自信になった ！！
ということです。
僕の現在
今は、色々なWebサービスを
作りながら、
他の言語にもチャレンジ
していこうと考えてます。
プログラミングを
始める前までは、
こんなサービス作れる
わけないやん
と考えてました。
しかし、
どんどん学んでいると、
どんどんプログラミングについて
理解できるようになり、
他のWebサイトなど
見てみると
自分で作れるやん
と思うようになり、
自分の書いたコードが
実行できると、
達成感がすごいです。
今では、
この感覚を忘れなくなり、
コードを打つことが
楽しくて仕方ないです。
そして、
必要なことなら
すぐに学び始め、
成功するまで諦めないです。
僕は今、
プログラミングを
教えることをやっています。
人に教える事により、
より理解が深まるからです。
そして、将来の夢は、
お金に困ることなく、
好きな時間に、
好きなだけ
働けるような
になることです。
そして、最後に
今まで色々、
話させてもらいましたが、
そんな僕から、
プログラミングのスキルを
本気で
身に付けたい方に、
伝えたいことがあります。
次はあなたの番です！
僕みたいに
遠周りすることなく、
しっかりとした手順で
頑張ってください。
諦めずに続けると
必ず成功します！！
P.S.
プログラミングを
学びたいが
何をすればいいのか
わからない方や、
独学で勉強している方
に向けて、
Webサービスを作れる
までに必要だと思う
プログラミングの知識を、
LINE@で発信し
始めました！！
無料で登録できますので、
これから
プログラミングのスキルを
本気で
身に着けたい人、
大歓迎です！！
ぜひ、この機会に
登録してみてください！！
⇩ ⇩ ⇩ ⇩ ⇩ ⇩ ⇩
ここでやるかやらないかで、
将来後悔するかが決まります！
