10分でWeb開発の基礎からコンピュータサイエンス、エンジニアの考え方を一気に教えます

 ソフトウェアエンジニアになるとはどういうことでしょうか?
 今回は、Web開発とHTMLの基本的な紹介と、ハイレベルなコンピュータサイエンスの知識を通じ、この根本的な質問に答えたいと思います。

 この記事を読み終えた時には、

  • ソフトウェアエンジニアの考え方が身につきます
  • Web開発とは何か、およびWebコンテンツの作成におけるHTML、CSS、およびJavaScriptについて説明ができるようになります

 ということで、ソフトウェアエンジニアの考え方を身につけましょう。

準備はよろしいですか?

  

 ソフトウェアエンジニアは、プログラミング言語を使用して、コンピューターに直接「話す」ことで、システムを開発しています。そう、会話してるんです

 では、プログラミング言語とはなんでしょうか?

 プログラミングでできることははなんでしょうか?

 私たちが話す人間の言語と似てるんですかね?

 プログラマーはどのようにしてスキルを学習しているのでしょうか?

 

ソフトウェアエンジニアとは何者なのか?

 直訳するなら、ソフトウェアエンジニアは、ソフトウェアを作ったり維持したりするために、コードを作成するような人たちです。

 ソフトウェアエンジニアは、ソフトウェアを構築するためにプログラミング言語を理解する必要があります。しかし、もっと重要なのは、自分の足で「何が問題で、何をすれば、どのように、何を解決でき、誰を喜ばせられるのか」を考えることができるということです。

 多くの場合、ソフトウェアエンジニアは、既存のコードベースを維持、拡張、およびデバッグなどを行っています。 仕事で新しい言語やフレームワークを学ぶように求められることも少なくありません。 そのため、プログラミング言語に関する知識ももちろん大切ですが、ソフトウェアエンジニアが持っていなければならない最大のスキルは、複雑な問題に直面しても落ち着いていて、自分の創造性を使って(そしてオンラインリソースの助けを借りて)、その問題の解決策を見つけることです。

コンピューターとどのように会話をするのか

 コンピュータはどこにでもあります。我々のオフィスやポケットの中、車の中……。我々は、コンピュータに囲まれた生活に慣れてしまっており、それゆえに、コンピュータがどのように複雑なものなのかを忘れてしまいがちです。多くの人は、なぜコンピュータが動くのかを理解していないでしょう。

コードを作成するには3つの基本的な手順があります。

  1. 言語のルールを理解し、
  2. これらのルールに沿った一連の命令を作成し(プログラムを作成し)、
  3. コンピュータがそれらの命令を読み取れるようにします(プログラムを実行します)。

 

どのようにプログラミング言語を学べばいいのか

 初めてプログラミング言語を学習する人は、慣れてないと難しいと感じてしまうかもしれません。最初は一つのプログラミング言語の学習を進めると思いますが、人間の言語と同じように、学習するプログラミング言語が多いほど、理解も深まっていくことが実感できると思います。

 ほとんどのプログラミング言語では、主要な構成要素はキーワードと構文でできてます。
 キーワードは、あなたが何をしようとしているのかをコンピュータに伝えるものです。 たとえば、JavaScriptでは、キーワード「const」は、データをメモリに保存しようとしていることをコンピュータに通達しています。これらのキーワードはそれぞれの言語に組み込まれており、指定された処理を実行するように設計されています。
 構文は、各言語に備わっている「文法」のことですね。 語順や記号や句読点(角かっこ、セミコロン、等号など)の使用などのコマンドをどのように作成するかを示しています。

 言語(構文)のキーワードと記号を知ることにより、特定のタスクを実行する方法についてコンピューターに正確な指示を与える有効なコマンドを作成できます。
 インターネットを探せば、これらについてしっかり書かれた情報を見つけることができます。 それぞれの言語には公式のリファレンスページがあり、使用例を見ることができます。今の時代は、YouTube、StackOverflow、コーディングブログなど、他のさまざまなリソースを使用して、これらの言語の使い方や例文を学習したり、使ってみたりできるのです。

一例を出すとQiitaなどが広く利用されてますね!

どの言語を学べばいいのか

 プログラミング言語は多数あるので、文法構造、スペル、単語の意味、意図が異なる場合があります。そして、それぞれの言語には得意分野があります。それに合わせて、自分が何を開発するのかをよく考えて、開発する言語を選択しましょう。
 Web開発するなら、Javascriptが必要だな、その中でもReact、Angularというフレームワークも勉強した方がいいのか。自分が働きたい企業はどんな言語でのポジションを募集しているのかを調べ、逆戦して勉強するのも良いでしょう。AIやデータサイエンスがしたいなら、Python、R、Matlabなど。ゲームならUnity? C#? iOSならSwift?
 まず自分がなにを作りたいのかを調べる、あるいは企業がなにを使って開発しているのかを知ってください。

どこにコードを書けばいいのか?(エディターなど)

 大体はテキストエディターに直接コードを書きます。
 おすすめはVSCodeAtomSublimeとかですね。

 ただ、それだけでなく、CopePenやrepl.itのように、ブラウザに直接書いて、実行を試すということがサンドボックスもあります。サンドボックス環境は、小さなコードを記述してすぐに実行できるように設計されたWebサイトです。

どうやってコードを実行するのか

 コードを少し書いたら、実際にコンピューターに指示を送る必要があります。 このプロセスは、コードの実行または実行と呼ばれます。 コードを実行するプロセスは、言語と目的によって異なります。 たとえば、Webブラウザを使用してHTMLファイルを開けば、HTMLコードを実行できたりします。

Web開発とは?HTML、CSS、およびJavaScriptの役割とは?

 Web開発とはなんでしょうか?

 Web開発は、ソフトウェアエンジニアリングの中でも、Webページを作ることを領域とした開発になります。
 ウェブページまたはウェブアプリは、ユーザーがウェブサイトのアドレスに移動するたびに読み込まれ、ウェブブラウザ(Google Chromeなど)で実行されるコードベースです。スマホのアプリとかは一回インストールすれば使うことができますが、それとは異なります。

フロントエンドってなに?

 ウェブ上で見えているものはすべて「フロントエンド」と見なされます。 フロントエンドは、Webページまたはアプリを開いたときに表示されるものです。 コードはサーバーから読み込まれされ、Webブラウザーによって画面にレンダリングされます。
 フロントエンドは、HTML、CSS、JavaScriptの3つの言語で構成されています。HTMLを使用すると、テキスト、ヘッダー、画像、ボタン、リンクなどのコンテンツをページに配置できます。CSSはページのレイアウトを整えたり、装飾をしたりするスタイル設定ができます。これにより、コンテンツのテキストの色や背景の色を変えたりしているのはCSSです。 JavaScriptはページを動的にします。つまり、マウスのホバーまたはクリックでコンテンツを変更できるようにしたり、データを送信したり、ページにデータをレンダリングしたりできます(新しいブログ投稿の送信や、Facebookを開いたときにフィードを入力するなどですね)。

バックエンドってなに?

 バックエンドはいわゆる「舞台裏」です。つまり、サーバー、データベースなどです。バックエンドは、ブラウザで目に見えるわけではありません。フロントエンドにデータを提供するために裏で動いているんですね そのためバックエンドは、特に経験の浅い人にとっては、想像するのが少し難しいかもしれません バックエンドは、ソフトウェア開発用語では一般に「データアクセス層」または「サーバー」と呼ばれます。 ブラウザで使用および表示されるためにフロントエンドに送信されたデータとコンテンツを計算したりしてます。
 バックエンドサーバーのコードは、JavaScriptを使用しても記述できます。他にも、Ruby、Java、Pythonなどの他の多くの言語がバックエンドとして使われています。バックエンド開発に必要なデータベースロジックは、SQLやMongoDBなどのデータベース言語を利用することがよくありますので、そちらもいずれ勉強することになるかなと思います。

フレームワークってなに?

 Web開発は、フレームワークの使用に大きく依存していると言っても過言ではないでしょう。フレームワークは新しい言語ではありませんが、既存の言語へのアドオンのようなものです。言語のルールと構文がわずかに変わったりしますが、それよりも、Web開発コードを作成する際の時間と労力を大幅に節約してくれる便利なものです。
 たとえば、BootstrapのようなCSSフレームワークを使う場合、通常の(バニラ)CSSとは少し異なるルールに沿って記述する必要があります。しかし、Bootstrapを使用するとサイトのスタイル設定がはるかに簡単になったり、簡単にモバイル対応したページを作成できるため、欠点を大きく利点が上回っています。

Web開発者が直面する課題とは?

 Webで使用するソフトウェアの開発には多くの長所がありますが、短所もいくつかあります。

 例えばロード時間。ウェブサイトを開くロードが永遠に終わらなかった経験ありませんか? そのときどう思いましたか? あなたの反応はどうですか? おそらくイライラして、開くのを諦めたのではないでしょうか。
 実際、ほとんどのユーザーは、15秒以内にサイトが読み込まれない場合、サイトを離れます。接続速度はWeb開発を扱うときに克服すべき大きなハードルです。ユーザーの速度は、非常に速い(光ファイバー)から遅い(モバイル3Gまたは衛星)まで、個人のネット環境に依存しておりバラバラです。それでも、すべてのユーザーを考慮に入れるのは、Web開発者としての私たちの仕事なのです。そのため、コードの読み込み中にユーザーの関心を維持するための秘訣を学び取り入れたり、コードを小さくして簡単に読み込みができるようにする方法を学ぶ必要があります。

 ロード時間だけでなく、ブラウザの違いについても心配する必要があります。モバイルブラウザは、デスクトップ(またはラップトップ)ブラウザとは異なります。古いブラウザは新しいブラウザとは異なり、開発には固有の課題があります。サポートしてないブラウザがあることもあります。

 最後にアクセシビリティの課題。例えば、スクリーンリーダー、代替のキーボード/ナビゲーションデバイス、聴覚障害者向けのデバイス、色覚異常、視覚障害者向けのフォントサイズはすぐに浮かぶような対応ですね。 つまり、Web開発者は、多数ユーザー向けに開発することが多いので、これらのユーザーについて考えることがおざなりになりがちです。アクセシビリティを必要とする法的な問題もあるくらいです。

まとめ

WEB開発について知ることが出来ましたか?すべてを知っておく必要はないので少しでも知っておいてもらえたら嬉しいです!

https://sunabaco.com/

SUNABACOプログラミングスクールでは2カ月間で徹底的にプログラミングやデザインを学びます!
またSUNABACOの特徴でもあるのがプログラミングだけを学ぶのが目的でなく、プログラミングを使って人に価値を提供する、世の中にある困りごとをどのように解決するかを学ぶスクールです