未経験者がどうやったらプログラムを書けるようになるのか？このソースコード翻訳辞書があると便利

↓記事は下にあります↓

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

また、skiblog.netは、Amazonアソシエイトとして適格販売により収入を得ています。

滑り方の種類から学ぶ

＊現在執筆中です。投稿したらXで報告します。なお、スキー検定と一般の滑り方、競技は技術的な部分が違います。そういった違いも解説していきます。

上級者向け

スキー検定１発合格上達方法＆アルペンスキー競技で１桁順位なるまでにやってきた練習方法

カテゴリーで見る：アルペンスキー　１級　２級　夏のアルペンスキートレーニング

稼ぐブログ資産の作り方。個人からスキー場、プロアスリートの集客方法・収益化解説

hide

２０代、３０代でもできなかったアラフィフおっさんがなぜ今プログラムができるようになったかを解説してます。結論、外国語と一緒で簡単辞書を作ってしまうとソースの意味が理解でき、書けるようになっていきます。

目次閉じる

プログラミング未経験のアラフィフおじさんが、どのようにプログラムを書けるようになったか？を解説
- プログラミングは何から覚えればいいか？それは「HTML」と私が断言する理由
- HTMLが覚えやすいのは「体」に例えてるから、理解しやすい構造
web系プログラムソースコード翻訳辞書

プログラミング未経験のアラフィフおじさんが、どのようにプログラムを書けるようになったか？を解説

こんな経験ありません？

VSコードやブラウザ、メモ帳からソースコード見たけど、暗号のようなものでプログラムの意味がさっぱりわからないという人
プログラミングの本買ったけど、プログラム書けないという人
プログラムに挑戦してるけど、スペルミスなどで全然公開まで進めない人
難しすぎて挫折した人

これ、全部私が２０年間で経験してきたことです。

ではなぜ、脳が退化し始めてるアラフィフのおっさんがプログラムを書けるようになってきたのか？

答えは簡単で

hide

外国語と一緒で辞書を先に作ってしまい、ソースコードの上部から翻訳しちゃう

というやり方で一気にHTMLがある程度書けるレベルまでいきました。

英語と一緒で、英語が喋れなくても、辞書があれば単語の意味が理解できますよね？

それと同じ要領で、辞書を作ったのです。（それが下記にあります）

しかも、2023年以降はAIがコードを一気に書いてくれるので、あとは間違ってないかこちらで修正するだけで良いのです。

プログラミングは何から覚えればいいか？それは「HTML」と私が断言する理由

学校では最近「Python」を教えるのが標準になってますが、それはパイソンのコードが普通の会話に近いからなんですよね。（下記に比較あり）

ですが、個人的にはHTMLの方がホームページで公開できるので、「完成」までのスピードが速いのでお勧めしてます。

ホームページとブログの違いは何？とよく聞かれますが、ホームページとはHTMLまたはJavaScriptと連動して動き、ブログはPHPやCSSなど記事部分とデザインの役割がハッキリ分かれてるのが特徴です。（HTMLもファイル別に分けるけど）ちなみに今見てるスキー場情報ブログはワードプレスで表示してますが、ページの自動生成する仕組みをJavaで作り、クラウド側のボットデータをワードプレス側に反映させる仕組みをこの記事を書いてる時点で製作中です。(botにSEO対策やAIOさせるビジネスモデルです）

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>シンプルなHTMLページ</title>
</head>
<body>
    <h1>こんにちは、HTMLの世界へ！</h1>
    <p>これはHTMLの基本的な構造を示すサンプルです。</p>
</body>
</html>

ちなみにパイソンの初心者向けコードだとこんな感じになります。

Python

# これはコメントです。プログラムの実行には影響しません。
# コードの説明やメモを書くのに使います。

# 変数に値を代入する
message = "こんにちは、Pythonの世界へ！"
number = 123

# 関数を定義する
def greet(name):
    """
    指定された名前に挨拶をする関数です。
    """
    print(f"こんにちは、{name}さん！")

# 定義した関数を呼び出す
greet("ユーザー")

# 条件分岐（もし〜ならば）
if number > 100:
    print("numberは100より大きいです。")
else:
    print("numberは100以下です。")

# 繰り返し処理（〜を繰り返す）
for i in range(3): # 0から2まで繰り返す
    print(f"繰り返し処理 {i}回目")

# 変数の値を出力する
print(message)
print(f"現在のnumberの値は {number} です。")

パイソンのコードの多くは日本語で指令してますよね。

マイクロソフトのワードやGoogleのドキュメントに近い感じでプログラムを実行できます。

ちなみに私が最初にホームページをローカル環境で作ったのは大学の情報処理の時間にワードで作ったのが最初です。その後ホームページビルダー、ワードプレスで初期はクラシックエディタでHTML手打ち、現在はワードプレスをグーテンベルグで書いて、PythonやJavaでwebサービスのシステム開発をしてます。

アプリケーションなどのいわゆる「ソフト」を作りたい人は別の言語を知る必要がありますが、ホームページをまず公開したいという人は上記のHTMLをコピペするだけでいきなり表示するので、HTMLがおすすめなのです。

HTMLが覚えやすいのは「体」に例えてるから、理解しやすい構造

もう１度HTMLソースを見て欲しいのですが、HTMLは体をイメージした構造になってます。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>シンプルなHTMLページ</title>
</head>
<body>
    <h1>こんにちは、HTMLの世界へ！</h1>
    <p>これはHTMLの基本的な構造を示すサンプルです。</p>
</body>
</html>

１番上に最初の指示であるドックタイプを書き、上からヘッド（頭）、ボディ（体）という順番です。

頭にはGoogleなどの検索エンジンに対し、どんなサイトかの概要を伝えるMETAタグといった要素を入れたりします。そして記事などのコンテンツ部分をボディタグに記述するという仕組みです。

この基本構造を知っていれば、あとは上からソースを1つ1つ見ていけば、

テーブル（表のコード）
箇条書き
アイキャッチ画像

などを覚えるだけなのです。

そしてプログラムの意味をざっくり辞書というか、下記の翻訳本でプログラムを見ていくと構造を理解しやすくなります。

ただ、正しくソースコードを理解するためにもプログラミング初心者向けの本は言語ごとに持っておいた方が良いので、

ざっくりとしたソースの意味を知りたい人は下記の一覧表を見て他人のサイトやサービス、システムを勉強しつつ
より細かい書き方は専門書

という使い分けをするとプログラミングがより楽しくなるはずです。

脆弱性の問題とかもありますが、ローカル環境や誰もアクセスしない新規サイトでいろんなwebサービスを公開してみて、プログラムがきちんと動くかどうかを確認していくと、

「プログラム動いた！」

という感動で次々新たな作品を作りたくなるはずです。

まずは上記のコードをコピペするだけでいいので、HTMLでWebページをローカル環境で表示するかテストしてみたり、できるだけ短いコードで公開までしてみましょう。

小さな成功体験の積み重ねがプログラムを深く理解していく手助けになるはずです。

web系プログラムソースコード翻訳辞書

以下は各プログラミング言語の翻訳辞書です。

さっと知りたい時、覚えたい時に便利な私がノート代わりにまとめたものです。

【HTML】よく使うタグまとめ（初心者向け）

タグ	読み方	役割	コード例
`<html>`	エイチティーエムエル	HTML文書の始まりと終わり	`<html>〜</html>`
`<head>`	ヘッド	情報（タイトルや文字コードなど）	`<head><title>ページ名</title></head>`
`<body>`	ボディ	実際に画面に表示する内容	`<body>こんにちは</body>`
`<h1>〜<h6>`	エイチ1〜6	見出し（1が一番大きい）	`<h1>タイトル</h1>`
`<p>`	ピー	段落	`<p>これは文章です。</p>`
`<a>`	エー	リンクを貼る	`<a href="https://example.com">サイトへ</a>`
`<img>`	イメージ	画像を表示する	`<img src="image.jpg" alt="説明">`
`<br>`	ブレーク	改行	`行1<br>行2`
`<hr>`	ホリゾンタルライン	横の線を引く	`<hr>`
`<ul>`, `<ol>`, `<li>`	リスト	箇条書き（ul）や番号付き（ol）	`<ul><li>りんご</li></ul>`
`<table>`	テーブル	表を作る	`<table><tr><td>データ</td></tr></table>`
`<form>`	フォーム	入力欄・送信ボタンなど	`<form><input type="text"></form>`
`<input>`	インプット	テキスト入力	`<input type="text" name="name">`
`<textarea>`	テキストエリア	長い文章入力欄	`<textarea rows="4"></textarea>`
`<select><option>`	セレクト・オプション	プルダウンメニュー	`<select><option>選択肢</option></select>`
`<label>`	ラベル	入力欄の説明	`<label for="name">名前：</label>`
`<button>`	ボタン	クリックできるボタン	`<button>送信</button>`
`<style>`	スタイル	CSSを直接書く	`<style>p { color: red; }</style>`
`<script>`	スクリプト	JavaScriptを書く	`<script>console.log('OK');</script>`
`<details><summary>`	ディテール・サマリー	開閉式の説明枠	`<details><summary>説明</summary>内容</details>`
`<div>`	ディブ	ブロックでグループ化	`<div>かたまり</div>`
`<span>`	スパン	一部の文字をまとめる	`<span style="color:red;">赤文字</span>`
`<iframe>`	アイフレーム	他のサイトを表示	`<iframe src="https://example.com"></iframe>`

【CSS】よく使うスタイル（初心者向け）

プロパティ	意味	コード例
`color`	文字の色を変える	`p { color: red; }`
`background-color`	背景色を変える	`body { background-color: yellow; }`
`font-size`	文字の大きさ	`h1 { font-size: 24px; }`
`text-align`	文字の位置（左・右・中央）	`p { text-align: center; }`
`margin`	外の余白	`div { margin: 10px; }`
`padding`	中の余白	`div { padding: 20px; }`
`border`	枠線をつける	`img { border: 1px solid black; }`
`width`, `height`	幅・高さ	`img { width: 100px; height: auto; }`
`display`	表示のしかた	`span { display: block; }`
`position`	配置のルール	`div { position: relative; }`
`flex`（+ display）	横並びなどの整列	`div { display: flex; }`

【Python】よく使う文法（やさしい例）

内容	説明	コード例
出力	文字を出す	`print("こんにちは")`
変数	値を入れる箱	`name = "さとし"`
コメント	メモ書き	`# これはコメントです`
if文	条件でわける	`if age >= 18: print("大人です")`
for文	繰り返す	`for i in range(3): print(i)`
リスト	値をまとめる	`fruits = ["りんご", "バナナ"]`
関数	処理をまとめる	`def say_hello(): print("こんにちは")`

【PHP】よく使う文法（初心者向け）

内容	説明	コード例
出力	文字を表示する	`System.out.println("こんにちは");`
クラス	Javaの基本単位	`public class Main { }`
mainメソッド	実行の開始地点	`public static void main(String[] args) { }`
変数	データを入れる箱	`int age = 18;`
if文	条件でわける	`if (age >= 20) { System.out.println("大人");}`
for文	繰り返す	`for (int i = 0; i < 3; i++) { System.out.println(i);}`
コメント	メモ	`// コメントです`