こんにちは、フリーランスエンジニアのCOMです。僕の詳しいプロフィールはこちら。
エンジニアになりたい人・フリーランスに興味がある人に向けてLINEマガジンの配信を開始しました。
エンジニア、デザイナーになりたい人が一番に始めるのは転職。
その時に必要なのが自分の技術の証明になるポートフォリオです。
これがあれば、未経験や業界経験が浅くても企業によっては採用してくれるところがたくさんあります。
ではそのポートフォリオはどうやって作るのか？
作ったあとどうやって公開（URLをクリックすれば、誰でも見れるようになること）することができるのか？をちょっと前までなにもわからなかったぼくが、超初心者目線で解説します！
専門用語をできるだけ減らし、どうしても使わないといけないところには説明を入れてます。
説明をかなり多く入れるため、長い文章になる可能性があります。ご了承ください。
では、始めましょう！！
環境
パソコン：Mac
テキストエディタ：VScode
今回やること
- パソコンにテキストエディタをダウンロードする
- エディタの設定を日本語にする
- ローカル環境（自分のパソコン内）に作業スペースを用意する
- 作ったスペースにHTMLファイルを作成する
今は意味わからなくてもいいんで、とりあえず行きましょう。
パソコンの環境を設定する
テキストエディタをダウンロードする
パソコン上でソースコードを書く時に必要なものになります。
オススメはVScode（読み：ビジュアルスタジオコード）です。
ここからDLできます。
クリックすれば勝手にダウンロードが始まります。
ダウンロードが完了したら、エディタを起動させてください。
起動するとこんな画面になります↓↓
画面左の四角の部分をクリックします。
クリックすると、検索スペースがでるのでそこに「japan」と入力します。
そこで日本語用のパッケージが一番上に出てくるので、それをインストールします。
インストールの後、[command] + [shift] + [p]を押すと、検索窓が開くのでそこで「language」と入力し、「Configure Display Language」と言う言語変更用のファイルを選択します。
するとこんなファイルが開くので、「”en”」の部分を「”ja”」に変更します。
こうです。
そして、ファイルの内容を変更したら、ファイルの中身の変更し、[command] + [s]でセーブします。
セーブしないと変更が反映されません。忘れないようにしましょう。
そしたら一度VScodeを一度終了させ、再度起動させます。
これで、VScodeが日本語で使えるようになります。
HTMLファイルを作ってみる
次に、実際に公開するためのファイルを作ります。
今回は公開するというのが最終目標なので、内容は気にせずに行きましょう。
まずデスクトップに作業用フォルダを作りましょう。
本来は、自分で作業用スペースを作ったりしますが、慣れないうちはデスクトップでいいです。
名前ななんでもOKですが、今回は「test_file」にします。
これからこの中に実際に公開するためのHTMLファイルを作成します。
このファイルにソースコードを書いていきます。
この記事ではHTMLの構造には触れないので、まったくわからない人は以下のコードをコピーして、先ほど作ったファイルに貼り付けてください。
<!DOCTYPE html><html lang="ja"> <head> <title>タイトルはここ</title> </head> <body> <h2>働きたくない</h2> <p>楽して生きたい</p> </body></html>
こうですね。
なんとも意識の低い言葉たち・・・。笑
「タイトルはここ」「働きたくない」「楽していきたい」の部分は自分の好きな言葉に変更可能です。
普通に「Hello World」なんか打ってもつまらないので、自分の好きなキャラクターのセリフなどテンションの上がるコトバにしましょう。
かけたら保存します。
ファイルを開いてみましょう。
こんな画面になるはずです。
これで、とりあえず公開する用のファイルの作成ができました！
もし、今後Udemyなどを使って勉強するときは、このようにファイルを作ってそこに書いて行けばOKです。
次は今回作ったファイルをGit Hubにあげます。
今回も最後まで読んでくれて、ありがとうございました！
では、また！
