歴史から学ぶ、モダンなウェブサービスの構築手法

1. インターネットの歴史から学ぶ
ウェブサービスの作り方
~ 2日目 ~
株式会社X-HACK

2. 前回の復習
• コンピュータは、データを0と1だけで表現する(二進法)
• マシン語、コンパイラ
• コンピュータの五大要素(入力、制御、演算、記憶、出力)
• インターネットの誕生
• URL,HTTP,HTML,WWW
• 生みの親、ティム・バーナーズ＝リー
• HTMLの基礎
• コマンドラインでファイル操作をやってみる
• Gitとは、Githubとは？
• テキストエディタ Atomの紹介
• テキストエディタでHTMLを書いてみよう
• JavaScriptを書いてみよう

3. webサーバーとは何か？
• インターネットのその先

4. ブラウザとは何か？
• ブラウザは何をしているソフトウェア？

5. HTMLのおさらい
• HTML/CSS/JavaScriptの関係性
• head部、body部、metaタグ
• 文字コード、文字化けさせてみよう

6. 複雑なHTMLを見やすく
• インデントをつける
• 部品化する
• https://code-
life.hatenablog.com/entry/2015/10/27/222803

7. 文字コード
• 文字コードの標準化
• UTF-8

8. CSSフレームワーク
• bootstrap、materialUI、OnsenUI、など
• デファクトスタンダード
• 部品を組み合わせる

9. Atomの凄い機能
• bootstrap4のプラグイン紹介
• https://atom.io/packages/atom-beautify
• https://atom.io/packages/atom-bootstrap4

10. テンプレートを使う
• bootstrap4のテンプレートデザイン
• https://startbootstrap.com/template-
overviews/creative/
• https://github.com/BlackrockDigital/startbootstr
ap-creative

11. サーバーを立てる
• webサーバーは自分で用意できる

12. Heroku
• 様々なクラウドサービス
• AWS、GCP、Microsoft Azure、IBM Cloud
サクラサーバー、X Server、自前で用意 etc ..

13. 何はともあれ動かす
• heroke CLI
https://devcenter.heroku.com/articles/heroku-
cli
• node.js
https://devcenter.heroku.com/articles/getting-
started-with-nodejs

14. bootstrap4 tutorial
• 自習用の資料
• https://www.w3schools.com/bootstrap4/bootstr
ap_get_started.asp