初めに
皆さんはじめまして、今回フロントエンド講座を担当させていただくSemikoronです！今回は環境構築から開発を始めて、皆さんがフロントエンドにはどんな仕事があるのかを学んでもらって「う～ん、フロントエンド合わないかも」「めっちゃおもろいやん」などいろいろ感じてもらえればとおもっております！
ちなみに皆さんにはYahoo ショッピングを作ってもらおうと思います！
※注意 : 本記事ではコードを置き換えてほしい場合、コメントアウトや[ ]をもちいています。置き換えの際は全て置き換えるようお願い申し上げます。
※全体公開から見てくださった皆様へ
本記事はとあるイベントでのチュートリアル教材を全体公開したものです。
すでにパソコン上にUbuntuが入れてある事を前提として記事作成を行っています。
いくつか言葉遣い、言い回し等不適切な点、不可解な点あると思いますがご了承ください。
コードエディター「Visual studio code」をインストール、設定する
まず最初にコード編集ができるようにVisual studio code(これから先はVScodeと記載します)をインストールしましょう。
サイトにアクセスして自分のOSに合ったものをダウンロードする
以下のサイトにアクセスして自分のOSと同じものをダウンロードする
https://code.visualstudio.com/download
まあアイコンとかでわかると思うので細かな説明は省きます。
インストールを行う
ダウンロードが終わったらダウンロードファイルを開いてインストールを開始します。
以下にインストール手順を載せておきますが、次へを連打してもらっても問題ないはずです。
windows版しかやってないからなんか違ったらごめん。
特に言うこと無し、大人しく同意しましょう
皆さんはもちろんのことこれから毎日VScodeを触るのでデスクトップ上にアイコンを置いて起動しやすいようにしておきましょう。
ここでインストール!!
VScodeを開いてみる
開くと以下のような画面が開くと思います。
(Welcomeページが最初開くと思いますが問題ありません)
いろいろ自分なりにカスタマイズしているので以下の画像とは少し違う画面が出ているかもしれませんが特に進行上問題ないので無視しちゃって大丈夫です。
次に皆さんにはUbuntuでのリモート環境での開発を行ってもらうので、その開発に必要な拡張機能を入れてもらいます。以下の画像の赤丸の部分をクリックしてください。
するとこのように拡張機能の画面が出てくると思います。
また拡張機能を検索する部分があると思うのでここで以下の2つの拡張機能を探してインストールしてください。
1つ目「Japanese Language Pack for VS Code」:VSCode日本語化拡張機能
こちらの拡張機能を入れた際はVSCodeの再起動を行ってください。
2つ目「WSL」:リモート接続ができるようになる拡張機能
このインストールが終了したら画面左下の青いところをクリックしてください。
すると画面上部に以下のような画面が出てくると思うので「WSLへの接続」をクリックして画面の起動を待って下さい。
ターミナルの操作に慣れる
画面の起動が終わったら次はターミナルでの操作に慣れておきましょう！
ctrl(コントロールキー)+@キー を同時に押すとターミナルが表示されます。
ターミナルでの基本操作を覚えておきましょう
ターミナルでの基本操作
pwd
/home/semikoron
pwdコマンドは現在自分がいるフォルダ(次からディレクトリと呼ぶよ)が分かるコマンドです。
ls
Webapp homework test.py
lsコマンドでは現在いるディレクトリの配下にあるフォルダとファイル一覧が表示されるよ。上の例では白文字で表示されているが、今回使うターミナルではディレクトリは青く表示されます。
cd [移動先のディレクトリ名]
cdコマンドは現在のディレクトリから移動するときに使います。移動先のディレクトリは先ほどのlsコマンドで確認しましょう。またここが重要で..を移動先と指定することで、現在のディレクトリの上位のディレクトリへと移動できます
mkdir [作成するディレクトリ名]
mkdirコマンドを使うことによって新しくディレクトリを作ることができます。
アプリ用のディレクトリを作る
今回のチュートリアルで使用するディレクトリを作り移動しましょう！フォルダー名は「KCLhack2024tutorial」で移動したかどうかの確かめも先ほどの基本操作を見つつ行ってみましょう。
Next.jsを使える環境を作る
次にNext.jsを使える環境を用意していきます。私自身この辺りの理解が深いわけではなく説明をすることが難しいので、細かな説明などどうでもいい！という方は飛ばしてもらって大丈夫です。まずNext.jsはWebフレームワークの一種であり、Webフレームワークってなんだよとなると思うのですが、自分の中では画面の表示に必要なhtmlファイル、cssファイル、その他もろもろのファイルをWebブラウザ上でうまく組み合わせ表示してくれる役目を果たしていると考えています。
Node.jsをインストールしていく
おいおい、Next.js用意するんじゃなかったのかよ、とお思いの方、私もそう思いました。node.jsはWebサイトを構築するうえで必要なもののひとつで、javascript(以降JSと呼ぶよ)を実行できる環境を用意してくれます。なので大人しくインストールしましょう
ではまずそのNode.jsのバージョン管理ができるツールVoltaをインストールしていきます。
また違うものを...とお思いの方も多いと思いますが、こちらも重要なものなのでインストールしましょう。
以下のコードを入力することでvoltaがインストールされます。
curl https://get.volta.sh | bash
動作が終了した後一度ターミナルを再起動する必要があるので、ターミナルの表示の右端にある+を押して新しくターミナルを開きましょう。
次にVoltaでnode.jsとJSのパッケージマネージャーのnpmをインストールしていきます。
node.jsのインストール
volta install node
npm のインストール
volta install npm
これでダウンロードができました。エラーが出たっぽい場合はすぐに呼んでくださいね！
次にいよいよNext.jsの新規アプリを作っていきます。
以下のコードを入力することで新規Nextアプリが作成できます。
npx create-next-app --typescript
このコマンドを実行すると以下のように作成するアプリは？と聞かれますので、ここは今から作るアプリのyahoo ショッピングさんに感謝を込めて「yahho_shopping」にしておきましょう。
それ以降の設定は以下の画像のように設定を行ってください。
これでアプリのディレクトリができたのでそのディレクトリに移動しましょう！
先ほどのターミナル基本操作を駆使して、Nextのアプリフォルダーへと移動しましょう！
ヒント:ディレクトリ名はさっき自分で入力したものになっているよ
さて、それではNextアプリを起動してみましょう。
アプリの起動のコマンド
npm run dev
少し待つと以下のような表示が出るので、http://localhost:3000 へアクセスしてみましょう。
ctrlキーを押しつつターミナル上のリンクを左クリックすると規定のブラウザで開くことができます。
以下のような画面が表示できれば今回の章は終了です！
次からはいよいよアプリ制作へ入っていきます！では次のレイアウト作成編でまた会いましょう！