デザイナーでも「プログラミングを知らないからそれを考慮した設計ができない。」のようにプログラミングを知っておきた事があると思います。
そんな方のために、プログラミングの入門レベルからご理解いただけるようまとめていきます。
使用言語はJavaScriptを使って解説します。
プログラミング入門の実践をあたって学習に必要な環境の準備について解説します。
テキストエディタ
学習にあたって、テキストエディタをインストールしておいてください。
テキストエディタには以下のエディタが有名です。
- Visual Studio Code
- Sublime Text
- Atom
- Notepad++
- Brackets.
特にVisual Studio Codeが情報も多く使いやすいです。
NodeJSインストール
Node.jsをインストールするには、以下の手順を実行します。
- Node.js公式サイト(https://nodejs.org)にアクセスします。
- “Download”ボタンをクリックして、使用するOSに合ったインストーラをダウンロードします。
- ダウンロードしたインストーラを実行して、Node.jsをインストールします。
- コマンドプロンプトまたはターミナルを開いて、 “node -v” コマンドを実行して、Node.jsが正常にインストールされていることを確認します。
Node.jsは、JavaScriptをサーバーサイドで実行するための技術を提供します。
ブラウザー上で動かす場合はNodeJSが無くても学習できますが、スマホアプリやデスクトップアプリの開発にも関わってきますので、学習しておくと選択肢が広がります。
HTML上でJavaScriptで実行
HTMLページに簡単なJavaScriptを実行するには以下の手順を実行します。
- HTMLページに<script>タグを追加します。
- <script>タグ内にJavaScriptコードを記述します。
- HTMLページをブラウザで開きます。
例: JavaScriptの”alert”関数を使用して、ポップアップメッセージ “Hello, JavaScript!”を表示します。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script>
alert("Hello, JavaScript!");
</script>
</head>
<body>
<h1>初めてのJS</h1>
</body>
</html>
NodeJSでJavaScriptを実行
Node.jsで簡単なJavaScriptファイル（.js）を実行するには以下の手順を実行します。
JavaScriptの”console.log”関数を使用して、文字列 “Hello, Node.js!”を出力します。
- テキストエディタでファイルを作成します。(例: sample.js)
- 以下のようなJavaScriptコードを記述します。
console.log("Hello, Node.js!");- 作成したJavaScriptファイルを保存します。
- コマンドプロンプトまたはターミナルで、保存したJavaScriptファイルを指定して “node”コマンドを実行します。
$ node sample.js
Hello, Node.js!まとめ
今回は、学習のための準備をしてきました。
次回から具体的な文法などを解説などを解説していきたいと思います。
