始め方

40代主婦でもできるプログラミング学習の始め方と基本的なルールとは?

どーも、p`o`chittoです( ̄▽ ̄)♪

先日、1年ぶりに再開した同年代の主婦友達とお茶していた時のこと。
エンジニアとして第二の人生を歩み始めた私に聞いてきました。

40代主婦友

未経験からプログラミングできるようになって
エンジニアとして就職もして、すごいね〜。
実際レベル高そうし、頭いい人しかできない
イメージがあったんだけど、
プログラミングってもしかして私にもできたりするの?
もし始めるなら何から勉強したら良いの?

質問攻めです・・・www。
というか、頭あまりよくないと思われていたんかい!!!www
そんなツッコミはさておき。

確かに1年前の私も、その当時は
『プログラミング』ってすごくレベルが高そうだなぁ・・・
やっぱり、学校に通わないとできるようにならないのかな?

と思っていました。


オンラインスクールの課題をこなし、今現役SEになって思うことは、
順序よく難易度の優しいものから繰り返し練習すれば、
パソコンに不慣れな40代主婦の方も充分Webエンジニアとして
やっていける道はある
、ということです。

そこで本日は、

  • 40代主婦でもできるプログラミング学習の始め方は?
  • 40代主婦でもカンタンに学べる学習ツールは?

について、お伝えしていこうと思います!

40代主婦でもできるプログラミング学習の始め方は?

プログラミング学習を始める前に、みなさんに
知っていただきたいことが一つあります。
それは、Webページを構成する言語は、
プログラミング言語だけではない、ということです。

Webページを構成する要素に
プログラミング言語ではないものがある?!

Webページを構成している言語は大きく分けて2つあります。

  • マークアップ言語
  • プログラミング言語

マークアップ言語とは?

マークアップ言語とは、そのWebページのもじやデザインを
ブラウザ上(ChromeやMicrosoft Edge、Safariなど)で
読み込ませるための言語です。
有名なところでHTMLやCSSがあります。

プログラミング言語とは?

プログラミング言語とは、先ほどお伝えしたマークアップ言語で
表示されたWebページに動きをつける言語です。
例えば、Webページを開く時間帯で、挨拶文が
朝だと「おはようございます!」、昼だと「こんにちわ!」と
自動で変更されるようなものはプログラミング言語による動きです。
有名なところで、PHPやJavaScript、Rubyなどがあります。

以上を踏まえて、Webページを作るのに作業も
『プログラミングすること』と『マークアップすること』は
全然違う作業なんですね〜。
私はこの業界に入るまで、全く知りませんでした。

プログラミング言語の前にマークアップ言語から学習しよう!

私は、この1年SEとして独学や職場で勉強してきた中で、
40代主婦をはじめとするプログラミング未経験者にお伝えしたいことは
プログラミング学習よりもマークアップ言語を先にマスターするべき!

ということです。
その理由は次の3つです。

  • Web制作作業はマークアップ言語無しではプログラミング言語を活用できない。
  • プログラミング言語はマークアップ言語よりも難易度が高め
  • マークアップ言語をマスターできればフロントエンドエンジニアとして、いち早く仕事を受注できる!
Web制作作業はマークアップ言語無しではプログラミング言語を活用できない。

スマホアプリ開発では話が異なりますが、今やホームページなどの
Webサイト受注案件はニーズが高く、
Webサイトに関する仕事を行うには、ブラウザにサイトを読み込ませる
マークアップ言語の技術を取得しておかなければいけません。

プログラミング言語だけでシステムを作ろうとすると
デザイン性も乏しいものになるので、
ユーザーにとって使いにくいサイトになってしまいます

どんなに優れた検索機能や登録機能が備わっていても、
デザインがよくなきゃそのWebサイトは見ないですよね♪

プログラミング言語はマークアップ言語よりも難易度が高め

プログラミング言語は、マークアップ言語よりも難易度が高めです。
私はJavaの資格としてOracle認定試験のJava Bronzeも取得しましたが
いまだにJavaを用いてプログラムを書くことはできません。
いわば、「英字新聞は英語で書かれていることはわかるけど、
どんな内容が書かれているかはわからない。」ぐらいのレベルです。
(勉強しろ!!www)

プログラミング言語は、その言語によって書き方次第では
思わぬ動きをするなど特殊な仕様をもつものもあります。
そのパターンを覚えるのにもプログラミング言語は
だいぶ時間がかかります。

まずは短時間で勉強できるマークアップ言語がおすすめです。

マークアップ言語をマスターできればフロントエンドエンジニアとして、いち早く仕事を受注できる!

また、マークアップ言語をマスターすることができれば、
Webページのデザインを整えることを専門とする
フロントエンドエンジニアとして仕事を受注することもできます。

IT化が進み、サイトのデザイン性が重視されているので、
いわゆる『映える』Webページを作ることができれば、
クラウドソーシングの案件も確保できやすくなります。

また、マークアップ言語の案件は比較的短時間で
作業が済むことも多いので、日中に細かい用事が多い主婦の方に
ピッタリの案件です。

ちなみにですが、このマークアップ言語の技術に加え、
illustratorやphotoshopでデザインも構築できるようになれば
Webデザイナーとしても活躍することができます。
Webデザイナーはそのデザインセンスが問われるため
単価が全体的に高めで、受注できれば高いものだと
1件¥50,000の収入につながるものもあります!

コンペ案件がほとんどなのが気がかりですが、
デザインや塗り絵など作画に興味のある方は
ぜひトライしてみると良いでしょう。

40代主婦でもわかるマークアップ言語と
プログラミング言語の基本的なルールは?

40代主婦に学習をおすすめしたいマークアップ言語と
それに関連するプログラミング言語を紹介します。

  • HTML
  • CSS
  • JavaScript

HTMLはページの文字を書くもの

HTMLはWebページの文字を表示させるマークアップ言語です。
今お読みいただいているこの文章もHTMLで表示されています。

HTMLの基本は始めと終わりのタグをペアにすること!

HTMLは、頭と尻尾に『タグ』と呼ばれるもので
サンドイッチのように挟むことが基本になっています。

タグとは<>で挟まれているもので、例えば下記のサンプルだと、
<html>であれば『HTMLタグ』で、『これはHTMLで書いていますよ』
という意味です。
<p>であれば『pタグ』と呼ばれ、『ここには文章が入りますよ』
という意味になります。

サンプルコード
<html lang="ja">
<head>
<title>これはサンプルだよ!</title>
</head>
<body>
<p>これはサンプルなんだよ!</p>
</body>
</html>

他にも、見出しであれば<h2>〜<h5>タグで挟んだり、
表を挿入したいときは<table>タグで表に書く値を入力したりします。

HTMLを勉強したい方は、HTMLタグボードのサイトを活用しよう!

HTMLの具体的な文法を勉強したい方は、
HTMLタグボードというサイトにたくさん掲載されているので
ぜひ参考にしてください!

HTMLだけでなく、ブログ収益化やWebサイト運営に関する
情報も提供されていますよ♪

HTMLタグボードのサイトはこちら

CSSはHTMLをドレスアップさせる支え役

CSSは、先ほどお伝えした文字を表すHTMLをおめかし(ドレスアップ)
させるマークアップ言語です

例えば、先ほど書いたサンプルコードの<p>タグの
『これはサンプルなんだよ!』という文字を
赤くしたり、もしくは太字にしたり、またはアンダーラインを引いたり
することができる言語です。

CSSの基本は『○○の△△を□□にする』!

CSSは、セレクタという要素のプロパティをどうするのか、
という順番の書き方をします

例えば、先ほど書いたサンプルコードの

<p>これはサンプルなんだよ</p>


という文のフォントの色を赤色にしたい場合、

p {font-color: red; }

という書き方をします。
頭の『p』はHTMLではタグでしたね。
この部分のことをセレクタと言います。

『font-color』の部分はプロパティと呼ばれ、
セレクタであるpタグのどの部分のことを指すのかを表します。
今回はフォントの色なので『font-color』となっていますが、
これがフォントサイズだと『font-size』になりますし、
この文字の背景であれば『background-color』となります。

最後の『red』は、プロパティの値を表しています。

CSSを勉強したい方は、CSSリファレンスのサイトを活用しよう!

CSSについても、詳しい文法はCSSリファレンスのサイトがあるので
参考にしてください

CSSリファレンスのサイトはこちら

JavaScriptはページのテキストに動きを持たせるもの

JavaScriptは今回ご紹介する中で、唯一のプログラミング言語です。
今回JavaScriptを一緒に紹介する理由は、
JavaScriptはHTML無しに使うことはできないからです。

またJavaScriptはプログラミング初心者にも易しい言語なので、
ぜひこの機会に習得してください!
ちなみに、プログラミング言語のJavaとは全く別ものですので
お間違えのないように・・・。

JavaScriptはconsole.logと変数・定数の使い方がポイント!

JavaScriptは、HTMLファイルの中の<script>タグで
動きの呼び出しを行います

<script>タグの中に直接JavaScriptで動きを書き込む方法と、
<script>タグの中に、JavaScriptだけでまとめた拡張子.jsファイルを
呼び出す方法がありますが、今回は後者の方で説明します。

例えば、HTMLで動的に今日の日付を表示させたい時、
date.jsというJavaScriptのファイルを作ったとします。

(date.js)
// 時間を変数にいれる
let date = new Date();
console.log(date);

『let』とは、都度変わる値、つまり変数を宣言する枕詞みたいなものです。
ちなみにですが、どのような状況でも変わることのない値
(例:1日=24時間など)を定義する時の枕詞は『const』になります

上のサンプルは、変数dateに今日の日付を代入しています。
また、『console.log()』というのは『かっこの中の値を表示しますよ!』
という関数です。

そして、date.htmlファイルで、先ほどのJavaScriptの
動きを呼び起こしたい時、date.htmlファイルの中で
今日の日付を表示させたい場所に、<script>タグで
先ほどのdate.jsを呼び出しします

(date.html)
<script type="text/javascript" src="date.js"></script>

<script>タグの中にある『type』というのは、その言葉通りタイプを表し
今回の例だと、『JavaScriptで書かれているよ!』ということを
差しています。
そして、『src』というのは、呼び出したいJavaScriptのファイル名です。

これをブラウザで読み込ませることにより、
今日の日付が代入されたdateという変数を表示させる
console.logという関数が組み込まれたJavaScriptファイルを
HTMLの中の<script>タグに埋め込み
そのHTMLをブラウザが読み込むと
読み込んだ日にちを表示することができるようになります。

このように、JavaScriptは変数や定数を用いて作られた動きを
HTMLで呼び出すことができるので、一緒に学んでほしい
プログラミング言語なんですね☆

JavaScriptを勉強したい方は、とほほのJavaScriptリファレンスのサイトを活用しよう!

他のJavaScriptの文法は、とほほのJavaScriptリファレンスという
サイトがあるので、ぜひ参考にされてください♪

とほほのJavaScriptリファレンスのサイトはこちら

開発環境がなくてもコードをかける方法とは?

実際にコードを書いてみたいけど、どのツールを使って
書くのかわからない!
という方は、↓の記事を参考にされてくださいね♪

パソコンが苦手な40代主婦に向いているプログラミング用ツールは? どーも、p`o`chittoです( ̄▽ ̄)♪ 40代主婦 パソコンのこと、そんなに詳しくないし苦手だけどプログラミングやってみた...

40代主婦でもカンタンに学べる学習ツールは?

これだけ長々と初めてのプログラミング学習について紹介してきましたが、
正直リファレンスサイトを最初から活用するのは、
パソコンが不慣れな40代主婦にとってちょっと至難の技かも
しれません。
そんな方のためにうってつけな学習ツールがあります!

パソコンが不慣れな方は
学習ツール『Progate』を活用しよう!

サイトURL : https://prog-8.com/

Progateは、プログラミング初心者が独学で勉強するのに適した
有名なツールです。
先ほど紹介したマークアップ言語のみならず、
様々なプログラミング言語を学ぶことができます。

豊富なラインナップ!

通常、プログラミング学習を行う際は、環境設定が必要ですが
Progateはサイト内に環境が既に構築されているので、
すぐ勉強を始められます

しかも、コンソールウィンドウで自分が書いたコードの動きを
確認できるというのが魅力ですね!

スマホアプリもありますが、コード選択式なので、
スマホ版では私はコードを覚えられませんでした。
なので、私は個人的には
ちゃんとコードを手入力できるパソコン版がおすすめです。

マークアップ言語をマスターした後、
次はどの言語を勉強したら良い?

マークアップ言語とJavaScriptをマスターしたら、
次はPHPやRubyなどWebサイト構築に便利で学びやすいものを
選ぶと良いと思います

この2つは難易度も高くなく、JavaScriptをマスターできたなら
同じように学習することができるはずです。

PHPはアフィリエイトブログの運営もできる
WordPressを編集することができますし、
Rubyは日本国内で開発された言語で、開発がしやすい言語として注目され
かつリファレンスサイトや書籍などが充実している
ので
独学でも充分に学べると思います。

まとめ

40代主婦でもできるプログラミング学習の始め方と基本的なルールについて
お伝えしてきましたがいかがでしたでしょうか?

技術者またはパソコンに詳しい人しかできないと思われがちな
プログラミングですが、難易度が易しいものから
少しずつ勉強していけば、問題なく習得できます!

わかりやすい学習ツールや無料勉強サイトもたくさんありますので
この機会にぜひチャレンジしてみてくださいね♪