# LPを作る！

~~レベル別でLPをどんな雰囲気で作っているのか動画でまとめました！~~

## 前回
https://hackmd.io/c9GR_JtYS6-ghHYG-zUsUg

#### 事前準備
- マークアップしたいテーマを決める
- 例）自己紹介、お店紹介、推し紹介 etc...
- [例えば](https://docs.google.com/presentation/d/1NYcrNp5wjJ9ailEUBG_78G9zTu81HbEOwNkB9Mz7ytY/edit?usp=sharing)
- どうしても思いつかないときはどっかのかっこいいWebサイトを真似て作るでOK！

## レベル1 - HTML/CSS

逃れられないHTML／CSSを一通り触れてみよう

### HTMLとは？？

> HTML (ハイパーテキスト・マークアップ・ランゲージ／Hypertext Markup Language) はプログラミング言語ではありません。HTML 言語は、訪れたウェブサイトの構成をブラウザに対して伝えるために使うマークアップ言語です。HTML 言語はウェブ開発者が望むこと次第で、複雑なものにも簡単なものにもなります。HTML は要素の集まりからなり、コンテンツの一部を要素で囲む（マークアップする）ことで、特定の見せ方・動かし方に変えられます。囲むためのタグは、コンテンツの一部をハイパーリンク (ウェブ上の別ページへリンクすること) にしたり、単語を斜体にしたりすることができます。

引用：https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started

詳しく知りたい人はMDNのHTML（無料記事）を一通り読んでみよう！👇
https://developer.mozilla.org/ja/docs/Glossary/HTML

### HTML使ってみよう！

事前準備をして早速使ってみよう！

#### 使ってみた

<iframe src="https://www.youtube.com/embed/0Hqf-y3Op-Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

#### Tips
- 一般
- Ctrl+Shift+Nで新規フォルダー作成できる
- エクスプローラー右クリックで「VSCodeを開く」を選択できる（初回のインストール時の設定次第でできないこともある）
- ソフトウェア一般
- Tabキーで補完が効く（Tabキー連打は日常ですね）
- ctrl+sでファイルの保存ができる
- ctrl+zで取り消し
- ctrl+shift+zでやり直しができる(たまにctrl+yに割り当てられてたりするソフトも有る（Office製品とか）)
- Webサーバー
- wwwディレクトリはwebサーバーのルートディレクトリ(/)としてよく使われる
- index.htmlはHTMLファイルのメインとしてよく使われる（Webサーバー側もindex.htmlを最初に読む）
- ↑C言語でいうmain関数みたいな扱いです
- VSCode（Visual Studio Code）
- !をindex.html上でタイプしTabキーを押すことでHTMLファイルのテンプレを生成できる(VSCodeというよりEmmetが待つ機能である)
- shift+上下キーで複数行選択ができる
- alt+上下キーで選択している行の文字列を移動させることができる
- shift+alt+上下キーで選択している行の文字列を複製できる
- ctrl+Enterで次の行、ctrl+shift+Enterで前の行にどこからでも移動できる
- ctrl+bでサイドバーを開閉できる
- ctrl+,で設定画面を呼び出せる
- ショートカットを設定することで一番左のバー（アクティビティバー）を開閉できる
- その他便利なコマンドがいっぱいある（外部サイト：[VS Code の便利なショートカットキー](https://qiita.com/12345/items/64f4372fbca041e949d0)）
- HTMLの仕様
- 特殊文字という文字が存在していてたとえば`&`をブラウザに表示させたい場合は`&amp;`とHTMLに書く必要がある
- 特殊文字(`<`とか`©`)の書き方集：（外部サイト：[HTMLの記号・特殊文字の文字コード表（文字実体参照、数値文字参照）](https://gray-code.com/html_css/list-of-symbols-and-special-characters/)）
- HTMLの最新バージョンは「[HTML Living Standard](https://html.spec.whatwg.org/multipage/)」でありHTML5は2021年の1月に廃止されている。(外部の記事：[どうしてHTML5が廃止されたのか](https://future-architect.github.io/articles/20210621a/))
- その他
- YouTubeはHTMLに動画を埋め込むためのコードを提供している（外部サイト：[動画と再生リストを埋め込む](https://support.google.com/youtube/answer/171780?hl=ja)）
### CSSとは？？

> CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。

> HTML のように、CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。CSS はスタイルシート言語です。CSS は、HTML の要素を選択的にスタイルにするために使うものです。

引用：https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics

詳しく知りたい人はMDNのCSS（無料記事）を一通り読んでみよう！👇
https://developer.mozilla.org/ja/docs/Learn/CSS

#### Tips
- 外部記事[CSSプロフェッショナルのためのTIPS](https://qiita.com/rana_kualu/items/8b4ab5c6837392420ad4)
- 特にWebアプリケーションの開発現場においてCSSを直接書くことはほとんど無く、Sass(Scss)によって出力させたCSSを読み込ませる方法で開発される
- 筆者注：私はCSSが超苦手

## レベル2 - JavaScript

### JavaScriptとは？？

> JavaScript はウェブページ上に複雑なものを実装することを可能にするプログラミング言語です。ウェブページが表示されるたびに静的な情報が表示されるだけでなく、タイムリーにコンテンツを更新したり、インタラクティブマップや 2D/3D グラフィックスのアニメーションを表示したり、またはビデオジュークボックスが流れたりします。ほかにもありますが、これらは 間違いなく JavaScript が関係しています。

引用：https://developer.mozilla.org/ja/docs/Learn/JavaScript

詳しく知りたい人はMDNのCSS（無料記事）を一通り読んでみよう！👇
https://developer.mozilla.org/ja/docs/Learn/JavaScript

#### Tips
- 一般
- JavaScriptという用語は厳密にはECMAScriptの言語仕様とDOMを含むWebAPI郡を包括して指したものである（参照：[JavaScript 技術概説](https://developer.mozilla.org/ja/docs/Web/JavaScript/JavaScript_technologies_overview)）
- ブラウザで動くJavaScriptに対してNode.jsがスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動のJavaScriptランタイム（環境）である（参照：[Node.js® とは](https://nodejs.org/ja/about/)）
- JavaにJVMっていうJavaプログラムを動かす環境があるようにJavaScriptもそれを動かすための環境（俗にJavaScriptランタイム）がある。Webブラウザの中にJavaScriptランタイムが整っていて、そのため開発者はWeb制作や開発のときにはWebブラウザを使う。
- Node.jsはWebブラウザからJavaScriptランタイムを切り出したものっていえばわかりやすいかも（ちょっと言葉足らずだけどね）
- JavaScript
- 現在よく使われるJavaScriptのバージョンはECMAScript2015（EC6ともいう）以降のものである
- サイト制作中に厳密なバージョンを意識することはないが、EC6とそれ以前(EC5やEC3)のバージョンとでは機能や構文が大きく異る部分があるので学習や開発の際は気をつける必要がある
- Node.js
- Node.jsは技術的概要だけ見るとサーバーサイドだけで使われていると思われがちだが実際にこの技術を存分に使っているのはフロントエンド開発の部分だったりする（気がする）
- とはいえサーバーサイドで活躍するためにつくられてるのでこの記事をみてNode.jsの素晴らしさを雰囲気だけ感じてほしい（外部サイト：[初心者向け！3分で理解するNode.jsとは何か?](https://eng-entrance.com/what-is-nodejs)）
- バージョンは高頻度で更新されるのでアンテナ立てて更新情報等を追う必要がある
- Node.jsは[セマンティック バージョニング](https://semver.org/lang/ja/)されていて、メジャーバージョンが偶数の場合はLTS版である。（外部サイト：[リリース](https://nodejs.org/ja/about/releases/)）
- Webフロントアプリの開発においてはNodeのバージョンは気にする
- Nodeのバージョンを切り替えられるように環境構築するのがベター
- この動画めっちゃ見やすいのでみんなもセイト先生の動画をみよう()（[2020年版、Node.js入門！使い方〜環境構築までを丁寧に解説](https://liginc.co.jp/513122)）
- もちろんECMAScriptベースなのでEC6とそれ以前とで仕様が異なる部分があるので注意が必要。
- 実際のWebアプリ開発ではJavaScriptそのものを書くことは少なく、TypeScriptなどのAlt.jsを使った開発を行うことのほうが多い（が、もっぱら世界線によるのでJavaScriptから始めていいと思う。CやC++の沼にハマってて型定義ないと生きていけない人はTypeScriptから始めてもイイカモ。）
- ちなみにVSCodeやTeams、Slack、DiscordはNode由来のWeb技術が使われていてJavaScriptで書かれている（厳密にはTypeScriptや他の技術も使われるが）（参照：[ようこそ！Electron入門](https://qiita.com/umamichi/items/6ce4f46c1458e89c4cfc)）

## レベル3 - CSSフレームワーク・ライブラリ

デザイナーがいないけどそれっぽく実装しないといけないときに役立ちます。

それっぽく実装するためにJavaScriptが使われることがあります。

#### Tips
- [レスポンシブ対応のおすすめCSSフレームワーク5選【2020年版】](https://www.site-convert.com/archives/1093)
- [2020年版：おすすめの人気CSSフレームワークと特徴の総まとめ](https://webdesign-trends.net/entry/11473)

## レベル4 - JavaScriptフレームワーク・ライブラリ
JavaScriptフレームワークやライブラリを用いて機能をつけていきましょう。

#### Tips
- がっつりいろいろな機能（記事投稿、プロフィール編集、チャットetc...）をつけることでWebサイトがWebサプリに変身します。
- [JSフレームワークとライブラリがごっちゃになっている話](http://webnohito.me/tips/js-framework-library/)

## レベル5 - デプロイ

## 番外 - Git