【結論】興味あるwebサイトを模写して作っちゃいましょう。
◆サイト模写とは → 参考サイトをイチから自作する or 近い内容のサイトを作ること。
完全一致のwebサイトを「これ俺が作ったんだぞ！」とデプロイ(公開)すると大問題ですが、勉強の為に模写(パクる)ことは問題ありませんので、先輩方のサイトを見てどんどん手を動かして行きます。
本記事では、以下の内容を解説します。
本記事の内容
・最初はProgate(プロゲート)をやってみる。
・Progateでコードを書く感覚が掴めたら、次は環境構築してサイト模写をする。
・最初は時間がかかっても気にしない！！
※Udemy(動画を見てプログラミングを学ぶ学習サイトです。)も良いと思います。
Progate(学習サイト)で学び、動画で理解を深めるステップが独学には最適です。
僕と同じように「独学」したい人は参考にしてみて下さい。
この記事を読むと分かること
1.プログラミングの練習は実際に手を動かしてなんぼです。
2.環境構築がやたらと難しい。そんな時はMAMP。
3.コツコツとできることを積み重ねるのが大事。焦らない。
もくじ
プログラミングは非常に楽しい
プログラミングって聞くと「頭の良い人しか触れない」イメージしがちですが、やってみると面白いし意外とハマります。
自分で学んだことがすぐに活かせるし、何よりできることが増えるのが最高です。しかもお金がもらえる……！！
エンジニアにならなくても良いと思いますが、プログラミングができるとその人の市場価値はぐんと上がります。
では、プログラミングを学ぶためには具体的にどんなことをすれば良いのでしょうか。
最初はHTML＆cssがおすすめ
まず、Progate(プロゲート)をやってみると良いです。
プログラミングを学ぶ方法はいくつかあります。
| 独学 | 全て自身で学ぶ為時間がかかります。反面、計画的に実行できればお金も節約でき、また自分のタイミングで学習することが可能です。 |
|---|---|
| スクール | 多額のお金が必要ですが、短期間で集中的に学習することが可能です。 |
| メンター | 自分だけの先生を見つけてマンツーマンで教えてもらえます。スクール程コストはかかりませんが、一時間数千円という感じでお金が必要になります。場合に寄ってはスクールよりも短期集中で一気にレベルアップ可能かもしれません。 |
| 実務 | 実務を通じて、働きながら学習と給料の二つを手に入れられます。効率という面で考えると最も手に入れたい環境です。 |
初学者の場合、何から手を付けて良いのか検討もつかないと思います。なので実際に僕がプログラミングを学び始めた時に行なっていた(今もやってる)ことを共有します。
最初はプログラミングってどういうことなのかをProgateで学びます。
次は気になるwebサイトをそっくりそのまま自作する(サイト模写)ができると素敵です。
サイト模写ができるレベルであればフロントエンジニアとしては十分だと思います。
時間はかかっても良いのでサイト模写までできるようになりましょう。(独学でサイト模写ができるようになるまで大体3ヶ月程度学習が必要です。)
最初の取っ掛かりとして動画で学ぶタイプの学習サイト、Udemyもおすすめです。最近は動画学習サービスが多く普及しています。
技術書や動画など、自分に合った学習方法を模索して何が自分にとって最適なのか探すのも初学者の仕事かもしれません。
言語の選択については最初は本や動画を参考に、最初はHTML&cssから手を付けて徐々に興味がある言語に着手していけば良いと思います。あえて例を挙げるとしたらPHPやRuby、JavaScriptなどが実務で需要が高いです。
何故、最初はHTML&cssなのか？と言うと、全ての骨組みにあたる部分だからです。
webプログラミング学習を進めていくと分かると思いますが、webサイトは基本HTMLとcssに、その多言語を上乗せして作成していきます。
最初はとにかくHTMLとcssを学んでマークアップのやり方を学んでください。
Progateでは、PCを使ってWebでコードを書いたり、アプリでスマホからプログラミングをパズルゲーム感覚で勉強ができます。
◆ProgateをPCでやってみる！
◆Progateをスマホでやってみる！
特に初心者はProgateが良いかな？と思っていて、RPG感覚でレベルを上げながら様々な言語を学ぶことができます。
「PCかスマホどっちがおすすめ？」と言われると、コードを書くPC版の方がおすすめです。
スマホでもプログラミングについて学ぶことができますが、実際に手でタイピングした方が記憶に残りやすいです。
運動性記憶に働きかけ、少しでも効率良く吸収したい場合はPC版をおすすめします。
「プログラミングをやってみたい！」と興味が出てきた人にはうってつけの学習環境だと思います。
ある程度プログラミングがどういったものか分かったら次のステップに進みます。
サイト模写までの道筋
スクールに入ろうかと悩まれている方も、とにかく先ずは手を動かしてみましょう。
やることは実にシンプルで、サイト模写を行いソースコードを実際に書いてみるということです。
エディターをインストールする
ソースコードを書くにはエディターと呼ばれる専用のツールが必要になります。Sublime Textが動作が軽くて使いやすいのでおすすめです。
今まであまりパソコンを触ったことがないという人にとっては、Sublime Textをインストールすることも難関だと思います。ちょっと難しいですが、ツールを使うことはよくあることなので、焦らず一つ一つ問題解決していきます。
問題解決については、あの手この手でGoogleの検索から探してみてください。
問題解決するためにググることも勉強であり、エンジニアにとっては重要なノウハウです。
インストール方法は、こちらの記事に詳しいやり方が書かれているので参考にしてください。
例えば、「SublimeText 使い方」とか検索してみます。
Sublime Textが無事にインストール・セットアップできたら、模写するサイトを探します。
ソースコードを見る
いろんなWebサイトを見て「このサイトかっこいいな！」というサイトが見つかったら、全く同じものを作ってみます。
Google Chromeで模写したいサイトを開いて、「Ctrl+U」(Mac)を実行してソースコードを見ます。
Macなら「option + command + U」
Windowsなら、「Ctrl+U」
※右クリックから「検証」としても同じです。
試しにどこでも良いので、どこかのwebページをGoogle Chromeで見てみましょう。
そこから、先ほどの方法でソースコードを見てみます。
Macなら「option + command + U」
Windowsなら、「Ctrl+U」
こういうやつですね。
これでwebページがどんなコードで書かれているのか確認できます。これはGoogleが提供してくれているデベロッパーツールと呼ばれる機能です。
プログラミングを初めて学ぶ方にとって、いきなりソースコードを見ると目が回るかもしれません。
やっていくうちにどんどん慣れるし楽しくなるので我慢しましょう。
実際にサイト模写を行う場合には、PCの画面を二分割(左右別々のページを開く)しながら、どちらかに模写したいページのコードを表示して、もう一方のページにエディターを表示するとやりやすくなります。
ただ、一点注意点がありまして、エディターにコードを書くだけでは書いたコードがどう機能しているのか確認できません。
何故ならコードをブラウザで表示する工程が必要です。
学習する際にエディターに書いたコードをブラウザに表示させる一連の動作を環境構築と呼ぶのですが、いきなり環境構築は多分できません。(めっちゃ難しいので。)
今は学習の将来的なステップとしてスルーしてください。
ある程度できるようになったら、Progateで出てきた問題やレッスンで作成したコードをパクってエディターに書いてブラウザに表示させてみます。
そこから自分で肉付けをするイメージでオリジナルサイトを作成していけば、あっと言う間にポートフォリオが一つ出来上がります。
実際に書いてみるとこんな感じ。
環境構築について
エンジニアになろうと思い立って行動する人がぶち当たる最初の壁が環境構築です。
コードを書く為に必要な条件なのですが、僕も最初マジでできなくて困りました。
実はこういったコードを書くこと以外の作業が、エンジニアにとっては重要だったりします。
学習サイトでただ闇雲に言語を学んでもサービスを作ることはできません。自身のサービスや学習環境を作るには、その他サーバーやインフラの知識も必要になります。
コードを書くことと、環境構築はワンセットなので覚えておいてください。
環境構築の詳しいやり方については、以下の記事で解説していますので「よっしゃ！サイト模写してみるか！」という方は参考にしてみて下さい。
人間性の高い技術者になろう
IT業界は人手不足だと言われています。
正直ピンと来ないと思いますが、実際に業界に入ってみて分かりました。
人間力(人格とか人柄。そんでもって技術)を兼ね備えたエンジニアって意外といないんですよね。
凄いエンジニアにありがちなのが「技術さえ持っていれば俺が正義」という技術至高型の俺様エンジニアが結構存在しています。
確かにプログラミングができるようになれば、誇らしくて自慢したくなる気持ちは分かります。
自身のレベルアップの証として、いろんな企業からスカウトが来たり、転職にも非常に有利になったりします。
ただそういう凄い人に共通する問題として、自分よりできない人に対して高圧的なことが多いです。
エンジニア界隈には、何故かマウント(高圧的)を取ってくる技術者が実に多いこと多いこと……
どんなに凄いことができても、誰かをこき下ろしたり見下したりする人間性に問題がある人にならないで下さい。
優しさと探究心、技術力をもったエンジニアになってくださいね。
個人的な意見ですが、僕はかなりマウントを取られます……。結構嫌な思いもしてきました。
高圧的な人に頼りたいなんて思いませんもんね。
未経験からエンジニアに転職を考えている人は、人間力を養うことも忘れないようにしてください。
面談の際にも人間性って出ちゃいますからね。
素晴らしいポートフォリオと、温かな人格があれば大体どこでも受け入れてもらえるはずです。
せっかく転職に有利な技術を持っていても人間的に問題ありと評価されては残念です。
ポジティブに素敵な技術者を目指したいものです。
プログラミングのメリットが凄い
プログラミングができると、手に職をつけられます。
しかもパソコン一台とネット環境があれば割とどこでも仕事ができちゃいます。
またwebサイト制作などは独立し易いとも言われています。理由は設備投資(事業を行う際にかかる費用が少ない)が安く済むからです。
プログラミングができると、Webサービスとして通販サイトや企業のホームページを作ってお金がもらえます。
しかも特別な資格が必要なく、誰でも参入し易いというハードルの低さも後押しして挑戦する人が多い傾向にあります。
普通何かビジネスをやろうと思ったら、医者なら国家資格、美容師も国家資格、弁護士も国家資格…普通資格がないとそもそも始められません。
また店舗が必要だったりと、ビジネスを始めるハードルは高いことが普通でした。
IT系であれば、パソコンとネット環境、そしてやる気さえあればどこでも起業できちゃいます。正に”今”が旬な職業と言えるでしょう。
もし今、「夢や希望はないけれど、何か自分の武器が欲しい」そう思っている人はプログラミングを始めて見るといいと思います。
嫌だったら辞めればいいだけですから、特に損失は発生しません。
あとリアルなことを言うとリモートワークができるよになるまで、大体3年くらい実務経験が必要になります。
ここまで「プログラミングはすげー！」と言っておきながら申し訳ないのですが事実です。
優秀な人はいきなりリモート案件を受注したりしますが、それは優秀だからであって誰でもできる訳ではありません。
しかしながら、優秀な人も最初は何もできない状態からスタートしています。
プログラミングを学んでリモートしたいのであればコツコツ学習するしか選択肢はありません。
逆に言えば3年くらいみっちり学習を進めればリモートできちゃうんです。
だったらやらない訳にはいきませんよね。
将来への投資だと割り切って、最初はとにかく技術書や学習サービスを買いましょう。
コツコツ学習すれば自分でお金が稼げます
プログラミングの良いところは、いろんな可能性があることです。
通勤するのが嫌な人は自宅でプログラミングで稼いだり、会社という組織に縛られたくない人もプログラミングやwbサービスを作ってしまえば良い訳ですし。
プログラミングは自宅で独学でき、かつ誰でも挑戦可能なことなのでおすすめです。
１年くらい続けていくと今まで選べなかった仕事を選べるようになるので、選択肢が増えます。ライフスタイルも充実します。
ちょっとの努力で３年後をミラクルハッピーに変えてやりましょう。
その為には毎日勉強するしかありません。
もし独学で学習を進める中で、ググってみても解決しない場合には動画で見ると理解できるケースが多いです。
本やアプリを見て実際に手を動かしていると、急に詰むこともあります。
そんな時はYouTubeでも良いですしUdemyなら更に質の高いレッスン動画を見て学習することが可能です。
参考までにUdemyで自分の学習したいコースを選んで見てくださ。
月額課金ではなく、買い切りなので一回買ってしまえばいつでも自分の好きなタイミングで学習することができます。一つの動画が5分以内にまとまっていて、一回の購入で大体50個程レッスンが入っています。
通常一個のレッスンが約2〜3万円します。(スクールに比べたら破格)高いと感じるのも事実です。
ただ、大体セールを行なっていて1レッスン¥2〜3,000くらいなので、これから独学する人は試しに一つ二つ買ってみるといいです。
僕は毎朝通勤電車でUdemyを見て、移動時間すら無駄にしていません。最高におすすめなので気になった方は是非チェックしてみてください。
まとめ
記事のポイントをまとめます。
・Progate(プロゲート)をやってみる。
・プログラミングの概要が分かったら自分で環境構築してサイト模写をやってみる。
・やってみて「楽しい」と感じるなら適正あり！
プログラミングのスクールに入った方が効率が良いという意見も存在しますし、独学の場合曲解(誤った理解)が発生する場合もあります。
なので最初からお金を支払って正しい知識を効果的に吸収した方が良いという意見にも賛成です。
ただ、内容が全く見えない段階でお金を払ってしまっって後悔するのであれば、ある程度調べる環境が整っている現代なら、まず自分でやってみることが重要だと思います。
高額なお金を支払って「やっぱやめた……」では勿体ない。
プログラミングスクールは平均すると50万くらい費用がかかります。それを個人で完結できたらめちゃくちゃかっこ良くないですか？(賛否両論あるので反論は認めます。)
最初は手を動かさないと始まらないので、動きながら試行錯誤してみたいと思います。やったらやっただけ何か見えるんじゃないかな？と思います。
世の中にはいろいろなノウハウが存在し、どれを選ぶかによって花が咲くまでの時間が変わってきます。しかしながら、どんな良い情報を拾っても、結局どれだけ手を動かし考えたかによると僕は思います。
と言う訳で、プログラミング学習を個人で始める取っ掛かりを共有しました。
サイト模写ができるようになれば自信を持って転職活動ができます。
また、環境構築については経験上一番簡単なMAMPがおすすめです！
ある程度学習サイトで学んだ方は環境構築してみましょう。
