#3 プログラミングをやろう！と思ってこれまでにしてきたこと①

40代。これから趣味を見つける人の為のブログ

（伊達ログ）

profile

challenge

news

gallery

プログラミングをやろう！と思ってこれまでにしてきたこと

プログラミングを始めたい！でも、何から学習していいか分からない。っていう人いませんか？

学習には順序があり、とても大切なことだよ。

是非その順序を教えてください。

プログラミングを1から始める人におすすめしたいのは、まず「HTML」と「CSS」から学ぶことです。
これらはウェブサイトを作るための基本的な技術で、プログラミングに必要な「構造」と「デザイン」を理解するのに最適です。
HTMLはウェブページの構造を作り、CSSはその見た目を整える役割を果たします。
文法もシンプルで、初心者でもすぐに成果が目に見える形で確認できるため、達成感を得やすいです。
さらに、HTMLとCSSを学ぶことで、ウェブ開発の基礎が理解でき、その後のプログラミング学習にも役立ちます。
JavaScriptなどのプログラミング言語を学ぶ前に、まずはウェブの仕組みを知り、自分でページを作れるようになることで、プログラミングの楽しさを実感できるでしょう。

HTML

HTMLの学習では、基本的なタグの使い方を中心に学びました。
具体的には、見出しタグ（<h1>など）、段落タグ（<p>）、リンクタグ（<a>）、画像タグ（<img>）、リストタグ（<ul>や<ol>）などを使って、ウェブページの構造を作る方法を習得しました。
また、フォームタグを使って、入力フィールドやボタンの設置方法も学びました。
これにより、シンプルなウェブページを作成するための基本スキルを身につけました。
Progateでの学習は、視覚的で分かりやすく、コードを実際に書きながら進められる点が非常に良かったです。
各レッスンが段階的に進んでいくため、初心者でも挫折することなく、基礎を確実に理解できるように作られていると感じました。
実際に手を動かすことで、学んだ知識が定着しやすく、楽しく学習を進めることができました。

CSS

CSSの学習では、ウェブページのデザインやレイアウトの方法を学びました。
具体的には、テキストや背景の色を変えるcolorやbackground-color、文字の大きさを調整するfont-size、余白やパディングを設定するmarginやpadding、要素の位置を調整するpositionやfloatなどのプロパティを使いこなす方法を習得しました。
また、レスポンシブデザインを意識して、flexboxやgridの基本的な使い方も学びました。
Progateでの学習は非常にわかりやすく、実際にコードを書きながら進められるため、理解が深まりました。
視覚的に変化が見えるのも楽しく、各レッスンが段階的に進むため、初心者でも無理なく学べる構成が良かったです。
CSSの多様なスタイルやレイアウトの調整が、自分の手で実現できるようになることで、ウェブデザインの楽しさを実感しました。

早くも挫折

HTMLとCSSで挫折してしまう原因は、初心者にとって予想外の障壁になることが多いです。
以下に、主な挫折の原因3つと、その対策について説明します。

即座に目に見える成果が得られない

HTMLとCSSの学習を始めると、最初は基本的なタグやスタイルを覚えることで簡単にウェブページを作成できます。しかし、より複雑なデザインやレイアウトを実現しようとすると、予想以上に細かい調整が必要になり、思い通りにいかないことが多くなります。例えば、レイアウトのズレや、ブラウザごとの表示の違いに悩まされることがあり、その結果として「思ったほど簡単ではない」と感じて挫折してしまう人が多いです。

対策：

初心者はまず、複雑なレイアウトやデザインに挑戦する前に、小さな成功体験を積むことが大切です。例えば、単純なページの作成や基本的なCSSスタイルを適用することで、少しずつ成果を確認しながら進めると、挫折しにくくなります。また、CSSフレームワーク（BootstrapやTailwind CSSなど）を活用すると、複雑なデザインを早く実現でき、モチベーションを保ちやすくなります。さらに、最初は1つのブラウザに絞って学習することで、ブラウザ間の違いに悩むことを避けられます。

CSSの「思考方法」が難しい

HTMLは比較的直感的に理解しやすいですが、CSSは特有の「スタイルを適用する」ための思考が必要です。特に、CSSの「ボックスモデル」や「フロート」、「ポジショニング」などの概念は初心者にとって理解が難しく、思い通りにレイアウトを組むことができないことがあります。また、複数のCSSプロパティがどのように組み合わさって表示に影響するのかが理解できないと、期待通りの結果が得られずに挫折することもあります。

対策：

CSSの理解を深めるためには、視覚的なツールやリソースを活用すると効果的です。例えば、CSSプロパティを実際に入力すると即座に結果が反映される「CodePen」や「JSFiddle」などのオンラインエディタを使うと、変更がどのように影響を与えるのかを視覚的に確認しやすくなります。また、「ボックスモデル」や「フレックスボックス」、「グリッドレイアウト」などの基本的な概念を一つ一つ丁寧に学び、理解を深めることが重要です。これには、ブラウザの開発者ツールを使って、実際のウェブページのCSSを確認しながら学ぶ方法も効果的です。

計画の立て方や進め方が分からない

HTMLとCSSを学び始めると、基本的なタグやスタイルの使い方を理解する段階はスムーズに進むことが多いですが、その次に「何を作ればいいのか」「どう進めればいいのか」が分からなくなって挫折することがあります。特に、明確なプロジェクトやゴールが設定されていないと、進捗が感じられずにモチベーションが下がり、学習を続けることが難しくなることがあります。

対策：

学習を計画的に進めるためには、小さなプロジェクトを設定し、ステップバイステップで進めることが重要です。例えば、最初はシンプルな自己紹介ページや、ポートフォリオサイトを作成することから始めると良いでしょう。その際に、HTMLとCSSでどの部分を実装するのかを細かく分け、各ステップごとに進捗を確認しながら進めることで、目標を明確に保ちながら学習が進められます。また、既存のウェブサイトの模倣を行うことも効果的です。実際に使用されているサイトのデザインを再現することで、学んだ知識を実践的に応用するスキルが身につきます。

さらに、オンラインコースや学習プラットフォームを活用することで、体系的な学習が可能です。これにより、何を学ぶべきかが明確になり、次にどのステップに進むべきかが分かるため、迷いが少なくなり挫折しにくくなります。

まとめると、HTMLとCSSで挫折する原因としては、「成果がすぐに見えにくい」、「CSSの概念の理解が難しい」、「計画の立て方が分からない」といった点が挙げられます。これらを克服するためには、小さな成功体験を積み重ねることや、視覚的なツールを活用して学びやすい環境を整えることが重要です。また、適切な目標設定と計画的な学習を行うことで、挫折しにくい学習プロセスを築くことができます。

これから

今後の学習として、JavaScriptやPHPについて学んでいきます。JavaScriptは、ウェブページに動きやインタラクティブな要素を追加できるプログラミング言語で、クリックやスクロールに応じた動作を実現することができます。また、フロントエンドだけでなく、Node.jsを使えばサーバーサイドでも活用できるため、幅広い応用が可能です。

一方、PHPは主にサーバーサイドで動作し、データベースとの連携やフォームの処理など、ウェブサイトの裏側の動きを担当します。WordPressや多くのウェブアプリケーションで利用されているため、ウェブ開発において重要なスキルです。JavaScriptとPHPを組み合わせて学ぶことで、フロントエンドからバックエンドまで、より多機能なウェブサイトやアプリケーションを作成できるようになることを目指しています。