第二回の今回は、開発環境構築と今後の執筆予定内容を掲示します☆
【学習に最適】天気予報をHTML・CSS・Javascriptだけで作る
目次
- 概要
- HTML/CSSを作成する(前編)
HTML/CSSを作成する(後編) - Javascriptを使って天気の情報を取得する
- 画像を使ってイイ感じのデザインにする
- 【応用編】地域を変更できるようにしよう
開発の流れを理解する
システムエンジニアの役割の方々は、プロジェクト全体を成功に導くため、開発環境の策定からしっかり準備をしていきます。
今回の場合であれば、どのような流れで策定していくのかを、以下に示します。
サーバーが必要か否か
【初心者向け】Ｗｅｂシステムの全容で学んだように、HTML・CSS・Javascriptは全てクライアント側で必要となるファイルです。
なので、敢えてサーバーの役割を果たすものを用意する必要はなく、フォルダにファイルを追加していくだけで開発していくことが出来ます。
もちろん、サーバーコンテナを用意して、本番環境さながらで進めてくださっても結構ですので、ご自身の力量に合わせて準備していきましょう。
シリーズ記事内では、サーバーを用意せずに開発を進めていく方針で行きます。
開発ツール(アプリ)の選定
HTML・CSSはマークアップ言語と呼ばれ、書かれているコードが読み込まれたら、そのまま表示する仕様だということは以前学びました。
また、Javascriptも、プログラミング言語ではあるものの、語尾に「スクリプト」という言葉がついている通り、コンパイル不要でブラウザに直接読み込ませることが出来ます。
(※コンパイルとは、プログラミング言語からコンピュータに読み込ませる言語に落とし込む処理を指します)
以上のことから、いずれもブラウザでファイルを読み込むだけで、表示または動作出来るわけですから、開発ツールはコードを書いて保存さえできれば良いということになります。
極端なことを言えば、メモ帳やMacのテキストエディットなどの「テキストエディタ」でも開発できるのですが、コーディングに特化した「コードエディタ」と呼ばれる開発ツールがありますので、そちらで進めていきましょう。
コードエディタにも様々なアプリがありますが、実際の開発現場でよく使用されているVSCode(Visual Studio Code)を使用していくこととします。IDEのVisual Studioとは異なるので注意してください。
Tips1
プログラミングを勉強したことがある人は、IDE(統合開発環境)じゃなくていいの？と思われた方もいらっしゃるかも知れません。
IDEにはコンパイルする機能やデバッグする機能など、今回不要の機能がたくさん入っているため動作が重く、メモリも沢山消費する傾向があるため、軽量のコードエディタが今回は適していると言えます。
Tips2
コードエディタは何が便利なのか？
例えば、VSCodeには「自動補完機能」と呼ばれる機能が標準搭載されています。
開発環境を準備する
VSCodeのインストール
VSCodeのインストールは、以下のサイトが分かりやすいかと思います。
Mac版もあるので、別のインストール解説サイトを参考に導入してみてください。
インストールが終わったら、VSCodeの「拡張機能」から"japanese"と検索し、日本語化を行っておきましょう。
開発用のプロジェクトフォルダを作成する
デスクトップやドキュメントフォルダなどどこでも構いませんので、ご自身で管理のしやすい場所に、今回作成する天気予報サイトのプロジェクトフォルダを作成してください。
そして、作成したプロジェクトフォルダをVSCodeで開きましょう。
VSCodeでプロジェクトフォルダを開くには、下図の2通りの方法があります。
フォルダを開く為のダイアログが起動するので、作成したプロジェクトフォルダを選択し、「フォルダの選択」ボタンを押下します。
下図のようにプロジェクトフォルダをVSCodeで開くことができれば準備完了です。
次回以降の記事では、このプロジェクトフォルダ内にHTMLなどのファイルを追加していくことになりますので、覚えておきましょう。
執筆予告
執筆計画を、今までのも含めてリストにして掲示させていただきます。
次回はその③「HTML/CSSを作成する」です。お楽しみに
【学習に最適】天気予報をHTML・CSS・Javascriptだけで作る
目次
- 概要
- HTML/CSSを作成する(前編)
HTML/CSSを作成する(後編) - Javascriptを使って天気の情報を取得する
- 画像を使ってイイ感じのデザインにする
- 【応用編】地域を変更できるようにしよう