デイトラ卒業課題　遂に完成　その感想

この記事では、デイトラのWEB制作コースを受講した現在の状況と、その間にどのような勉強をしてきたかを詳しくまとめています。

私はプログラミング未経験で、デイトラを始める前はプログラミングに関する知識は全くありませんでした。このコースを受講することで、本当にプログラミングができるようになるのかを自分自身で検証し、その過程を発信しています。

デイトラのWEB制作コースを通じて、未経験からどのようにしてプログラミングができるようになったのか、その具体的な道のりを詳細にお伝えします。

現在デイトラWeb制作コースで月に５万円稼ぐためにプログラミングを勉強中です。

この記事を書いたのはこんな人

• IT業界未経験でプログラミング初めてみた
• プログラミングスクールに入って稼げるか試してみた
• ブラック企業の社畜奴隷

こんにちは、ヒカルです。

現在はデイトラweb制作コース上級の卒業課題に取り組んでいますが遂に完成しました。その結果と感想をまとめていきます。

制作物　コーポレートサイトのWordpress

デイトラweb制作コース上級の卒業課題を作成するプロジェクトでは、Figmaというデザインツールを使用してワイヤーフレームが用意されています。このワイヤーフレームは、サイトのレイアウトやコンテンツの配置、ナビゲーションなどの基本的な構造を示しています。

まず、このワイヤーフレームを元にHTML、CSS、JavaScriptを使用して静的なサイトを構築します。HTMLを使ってサイトの構造を作り、CSSを使ってデザインやスタイルを適用し、JavaScriptを使ってインタラクティブな要素や動きを実装します。この段階では、サイトの見た目や動作を確認しながら、必要に応じて修正や調整を行います。

次に、静的なサイトをWordPressに組み込んでいきます。WordPressテーマを作成し、HTMLやCSSで作成した静的なコンテンツをWordPressのテンプレートファイルに組み込んでいきます。また、WordPressの機能やプラグインを活用して、動的な要素や管理画面からのコンテンツの編集・更新を実現します。これにより、サイトの管理や運用が容易になります。

このように、Figmaで作成されたワイヤーフレームを元にして、HTML、CSS、JavaScriptで静的なサイトを構築し、その後WordPressに組み込んで動的なサイトにしていきます。

こちらが今回制作したデイトラweb制作コース上級の卒業課題です。

web制作コース上級の卒業課題

かかった時間

HTML、CSS、JavaScriptの組み込みには約3週間かかりました。この期間は、Figmaで提供されたワイヤーフレームをもとに、サイトの基本的なレイアウトやデザインを実装する作業を含んでいます。具体的には、以下のような作業が含まれます。

1. HTMLの作成：Figmaで提供されたデザインをもとに、HTMLファイルを作成し、サイトの構造を定義しました。これには、ページのセクションや要素、ナビゲーションなどを含みます。
2. CSSのスタイリング：HTMLに基づいて、CSSファイルを使用してサイトの見た目をデザインしました。色、フォント、レイアウトなどのスタイルを適用し、サイトの外観を整えました。
3. JavaScriptの実装：必要に応じて、JavaScriptを使用してサイトにインタラクティブな要素や動作を追加しました。たとえば、ハンバーガーメニューのトグル、スクロールアニメーション、フォームのバリデーションなどです。

ここまでで大体3週間くらい

次に、WordPressの導入と組み込みには約2週間かかりました。これは、静的なサイトをWordPressに統合し、動的な機能や管理機能を追加する作業を含んでいます。

1. WordPressのセットアップ：ローカル環境やホスティングサーバーにWordPressをセットアップしました。WordPressのバージョン選択、言語設定、データベースの設定などを行いました。
2. テーマの選択とカスタマイズ：WordPressテーマを選択し、必要に応じてカスタマイズしました。テーマのカスタマイズには、ロゴやカラースキームの変更、ウィジェットの設定、カスタムページテンプレートの作成などが含まれます。
3. コンテンツの移行と設定：静的なサイトで作成したコンテンツをWordPressに移行し、必要に応じてページや投稿を設定しました。メニューの設定、サイドバーやフッターのウィジェットの追加なども行いました。
4. プラグインの追加と設定：必要に応じてWordPressプラグインを追加し、機能を拡張しました。SEO、セキュリティ、フォーム、ギャラリーなどのプラグインを使用し、サイトの機能性や利便性を向上させました。

以上が、HTML、CSS、JavaScriptの組み込みとWordPressの導入にかかった詳細な作業内容です。

WordPress導入は2週間くらい

デイトラweb制作コース上級卒業課題をやる前にやっておいた方がいいこと

勉強したコードをメモ

コードをメモしておくことは非常に重要です。特に、よく使うコードや解決策をメモしておくと、将来同じような問題に遭遇した際に時間を節約できます。以下は、コードをメモしておくためのいくつかの方法です。

1. ノートアプリ: ノートアプリ（例えば、Notion、Evernote、OneNoteなど）を使用して、コードの断片や解決策をまとめておきます。カテゴリごとに整理し、タグやキーワードで検索できるようにしておくと便利です。
2. コード管理ツール: コード管理ツール（例えば、GitHub Gist、CodePen、JSFiddleなど）を使用して、コードのスニペットを保存します。公開するか非公開にするかを選択できるため、必要に応じて他の人と共有することもできます。
3. ローカルファイル: コードスニペットをテキストファイルやMarkdownファイルとしてローカルに保存しておく方法もあります。これらのファイルをプロジェクトごとに整理し、必要なときに参照できるようにします。
4. ブックマーク: よく使うコードのドキュメントや解説記事をブックマークしておくと便利です。ブラウザのブックマーク機能や、ブックマーク管理ツールを活用しましょう。

これらの方法を使ってコードをメモしておくと、開発中や問題解決の際に便利です。また、定期的にメモを整理し、必要な情報に素早くアクセスできるようにしておきましょう。

CSS設計の基礎勉強

CSS設計の勉強は、ウェブ開発において非常に重要です。良いCSS設計を行うことで、プロジェクト全体のメンテナンス性や可読性が向上し、効率的な開発が可能になります。以下に、CSS設計を勉強する上で重要なポイントを詳しく説明します。

1. CSS設計パターンの理解: CSS設計にはいくつかの一般的なパターンがあります。例えば、BEM（Block Element Modifier）、SMACSS（Scalable and Modular Architecture for CSS）、OOCSS（Object-Oriented CSS）などです。これらのパターンを理解し、どのような場面でどのパターンを使うべきかを学びます。
2. クラスの命名規則: クラスの命名規則を適切に設定することは非常に重要です。わかりやすく、一貫性があり、意味のある名前を付けることで、他の開発者や自分自身が後でコードを理解しやすくなります。BEMのような命名規則を学び、適切なクラス名を付ける習慣を身につけましょう。
3. ファイルの構造化: 大規模なプロジェクトでは、CSSファイルを適切に構造化することが重要です。モジュールごとにファイルを分割し、必要に応じてファイルを結合する方法を学びます。これにより、ファイルの管理が容易になり、スタイルの一貫性を保つことができます。
4. リセットCSSやベーススタイルの利用: ブラウザごとの差異を吸収するために、リセットCSSやベーススタイルを利用することが一般的です。これにより、ブラウザのデフォルトスタイルが無効化され、より一貫した表示が実現されます。また、プロジェクトに応じてカスタマイズすることも可能です。
5. フレームワークやライブラリの理解: 一般的なCSSフレームワークやライブラリ（例えば、BootstrapやTailwind CSS）を理解し、効果的に活用する方法を学びます。これらのツールは、一般的なUIパターンやレスポンシブデザインの実装を助けてくれます。

これらのポイントを理解し、実践を通じてスキルを磨いていくことが重要です。また、学んだ内容やコードをノートにまとめておくことで、後で簡単に参照できるようにしておきましょう。