未経験からWebエンジニアへ！ポートフォリオ作成までの道！第１弾
皆様おまたせしました！
こんにちは！
巷でTwitterのプロフィールアイコンが白馬だったり、ヤギに間違われてしまうhagiです😄（実際は犬ですよ！）
１１月初めに書きますって言っていた「ポートフォリオ作成の道」の投稿が１２月初旬に投稿となってしまいました💦
私自身が色々動いており、遅い投稿になってしまったこと申し訳ありません…
こちらの状況もあって、この「ポートフォリオ作成の道」は３部構成で書いていこうと考えております。その点をご了承ください。m(_ _)m
では、早速ですが書き出していこうと思います！
※専門用語など多用します。
ポートフォリオ作成の道
まず私がプログラミングに興味を持ったこと等をざっくり説明します。
友人の影響、私自身が自作PCを作っていたこと、単純にWebサイト自体に興味を持ったことが主なキッカケで、そこからWebアプリケーション（Twitterの様なSNSアプリ）を作ってみたい！😆と思いWebエンジニアを目指す様になりました！
とはいったもののWebアプリケーションを作るには、何を学べば良いか、この時点では私は分かっていませんでした。なので速攻でプログラミングスクールに入り、Webアプリケーションを作るための最短ルートを示してもらい動きました！✨
ちなみに私が入っているプログラミングスクールは「侍エンジニア塾」です。人気講師の方に当たったので、授業の内容も分かりやすくかつ、私にあった教材をすすめてくれました。
塾を利用した点については２つあり、１つ目は「私が作りたいものを最短で作れるよう効率よく知りたかった」のと、２つ目は「万が一躓いた時のための防衛線」が欲しかった為、入塾しました。おかげでスムーズにWebエンジニアになることが出来ました！
続いて、本編です！
フロントエンド編✨
はい！言わずもがなのフロントエンド編です！
フロントエンドの基礎がわかっていないと、綺麗なレイアウトのサイトや動的なサイトを作ることが出来ません！
フロントエンドというとHTML/CSS/javaScriptの３つを使用します！
フロントエンドというのは、ブラウザ（Chrome、Safari、etc...）でウェブサイトを見たり、操作したりと、ユーザーが直接的に触れる部分をフロントエンドといいます。
フロントエンドに対してバックエンドという部分があります。バックエンドは、ユーザーからは見えない、裏で動いているシステム部を指します。（ここでは、バックエンドで使用するプログラミング言語やフレームワークの説明は省略します。）
どのようにフロントエンドを学んだか？
私がフロントエンドを学ぶために使った教材は主に「ドットインストール」のみです。
でも、今の駆け出しエンジニアのTwitterを見ていると８割強の方が「Progateやっています！」と言っている気がします。
私もProgateで学ぶのはいいとは思います。ですがProgateの場合は「手元に（自分のPC内に）サンプルコード（レッスン内で書いたコード）が残らない」ので、サンプルコードで遊べない、またコードの内容をコメントアウトとして残しておけないので後で確認ができない…等があります。
ドットインストールだと３分の動画を見て、分かったら次に進むといったレッスンですが、私の場合は「動画を見つつ、エディタ（Atom、VScode等）でコードを写経する」ということをしました。こうすることによって実際に手を動かしてコードを書くので自然とコードが書けるようになってきますし、要素の意味も徐々に分かってくる。この時点では完全に理解しなくていいけどレッスン中は８割位分かっておいたほうが良い。
ドットインストールで書き終わったコードは自分でいじって遊びましょう！
オンラインレッスン（ドットインストール、Progate等）だけを勉強と思ってしまってはだめですよ、遊び心を持ってください😆✨写経したコードはただ、写経しただけでなくHTMLの<p>タグを<a href="">リンクにしてみたりCSSならmarginを10 -> 50にしてみたり、font-familyを追加しながら実際に動かしながら遊ぶ事で、そのタグについての理解がかなり深まります。
HTML/CSS
私の場合は、ドットインストールで簡単な自己紹介サイトを写経（HTML/CSS）し、レスポンシブデザインのサイト（PC、タブレット、スマホに対応したサイト作り）を作りました。この時点でわからない事（タグ等）が出てきたら
上記のサイトで調べましょう！HTML/CSS/JavaScript等の要素の説明がとても細かく記載されています！（私もいつもお世話になってます。）
ここまでで、完璧に覚えようとしなくて大丈夫です！私もわからない時は即調べて、対応しています😃初めのうちは「ふーん、こんなものか」程度の認識で大丈夫です！ここまでで3週間くらいでした（毎日2時間程度の勉強）
みんな大好きJavaScript
Webサイトに動的な動きをつけるためJavaScriptをドットインストールで学び基礎をざっとやる。if文だったりメソッド、関数etc...ちょっと難しいな？と感じたらProgateのJavaScriptを学ぶのも◎
それが出来たらドットインストールのレッスンでJavaScriptのモーダルウインドウ、スライドショーを作ってみる！✎✨
私がjavaScriptを学ぶ上で注意したことは、基礎を学ぶときもしくは処理を書く時に自分用にコメントを残すという事をしました。コメントを残しておくメリットとしては、そのコードを見たときにどのような処理をしているかを明確にするため。また、コメントを書いている際に自分がどの程度理解できているか理解度チェックにもなります。
お詫びと次回予告！
私のTwitterを見てくださっている皆様！いつも応援ありがとうございます！11月中にnoteを出す宣言していたのに、12月の5日になってしまい本当に申し訳ありません…😭
初めてのブログでしたので、私の文章作成能力がいかに乏しいか痛感させられた第1回目でした…これをキッカケにブログなどでの文章作成能力、説明力をつけていきます！✨✨
次回予告ですが、第一回目はフロントエンドの勉強内容を中心に書いていったので次回はプログラミング初学者の皆さんが苦戦するローカル環境の構築と、バックエンドの勉強法を書いていきます。バックエンドのプログラミング言語はRuby、フレームワークはRuby on Railsを使用します。
最後に！
プログラミング始めて５ヶ月になります、ここまで続けられたのは私がプログラミングを楽しんでいるからです！まだまだ分からないこと、知らないことたくさんありますがワクワクしています😄✨✨
書きたいことはたくさんありますが、これからも私の活動や就職後の事、どんどん発信していきますので、皆様応援の程宜しくお願いいたします！
この記事を読んでいただいた方で、ここをもっと知りたい！や、ここがわかりにくいという方はTwitterの方にDMを頂ければお答えいたします！
この記事が気に入ったらサポートをしてみませんか？