プログラミング・IT プログラミング 学習

【学習過程】Webプログラミングでこれまでにやったこと

プログラミング・IT
この記事は約9分で読めます。
スポンサーリンク
ふらもん
ふらもん

ご訪問ありがとうございます。ふらもんです。

1ヶ月前からWebプログラミングの勉強をしはじめたので、Webプログラミングの学習過程を備忘録として書きました。

ふらもん
ふらもん

これからWebプログラミングを学習する人の参考に少しでもなれば嬉しいです!

参考までに。私は文系大学卒(現在色々あって求職中)ですがScratchやUnity、EXCEL VBAやHTML・CSS・Bootstrap・JavaScript・jQueryをかじった程度にはプログラミングに触れています。

ですが大学の卒業制作に使ったUnityでプログラミングに挫折してしまい、今回はこのリベンジになります。未経験からいきなり…というわけではないのであらかじめご了承ください。

パソコンも持っています。Cドライブをケチってしまい128GB SSDしかないへっぽこPCなので、就職するなり副収入を得られるようになるなりしたらMacに変えようと思っています(UnityでiOS向けのゲームも作りたいのです)。

スポンサーリンク

プログラミングを学ぼうとした理由

生きる上で、自分の武器がパソコンしかなかったからです。

私は20歳あたりまでずっとゲームとネットで生きてきたいわゆるヲタクですが、ネットの叩きで病んでから立ち直ったのをきっかけに、将来どういった分野で働くかを考えるようになりました。

そして気づいたのです。自分にはパソコンと一緒に仕事をする道しか残っていないことに。

ふらもん
ふらもん

バイトも何にもしてこなかったからね…

IT関連の業種の厳しさについても調べましたが、それでもなお自分にはITしか残っていないことを自覚し、パソコン関連の仕事をしたいと(今までもそうだったのですが、より一層)思うようになりました。

またゲーム制作の夢を諦めきれなかったのも理由の一つです。分野は違えどプログラミングを学べばゲームも作りやすくなるのではないかと思ったのです。

現在は自分の周りを見てもWeb制作がホットだと言うことから、私は最初にWeb制作の勉強を始めることにしました。

ふらもん
ふらもん

ゆくゆくはAIなんかにも挑戦してみたいです!

学習にあたって

プログラミングの教材には動画や本がありますが、私は併用しました。

動画学習は全体的に安く、ドットインストールの序盤やYouTubeに至っては無料です。動画の方がコーディングの過程がわかりやすいのもあって、学習のとっかかりや知識の定着にとても有効です。

本は少し高いですが、知識を網羅的に吸収できるので、学習の仕上げに最適です。重要なところをメモしていって、読み返せるようにしていけばなおいいです。


また、「難しいことはわかりませんが、英語を話せる方法を教えてください!」という本に書いてあったのですが、「何かを習得するときは、自分でプランを組み立てられる人の方が上達が早い」そうです。

なのでこの勉強法も参考にするだけにして、自分でプランを組み立てていったほうがいいです。筆者自身たかだか1ヶ月やっただけの身ですしね。今は無料含めたくさんの教材があるので、その中から情報を選んでいくことが重要です。

私は自分に発破をかけたいのもあって有料の教材を選びましたが、今はYoutubeで無料の教材がたくさんあるので、無料でも十分な学習ができると思います。


あと、色々な場所で言われている通りプログラミングの独学は難しいです。一度挫折した身の私がいうのでたぶん間違いないです。

プログラミングが好きでないと続きません。なので「やっぱりプログラミングは辛い」と思ったら潔く撤退しましょう。1人では続かないとなったらプログラミングスクールに通ったり、仲間やメンターを探すのもいいでしょう。

これからやるなら、まずいろんなサイトさんで「基礎知識が理解できるか」「楽しく学べそうか」を知ってから挑戦するべきだと思います。

ふらもん
ふらもん

向いてないことで消耗する必要はないですからね。

Webプログラミングを勉強するにあたって参考にした書籍

独学で身につけるためのプログラミング学習術: Ver.5 | 北村拓也 | コンピュータサイエンス | Kindleストア | Amazon
Amazonで北村拓也の{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
Amazon.co.jp: スラスラわかるHTML&CSSのきほん 第2版 eBook: 狩野 祐東: Kindleストア
Amazon.co.jp: スラスラわかるHTML&CSSのきほん 第2版 eBook: 狩野 祐東: Kindleストア
本当によくわかるWordPressの教科書 改訂2版 はじめての人も、挫折した人も、本格サイトが必ず作れる (本当によくわかる教科書) | 赤司 達彦 | コンピュータ・IT | Kindleストア | Amazon
Amazonで赤司 達彦の{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
ドットインストール - 3分動画でマスターできるプログラミング学習サービス
HTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な3分動画を見ることで、はじめての人でも無理なくスキルを身につけていくことができるプログラミング学習サービスです。

Progate HTML

初めにコーディングの勘を取り戻すためにIT界隈で有名なProgateを試しました。Progateは、環境構築をすることなくプログラミングを学習できるサービスです。途中まで無料なので、初心者が自分にプログラミングが向いているか知るのに最適です。有料会員になれば最後までこれで学習することも可能かもしれません。

まずはこれでHTMLはこんな感じだったな、というのを思い出しました。

ふらもん
ふらもん

現在有料会員になろうか検討中!

プログラミング学習術

次に読んだのがこの本です。名前の通り、プログラミングの学習自体ではなく、学習の手引きやおすすめの本を紹介している本です。

これでプログラミングの目的を探し、どうやって学んでいくかを知りました。kindle unlimitedに登録していれば無料で読めるので、「プログラミングをやってみたい、だけどやり方がわからない・作りたいものがない」という方に是非お勧めします。

前述の通り私は同人ゲームを作ろうと計画しているのですが、「自分のWebサイトを作りたい」という思いから、最初にWeb言語を選びました。

ふらもん
ふらもん

正直「Webで稼ぎたい」という気持ちもあるのですが、色々下調べもしてIT業界の厳しさも理解しているつもりです。

エディタの準備⦅VSCode⦆

使うテキストエディタの選定です。様々なエディタがありますが、私はおすすめの声が多く、将来的にMacを買っても使えるVSCodeを選択しました。

また、下記のサイトで最低限の使い方を勉強しました。現在はドットインストールで入門講座も見ることができるので、見ておくといいでしょう。

参考サイト:Visual Studio Codeの使い方、基本の「キ」

ドットインストール HTML入門 CSS入門 Web制作入門

これもIT界隈では有名なサービスです。動画と音声でプログラミングを学習できるサービスです。これの無料版をお試しも兼ねて使いました。早い動画の進行に食らいつきながらも、ここでWebの知識の土台を得ました。

ふらもん
ふらもん

ドットインストールは広範な知識を得られるのがポイント!

スラスラわかるHTML& CSSのきほん

プログラミング学習術でオススメされていた本の一冊です。これをメモしながら一周しました。

易しい本で、サクサク読み終えることができました。レスポンシブデザインなど、Webの基礎知識がここで身についた気がします。

ただドットインストールとかぶる部分も多かったため、買わなくていい気もしました。これからやるならドットインストールだけでも周回して完全に理解できれば十分いけると思います。

ここで開発ツールの勉強もしました。私はChromeではなくFireFoxを使っているので資料集めが少し大変でしたが、使いやすさ(日本語化されている)や機能(カラーピッカーなどが簡単に使える)ではFireFox開発ツールの方が上だと思いました。

ふらもん
ふらもん

FireFox、おすすめです。

ドットインストール 詳解HTML 詳解CSS・基礎文法編・Flexbox編・レスポンシブデザイン編・グリッドレイアウト編

BootstrapやWordpress、jQueryの本格的な勉強がしたかったため、ここで思い切ってドットインストールの有料会員になりました。本は2000円強するので、数ヶ月で集中学習すれば本よりコスパがいいだろうと判断したからです。

やはり爆速の動画進行になんとか追いつきながら、Flexboxやグリッドレイアウトなどの知識を得ました。

ふらもん
ふらもん

Flexboxについては正直まだ覚えきれていないのですが、使ううちに慣れるだろうと気楽に考えています

ドットインストール bootstrap入門

大学でも少しだけかじっていたのですが、大きめのサイトを作ることでBootstrapの威力を再確認できました。

かっこいいサイトを手早く作ることができ、テンションとモチベーションが上がったのですが…。結果的には使わないことを選びました。詳細は後述します。

サイトの模写コーディング

参考サイトさんに上げられていた中の一番上のサイトの模写で、HTML&CSS学習の仕上げをしました。

6時間かかりました。挙句に完全再現できませんでした。明らかに時間かかりすぎです。コードも「これはひどい」としか言えない、笑えるほど乱雑なものでしたが、誰もが最初は素人だったのだし、自分の実力が知れたと前向きに捉えることにしました。もっと精進します。

ふらもん
ふらもん

やっぱりドットインストールを一周した程度では甘かったか…

次にBootstrapが使われたサイトを模写しようとしましたが、

  • 独自CSSをいちいち調べながらコーディングしなければならず、CSSを一から書いた方がまだ早い
  • コードがものすごく見辛くなり、カスタマイズが困難

などのデメリットにぶち当たり、調べてみても現在はBootstrapを使った案件も少ないとのことから、Bootstrapより先にJavaScriptやWordpressを覚えた方がいいと判断し、切り上げました。

本当によくわかるWordPressの教科書 改訂2版 はじめての人も、挫折した人も、本格サイトが必ず作れる

いよいよ待ちに待ったWordpressの勉強です。これもプログラミング学習術で勧められていた本ですが、テーマをCocoonにしたこともあってそのままでは使えない部分も多く、あまり役に立たなかった気もしました。(本の同梱テーマを使うこと前提)

ふらもん
ふらもん

でもやるべきことが体系化されていたので、買った意味はありました

参考サイトを検索しつつ、やりたいことを地道に進めていきました。まだまだやりたいことはありますが、ひとまず満足しています。

今後の勉強

SEO・ライティング

見ての通り、まだまだ文章が拙いので、これから勉強するつもりです。あと、せっかくなので色々な人に見てもらいたいのと、広告収入を得たいので、SEOの勉強も並行して進めたいと考えています。

読みたいのは下の本です。

沈黙のWebマーケティング −Webマーケッター ボーンの逆襲− ディレクターズ・エディション | 松尾 茂起, 上野 高史 | 工学 | Kindleストア | Amazon
Amazonで松尾 茂起, 上野 高史の{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
沈黙のWebライティング —Webマーケッター ボーンの激闘— | 松尾 茂起, 上野 高史 | 工学 | Kindleストア | Amazon
Amazonで松尾 茂起, 上野 高史の{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。

HTML・CSS

サイト模写で基礎の甘さがよくわかったので、もっと基礎固めをしたいと思います。Bootstrapも少しは使えるようにならないとですね。

ふらもん
ふらもん

さらにProgateかなんかを使い込めばマシになれるかも?

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

WordPress・JavaScript・jQuery・PHP・Webデザイン

これからもっと自由にサイトを作れるように、プログラム言語の勉強も進めていきたいと思っています。

下の本を読んでいくつもりです。

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん | たにぐち まこと | 工学 | Kindleストア | Amazon
Amazonでたにぐち まことの{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
Amazon.co.jp: Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。 eBook: こもりまさあき, 赤間 公太郎: Kindleストア
Amazon.co.jp: Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。 eBook: こもりまさあき, 赤間 公太郎: Kindleストア
グーテンベルク時代のWordPressノート テーマの作り方(入門編) (EP NOTE SERIES) | エビスコム | 工学 | Kindleストア | Amazon
Amazonでエビスコムの{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。

これからの目標

まだまだ実績が足りないので、ポートフォリオを充実させていくことが今後の目標になります。

とりあえず今はまだ力不足なので、もう少ししたら簡単なWeb制作案件を受けようかなと思っています。

ふらもん
ふらもん

まずはコーディングの勉強をし直さねば…

この記事を書いた人
ふらもん

Webプログラマー(志望)の謎の生物。趣味はお絵かきとゲーム制作。日々の成長記録をここに書き記しています。

ふらもんをフォローする
プログラミング・IT
スポンサーリンク
スポンサーリンク
スポンサーリンク
魔導研究棟

コメント

タイトルとURLをコピーしました