こんにちは、株式会社カスタマトリックスの寺尾です。
こちらは 新卒社員と学ぶWEBプログラミング 企画になります。
可能な限り毎日更新していくのでご期待ください。
本日は第九回、ついに「Webサイトを作ってみよう」です。
前回はこちら
https://qiita.com/r-terao/items/f3c8f81897cdace152c6
第一回はこちら
https://qiita.com/r-terao/items/e6237c4dc59db9e96ec6
準備
コード管理
複数人で作業を行う際、現場ではGitHubなどのバージョン管理ツールを使う事が多いですが、今回はその辺の学習は後回しにしたいため、VSCodeのLiveShareという拡張機能を使いたいと思います。
これは誰かのPCにあるファイルを複数人で同時にシェア開発できる便利な拡張機能です。
- VSCodeの拡張機能からインストールする
- ホストになる人が開発先フォルダをVSCodeで開く
- ホストになる人が「Share（Read/Write）」を選択(GitHubかMicroSoftのアカウントが必須)
- ゲストになる人が「Join」を選択
- ホストからURLを貰ってゲストが接続する
Webサーバ
本来であれば完成したコードがどうなっているかを確認するためにWebサーバを用意する必要があるのですが、これもVSCodeの拡張機能で解決します。今回使うのはLiveServerになります。
簡単にHTMLなどを実行でき、さらに編集時の自動更新も可能です。
- VSCodeの拡張機能からインストールする
- HTMLファイルを開く
- ファイルのいずこかを右クリックし、「Open with Live Server」を押下する
ポートの共有
LiveServerを開くとURLの最後に「:5500」などの数字が表示されているかと思います。
これはポートといって、使っているPCの該当番号にWebサイト（サーバ）の出入口を割り当てている状態です。
LiveShareのゲスト側の人はコードを実際に持っているわけではないので自力でHTMLをプレビューするのが難しい状態です。
これをLiveShareの機能で解決します。
ホスト側の人がLiveShereのタブから「Shared Servers」を探し、追加します。
名前を設定しポートを追加すると、ゲストもアクセスができるようになります。
これで簡単に共同作業が開始できるようになりました。
今回作るもの
エンジニアがコーディングできるようになって最初に作るものと言えば、「Todoリスト」ですよね。
という事で作ってみましょう。
とはいえ、現段階ではHTMLとCSSしか覚えていないため見た目を作ってみます。
今回の要件
- リスト画面と詳細画面の2画面
- 3個のアイテム
- リストには「タイトル」「ステータス」「期限」を最低でも表示する
- 詳細には「タイトル」「ステータス」「期限」「詳細内容」「編集ボタン」「削除ボタン」を最低でも表示する
ワイヤーフレーム（仮）
あまり凝ったデザインでなくても良いですが、白黒ではないデザインが良いです。
これまで多くの人がTodoリストを作ってきているので、参考にすると良いと思います。
まとめ
- LiveShareとLiveServerを利用すると共同作業を非常に簡易に開始できる
ついに開発が開始しました。
弊社の新人たちのコードが出来上がった頃に、次はJavaScriptやレスポンシブについて学んでいきます。
おまけ
株式会社カスタマトリックスはエンジニアを募集しています！
完全未経験でも可！