【2025新版 MFi認証】i-Phone 充電ケーブル ライトニングケーブル 0.5M/1M/2M 3本セット i-Phone 充電器 lightning ケーブル アイフォン充電ケーブル 2.4A急速充電 USB同期 高速データ転送 断線防止 超高耐久 iPhone 14/14 Pro/13/13 Pro/12/11/X/8/8plus/7/6/iPad 各種対応
￥649 (2025年5月4日 13:15 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
Logicool G ゲーミングヘッドセット G335 ゲーミング ヘッドセット G335BK 超軽量 222g 3.5mm 有線 立体音響 ステレオ 2.1ch フリップミュート マイク付き PS5 PS4 PC Switch Xbox スマホ 対応 ヘッドホン ヘッドフォン ブラック 国内正規品
￥8,060 (2025年5月4日 13:12 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
【2025正規MFi認証品】iPhone充電ケーブル USB-C to Lightningケーブル 【1M/2M 各２本】 iPhone ケーブル 20W対応 PD急速充電 タイプC ライトニング 充電ケーブル 超高耐久 高速データ同期 タイプC iPhone コード iPhone14/13/12 Pro Max/11/X/iPad/AirPods/MacBookなど各種対応
￥799 (2025年5月4日 13:15 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
はじめに
HI Engineer Collegeでは、実務未経験のエンジニアの方や、エンジニアに興味がある方を募集したおります、まずはお気軽にお問い合わせください。
※ (株)G&T（【内々定まで最短2週間】ゼロからしっかりじっくり研修☆20代活躍中！）
※ HI Engineer Collegeに興味あがある方はこちら（プログラミングを学習したい方）
JavaScript フロントエンド開発入門 – 簡単Todoアプリを作ろう (全5回)
第1回：開発の準備とJavaScriptの基本
フロントエンド開発の世界へようこそ！このチュートリアルでは、JavaScriptを使ってブラウザ上で動く簡単なTodoアプリを作りながら、フロントエンド開発の基本的な考え方やコーディングの楽しさを学んでいきます。
「プログラミングは初めて」「JavaScriptって聞いたことはあるけどよくわからない」という方も大丈夫。ひとつずつ丁寧に解説していきます。
フロントエンド開発とは？
WebサイトやWebアプリケーションは、大きく分けて「フロントエンド」と「バックエンド」から成り立っています。
- フロントエンド: 私たちが普段ブラウザで見ている部分です。ボタンをクリックしたり、文字を入力したりといった、ユーザーが直接触れるインターフェースを担当します。HTML、CSS、JavaScriptといった技術が使われます。
- バックエンド: サーバー側で動く部分です。データの保存や処理、フロントエンドからの要求に応じたデータの送信などを行います。Ruby, Python, PHP, Node.jsなど様々な言語が使われます。
このチュートリアルで学ぶのは、主にフロントエンドの中でも「JavaScript」を使った部分です。JavaScriptは、Webページに動きやインタラクティブな要素を追加するために不可欠な言語です。
開発環境を準備しよう
フロントエンド開発を始めるために必要なものは、ほとんどの場合、皆さんのコンピューターにすでに入っているものです。
- テキストエディタ: コードを書くためのソフトです。Windowsならメモ帳、Macならテキストエディットでも書けますが、コードを書くのに便利な機能（コードの色分け表示など）がついた専門のエディタを使うのがおすすめです。無料で高機能なものでは、VS Code (Visual Studio Code) が人気です。
- Webブラウザ: 作成したWebページを表示・確認するためのソフトです。Google Chrome, Firefox, Safari, Edgeなど、普段お使いのものでOKです。特にGoogle Chromeには、開発に役立つ強力な「開発者ツール」が備わっています。
- 開発者ツール: ブラウザに内蔵されている機能で、Webページの構造を見たり、JavaScriptの実行結果を確認したり、エラーを探したりするのに非常に便利です。このチュートリアルでも頻繁に使います。
今回は、これらのツールを使って開発を進めます。もしテキストエディタをお持ちでない場合は、VS Codeをインストールしておくと良いでしょう。
最初のWebページを作成する
まずは、開発の準備として基本的なHTMLファイルとJavaScriptファイルを作成し、ブラウザで表示させてみましょう。
以下の手順でファイルを作成してください。
- 作業用のフォルダをコンピューターの好きな場所に作成します。（例:
todo_app） - 作成したフォルダの中に、以下の2つのファイルを作成します。
index.html ファイルに以下のコードを記述します。
lang="ja">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
コードの解説:
-
: このドキュメントがHTML5であることを宣言しています。 -
: HTMLドキュメントの開始を表します。lang="ja"は日本語のページであることを示します。 -
: ドキュメントのメタ情報（ブラウザには直接表示されない情報）を記述する部分です。-
: 文字コードを指定しています。これで日本語が正しく表示されます。 -
: スマートフォンなど様々なデバイスで適切に表示するための設定です。 -
はじめてのTodoアプリ
-
-
: ブラウザに実際に表示される内容を記述する部分です。-
: 見出しを表示します。 -
: ここが重要です。作成したscript.jsファイルを読み込んでいます。これにより、このHTMLファイル上でJavaScriptのコードが実行できるようになります。通常、JavaScriptの読み込みはタグの直前に行うことが多いです。
-
次に、script.js ファイルに以下の簡単なコードを記述します。
console.log("JavaScriptが読み込まれました！");
alert("こんにちは！");
コードの解説:
-
console.log("...");: これはJavaScriptのコードを実行した際に、ブラウザの開発者ツールの「Console（コンソール）」タブにメッセージを表示するための命令です。プログラミング学習において、変数の中身を確認したり、コードがどこまで実行されているかを確認したりするのに非常によく使います。 -
alert("...");: これはブラウザに小さな警告ダイアログを表示するための命令です。
これらのファイルが保存できたら、index.html ファイルをWebブラウザ（Google Chromeなど）で開いてみてください。
ブラウザに「こんにちは！」というダイアログが表示され、OKをクリックすると「私のTodoリスト」という見出しが表示されるはずです。
さらに、ブラウザの開発者ツールを開いてみましょう。（Google Chromeの場合、F12キーを押すか、右クリックメニューから「検証」や「要素を検証」を選びます。）そして、「Console（コンソール）」タブを見てみてください。
そこには「JavaScriptが読み込まれました！」というメッセージが表示されているはずです。これは、記述したJavaScriptのコードが正しく実行されたことを示しています。
まとめ
今回は、フロントエンド開発の概要と、開発に必要な最低限の環境準備、そしてHTMLファイルとJavaScriptファイルを連携させて簡単なコードを実行する方法を学びました。
- フロントエンドはユーザーが直接触れる部分を担当する
- コードを書くにはテキストエディタ、表示にはブラウザが必要
- ブラウザの開発者ツールは開発の強い味方
- HTMLから
タグを使ってJavaScriptファイルを読み込む -
console.log()でコンソールにメッセージを表示できる -
alert()でダイアログを表示できる
これで、JavaScriptを使ってWebページに動きを加える準備ができました。次回は、Todoアプリの見た目（HTMLとCSS）と、JavaScriptから画面の要素を操作する方法について学んでいきます。
お疲れ様でした！
次回予告: 第2回では、TodoアプリのHTML構造を作成し、CSSで見た目を整えます。そして、JavaScriptからこれらのHTML要素を取得・操作する方法について解説します。
Source link
Views: 2
