【初心者向け】未経験からプログラミングを効率的に学ぶ方法

自分自身がフロントエンドエンジニアになって半年経ちました。

神エンジニアにはまだまだ程遠いですが、フルスクラッチ(0から製作)でサイト1本作るぐらいであれば難なくこなせるようになり、バックエンドも若干回りくどいコードになるものの、モノはかなり作れるようになりました。

そんな中、エンジニアになりたいと言う友人から「どうやったらプログラミング未経験、もしくはプログラミング初心者の状態から効率的にプログラミングを学べば良いのか」と言う質問を結構受けるようになったので、自分が実践してよかったなと思う方法や参考にした書籍、ツールを一気にご紹介します。

この記事では、WebサイトWebサービスを作れる様になりたいというエンジニア未経験者・初心者向けのものです。ゴリゴリのアプリ開発や、PythonでAI系のアルゴリズムを組める様になりたいという方はちょっと領域が違うので、ご注意ください。

プログラミングを学ぶに当たっての心構え

この記事をお読みになっている皆さんはプログラミングの必要性をひしと感じているものの、どこからどの様に手をつけていいのかわからない!という方が多いのかなと思います。

ここだけの話、私自身プログラミングを学ぶ前は本当に未知なことばかりで、習得できる自信は全くなく、何から手をつけていいのかわからない状態でした。

しかし、今ではコードに対しての苦手意識は全くなく、むしろもっと学びたい!という意欲の方が強いくらいです。

プログラミング学習成功で最も重要なカギはご存知の通り「継続」ですが、その継続のためには心構えが必須です。

その心構えとは「わからないことを学んでいるから、最初はわからないのはしょうがない」という割り切りです。

なんだそんなこと当然じゃん。と思うのですが、多くの初心者の方はこれができないためにプログラミングに心が折れて辞めていきます。(私も大学時代に1回心が折れてます)

最初から全てを理解するのは不可能なので、そういうもんだと文法だけ覚えてとりあえず次に進もう。そのぐらいのテンションでこなしていくのがキーなのかなと思います。

中高時代、英語の学習も、数学の公式もまずは暗記から始まります。いきなりその成り立ちや意味合いを理解するのは無理だと偉い人がわかった上で、カリキュラムを組んでいるからです。

プログラミングもまずは見よう見まねで暗記から。いきなり全てを理解せずともあとでだんだん開発者の思想や言語の成り立ちがわかり始めてきます。

プログラミング学習のオススメの書籍・ツール

巷にはプログラミング学習の教材がたくさん溢れていますが、個人的には次の書籍・ツールだけで十分かなと思っています。

オススメの書籍

お世話になっているWEB制作会社さんの推し教育書にもなっているので、かなり使える書籍たちです。

まずはこの1冊スラスラわかるHTML&CSSのきほん。WEBサイト制作の基礎中の基礎をがっつり理解するならこの1冊で十分です。

この本を1周回せば、HTMLやCSSの基礎概念はほぼ学ぶことが可能です。

基礎を抑えた後は、最新のコーディングの仕方やレイアウトの基礎を学ぶために、HTML5/CSS3モダンコーディングをオススメします。

最新のおしゃれなサイトのスタンダードなレイアウト、ちょっとしたCSSの小技とかを学べるのでちょっと応用編の書籍です。

正直なところ、上記2冊でサイトの形作りの基礎・応用は十分です。その次のレベルはオンラインプログラミング学習サイトを活用しながら、実践で身につけていくのが早いです。

オンラインプログラミング学習サイト

オススメのプログラミング学習サイトはProgate(プロゲート)です。

Progate公式サイト

書籍ばっかりやっていると、途中で飽きてくるのでオンラインでコーディングしながらプログラミングを学べるのはとても楽しいです。

学習を進めていくとレベルアップしていくので、ゲーム感覚で実力がついていくのを感じられるので個人的にはこれが一番よかったと思っています。

いきなり課金するのは辞めましょう。まずはProgateを無料で試してみて、これなら続けられそうという感触を得てから課金しましょう。お金もったいないので。

とはいえ、Progateで学べることにも限界がありますので、次のステップに進みたい、ないしは専門的に学びたい技術が出てきたという場合にはUdemyでご自身の学習したい分野の解説動画を買い切るのが良いと思います。

私も5本くらい買いました。狙い目のものはランキング/評価が高いかつ価格が90%オフとかになっている動画です。できる限りお金は節約しましょう。

 

私が良いなと思ったプログラミング学習書籍やツールはこの辺りです。

まず何をして良いかわからないという方は、ここまでご紹介したものをちゃんと継続して学習すれば普通にエンジニアになれます。

プログラミングの苦手意識は吹き飛んでいくことでしょう。

くれぐれもプログラミング学習に当たって、「階段飛ばし」はしないようにしましょう。もうわかってるからここは読み飛ばそう、みたいなショートカットはあとあと実践編でボディーブローのように効いてきます。

謙虚に貪欲に学ぶ姿勢が大事だと思います。

では、実際にどのような感じで学習を進めて行けば良いのか。

段階別にご紹介していきます。

プログラミング学習 基礎編

まずは基礎をしっかりと固めていきます。

▼基礎編のおすすめ教材

インターネットの基礎知識をインプット

国民のための情報セキュリティサイトという国の神サイトがあるので、ここを一通りサラッと読めば事前知識はOKです。

インターネットとは?IPアドレスとは?そもそもホームページってどうやって表示されてるの?そういった基礎的な知識を知っておくことで、後々プログラミングを学ぶ時にすごく楽になります。

プログラミングをするための環境構築

ここにプログラミング経験者と初心者の間では大きな差があると思っています。

プログラミングする時に経験者はすぐにAtomやサブライムテキスト、miといったツールを開いてサクッとコーディングしてターミナルやitermでsvnやgitでバージョン管理するのですが、それが初心者にとっては本当にちんぷんかんぷん。

違いがわからないし、何をどうして良いのかわからないんですよね笑

あと、ファイルの端子。.htmlとか.cssとか.pyとか全く馴染みがないので、どこに何を保存すれば良いのかわからないんです。

なので、冒頭に紹介した書籍にしたがって初めは進めましょう。全て見よう見まねで言われるがままにするのがコツです。

慣れるまでの辛抱です。慣れてくれば自然とツールの使い分けや作業のしやすい環境構築はできるようになります。

watashi ga syomei

HTML, CSSの理解、基礎文法の習得

HTMLはテキストやリンク、要素を規定する言語、CSSは装飾のための言語といったそれぞれの言語の役割と、基礎文法をまずは習得します。

ちなみにHTMLやCSSはプログラミング言語ではないです。

どちらかとマークアップ言語という分類なので、そこのところ注意しましょう。

プログラミング言語とは、何か数値を入れたらそれを出力したり、出力条件を変えたりみたいないわゆる「魔法のブラックボックス」を構成するための言語といった感じです。

私も初めはHTML,CSSで「プログラミング言語書けるんだぜ(ドヤア)」とかいうとんでもない過ちを犯してたので、ここははっきり認識しておきましょう、

あくまでフロントエンドエンジニアの入門ゲートに立ったという感覚に近いでしょうか。

補足:HTML書かなくてもJavaScriptだけで、ページを作成できたりもしますがまだまだHTMLベースでのコーディングが主流です。

プログラミング学習 応用編

プログラミング学習基礎編では、エンジニアの入り口に立っただけです。ここからが本格的なプログラミング学習になります。

▼応用編のおすすめ教材

Progate公式サイト

HTML/CSSで1つサイトをコーディング

応用編では実際に現場で使えるスキルを身につけていきます。

ですので、冒頭のProgate(プロゲート)を課金して道場などを利用して腕試ししましょう。道場ではサイトを実際に1から作ります。

きっとまだまだ全然実践レベルでないことがわかると思うので、ここらで自分の学習の穴や苦手ポイントを発見して潰しておきましょう。

わからないことは恥ずかしいことではないです。むしろ、わからないことをそのままに中途半端なまま案件を受けて、クライアントに怒られたり信用を失ったりする方が何百倍も恥ずかしいですし、辛いです。

この段階ではどんどんわからないことはわからないと割り切り学習を進める忍耐力が必要です。

この辺りからBEMやフロックスといったCSSクラス命名ルールに迷走を始める時期なので、体系的にまとまった神書物をご紹介しておきます。

コードの美しさ=信用UP なので是非。

WEBサイトのデザインを学ぶ

HTML, CSSでデザインをコーディングできるようになったので、次にWEBサイトデザインのパターンインプットをしましょう。

とはいえ、デザイナーを目指すわけではないと思うので、デザインの基本パターンにたくさん触れて「こうコーディングしたら良いな」とか「こういう時はこういう色合いでボタン色つけよう」といった具合に、「良いデザインの型」を学んでおくと制作の時に非常に楽です。

自分でWEBサービスを作ろうと思う人であればなおさらこの辺の感覚を序盤に身につけておくと、後々でデザインについてがっつり時間を取らずとも良いデザイン感覚を持ってコーディングできます。

おすすめ書籍は以下の本です。WEB制作に携わる者としては是非とも読んでおきたい必携の書物です。

JavaScript, JQueryを学ぶ

HTML, CSSがある程度使えるようになれば、その要素を動かしたり、機能を追加したり色々と便利なJavaScriptを学びましょう。

ここでようやくプログラミング言語と「Hello, World!」ができます。

これもProgateで学べます。とはいえ、JavaScriptのカバー範囲はとてつもなく膨大なので、この応用編では以下ぐらいのスキルを身につけるぐらいで十分かなと思っています。

  • アコーディオンボタン(ボタンを押すとぱかっと開いたり閉じたりするエリア実装)
  • スライドショー(画像や要素をスライド表示させる実装)
  • モーダル表示(ボタン押すとふわっと浮き上がってくるやつの実装)
  • ハンバーガーボタン (スマホの右上の押したらメニュー等が出るやつの実装)
  • 一定スクロールで要素表示、非表示の実装(一種の空くスクロールポップアップ的なやつ)

例にも漏れず初学の際はJavaScriptの概念とかそういうところは後からわかれば良いので、どうやったら上記で示したような実装ができるのかその型を暗記しましょう。

HTMLやCSSとは若干毛色が異なるので取っ付きにくいですが、突き進んで行くとだんだんわかってきます。

JavaScriptは奥が深すぎるので深入りはこのレベルではまだまだ禁物です。

PHP, WordPressを学ぶ

JavaScriptの型をある程度学んだ後は、PHPとWordPressに手を出してみましょう。

PHPではコンタクトフォームを(DB構築も合わせて学ぶことになる)、WordPressは動的な更新が必要なサイトを作る際には一部をカスタマイズして入れるようになれば、表現の幅もフリーランスであれば単価レンジもアップします。

WordPressとはCMS(コンテンツマネジメントシステム)の一種で、ブロガーやアフィリエイターたちの多くはこれを使ってサイトを作っています。

ちなみにこのなべわかしのブログも「WordPress」で動いています。プログラミングができない人でも一瞬でサイトを構築できるので、人気の高いCMSとなっています。

WordPressを深く学ぶには以下の書籍がわかりやすくておすすめです。

ちなみに、WEBサイト作成の際にニュースやブログを設置するかと思いますが、その際はWordPressの一部を引っこ抜いてきて配置するという手法もあるので、学んでおいて損はないです。

WordPressの主要構成言語はPHPですが、WordPressのPHPと通常のPHPはほぼ別言語とも表現されます。

それぐらいWordPressには独自の記述方法があるので、個別に勉強する必要があるのです。

イラストレーター、フォトショップの操作を学ぶ

WEBに携わっていると、Adobeのイラストレーターやフォトショップで作られたデザインが送られて来ます。(.aiとか.psdとかの端子ファイル)

そのデザインの一部を切り取り加工してWEBの素材にする工程が発生するのでこれらツールを使いこなす必要があります。

頂いたデザインを切り取り加工する作業を「スライスする」「バラす」と表現するので知っておくと良いかと思います。

デザイナーさんのように1からデザインを作れるレベルにはならなくて良いですが、どこをどうすれば要素を切り出せるのか。

あるいは、デザイン要素をグルーピング化して出力できるのかなどの小技を知っておくだけで作業スピードは跳ね上がるので、是非インプットしておきましょう。

プログラミング学習 実践編

ここまで来れば、実際の案件を通じて自分のプログラミングスキルをフル活用してみましょう。

プログラミングの学習方法について説明して来ましたが、正直なところ案件を通じて得られる経験やスキルは勉強期間中の比ではありません。

いかにして最短で案件をこなすか、いかにして簡潔でどの環境でも崩れないコーディングができるか、いかにして動作を軽くするか。

そういったところまで気を配れるようになってこそ、ようやくアマチュアを脱出できます。

SEOやアクセス解析を学ぶ

WEBサイトは作って終わり、ではありません。

サイトはその後Googleの検索エンジンに登録され、運用されていきます。

その際にSEO(Search Engine Optimization)やGoogle Analyticsを用いて、その運用を効率的にしていくスキルも必要となります。

SEOにおいては、metaタグの設定(title, description, kwd)やSNSシェア対策のOGP設定、重複ページ回避のカノニカル設定など考慮すべきことが山ほどあるわけです。

そういったことを体系的に学ぶのであれば、以下の書籍が製作者目線で書かれているのでとても良いです。

また、Google Analyticsはサイト訪問者等を計測するツールですが、これはググれば参考になるサイトが山ほど出てくるので、設置の際は「Google Analytics 使い方」とか「Google Analytics 設置方法」とかで調べて都度設置して慣れていきましょう。

崩れず、美しいコーディングを追求する

WEBサイトはどのデバイスでも綺麗に表示されなければなりません。

しかし、現実は使用するブラウザによって時々サイトが崩れたり表示されなかったりする問題が結構起きます。

WEB製作者の敵、IE(Internet Explorler)を始めとして、Safariなどの他のブラウザでみた時にサイトが崩れる場合が多くあります。

また、近年はモバイルファーストの流れが隆盛を誇るため、スマホで快適に表示させるレスポンシブ化も必須です。

関連記事

「モバイルファースト」をスローガンにスマホ最適化が必須となっているこの時代において、サイトのレスポンシブ対応は避けては通れない道です。この記事ではMedia Queries(メディアクエリ)を用いてサイトをレスポンシブ対応にする方法[…]

media queries eyecatch

上記のような問題を解決する手法としてSassでCSS等をコンパイル管理し、その際にベンダープリフェックス(IEや他ブラウザ向けの表示を自動的に追加してくれるすごいやつ)を組み込んだりして対策を立てれるようになりたいところです。

また、要素の命名ルールもBEMやフロックスなどの思想を元に万人が読める美しいコードをかけるようになると立派な一人前です。

新しいプログラミング言語にチャレンジする

WEBサイト制作を案件でこなせるレベルになると、プログラミングに対して少し余裕が出て来ます。

そうなると、次は新しいプログラミング言語に挑戦してみましょう。

ここまでプログラミング学習を継続すると「いやいや、もうサイト作れるようになったから十分だよ…」という気持ちは無く、むしろもっと技術を極めたいという感情がどこからともなく湧いて来てしまいます。意図せず。

統計分析に強みがあり、汎用性の高いPythonや鉄板ですが大体のことは何でもできちゃうJavaScript。また、今若手やスタートアップで人気のRubyなんかでも良いでしょう。

アプリ開発がしたいならiPhoneのswiftや、アンドロイド向けのkotlinとかもあります。

いずれにせよ、プログラミングの面白さに取り憑かれて気がつけば勝手に学んでいることかと思います。

このレベルまでくると、冒頭で紹介したUdemyの買い切り教材はめちゃくちゃ良いです。

私も今Vue.jsの講義にはまっており、絶賛勉強中です笑

Udemy公式サイト

最後に

プログラミングの勉強を「いつか、いつか」と思っているうちにあっという間に30代、40代とどんどん勉強するチャンスは消えていきます。

「年齢を重ねるごとに新しいことを学ぶのがしんどくなる」と年配の方は口を揃えて言います。

思い立ったが吉日。

プログラミングの重要性を感じているのであれば、今すぐその扉を叩いてみるのはいかがでしょうか。

how to learn programming
Twitterでも色々呟きますので、フォローどうぞ。