HTML、CSS、JavaScript、PHPを学んで、ウェブサイトの“義務教育を修了”することが、エンジニアになる第一歩です。

それぞれがウェブサイトを作る時にどう機能しているかを見てみましょう。

すべての基礎、HTML

HTMLとは、「HyperText Markup Language」つまりマークアップするためのプログラミング言語です。インターネット上のかなりの数のウェブサイトはHTML形式で作成され、ほとんどすべてと言っても過言ではありません。マークアップとは印付け、目印を付けることです。文章を書くと、私たち人間にはどれがタイトルでどれが本文かがある程度分かります。しかし、コンピューターにはすべてが同じ文字列に見え、そのままウェブサイトを作るとすべて同じように表示されてしまいます。

そこで、タグで囲んで「どれがタイトルで、どれが本文か」などを、コンピューターにも分かるように意味づけしていきます。これがマークアップであり、HTMLはその一つのルールを一定に設定したマークアップ言語です。

例えば、

などの“文法”があります。

これらの文法、いわばルールに則ってウェブページを製作することで、狙い通りの配置で文字を表示させてページを仕上げていきます。加えて、情報を整理することでGoogle検索の上位に表示させるSEO対策にもなります。HTMLでタイトルや各見出し、段落をしっかりと整理することで、Googleのアルゴリズムが「このウェブサイトはしっかりと整理されている＝上位に優先して表示する価値がある」と判断してくれるようになります。HTMLはウェブサイトを作る基本システムでありながら、工夫次第で検索結果にも影響を与える要素を持っています。ちなみに、HTMLはマークアップ言語であり、プログラミング言語ではありません。

HTMLが文書の構造を指示するコンピューター用の言語であるのに対し、PHPやJavaScriptはコンピューターに計算させるための言語です。関数や配列を計算させることで、様々な情報を簡単に表示したり、便利に保管できるよう仕組みを操るのがプログラミング言語です。HTMLの場合、文字の大きさや配列を指定できても、そこから複雑な情報表示が出来ず、またウェブサイトをデザインするにも制限が発生します。そこで、PHPやJavaScriptなどのプログラミング言語を使って数列を計算させ、CSSなどのスタイルシートを使ってウェブサイトを綺麗にデザインしていきます。

HTMLは、現在改訂版5版となる「HTML5」まで出ており、より簡単に動画や音声を埋め込んだり、ウェブ上のアプリケーションを作れるようになったり、文字列を書きやすくなったりなどの改善点があります。

CSSはデザインに必要

先ほども触れたように、CSS「Cascading Style Sheets」、つまりスタイルシートです。HTMLと組み合わせて使用されることがほとんどで、ウェブサイトのデザインを担当する“言語”です。ところで、HTMLだけでも文字に変化を付けられるのではなかったでしょうか？その通りです。しかし、HTMLですべての文字列を書きウェブサイトを仕上げてしまうと、コンピューターは見栄えの制御と本来の文章列を混同し、狙い通りにページを表示できません。問題はコンピューターがこちらの意図を理解しないことにあり、はっきりと狙い通りにウェブサイトを作るにはCSSで分かりやすく区別する、という作業が必要になります。

JavaScriptとPHPでより複雑な機能を

これに対し、JavaScriptやPHPはプログラミング言語です。私たちが使うサーバーと、ウェブサイトの情報が保管されているサーバーとのやり取りをスムーズにし、設計通りにウェブサイトが表示されるようにします。

例えば、

つまり、HTMLベースでウェブサイトを作成していても、簡単にPHPを埋め込んでその機能を使えます。まとめると、

これらの言語は、プログラマーやエンジニアにとっていわば“義務教育”で学んでおくべきもので、初心者がウェブエンジニアになる時に最初に学ぶ基礎です。

投稿 HTML/CSS/JavaScript/PHPはウェブ屋にとって義務教育 は 現職エンジニアが選ぶプログラミングスクール｜学んでおいてほしいこと に最初に表示されました。

JavaScript/PHP/MySQL/Apache/Nginxを学ぶことは、ウェブサイトのほとんど全部の機能を理解するのに必要です。

これらを学んでおくと、様々な機能を持ったウェブサイトを自分で作ったり、問題があればそれを見つけて修正したり、などの作業がこなせるようになります。

JavaScript/PHPの役割

ウェブサイトを閲覧する際に、ページ上部に常時更新される広告や、地図を組み込んだページ、3Dグラフィックのアニメーションなどを目にします。これらをウェブサイトに表示させようとすると、HTMLとCSSで文章とそのデザインを設計する以上のシステムが必要になります。それがJavaScriptです。JavaScriptがあれば、ウェブサイトに単に文章を表示させるだけでなく、上記のような複雑な機能を搭載できます。JavaScriptはほとんどすべてのブラウザで動くため、JavaScriptでウェブサイトを作っておけば、パソコンやスマートフォンなどあらゆる端末に対応するウェブサイトを作り出せます。

加えて、アクセスする側（＝フロントエンド）にもウェブサイトを提供する側（＝サーバーサイド）にも対応し、JavaScript一つでウェブサイトの大抵の機能をカバー出来てしまいます。ただし、ブラウザの種類によって動作が変わってしまうのが欠点です。マイクロソフトの「Internet Explorer」とアップルの「Safari」で同じページを表示させているのに、配置やデザインが変わってしまうことがあります。

これに対し、PHPは、サーバーサイドのプログラミング言語です。これも、インターネットを利用したサービスや、ウェブサイト上の各機能やアプリを構成するために使われます。「お問い合わせフォーム」や「メールアドレス・パスワード入力欄」などは、PHPを使用して作成されています。入力した内容の送信や、合否結果の表示などもPHPのおかげです。例えば、有名なSNSアプリ「Twitter」で何かをつぶやいたとき、送信画面から送られた内容を企業側（この場合はTwitter社）のサーバーに保存します。普段利用するインターネットの様々な機能を支えるPHPも、初心者向けのプログラミング言語です。自由度が高く、比較的動かしやすいためです。

実に、世界の3分の1のウェブサイトを作るのに使用されていると言われるオンラインツール「WordPress」もPHPを使用しているため、PHPを扱えるとウェブサイト製作において基本的な技術全般を身に付けられます。しかし、PHPはサーバーサイドで情報を処理するため、サーバー側にPHPがインストールされていることが前提です。

MySQLは何のため？

サーバーには、ウェブサイトの情報が沢山保管されています。上記で触れたWordPressは、そのデータの集まり＝データベースにアクセスするプログラムの一例です。WordPressはそのための専用のプログラムであり、

しかし、データベースがきちんと“整理整頓”されていなければ、データの読み書きが満足に行えません。そこで必要なのが、データベースを管理するシステム＝MySQL（マイ・エスキューエル）です。MySQLがあれば、パソコンからの大量のデータの読み書き＝アクセスに耐えることができます。しかも無料であるため、かなりの数の大企業が自社のホームページ運営に使用しています。

Apache/Nginxも必要になる理由

サーバーそのものは、閲覧するウェブサイトの情報が保管されたパソコンです。パソコンを使ってウェブサイトを見るとき、使っているブラウザから「これこれのページのデータ（HTMLファイル）を送れ」という指示が、そのデータを保管しているコンピューターに飛んでいきます。これに対して、そのコンピューターは指示されたウェブサイトの文書や画像などのデータを送信します。ブラウザは、受け取ったHTMLファイルを見やすくデザインされたウェブサイトとして表示します。この、ブラウザから指示を受け取るパソコンの事をサーバーと呼びます。

データを保管してウェブサイトを表示させるため、企業のパソコン専用室に設置されたさぞ特別なものかと思いきや、サーバーそのものは普通のパソコンと同じです。サーバーが特別なのは、サーバー用のソフトによります。このソフトのおかげで、そのパソコンはウェブサーバーとして機能するようになります。このソフトたちがApache（アパッチ）やNingx（エンジンエックス）です。この2つはライバル関係にありますが、どちらもサーバーを動かすソフトです。世界中で使用されており、この2つが世界中のほぼすべてのサーバーを動かしています。

これらすべてを合わせて一通り学んでおくと、環境構築して一通りの機能を付けたウェブサイトを作成したり、DOM操作でウェブサイトを作っているコード全体を理解し、編集できるようになります。ちなみに、DOMとは「HTMLなどのウェブサイトの“材料”なる言語を、JavaScriptなどのプログラミング言語で“料理”するための仕組み」です。

投稿 JavaScript/PHP/MySQL/Apache/Nginxは合わせて学ばせたい言語 は 現職エンジニアが選ぶプログラミングスクール｜学んでおいてほしいこと に最初に表示されました。

Pythonは、世界中で最もよく使用されるプログラミング言語の一つです。Pythonを使ってできる作業や開発は非常に多く、世界中で仕事を受注できる可能性も秘めています。

Pythonが好まれるのは何故か？をご紹介します。

Pythonとは

Pythonは、プログラミング言語の一つです。JavaScriptやPHPと同じ仲間ということになりますが、PHPなどと同じ「サーバーサイドのプログラミング言語」という特徴があります。ウェブサイトのデータを実行し、様々な機能を付けて実際に使えるようにするのがプログラミング言語の役割ですが、Pythonには「読みやすく、書きやすい」という特徴があります。複雑で難解なはずのプログラミング言語が、（比較的）読みやすく書きやすいようになっているため、“言語”として勉強しやすい、ということです。

プログラムを動かすための“素材”となる英語の羅列＝コードを書くための“調理法”＝文法が、他のプログラミング言語に比べてシンプルです。同じことを書くのに何通りもの文法が存在する訳ではないため、プロが書いても素人が比較的読みやすく、素人がプロをまねてプログラミングするのも容易になります。これを実現するのが、

です。

Pythonが使いやすい理由

インデントとは「入れ子構造」のことです。マトリョーシカのように、大きな入れ物に小さな入れ物が順番に入る構造を指します。ウェブサイトを作成する際、メインタイトルや見出しを作成していくことになりますが、その文章をウェブサイトとしてきちんと表示させるために書くコードを改行して“階層”を作っていきます。階層で分けることで、どのコードがどれなのかが分かるようになります。例えば、本を読んでいる場面を想像してください。タイトルも見出しも本文もキャプションも、すべて同じ位置で同じように書き出されると詠みにくいはずです。そこで、

などの工夫をすることで、ページ全体が読みやすくなります。これが言わば入れ子構造で、位置を調整するシステムがインデントです。Pythonのこの機能によって、複雑で難解なコードが、改行位置によって「どこに何が書いてあるか」を見やすくされているため、初心者でも学びやすいということになります。

次に、オブジェクトが直感的に使えることを考えてみましょう。オブジェクトを直訳すると、「物体、物」です。例えば、2人の人が買い物かごを持っています。この買い物かごがオブジェクトです。2人がどんなものをかごに入れるか、買うのに迷って何を取り出すかはそれぞれ違いますが、何を出し入れしようと2人の買い物かごは変わりません。つまり、システムの仕組みを共通化させ、そこに当てはめるものを変えることで様々な機能を生み出します。Pythonの場合、このオブジェクトがより直感的に使えるため、複雑なシステムでもより簡単に作成できます。初心者でも難しいプログラミングに挑戦したり、仕組みを学んだりするのに向いています。他にも、Pythonは・計算処理やデータ分析に強いという特徴があります。

Pythonが秘めた可能性は無限大

そんなPythonで出来ることは多岐に渡ります。様々な機能を持たせたウェブアプリケーションの開発が比較的簡単に行えるため、多くの有名なWebアプリケーションが開発されてきました。

スマートフォンやパソコンで欠かせないアプリケーションは、実はPythonによって作られました。その意味で、Pythonは何でも出来るプログラミング言語です。上記の「計算処理やデータ分析に強い」というアドバンテージを生かして、人工知能の開発や深層学習にも使用されます。近年開発が盛んに行われている人工知能ですが、簡単に言えば「コンピューターにデータを集め、溜まったデータから一定の知見や予測を引き出したり、データを機械的に分類させること」の高度な応用です。非常に複雑にシステムを構築することで、現在では車の自動運転や旅館での宿泊客案内などが実現しています。その集まったデータを処理するシステムとして好まれているのがPythonです。

Pythonは、機械学習で必要となる様々な機能やプログラムが初めから組み込まれており、しかもその種類が充実しています。そのため、人工知能を開発していくうえで作業効率が上がり、補助的なシステムをたくさん導入せずとも色んな作業をこなし、開発を進めることが可能です。Pythonの欠点を挙げるとすれば、日本では開発に使用されるケースが少ないため、Webアプリケーションやサービスの開発エンジニアの求人が少ないことでしょう。

投稿 Pythonを動かせれば世界が少し広がります は 現職エンジニアが選ぶプログラミングスクール｜学んでおいてほしいこと に最初に表示されました。

ウェブサイトを作成する最新の言語がHTML5とCSS3です。どちらも、ウェブサイトをモバイルフレンドリーにしてより多くのユーザーに見てもらうのに欠かせません。

HTML5とCSS3で出来ることを見てみましょう。

そもそもHTMLとCSSとは

HTMLとは、「Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）」の略称で、要するにウェブサイトの材料となるデータです。これに対し、CSSは「Cascading Style Sheets(カスケーディング・スタイルシート)」と言い、HTMLを装飾したりデザインするのに必要な材料です。コンピューターにウェブサイトとして表示させるには、そのためのデータをサーバーから送信する必要があります。

サーバーは、私たちが使用しているコンピューター側からその“お願い”を受け取り、指示されたウェブサイトのデータを送り返して“返事”します。そうして、ようやくコンピューターにウェブサイトの情報が届くわけですが、そのままではHTMLで書かれたアルファベットの文字列に過ぎず、読みやすい文字や綺麗なデザインなどは皆無です。そこで、ブラウザを使用してそのデータを表示します。ブラウザでは、ウェブサイトのデータが設計されたデザインで表示されるため、HTMLとCSSで必要とするコードを書き、それをサーバーに保存しておきます。

HTML5は何が違うか

HTML5は、HTMLの第5版、つまりバージョン5です。ウェブサイトの材料となるデータが第5版まで新しくなっているため、その分機能性や利便性が向上しているという訳です。HTML5 では、動画や音声の埋め込みが簡単になりました。今や、動きのないウェブサイトは比較的少ないぐらいで、ほとんどの企業は読みやすく機能的ながらも、動きがあって印象に残るウェブサイトを制作します。HTML5以前のHTMLでは、JavaScriptやPHP、FlashPlayerなどのHTML以外のプログラムも併用しなければ、動画や音声をウェブサイト上で表示できませんでした。特に、FlashPlayerはセキュリティーの脆弱性が強く指摘されているため、他のプログラムを使ってさらに複雑な設計をしなければ、必要とする機能を装備出来なかったのです。

しかし、HTML5では動画や音声用のタグがあるため、そこに各種データを放り込み、ブラウザの基本的な機能だけで動画や音声を扱えます。ちょうど、お店に入るとBGMが聞こえてくるのと同じで、お店で音楽を流すのにプロのバンドに演奏を頼む必要はなくなりました。そもそも、HTML5では書く文字構造がシンプルです。今までは、タグで文章が埋め尽くされ、HTMLを扱うエンジニアにとっても複雑で分かりにくいものになりがちでした。書かなければならないコードが多くなると、設計ミスも多くなります。

HTML5では、同じような機能やデザインを持ったウェブサイトを設計する際でも、より少なくシンプルな文字列で表現できます。簡単なJavaScriptを書くだけで、位置情報を取得したり、Cookieよりも容易に　データをクライアント側に保管させたり等の作業が簡単に行えます。入力項目の書式のチェックや必須の項目を作成するのも、JavaScriptを使わずに装備出来ます。必要とされる記述も省略・簡略化されているため、実際にHTMLを書いても間違えにくく、つづり間違いなども減らせます。HTML5ではアプリケーションの開発もでき、iOSやAndroid用のアプリケーションも、HTML5で書いたコードをベースに作成できます。

CSSの新たな機能

CSSの最新版がCSS3ということになりますが、CSS2に様々な機能や仕様を加えたのがCSS3です。そのため、CSS2以前のカスタムシートと互換性があり、書き直さなくてもCSS3の新しい機能を装備できます。例えば、文字や画像に影を付ける場合、以前は画像を加工する必要がありました。しかし、CSS3ではtext-shadowプロパティや、ボックスに影を付けるbox-shadowプロパティを使用することで、CSSだけで影の演出ができます。画像やボックスの角を丸めるのも、画像の加工ではなくborder-radiusプロパティを使用すれば、ブラウザ上で角の丸い枠が表示されます。

他にも、

などの機能が追加されています。これらは、往来のCSSでは装備出来なかった機能です。その他の仕様やコードの書き方は、往来のCSSと同じです。つまり、ある部分をCSS2.1の書き方で書いて、実装したい機能をCSS3で書いたとしても機能します。CSS3とはいえ全てが新しくなったわけではなく、機能や仕様が追加されただけだからです。しかも、CSS3の互換性を活用すれば、HTML4.01などの古い形式のHTMLにも、CSS3の最新の機能を実装できます。

すでに、一部の機能はCSS4としての開発や策定が進んでいますが、これも古いバージョンのブラウザやHTMLでも使用できます。最新の機能に対応していなければ表示されませんが、その最新の機能だけが無視されるため、CSS全体を書き直す必要がないので効率的です。

投稿 HTML5/CSS3最新のプログラミングで新しい世界を拓く は 現職エンジニアが選ぶプログラミングスクール｜学んでおいてほしいこと に最初に表示されました。

主にiOS向けのアプリを開発するのに使用されるSwiftとObjectiveCですが、どちらもプログラミング言語として興味深い特徴を持っています。

将来性が期待されるSwiftと、いまだに根強い人気を誇るObjectiveC。それぞれの特徴を簡単に見てみましょう。

Swiftとは

主にiOS向けのネイティブアプリを開発するのに使用される言語がSwiftです。Apple社が開発したこのプログラミング言語は、名前に負けない処理速度の速さと使いやすさが特徴です。Swiftを動かすには、XCodeというApple社のソフトが必要です。そのため、Swiftは実質Appleユーザー向けのプログラミング言語ということになります。実は、Swiftが開発される以前は、長らくObjectiveCが使われてきました。

しかし、ObjectiveCは他のプログラミング言語に比べると難解で、学習コストもそれなりにかかることから、エンジニアには不評を買ってきた言語でした。それに代わるべく開発されたのがSwiftです。Swiftは、ObjectiveCに比べると、

このように、SwiftはiOS用のアプリを開発するにはうってつけのプログラミング言語ですが、強いて言えばそれがデメリットとなります。JavaScriptやRubyのようにマルチな使い方ができる言語ではないため、Swiftのみを扱うエンジニアは汎用性がなくなります。加えて、SwiftはいまだにABI（互換性に関する規約やインターフェイス）が安定せず、下位互換性を切り捨てるアップデートが続けられてきました。そのため、旧言語であるはずのObjectiveCからの移行に踏み切れない開発者も少なくありません。しかし、総合的に見ると、SwiftはiOS向けのアプリ開発に欠かせない言語です。

ObjectiveCとは

前述のように、ObjectiveCは、Swiftが開発されるまでiOS向けのアプリ開発に主力として使用されていたプログラミング言語です。しかし、Swiftに互換性があることから、現在でも開発にある程度使用されています。ObjectiveCを使いこなすには、C言語とオブジェクト指向プログラミングについての深い知識が必要とされるため、独特の記述法は物議をかもしてきたものの（関数の定義や呼び出し方が異なる等）、熟練のプログラマーにはそれだけ習得しがいのある言語です。

しかし、残念ながらObjectiveCの今後の需要は減っていくと見られています。前述のSwiftの登場により、より簡単で書きやすい他の言語という選択肢があるからです。しかし、今後減っていく需要に伴い、エンジニアの数も減っていくため、扱える人口も少なくなっていきます。そういった需要を拾うことはできるため、現在ObjectiveCを扱う方や、以前に扱った経験のある方は、いざという時のスキルとして役立ってくれるでしょう。ObjectiveCと比べて、Swiftの方が読みにくいというエンジニアや、いまだにコンパイルできないといった意見も散見されますが、世界的に見てSwiftが強くなっていっているのは明らかです。

SwiftとObjectiveCの違い

・セミコロン「；」がなくても改行できるSwiftでは、ObjectiveCのようにセミコロンを行末に入れなくても動作します。コンパイラが自動で改行を認識してくれるからです。複数行に渡る文は改行がないことも判断します。もちろん、for文などセミコロンを必要とする文を書く際は必要です。

・Optionail Typeの利便性Swiftでは、変数の値に仮挿入する空データ「nil」を代入できません。これを代入するにはOptional Typeを使う必要があります。ObjectiveCでは、nilを代入する場合はJavaScriptのように複雑な文を書く必要がなく、エラーが発生せずに簡単に受け取れます。

しかし、これによりObjectiveCで書いたプログラムは潜在的なリスクを抱えることになり、何らかの条件が発生した時に初めてエラーとなります。つまり、

となります。ひと手間かかるため一見面倒な仕様ですが、エラー発生のリスクを抑えるのに優れた機能です。

投稿 Swift/ObjectiveCでiPhoneアプリも開発できる は 現職エンジニアが選ぶプログラミングスクール｜学んでおいてほしいこと に最初に表示されました。