本の薦め

本の紹介記事や社会問題に関する記事を書いています

【1か月】文系が独学でプログラミングを勉強する話【文プロ】

 

 

 ブログをサボりにサボり続けて、はや3週間。毎日更新の夢は、いつの間にか本当に夢のまま終わってしまいました。

 

 

 さて、文系育ちの私がプログラミングを勉強してから1か月が経過しました。

 そこで、経過報告をさせていただきます。

 この1か月、本当にいろいろありました……。本当に……。水漏れ被害で年末は追われ、その結果年始には引っ越しを余儀なくされ、などなど。大変な毎日を送っていました。

 

 そんななかでも、プログラミングの勉強だけは続けていました。さて、どのぐらい進んだのでしょうね……。

 

 

1.総勉強時間

 

 およそ60時間!!!

 まぁ、バイト・講義・旅行・引っ越しとバタバタしてたので妥当かなという感じです。本当はもう少しできそうでしたが、及第点という感じですかね。

 

 

 

2.60時間で学べたこと・やったこと

 

できるようになったこと

・HTML&CSSによる基本的なコーディング

 

 

やったこと

・ProgateのHTML&CSSを2~3周

・模写コーディング(2.5個)

・参考書2冊流し読み

JavaScriptjQueryRubyおさわり程度

 

  順番として

ProgateのHTML&CSSを1周⇒JavaScriptjQueryRuby⇒模写コーディングしつつ復習

 それでは具体的に見ていきましょう。

 

 

2.1 HTML&CSSによる基本的な技術

 

 およそ60時間のうち、20時間は「Progate」というプログラミング勉強ツールにて、HTML&CSSの勉強に費やしました。

 具体的には初級2周、中級3周、上級2周です。実践のほうは1周ずつ行いました。

 

 

 「基本的」とはどれぐらいを指すかというと、「画像・テキスト・軽いレイアウトを教えてもらいさえすれば、何とかそれっぽいHPが作成できる」レベルです。

 一例ですが、

www.yoga-plus.jp

 レベル感として、これぐらいのHPは作成できるようになりました。

 また、レスポンシブルデザインぽいものもできます(ただしまだまだ完璧とは言えません)

 計60時間かかってやっとこれぐらいのものです。遠いよ……。

 

 

 ですが見てわかる通り、テキストと画像がメインのいたって普通のHPです。 

 60時間やってみた課題点としては、

 ・動きがほとんどつけることができない。(自動でスライドする画像等)

 ・お問い合わせフォームについて勉強不足

 ・レスポンシブルデザイン(スマホタブレット対応デザイン)ができていない

 

 といった感じでしょうか。

 

2.2 模写コーディング

 

 続いて模写コーディングですが、これは「Progate」の練習と同時並行的に行いました。

 ProgateのHTML&CSSを1周した時点で「よっしゃ!こんなの余裕じゃん!早速模写してやるぜ!」とか思い、やってみたんですが、意外と難しい……。意外とというかかありでした。

 練習と違ってどこが間違っているのかわからないと大苦戦します。クラスが間違えているのか、スペルが間違っているのか、それとも他のCSSが邪魔しているのかは初心者にはわかりません。原因がわからない→解決しようがない、ということなので、結果として何度も復習することになりました。

 

 

 1ページ作成するのにだいたい10時間近くはかかりました。

 

2.3 参考書流し読み

 模写コーディング中に手詰まりかけたので、本を借りることに。

 

 図書館にいって探してみるも、どうも昔のものしかなく、あっても3年前とか。

 古い本をあまり信用してもな、と思ったので流し読み程度に留めておきました。

 しかしながら、知識を広げるためには大事かなと思います。

 

2.4 他プログラミング言語

 練習の合間に除いてみたって感じですかね。

 ほぇ~こんなことやるのか、と勉強にはなりました。

 

 ただ、やらなくてもよかったのかなとは正直思います。所詮ほぇ~ぐらいのことなので。あと、HTML&CSSにすぐに役立つ知識というわけでもなさそうでした。

 

 

3.やってみての感想

 

3.1 「文系」であることは関係ない

 

 現時点の感想ですが、マークアップ言語についていえば文系・理系は関係ないなと思います。プログラミング言語の一種ではあるけれども、そんなに毛嫌いするようなものではないです。これから始める方がいれば、ぜひとも挑戦してもらいたいです。

 

 

3.2 独学という障壁

 

 独学というメリットは大きいなと感じます。どこでも勉強できるし、費用も1か月で1000円ほど。

 しかし、最大の障壁として「先生がいない」ということがあります。

 近くに詳し人がいて、「すいません、ここ何で反応しないんですか?」と聞くと、「あぁ、ここはね」と即答できるような問題でも、調べるのにものすごい時間がかかります。

 

 ググろうと思っても、英語のイディオムとか数学の公式と違い、「自分が知りたいこと」がピンポイントででてきません。先ほども書いたように「どこが間違っているのかわからないから」。独学ならではの問題化と思います。

 もし独学を考えているなら、サーチ力は必須かなと思います。

 

 

 また、ひとつのツールに頼ると詰まりやすいと思うので、アプリ・本・YouTube、何でもいいので2つか3つから勉強すると良いかもですね。

 

 

3.3 やってみた感触として

 

 paddingとmarginさえ使いこなせればそこそこ太刀打ちできそう、と思いました。

 これが使いこなせれば、最初の中ボス倒したぐらいのレベル感かと思います。

 

 感触としてはあと1か月で先ほど挙げた問題点は解決し、さらに1か月やればほとんどのHPは作れるんじゃないかなとか思っています。

 フォームはフロントエンド言語が関係すると思うので難しいかもしれませんが、動きとレスポンシブルデザインもできるかと思います。

 

 ただ現時点では「1か月で稼げるほどプログラミングは甘くない」とわかりました。

 一方、「1か月あれば、それっぽいHPぐらいは作成できる」ということがわかりました!

 

 とりあえず、またボチボチとブログを再開してみたいと思います。

 今日はここまでです。

【6日目】文系が独学でプログラミングを勉強する話【文プロ】

 

 

6日目 JavaScript修行編 ~最大の苦難~

  

 JavaScriptの勉強もついに中盤に差し掛かろうとしています。

 

 先日の記事はこちらから

 

honnosusume.hatenablog.com

 

 

 

JavaScript

 (かかった時間 1時間)

 ここで登場。  ”関数”

 数学っぽくなって吐きましたが、そこまでそこまで……という感じでした。なんかまとめて表示したんだろうなぁと何となく理解はできました。

 

 

 

 しかし問題はその後です。 ”引数”(ひきすう)、”戻り値”

 こいつらは一体何なんだッ……。新しい概念の登場にめちゃくちゃ混乱です。]

  何となく意味は理解できました。なんか後のほうからもってくるんだなぁ……。で、それで……?? これはいったいなにした0んだ、何のための概念なんだ。

 

 もう迷走です。プログラミングを勉強してから一番の壁にぶち当たりました。とりあえず言われるがままにやっては見ているけど、全くもって理解できません。。。

 

 そんな調子でモヤモヤしつつもレッスンを終えました。

 とりあえず、とりあえず一周するんだ…!!」

 

JavaScript

(かかった時間 1時間)

 

 そのまま突き進むことを決意した私。そこで待っていたのはJavaScript3以上の難関でした。

 まずは復習から。お、2とか3でやったことのだ。理解はしていないけど何となくならわかるぞ。

 次は本編か。クラス…?HTML&CSSでやったからまだ馴染みはあるぞ(言葉だけ)。ん、インスタンス?。ほう、新しい概念の登場ですか。コンストラクタ。まだまだ大丈夫なはず……。メソッドだと……。継承?オーバーライド・・・・・・???

 

 死亡しました。

 

 

 もうわからんです。ピンチです。わからないままです。何ですかインスタンスって、コンストラクタって、メソッドって。

 

 とりあえず一周はするけどさ。もうわからんですよ、これは。

 

 そんなまま、このレッスンを終えました。

 

 

〈経過記録〉

 

5日目勉強時間 JavaScript 2時間

 

 計 HTML&CSS 11.5時間 (初級~上級 1周、 初級実践 2周)

 、  JavaScript 5.5時間  (レッスン1~4)

 

 

 

 

 

【5日目】文系が独学でプログラミングを勉強する話【文プロ】

 

5日目  ついにHTML&CSS修了編 / JavaScript開始編

 

 

昨晩はProgateのHTML&CSSの初級実践を終えたところまで、ブログに記したと思います。

 

honnosusume.hatenablog.com

 

 しかしながら、この後恐ろしい事態が待っていたのです……。

 

 

・HTML&CSS中級実践

 

 初級実践を順調に終え、浮足立っていた私は、その調子で中級実践を目指しました。これなら意外とすんなりいけるかもな、と。しかしながら、そんな期待はうち破られるのでした。

 

 

 中級実践は全部で5つに分かれており、確かにその一つ一つの難易度は上がっていました。それでも、そこまで大きな障壁ではありません。一つずつ確認していけば大丈夫かなと思っていました。一つ目は特につまずくことなく終え、二つ目に移行。しかし、そこで待っていたのは  鬼畜仕様書」!!!

 

 

 まず、この実践というのは見本をみながらウェブページを丸々1ページ、自分で作成するというものです。ですが見本だけでは細かいレイアウトはわかりません。そこで仕様書というものがあるのですが、その仕様書がまぁわかりにくく……。おそらく初心者で慣れていないからなのかもしれませんが、かなりきつかったです。例えばCSSでボタンの角のかたちを調整するのですが、その値を教えてくれなかったり。

 

 

 これじゃ無理だと、一時的に中級実践を放置することに決めました……。つらい。

 

 

・HTML&CSS上級編 

(かかった時間 1時間)

 

 気持ちを切り替えて、今度はとりあえず上級編に挑戦しました。

 応用編とはいいつつも、初級・中級で説明しきれなかった部分の説明みたいな感触でした。そんなわけで一時間ぐらいで終了!!

 

 ということでHTML&CSS本編はいったん修了いたしました!!!

 

 今までの分を合わせると11.5時間。思ったより早かったかな?

 でも終わらせても、使えるようにならないと意味がないのでこれからが大事ですね。まずは実践を終えられるように、あとはコードの模写とか進めていきたいと思います。

 

 

 

 と感傷に浸っている間もなく、私は次に進みます。

 次はJavaScript編です!

 

 個人的には「とりあえず1周」の精神は大事かなと思っていて、だからHTML&CSSを深くまで勉強するのではなく、まずは次の分野・JavaScriptにいこうと思いました。

 

・ JavaScriptⅠ  

(かかった時間 1時間)

 

 さっそく初めのレッスンに挑戦です。事前にスライドを呼んでいたということもありスイスイと進むことができました。かかった時間としては1時間ほど。現段階の内容としてはそこまで難しくないと思います。

 本当に基本中の基本。ルールを覚えることから始まります。野球でいうと「2チームが攻守を交代しつつ、9回まで試合をやる」とか「グラウンドを1周したら1点」みたいな、最低限のルールです。

 しかしここでもしてしまうのがケアレスミス。やはり付き物なんですかね。

 

 ・ JavaScript

(かかった時間 1.5時間)

 

 そのまま次のレッスンに挑みます。ここまで連続で勉強していたので疲れもみえ、少し時間がかかってしまいました。レベル感としてはそこまで重くはないかな……?という感じです。確かにやることは増えましたが、そこまで難しいことを言ってはいません。HTML&CSSがレイアウトの細かい調整があるのと比べて、JavaScriptは文字の羅列であり、現段階では文量も少ないので、比較的楽なように感じます。

 野球で例えると「どうなったらアウトになる」とかそういったレベルじゃないですかね。

 

 

 ここまでけっこうすんなりできている気がします。

 この投稿を終えたら勉強を再開しようと思います!では!

 

 5日目勉強時間 HTML&CSS 2時間  JavaScript 2.5時間

 

 計 HTML&CSS 11.5時間 (初級~上級 1周、 初級実践 2周)

 、  JavaScript 3.5時間  (レッスン1~2)

 

 

【3・4日目】文系が独学でプログラミングを勉強する話【文プロ】

 

3日目・4日目

 

 Progateでプログラミングを勉強はじめて3日目・4日目。

 

 昨日は忙しくて全然投稿することができませんでした。しかし、投稿こそできなかったものの勉強は進めていましたよ。

 さて、今日も振り返っていきたいと思います。

 

 

 前回の記録はこちらから

 

 

honnosusume.hatenablog.com

 

 

 3日目

 Progateにて中級まで終わらせた私は、初級の実践に挑戦しました。

 慣れ始めてきたからある程度できるのかなと思いましたが、案外難しい。前の日記?でも書いたようにタグの使い方がまだ全然できていないというのと、そもそもタグを覚えていなかったりで結構苦戦しました。Progateで予定している2時間半を使いやっと1ページ、しかも一番簡単なスタイルのものを完成するに至りました。

 

 やはり学習時間5時間程度では勉強不足と経験不足が目立つかなという感想ですね。

 しかし、ヒントとかスライドを見ながら復習ができたので、なんとかなんとか……って感じです。

 まぁ実際に作るとなったらこんな感じなんだろうな、と参考程度にはなりました。

 

 

 その後、パソコンで学習できる環境にいなかったのでスマホで勉強を開始。でも、実践ができないと意味ないなと思って、一足先にJavaScriptのスライドを流し見しました。

 本格的なプログラミング言語に触れるのははじめてだったのですが、意外といけるかも……?でした。こういうプログラミングの世界に触れていなかったので慣れない前提が多かったりしますが、それでも理屈には通っているし、序盤だから複雑じゃないし。まだパッと見段階なので全然わかりませんが、独特のルールさえ覚えちゃえば、思っているよりは難しくないかもしれないです。(たぶんこれが一番大変なんだろうけど)

 なんだか文系だからってプログラミングを避けるのは違う気がしてきたぞ。

 3日目はこのぐらいです。

 

3日目勉強時間 HTML&CSS 2.5時間  JavaScript 1時間

計 HTML&CSS 8時間  、  JavaScript 1時間

 

 

4日目

 

 今日はパソコンが使える!ということで、まずやることは初級実践(2回目)!

 

 なんでもう一回やろうと思ったかというと、自分には基礎が足りなすぎるからです。

 たしかにProgateはわかりやすいんですが、詳しい説明を体系的に説明はしてくれないんですよね。そこで、わからないところをネットで調べ理解を深めたうえで、再挑戦しようと思いました。

 

 

 するとかかった時間はおよそ1時間半!前よりはだいぶ早くなりました。1か所でめちゃくちゃつまずいてしまったのでこの時間ですが、もうちょっと早くできそうでした。

 とにかくこれで基礎はだいぶ身につきました!

 

 

 あとは今日これから勉強再開していきます!ではまた!

 

4日目勉強時間 HTML&CSS 4時間  JavaScript 1時間

計 HTML&CSS 9.5時間  、  JavaScript 1時間

 

【2日目】文系が独学でプログラミングを勉強する話【文プロ】

 

2日目

 

 Progateにてプログラミングを勉強を始めて2日目。

初級編を終えた私は、中級編へと向かう。

 

 

 しかし、そのさきで待っていたものとは……

 「有料コンテンツ!!!!!!」

 いや、知っていたけどね。こんだけしっかり勉強できて、さらにうざったい広告もなくて無料なんてありえないもん……。どうやら中級以降はお金がかかるみたいです。当たり前っちゃ当たり前なんだけどさ。でも、でもね調べたらほとんど無料とか書いてあったんだよ。本当です。少しだけ期待してしまっていた自分がここにいました。すいません。

 

 そんなことも言ってられないので、さっそく課金。ためらいなんてしません。だって、やがては自分の力になる、大事な投資ですもの。

 しかしながら月額980円(けど最初は担保として追加で100円かかるらしい)という優良価格。これでほとんどの言語が勉強できるなら安いでしょ。下手な本買うよりはよっぽど安いし、わかりやすい。しかも間違いを訂正・答えも見れる。いや、かなりいい教材ではないですかね。

 

 

 とお金を支払ったところでレッツら勉強。

 

 〈感想〉

 

 初級と比べたらやることは増えたし、難易度は上がったように感じます。ただ初級同様、すぐ実践で学べるので、その都度コード?の確認ができるのがいいところですね。少しわからなくなってもすぐにスライドで復習するので、手詰まりするということはありませんでした。このぐらいを理解するなら文系でも余裕というか、むしろ文系のほうが得意なんじゃないかなとまで思いました。

 

 

 この段階で難しい、というか進まない原因としてはやはりケアレスミス

 一長一短ではやはり直らないのかな。終了タグの場所をミスしたり、スペルミスをしたりが多いです。今だからProgateが間違いを指摘してくれるけど、実践とかになると絶対気づけないと思います。プログラマーのみなさんはどのように注意とか、ミス回避をしているんでしょうかね。

 

 あと、固有の考え方を覚えるのが大変です。

 「ボックスモデル」というのがあるのですが、margin(外側の余白)、border(枠線)、padding(内側の余白)という概念を覚えるのが大変です。

 あと、「ブロック要素」、「インラインブロック要素」、「インライン要素」の区別がしっかり理解できていない点ですね。この要素が違うことで、できること・できないことが生まれるらしいのですが、どれがどう違うのかよくわからないままやっています。

 とりあえず「そんなもんなんだ~」と軽い気持ちで流しつつ、指示されるがままにコードを打ち込んでいますが、ここの2つは理解していません。概念とか考え方の問題だから、触れて慣れるしかないのかな?と思っています。しばらくやってダメそうなら復習します。

 ただはじめて触れる人は、この2つを理解するのが大変そうだと思いました。

 

 

 

 

 

 あと今後不安な点はいくつかあります。

 

 まず指示通りに練習しているだけであって、実践をしていないこと。漢字のなぞり書きみたいに誰でもできる部分しかやっていないので(個人的にはこれが助かりますが)、「覚える」段階にまで昇華するためには書き写しや実践練習がたくさん必要かなと感じました。

 

 また、HTMLとCSSマークアップ言語であるということ。初歩段階としてこの二つを学んでいるわけですが、今後本格的なプログラミング言語を勉強したときについていけるかは少し不安です。

 

 

 さて2日目を終え、進歩具合としては順調かなと思います。個人的には1周目は軽く触れて、2周目で完璧に覚えようと思っているので、そこまで深い理解をしようと思ってはいません。しかし、あまりにも理解ができないと不安になります。このままでも大丈夫かな。

 

 

 とりあえずの収穫としては「HTML&CSS中級はそれなりにだったら理解できる」というものでした。現段階では「理系じゃないとできない」なんてものは感じません。ここまで(HTMLとCSS)ぐらいだったら敷居低くて、勉強しやすいかもしれないです。がちがちのプログラミングではなさそうなので。もちろん得意不得意はあるかもしれませんが、数列使ったり、三角関数使ったり、微積使ったりがないから高校数学よりは絶対楽、というのが個人的見解です。

 

 興味がある人いたら、一緒に始めてみましょう。

 

 

 

 ちなみに今後の目標として、1か月でHTML&CSSJavaScriptRubyを2周ずつしようと思っています。余裕があればRuby on RailsJavaを勉強しようと思いますが、さすがに無理かな……。

 まずは最初の3つを、とりあえず1か月で2周目指して頑張りたいと思います。

 

 以上、【文系が独学でプログラミングを勉強する話】の2日目でした。それではまた。

 

 勉強時間:HTML&CSS 本日2時間半  計5時間半

 

プライバシーポリシーについて

プライバシーポリシーについて

 

 

 

 

 

 

広告の掲載について

当サイトは第三者配信の広告サービス「Googleアドセンス」を利用しています。

広告配信事業者は、ユーザーの興味に応じた広告を表示するために「Cookie(クッキー)」を使用することがあります。

Cookieを無効にする設定およびGoogleアドセンスに関して、詳しくは

https://www.google.co.jp/policies/technologies/ads/

をクリックしてください。

三者がコンテンツおよび宣伝を提供し、訪問者から直接情報を収集し、訪問者のブラウザにCookie(クッキー)を設定したりこれを認識したりする場合があります。

 

 

アクセス解析ツールに関して

 

 当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。

 このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。

このトラフィックデータは匿名で収集されており、個人を特定するものではありません。

この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。

この規約に関して、詳しくは

Terms of Service | Google Analytics – Google

をクリックしてください。

 

当サイトのコメントについて

 

当サイトでは、スパム・荒らしへの対応として、コメントの際に使用されたIPアドレスを記録しています。

これはブログの標準機能としてサポートされている機能で、スパム・荒らしへの対応以外にこのIPアドレスを使用することはありません。

当サイトでは、次の各号に掲げる内容を含むコメントは管理人の裁量によって承認せず、削除する事があります。

 

・特定の自然人または法人を誹謗し、中傷するもの。

・極度にわいせつな内容を含むもの。

・禁制品の取引に関するものや、他者を害する行為の依頼など、法律によって禁止されている物品、行為の依頼や斡旋などに関するもの。

・その他、公序良俗に反し、または管理人によって承認すべきでないと認められるもの。

 


免責事項

当サイトで掲載している画像の著作権・肖像権等は各権利所有者に帰属致します。権利を侵害する目的ではございません。

記事の内容や掲載画像等に問題がございましたら、各権利所有者様本人が直接メールでご連絡下さい。確認後、対応させて頂きます。

当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。

当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもございます。

当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。

運営者:ミヤムラ マコト

初出掲載:2019年12月8日

【1日目】文系が独学でプログラミングを勉強する話【文プロ】

  

 文プロ 1日目

 

 さて、いよいよ始まりました。

 「文系が独学でプログラミングを勉強する話」、1日目です!

 とはいっても、夜に勉強することが多いので1日遅れとかの投稿にはなりますが……

 

 

 まずこれからどのように勉強しようかなと思い、さっそくネットで検索。

 いろいろ独学で勉強した人のブログ等をみて、とあるサイトにたどり着きました。

 

 「Progate」というサイトです。

 リンクはこちらに→ Progate

 

  無料ということが書いてあったので今回はこのサイトにて、勉強を進めていこうと決意しました。

 

 

 

 さて、HPをひらいてみると、たくさんのプログラミング言語が並んでました。しかし、まずは基本の基本ということでHTMLとCSSを勉強しようと決めていたので、ここの部分で悩むことはありませんでした。*1

 

 

 まぁ前置きはさておき、さっそくスタート!

 HTML&CSSコースというものは初級・中級・上級・Flexboxというコースに分かれていますが、初心者の私はもちろん初級コース。

 いざ、プログラミングの世界へ。

 

 

 と思いましたが、初級コースということもあり、特につっかかることなくスイスイと進み、一日目にして初級コースを修了いたしました。やった時間としてはおよそ3時間くらいですかね。

 

 この「Progate」は、説明したらひたすら演習みたいなスタイルなので、個人的にはすごいやりやすかったです。説明だけ受けてもつまらないですからね。ですのでひたすらポチポチとやっていきました。

 

 また、演習では実際にページをデザインする形だったので「へぇ~こうするとこんあデザインになるんだ」とすごく楽しかったです。効果がすぐに反映されると楽しいですね。

 

 一方で、ケアレスミスが多いと大変だということがわかりました。自分はとにかく細かいミスが多いので、スペルミスしていたり終了タグがずれていたりと間違いが目だr地ました。間違いをするのはまだいいのですが、どこが間違っているのかを探すのが一番大変でした。あ、プログラミングってこういうところが短変なんだなということを痛感いたしました。

 

 

 さて、まず1日目は楽しく修了できました。 現時点では「なんかできそうだな」という感じです。しかし、これから中級・上級となり、またもっと難しい言語に移行したときにどうなるのかがわからないので、どうなるんだろうという不安もあります。

 今回はこのぐらいで終わりますかね。では、また次回。

 

 

*1:HTMLはWEBのデザイン、CSSはHTMLで作成したデザインのレイアウトを決定するものらしいです