【初心者必見】私のプログラム言語学習方法

　こんにちは！　今回は私のプログラム言語学習方法についてお話します。
　これからプログラムの勉強を始めてみたい人向けですが、プログラムを作るにしてもどこから手を
つけていいか分からない方の為に、私なりの習得方法（我流）ですが、興味があれば是非参考にして下さい。
　今回は初めて学ぶ順番として以下の言語を例として取り上げました。😀

・HTML , CSS (Sass) , JavaScript(jQuery)

　　まずはプログラム言語を習得する上で必要な教材をピックアップします。
　　複数活用でもかまいませんよ。

　・本
　　私の場合、初めてHTMLを勉強する際、とりわけ「やさしい入門書」を手元に置きました。
　　今はGoogle等で検索すれば、教材本を購入せずに学べます。

　・オンライン学習（プロゲイト、ドットインストール）
　　オンラインで無料で学べる教材ですね。　これを活用する手はないですね。
　　有料コースもありますが、必用であれば利用してもいいのではないでしょうか。
　　無料でも結構知識は備わりますよ。

　・スクール等の活用（有料）
　　独学だけでの習得が不安な方は利用されてもいいと思います。
　　プロの講師から学べるメリットは、しっかりした基礎・活用方法が有料ではありますが、
　　身につくはずです。

　私の場合、とっかかりとして「やさしい教材本」から見様みまねにコードを入力して、
　ブラウザーから結果が得られた嬉しさからがきっかけです。
　ここでプログラムに対して「楽しく続けられるか」が判断基準でした。

　この後にも記しますが、特別コードを書くための「エディタ」なしでも、ウインドウズ標準搭載の
「メモ帳」にコードを書いて、書いたファイルの拡張子を「 .txt　➡　.html 」に変換してあげれば、
　簡単にホームページとして閲覧できるのです。

　　私が初めてHTMLに興味を持ったのは、Windows95が出回る前後でしたので、基本、コードを書く
　エディタは身近になかったので、拡張子の変換でまかなっていました。😓
　ましてインターネットが一般家庭に普及し始めて間もない頃なので、情報量も乏しく、現在まで
　Googleで検索するようなカテゴリーはなかったんですよ。

　　ホームページの教材もまだまだでしたので、限られた基礎的な内容しか無かった記憶があります。
　　それでも本ならではの「何度でも読み返し」ができるので、単純な表示方法で練習しました。
　　現在は、オンラインで気軽に無料で学べるプロゲート(Progate)などのサービスで学習できるよう
　にもなったので、興味が沸いてそれ以上に学習をしたい方にはいいかと思います。

　　私は、プロゲートを利用しました。
　　ただ個人的にどちらかと言えば、記憶力には自信が無い方なので（ものを書いて覚える性格）、
　ステップ毎に要点をノートに書き留めておいて、必要な場合に「ノートでメモした内容を
　さかのぼり」コードの思いおこしをしながら学んで行きました。　

　ただ単にステップを戻ってみればいいだけなのですが、「あの時どうだっけ？」とした時に、
　即座に引用できるので重宝しています。
　また、自分だけの教材にもなりますからね。😓

　・エディタの選択（好み）

　　コードを書くためのコーディングツールは以下のものがあります。（無料）
　　私は「Atom」を愛用しています。
　　また、各エディタに関しての情報量も多く見られるようになったので、選択肢も広がりますね。

　①　ez-HTML
　　　HTMLコーディング、ファイルのアップロードまで行うことのできるエディタ

　②　TeraPad
　　　余計な機能がついていないので、シンプルで使いやすいエディタ

　③　Atom
　　　HTML以外、JavaScript、PHP、Rubyなど主力言語に対応した幅広い種類のパッケージを
　　　インストールすれば、自分好みにカスタマイズできます。

　④　Sublime Text3
　　　カスタマイズ性、機能性を備え、多数の人も利用しているので、困ったことがあったらネットに
　　　情報が多く載っているのもポイントです。

　⑤　Liveweave
　　　HTML、CSS、JS、プレビューウインドウの４つを見ながら作業をすることができる高機能なエディタです。

　などなど・・・

・Sassはルビー の導入（インストール）が必要
　　CSSのコーディングをしていると、Sassの必要性も出てきます。

　Sassは言わば「CSSに対して機能を拡張した言語」または「CSSをより効率的に書けるようにした言語」です。
　最近は、CSSをSassで記法したものが多くなってきています。
　　ただし、CSSをSassでコーディングしてもパソコン本体に「Ruby・ルビー」がインストール
　されていないと機能しません。

　　幸いRubyもネットで無料ダウンロードできますので、インストールさせておく事をお勧めします。
　もちろん、CSSのコーディングだけでもRubyなしで十分実行は可能ですよ。

　Ruby Downdoad Site https://rubyinstaller.org/

　簡単に言って、この言語（Sass)をCSSとして認識させる為の手段です。
　もっと簡単に言えば、例を上げると「英語が話せない日本人」と「アメリカ人」の間に立つ
「通訳の人」がまかなう作業のことです。

　そのためには、GUIソフトで簡単に行う方法もありますが、手短にパソコンの「コマンドプロント」内
でコマンド一行を入力するだけでコンパイル作業は終了します。（私は今も地味にやっている💦）

　　　　　　コマンド
　　　　　　　　　　　　sass ファイル名.scss:ファイル名.css

　それが面倒な方は、ソフトを利用して（自動コンパイル）行うといいでしょう。
　そのうち私もお世話になろうかと考えています。😀
　因みに自動コンパイルするソフトは「koala」があります。
　私がエディタで利用しているAtomと併用にkoalaを実行させておき、Sassのコーディングを
　リアルタイムで同時にコンパイル更新してくれる優れモノらしいです。

・タグやプロパティの理解を深める
　　ネットにつなかっていれば、必用環境はダウンロードして用意できますので、時間はさほど必要は
　ないと思います。
　　まずはボリュームのあるホームページを作ることは意識しないで、単純明快に
（内容がなくともかまわない）文字を出力するレベルからコーディングを始めていいと思います。

　その間、プロゲートなどで学んだことや、手法を自分で作ったコード内い取り入れて、少しずつ
　コードのボリュームを増やして行けばいいのではないでしょうか？

・プロパティを理解するために単純なサンプル・コードを書いてみる
　そうすれば、コードの活用幅も広がると思います。
　単純にHTMLタグで文字を書いたなら、その文字をCSSで色を変える、フォントを変える等をして
　コーディングによる「変化の過程」を楽しんで下さい。

・ブログなどの情報公開
　　現在のプログラムコードの情報公開量はハンパなくすごい量ですね。
　現エンジニアからの情報発信や、「プロじゃないか？」という位の知識の詰まったサイトを公開する方々。　
　私には到底ここまで豊富にコードを書ける自身はありませんが、役に立つ情報が無料で世界中で
　公開されていますよね。
　この業界にとってはチョットした「お悩み」などの解決ヒントさえ探し出せます。

・YouTube動画
　特に現エンジニア発信の動画は勉強になります😀
　プログラム言語は「世界共通」でもありますので、外国人の言葉が理解できなくとも、コードを
　見ていればある程度理解もできますし、プログラミング・スタイルの勉強にも役立てることができますね。
　数年前にアップした動画でも、今でも活用されている手法が数たくさんあります。
　ネットの世界ではもうすでに「身近に情報が得られる」時代なんですね。

　　私は個人的にサイトで公開しているもの（スクリプト、スタイルシート）をダウンロードして
　HTML内で読み込まし、プラグイン本体を動かすものを極力避ける傾向があります。
（自分でもメンテナンス可能なものは取り入れますが・・・）

　もしこれが商用利用で、お客様のWebサイトであるならば、メンテナンスが必要になった際に
「時間が掛かる・悩む・できない」といった不安がついて来るからです。
　趣味でサイトを作るのであれば、構わないと思います。

・jQueryなどの本体を活用する際に最低必要なライブラリを読ませるのは例外
　Webサイトには数々言語も動いています。
　トップに上げられるのは、JavaScript があります。

　JavaScript もプログラム言語であり、ユーザー側のWebブラウザとサイト
（ウエイブ・サービスの相互間）のやりとりを円滑にするために使われています。
　また、Webページを構成する全てのオブジェクトを操作できる為、色々と魔法のようなことを
　させる事ができます。

　その中で jQuery は JavaScript の書き方を単純にして、「効果やアニメーション」を実装できる
　 JavaScript で作成されたライブラリです。
　もちろん、このライブラリ本体が HTML 内で取り入れていないと実行できません。
　バージョンも刻々変わることでダウンロードをし直すのも刻なので、HTMLタグ内でjQuery を
　動かせられる本体ライブラリをサーバー上でリンクして得られる事ができます。＜下記①の方法＞

①　CDN(Contents Delivery Network) を利用してjQuery を使えるようにする方法
　　　　　※サーバー上に公開されたプログラムを自由に利用できます。
　　　　　　CDN利用でのサイトは以下で紹介します。
　　　　　　HTMLのbodyタグ内の最下部に、以下のコードを記述してリンク利用します。

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

②　jQuery のライブラリ本体をダウンロードして使う方法
　　　※公式サイト Download　https://jquery.com/download/

　　　jQueryを使用可能にする為には、①の方が常にバージョンの把握ができて有利だと感じます。
ただし、最新ライブラリもすぐに利用できますが、公開しているサーバーがダウンしている最中は
利用できません。ライブラリには各社の提供しているライブラリの切り替えを行うことで対応する
事となります。※実際にはHTML内の記述しているjQueryライブラリ読み込み用urlの 変更で可能です。
　（サーバーダウンは、まずありえない想定ですが）

　一般的には下記の４社サイトからのものがよく利用されています。＜各社 CDN利用サイト＞

・Google CDN https://developers.google.com/speed/libraries

・jQuery CDN https://code.jquery.com/

・Microfoft CDN https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview

・cdnjs CDN　https://cdnjs.com/libraries

　　企業で採用されているWebサイトでは、様々な表現でデザインを勉強できます。
　　業種によってシンプルなデザインから「これはオシャレ！」といったものも数多くあります。
　　こんな表現方法が「自分でもコーディングすることができたらな・・」と思う時があります。　
　　そんな時は・・・

・ネットで、それに近い方法でも転がいないか検索してみると、意外に見つかるかも知れません。
　なくとも近い表現性のあるものだったら、カスタマイズして近ずけてみましょう。

・海外のWebサイトを見る
　デザインやインパクトは、やはり海外のサイトを見た方が表現力が豊かになるはずです。
　そこから新たなヒントが得られます。
　

　最終的に学んだことの集大成として、テーマを決めて小さな作品を作ってみましょう。
私の場合は、メンテナンスしやすいようにステップごとにブロック構成でまとめています。

　コンテンツ内容をノートにフリーハンドでレイアウトにしてからHTMLタグで骨組み、
　CSSで配置するといった感じです。

　　チョットだらだら説明してしまいましたが、

・学習教材の活用（無料・有料）
・自分のパソコンに開発環境を整える
・コードをたくさん書き理解を深める
・プロパティを理解するために単純なサンプル・コードを書いてみる
・公開されているコードをまねてみる。
・企業のWebサイトを参考にする
・学んだことを作品にしてみる。

　我流ではありますが、これが私のプログラム習得（勉強）方法です。
　もっと優れた方法があるかも知れませんが、そこはご了承くださいね。💦

　　benblogでは、デザインが楽しくなるようなアニメーションやエフェクト等を公開していきたいと
　思っています。

　　ブログで紹介した内容をポートフォリオまではいきませんが、「デザイン集」として作品に
　組み込んでいきますので、ご覧になっていただくと嬉しいです。

　　今後ブログのメニューに「DESIGN」のカテゴリーが出来ましたら、是非とも見て下さいね。
　　最後まで読んでいただき、ありがとうございました！😀