はじめまして、「teratail」というエンジニア特化型Q&AサイトのDevRelを担当している、外部ライターの木下です。エンジニア向けのサービスの運営をしていますが、僕自身はエンジニアではありません。趣味でプログラミングをやっている、週末エンジニアです。大学時代は刈り上げ・ヒゲ・アフロで路上で踊ってました。
本題に入ります。
この連載では、「エンジニアではないけど、Webプログラミングやってみたい！」「何かつくってみたい！ でも……なんか難しそうだし、何やってるかよく分かんないな……」なんて思っている方が、「ちょっとだけコードが書けて何か作れるようになったよ！」ってなることを目標に書いています。この連載を通じて、一人でもプログラミングする人が増えればうれしいです。
なお、この記事を書いている木下はプロのエンジニアではないので、技術について雰囲気や感覚で理解しているところも多々あります。ですので技術に関する説明が一部ニュアンスが違ったり、厳密には表現や解釈が正しくなかったりするかもしれません。
その代わり非エンジニアの視点からでも理解できるよう丁寧に細かく書いていこうと思いますので、お付き合いいただけると幸いです。また、体系的に学ぶことよりも「作ること」に重点を置いています。もし体系的にWebプログラミングの知識を身につけたいなら、下記記事に紹介されているサイトが参考になると思います。
動画やスライド資料で学ぶ！Web制作・プログラミング学習サイトまとめ
きょうへい
今回のゴール
今回は、本当にWebプログラミングのはじめの、はじめの、はじめの一歩です。
まずは上にある画像のように、ブラウザに日本語を表示させるってところをやってみて、「ブラウザって何やってるんだろう？」というところを理解する、「HTMLのはじめのはじめの一歩」を体験していただければと思います。
ブラウザって何をしているの？？
ブラウザといえば、Google ChromeやSafari、 Firefox、InternetExplorerなどいろいろありますが、そもそも「ブラウザ」って何なんでしょうね？ 何ができるんでしょう？
検索ができる？
ん〜なんか違います……。分かるようでよく分からないので、ひとまず手を動かしてその感覚つかんでみましょう。
ブラウザの役割を探っていこう：ブラウザに文字を表示させてみる
まず、Windowsの人は「メモ帳」を、Macの人はアプリケーションフォルダにある「テキストエディット」から作業ができます。ただ、本当はメモ帳よりも、テキストエディタ「Sublime Text」がオススメです。下記ページよりダウンロードができます。
Sublime Textについての詳細はこちらにあります。 “恋に落ちるエディタ”「Sublime Text」 完全入門ガイド！
王
メモ帳やSublime Textを開いたら、下記のようにアルファベットで「Who am I !?」と書いてみましょう。
Who am I !?そして、ファイル名を「profile.html」にして保存しましょう。保存先はどこでも問題ないので、今回はひとまずデスクトップに保存します。
そしてブラウザを開き、今つくった「profile.html」をドラッグ&ドロップしてみてください。
すると、上のようにブラウザに「Who am I !?」と表示されたはずです。
このようにブラウザは 「『●●.html』というファイルに書いてある文字を読んで、画面に表示する」というのがもっとも基本的な役割なのです。こう考えるとなんかブラウザの印象変わってきますよね？
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
