1.1　ポートフォリオを作りたい

　「先輩、たいへんです……！もう大学生活も終わりが近いのに、まだ就職先のひとつも決まっていないんです！来年からわたし、どうすればいいでしょう……」

　なんだっけ、ITエンジニアになりたいんだっけ？

　「はい。あーあ、内定が自分のところに勝手にやってきてくれたらいいのに……」

　何かひとつでも、そのための努力はしたの？

　「してないです」

　ポートフォリオのひとつも作ってない？

　「作ってないですね」

　卒論は順調？

　「欠片も進んでないですね。研究室の教授も、『君は来年も大学生やるんだったね。楽しみにしてるよ』なんて煽ってきます。でも就職が決まっていない現状と、来年からの暗い未来のことを考えると、もう何も手につかなくって……」

　最悪じゃん……わかったよ。後輩ちゃん、今日から数日間、わたしのところに来てくれる？　爆速でポートフォリオ作って、迅速に内定を取ろう。それで、ちゃんと学業に専念できるようにしよっか。

　「え、先輩がポートフォリオ制作と諸々の知識まで教えてくれるって話ですか？」

　このままじゃ後輩ちゃん、来年から路頭に迷いそうだしね。

　「やった。じゃあ言葉に甘えていいですか？」

　もちろん。じゃあ、あとでうち来てね。今日から早速始めよう。

1.2　ポートフォリオ、なにで作る？

　「先輩おつかれさまです！　そういうわけで来ましたー」

　お疲れさま。じゃあ、早速始めよっか。

　まず後輩ちゃんの現状を確認させてね。後輩ちゃんの今のエンジニアに関連するスキルって、『マークアップと基本的なJavaScriptがわかる』ってくらいだったっけ？

　「はい。HTMLと、CSSと、普通のJavaScriptです。jQueryとかVueとかReactとか、いわゆるライブラリーやフレームワークと呼ばれてるものについては、正直なところよく知らないです」

　そうだったね。たしか後輩ちゃんは、サークルのホームページを自作したら楽しかったから、それをきっかけにITエンジニアに興味を持ったんだったよね？

　「それだけじゃなくて、先輩の影響も大きいですよ。先輩っていう身近な存在がITエンジニアやってたから、それでわたしも興味持ったんです」

　そうだったんだね。とりあえず現状のスキルはわかったけど、今のままじゃちょっとITエンジニアとして内定取るにはちょっとアピール不足だね。今回ポートフォリオ制作するにあたって、新しい技術に手を出してみよっか。

　「新しい技術ですか……覚える時間あるかな」

　頑張って短期間で詰め込むよ。今回は後輩ちゃんの内定獲得を目的にしたポートフォリオ制作だから、できる限り他の人と被らないような、なおかつ実用的なスキルを身に付けたいね。

　たとえばだけど、後輩ちゃん、Nuxt3なんて興味ある？

　「なくすとすりー？　なんですかそれ」

　さっき後輩ちゃんが口にした中に、Vueっていうフレームワークがあったでしょ。Nuxt3は、Vueをベースにしたフレームワーク『Nuxt.js』の最新版だよ。

　今のフロントエンド界隈の一番の主流はReactや、Reactをベースにしたフレームワーク『Next.js』だけど、あっちは短期間で覚えるにはちょっと難しい部分があるの。React界隈は基礎から応用までしっかり地力を高めた人向きで、すぐに実用的なものを作りたいなら、Nuxt3が一番いいと思うよ。

　それにIT業界って、新しいものが好きな人が多いんだよね。Nuxt3は公開からまだ日が浅い分、後輩ちゃんが面談で『Nuxt3でポートフォリオ作ってみました』って話したら、きっと興味を持って聞いてくれる人がいると思うよ。新しいことを学ぶ姿勢は、進歩や変化の早いIT業界において、大事なスキルのひとつだからね。

　「へー、よくわからないけど、そういうことならNuxt3でポートフォリオ制作やってみます」

　うん、そうしよっか。それからもうひと押しアピール力を高めるために、Nuxt3と合わせて、CSSフレームワークに『Tailwind CSS』を使ってみよう。さらにAWS CDKでインフラ構築して、制作したポートフォリオを公開できるようにしよっか。

　「えっと、Tailwind CSSとAWS CDKですか。そっちもよくわからないけど、とりあえず挑戦してみますね」

　うん、『とりあえずやってみる』精神は大切だよ。じゃあ、まずは学習と制作の前準備として、環境構築から始めよっか。

1.3　環境構築

　必要なものをリストアップするよ。これらを全部インストールしてね。

　１．JavaScriptの実行環境『Node.js』

　２．Node.jsのパッケージマネージャー『npm』

　３．コードを編集するエディター（VSCode）

　４．AWSを操作するためのコマンドラインツール『AWS CLI』

　５．AWS CDKのコマンドラインツール『CDK CLI』

　さらに、VSCodeには次の拡張機能を入れるよ。

　１．Vue3のコード補完を効かせるための拡張機能『Volar』

　２．Tailwind CSSのコード補完を効かせるための拡張機能『Tailwind CSS IntelliSense』

　３．JavaScriptやTypeScriptのコードの静的検証を行う拡張機能『ESLint』

　４．コード整形を行う拡張機能『Prettier』

　５．VSCodeの組み込みTypeScriptのバージョンを最新にする拡張機能『JavaScript and TypeScript Nightly』

　６．VSCodeを日本語化する拡張機能『Japanese Language Pack for VS Code』

　これだけあれば十分かな。最終的にはAWSアカウントも開設してもらうけど、今はまだ大丈夫。あとでやろっか。

　「これだけ、っていっても結構多いですね」

　すぐに終わるよ。ひとつずつやり方説明するね。

Node.jsとnpmのインストール

　Node.jsはJavaScriptをブラウザー以外でも動かすための実行環境だよ。一方でnpmは、Node.jsをより便利にしてくれるさまざまなパッケージを管理するためのツール。両方とも、単にNode.jsの公式サイトからインストーラーをダウンロードして、インストールするだけで使えるようになるよ。

　Node.jsの公式サイトのURLは、https://nodejs.org/ja/だからね。サイトを開くと推奨版と最新版のいずれかを選んでダウンロードできるようになってると思うけど、どちらを選んでもいいよ。特に希望がなければ、推奨版をダウンロードしよっか。

　「分かりました！npmの方はどこからインストールすればいいですか？」

　実はnpmは、Node.jsと一緒に付いてくるよ。ダウンロードしたNode.jsのインストーラーを実行すると、一緒にnpmもインストールされるんだ。インストールが完了したら、自分のパソコンに入ってるCUIツール——MacOSならターミナル、WindowsならコマンドプロンプトやPowerShell、Windowsターミナルのことだね。以後『ターミナル』表記で解説するよ——で、次のコマンドを実行すると、Node.jsとnpmのバージョンを表示できるよ。

# Node.jsのバージョンを表示

node -v

# npmのバージョンを表示

npm -v

　「なるほど、-vっていうのはversionの意味なんですね」

　そういうことだね。ちなみにCUIで実行するコマンドに、よくこうやって、ハイフンに続く文字を指定することがあるけど、これはオプションと呼ばれるものだよ。-vなら『vオプション』や『versionオプション』なんて呼ばれるね。

　大体どのコマンドにも、さまざまなオプションが用意されているんだ。オプションを指定してあげることで、コマンドの挙動を変えることができる。コマンドの使い方やオプションの一覧を教えてくれる『helpオプション』とかも、大抵のコマンドには用意されてたりするから、よかったら試してみてね。

VSCodeのインストール

　次はVSCodeだね。

　VSCodeは正式には、Visual Studio Codeといって、Microsoftが開発・提供しているソースコードエディターだよ。軽量かつ高機能、拡張機能も多彩とあって、今の最も人気のあるエディターのひとつだね。

　VSCodeの公式サイトのURLは、https://code.visualstudio.com/だよ。サイトを開くとトップページにダウンロードリンクがあるから、そこからVSCodeのインストーラーをダウンロードしちゃおう。

　ダウンロードが終わったら、あとはインストーラーを実行するだけで完了だよ。

　インストール完了後、VSCodeを起動するには次のようにコマンドを打てばいいからね。

# カレントディレクトリーをVSCodeで開きたいなら

code .

# hogeディレクトリーをVSCodeで開きたいなら

code hoge

VSCode拡張機能のインストール

　VSCodeをインストールできたら、どのディレクトリーでもいいから、とりあえずVSCodeを起動をしてくれる？

　起動できたら、次の6つの拡張機能を入れるよ。

　１．Vue3のコード補完を効かせるための拡張機能『Volar』

　２．Tailwind CSSのコード補完を効かせるための拡張機能『Tailwind CSS IntelliSense』

　３．JavaScriptやTypeScriptのコードの静的検証を行う拡張機能『ESLint』

　４．コード整形を行う拡張機能『Prettier』

　５．VSCodeの組み込みTypeScriptのバージョンを最新にする拡張機能『JavaScript and TypeScript Nightly』

　６．VSCodeを日本語化する拡張機能『Japanese Language Pack for VS Code』

　VSCodeで拡張機能をインストールするためには、サイドバーから拡張機能メニューを開く必要があるよ。

　ブロックが複数個並んでいるアイコンをクリックすると、拡張機能メニューが開いて検索フォームからツールを検索できるよ。今回インストールする５つの拡張機能の名前を入力して、ひとつずつインストールしていこうか。

　ちなみにそれぞれの拡張機能には、拡張機能の名前とは別に『拡張機能ID』が割り振られていて、名前の代わりにIDでの検索もできるよ。インストールする5つの拡張機能のIDを列挙すると、こんな感じだね。

　１．『Volar』の拡張機能ID：Vue.volar

　２．『Tailwind CSS IntelliSense』の拡張機能ID：bradlc.vscode-tailwindcss

　３．『ESLint』の拡張機能ID：dbaeumer.vscode-eslint

　４．『Prettier』の拡張機能ID：esbenp.prettier-vscode

　５．『JavaScript and TypeScript Nightly』の拡張機能ID：ms-vscode.vscode-typescript-next

　６．『Japanese Language Pack for VS Code』の拡張機能ID：MS-CEINTL.vscode-language-pack-ja

　これ全部インストールしたら、次にいこうか。

AWS CLIのインストール

　ここまでできたら、残すところはAWSに関連するコマンドラインツールのみだね。まずはAWSそのもののコマンドラインツール『AWS CLI』をインストールするよ。

　AWS CLIは、AWS公式ドキュメント内の次のURLでインストール方法が解説されているよ。

　https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/getting-started-install.html

　インストール方法にはいくつかあって、GUIでポチポチしながらインストールできるインストーラーも用意されているよ。もちろん、ターミナルからコマンドでインストールするための方法も用意されてる。いずれの方法であっても、とりあえずインストールできさえすればいいから、好きな方法でインストールしてね。

　インストールしたら、次のコマンドでAWS CLIのバージョンを確認できるよ。

aws --version

CDK CLIのインストール

　最後にAWS CDKのコマンドラインツール『CDK CLI』をインストールするよ。

　まだ後輩ちゃんには、AWS CDKがどういった存在なのか説明していなかったね。あとで詳しく説明するけど、今のうちに簡単な説明をしておくね。

　AWS CDKは、正式にはAWS Cloud Development Kitといって、TypeScript製のAWS用IaCツールだよ。IaCツールっていうのはInfrastructure as Codeの略で、システムのインフラをコードで定義するツールのことなんだ。

　だから簡潔にまとめるなら『AWS CDKは、AWSのインフラをコードで定義できるツール』ってところだね。さっき導入してもらったNode.jsのパッケージマネージャー『npm』を使えば、コマンドひとつでインストールできるよ。

　具体的には、次のコマンドでAWS CDKをグローバルインストールできる。

npm install -g aws-cdk

　実行が完了したら、CDK CLIのインストールは完了だよ。

　次のコマンドで、インストールしたCDK CLIのバージョンを確認できるからね。

cdk --version

　これで一通りの環境構築はおしまい！後輩ちゃん、お疲れさまだね。

　次は、ポートフォリオ制作に必要な知識の詰め込みをするよ。