[超初心者向け]自作のアプリを公開する方法①[環境構築編]

こんにちは!フリーランスエンジニアのCOMです。

 

エンジニア、デザイナーになりたい人が一番に始めるのは転職。

 

その時に必要なのが自分の技術の証明になるポートフォリオです。

 

これがあれば、未経験や業界経験が浅くても企業によっては採用してくれるところがたくさんあります。

 

ではそのポートフォリオはどうやって作るのか?

 

作ったあとどうやって公開(URLをクリックすれば、誰でも見れるようになること)することができるのか?をちょっと前までなにもわからなかったぼくが、超初心者目線で解説します!

 

専門用語をできるだけ減らし、どうしても使わないといけないところには説明を入れてます。

 

説明をかなり多く入れるため、長い文章になる可能性があります。ご了承ください。

 

では、始めましょう!!

 

環境
パソコン:Mac
テキストエディタ:VScode

注意

この記事はHTMLのファイル1つを公開することが目的です。CSSやJavaScriptやRubyのことは書いていません。

作業自体はWindowsでもできますが、ぼくの使用パソコンがMacなので、Mac向けに書いています。ご了承ください。

今回やること

  • パソコンにテキストエディタをダウンロードする
  • エディタの設定を日本語にする
  • ローカル環境(自分のパソコン内)に作業スペースを用意する
  • 作ったスペースに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です。

 

駆け出しエンジニアが学ぶべきUdemyの学習動画【実践あるのみ】

7月 25, 2018

 

次は今回作ったファイルをGit Hubにあげます。

 

次はこちらの記事をどうぞ!

 

(作成中)

 

今回も最後まで読んでくれて、ありがとうございました!

 

では、また!