【結論】興味あるwebサイトを模写して作ってみる。
◆サイト模写とは → 参考サイトをイチから自作する or 近い内容のサイトを作ること。
完全一致のwebサイトを「これ俺が作ったんだぞ！」とデプロイ(公開)すると大問題ですが、勉強の為に模写(パクる)ことは問題ありませんので、先輩方のサイトを見てローカル開発環境でどんどん手を動かす。
本記事では、以下の内容を解説します。
本記事の内容
・最初はProgate(プロゲート)をやってみる。
・Progateでコードを書く感覚が掴めたら、次は環境構築してサイト模写をする。
・最初は時間がかかっても気にしない。
※Udemy(動画を見てプログラミングを学ぶ学習サイトです。)も良いと思います。
Progate(学習サイト)で学び、動画で理解を深めるステップが独学には最適です。
「独学」したい人は参考にしてみて下さい。
この記事を読むと分かること
1.プログラミングの練習は実際に手を動かしてなんぼ。
2.環境構築がやたらと難しい。そんな時はMAMP。
3.コツコツとできることを積み重ねるのが大事。焦らない。
もくじ
プログラミングは楽しい
プログラミングって聞くと「頭の良い人しか触れない」イメージしがちですが、やってみると面白いし意外とハマります。
自分で学んだことがすぐに活かせるし、何よりできることが増えるのが最高です。しかもお金がもらえる……かも。
エンジニアにならなくても良いと思いますが、プログラミングができると「◯◯さんて、パソコンに詳しいんですね。」ってなります。
では、プログラミングを学ぶためには具体的にどんなことをすれば良いか？
最初はHTML＆CSSがおすすめ
最初はいきなりwebサイト全体を作ろうとすると挫折するかもしれません。
ボタンとかスライドとか、見ていて興味があるパーツ単体を作ってみてはどうでしょうか。
その為には先ず、Progate(プロゲート)をやってみると良いです。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をインストールすることも大変ですがやってみてください。今後もツールを使うことはよくあることなので、いろんなソフトのインストールには慣れましょう。
インストール方法は、こちらの記事に詳しいやり方が書かれているので参考にしてください。
例えば、「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が提供してくれているデベロッパーツールと呼ばれる機能です。
ソースの見方が分かったら、「もう無理。さっぱりわかんねー！」って時にソースを参考にさせてもらいます。
あまり一つの箇所で詰まっていては時間が勿体無いですもの。
分からんところはササッと答えを見て先に進みます。
ワンスクリーンだと、こんな感じで作業すると楽です。
何度もつまづいて、答えを見て、「ああーっ！こんなことだったんかー！」という経験を積み重ねていくうちに、気付いたらできるようになっています。
因みに、HTMLとCSSだけでwebサイトを作成することをマークアップとかって言ったりします。
現場ではマークアップの際に、想像以上に速さ・品質を求められます。目安として以下のHPだったら、2日(1日8h作業したとして)合計16時間で完成できるといいですね。
PC、SP(レスポンシブ込み)のサイト
上記サイトは、本を読んで学習できるので興味がある方はAmazonでポチッてください。本を見ながらある程度のHTMLとCSSが学べます。
スラスラわかるHTML&CSSのきほん 第2版 (日本語) 単行本
どのくらいデキるようになれば安心？
また技術力の話ですが、ある程度できる状態だと相当苦労すると思います。
自信が持てずいつまでも練習していることも問題ですが、マークアップが好きで得意で仕事にしたいというのであれば、速さ・品質を両立できるくらいサイトをガシガシ作った方が現場で仕事をした時楽だと思います。(実際に働いてボロクソ言われた僕個人の感想です。)
大体20サイトくらい種類・ジャンルの違うサイトが作れると自信が持てると思います。
カフェ、サロン(美容院)、EC、オークション、スーパー、肉屋、魚屋、飲食店、旅行代理店、温泉、焼肉屋、スポーツ用品店……などなど。
自身の身の回りのお金が関わるサービスであれば何でもwebサイトって作れます。
現場で色々言われたくないって人は、20サイトくらいデプロイして、それから就活しても遅くないと思っています。何故なら苦労は絶対するもので、その苦労をいつするか？の違いだからです。
僕みたいに怒られたり、「デキない」とか思われたくないタイプの人は是非20サイトくらい作ってみてください。
きっと、自信を持って面接に臨めるはずです。
人間性の高い技術者になろう
IT業界は人手不足だと言われています。
正直ピンと来ないと思いますが、実際に業界に入ってみて分かりました。
人間力(人格とか人柄。そんでもって技術)を兼ね備えたエンジニアって意外といないんですよね。
凄いエンジニアにありがちなのが「技術さえ持っていれば俺が正義」という技術至高型の俺様エンジニアが結構存在しています。
確かにプログラミングができるようになれば、誇らしくて自慢したくなる気持ちは分かります。
自身のレベルアップの証として、いろんな企業からスカウトが来たり、転職にも非常に有利になったりします。
ただそういう凄い人に共通する問題として、自分よりできない人に対して高圧的なことが多いです。
エンジニア界隈には、何故かマウント(高圧的)を取ってくる技術者が実に多いこと多いこと……
どんなに凄いことができても、誰かをこき下ろしたり見下したりする人間性に問題がある人にならないで下さい。
優しさと探究心、技術力をもったエンジニアになってくださいね。
個人的な意見ですが、僕はかなりマウントを取られます……。結構嫌な思いもしてきました。
高圧的な人に頼りたいなんて思いませんもんね。
未経験からエンジニアに転職を考えている人は、人間力を養うことも忘れないようにしてください。
面談の際にも人間性って出ちゃいますからね。
素晴らしいポートフォリオと、温かな人格があれば大体どこでも受け入れてもらえるはずです。
せっかく転職に有利な技術を持っていても人間的に問題ありと評価されては残念です。
ポジティブに素敵な技術者を目指したいものです。
プログラミングのメリットが凄い
プログラミングができると、手に職をつけられます。
しかもパソコン一台とネット環境があれば割とどこでも仕事ができちゃいます。
またwebサイト制作などは独立し易いとも言われています。理由は設備投資(事業を行う際にかかる費用が少ない)が安く済むからです。
プログラミングができると、Webサービスとして通販サイトや企業のホームページを作ってお金がもらえます。
しかも特別な資格が必要なく、誰でも参入し易いというハードルの低さも後押しして挑戦する人が多い傾向にあります。
普通何かビジネスをやろうと思ったら、医者なら国家資格、美容師も国家資格、弁護士も国家資格…普通資格がないとそもそも始められません。
また店舗が必要だったりと、ビジネスを始めるハードルは高いことが普通でした。
IT系であれば、パソコンとネット環境、そしてやる気さえあればどこでも起業できちゃいます。正に”今”が旬な職業と言えるでしょう。
もし今、「夢や希望はないけれど、何か自分の武器が欲しい」そう思っている人はプログラミングを始めて見るといいと思います。
嫌だったら辞めればいいだけですから、特に損失は発生しません。
あとリアルなことを言うとリモートワークができるよになるまで、大体3年くらい実務経験が必要になります。
ここまで「プログラミングはすげー！」と言っておきながら申し訳ないのですが事実です。
優秀な人はいきなりリモート案件を受注したりしますが、それは優秀だからであって誰でもできる訳ではありません。
しかしながら、優秀な人も最初は何もできない状態からスタートしています。
プログラミングを学んでリモートしたいのであればコツコツ学習するしか選択肢はありません。
逆に言えば3年くらいみっちり学習を進めればリモートできちゃうんです。
だったらやらない訳にはいきませんよね。
将来への投資だと割り切って、最初はとにかく技術書や学習サービスを買いましょう。
コツコツ学習すれば自分でお金が稼げます
プログラミングの良いところは、いろんな可能性があることです。
通勤するのが嫌な人は自宅でプログラミングで稼いだり、会社という組織に縛られたくない人もプログラミングやwbサービスを作ってしまえば良い訳ですし。
プログラミングは自宅で独学でき、かつ誰でも挑戦可能なことなのでおすすめです。
１年くらい続けていくと今まで選べなかった仕事を選べるようになるので、選択肢が増えます。ライフスタイルも充実します。
ちょっとの努力で３年後をミラクルハッピーに変えてやりましょう。
その為には毎日勉強するしかありません。
もし独学で学習を進める中で、ググってみても解決しない場合には動画で見ると理解できるケースが多いです。
本やアプリを見て実際に手を動かしていると、急に詰むこともあります。
そんな時はYouTubeでも良いですしUdemyなら更に質の高いレッスン動画を見て学習することが可能です。
参考までにUdemyで自分の学習したいコースを選んで見てくださ。
月額課金ではなく、買い切りなので一回買ってしまえばいつでも自分の好きなタイミングで学習することができます。一つの動画が5分以内にまとまっていて、一回の購入で大体50個程レッスンが入っています。
通常一個のレッスンが約2〜3万円します。(スクールに比べたら破格)高いと感じるのも事実です。
ただ、大体セールを行なっていて1レッスン¥2〜3,000くらいなので、これから独学する人は試しに一つ二つ買ってみるといいです。
僕は毎朝通勤電車でUdemyを見て、移動時間すら無駄にしていません。最高におすすめなので気になった方は是非チェックしてみてください。
まとめ
記事のポイントをまとめます。
・Progate(プロゲート)をやってみる。
・プログラミングの概要が分かったら自分で環境構築してサイト模写をやってみる。
・やってみて「楽しい」と感じるなら適正あり！
プログラミングのスクールに入った方が効率が良いという意見も存在しますし、独学の場合曲解(誤った理解)が発生する場合もあります。
なので最初からお金を支払って正しい知識を効果的に吸収した方が良いという意見にも賛成です。
ただ、内容が全く見えない段階でお金を払ってしまっって後悔するのであれば、ある程度調べる環境が整っている現代なら、まず自分でやってみることが重要だと思います。
高額なお金を支払って「やっぱやめた……」では勿体ない。
プログラミングスクールは平均すると50万くらい費用がかかります。それを個人で完結できたらめちゃくちゃかっこ良くないですか？(賛否両論あるので反論は認めます。)
最初は手を動かさないと始まらないので、動きながら試行錯誤してみたいと思います。やったらやっただけ何か見えるんじゃないかな？と思います。
世の中にはいろいろなノウハウが存在し、どれを選ぶかによって花が咲くまでの時間が変わってきます。しかしながら、どんな良い情報を拾っても、結局どれだけ手を動かし考えたかによると僕は思います。
と言う訳で、プログラミング学習を個人で始める取っ掛かりを共有しました。
サイト模写ができるようになれば自信を持って転職活動ができます。
また、環境構築については経験上一番簡単なMAMPがおすすめです！
ある程度学習サイトで学んだ方は環境構築してみましょう。
