ウェブインターフェースの作成：どこから始めるか

ウェブインターフェースの内訳を示した上で、21世紀のウェブデザイナーになるために必要な重要なコンセプト、ツール、ビルディングブロックを指摘します...。

レンガやモルタル以上に、コンピュータコードとピクセルが21世紀の経済の基盤となっているのです。ブラウザで「ページのソースコード」や「開発者ツール」を見たことがある人は、ごちゃごちゃしたテキストに出会って、これがWebページを動かしているんだなあと思ったことがあるのではないでしょうか。

ウェブ開発者は、ウェブページのバックエンドではなく、グラフィカル・ユーザー・インターフェース（GUI）を総称してフロントエンドと呼んでいます。フロントエンドは、ユーザーが操作し、使用し、作業するためのものです。バックエンドは、フロントエンドが意味するすべての情報とタスクを格納し、サポートするインフラストラクチャと考えることができます。

今回は、フロントエンドについてご紹介します。フロントエンドの違いや特徴を理解できるように領域をマッピングし、魅力的でインタラクティブなWebページを作成するために、Web開発者のツールを理解し、使い始める方法を紹介します。

ウェブデザインとフロントエンド開発

大きな組織では、設計や開発は、さまざまなスキルを持ったプロフェッショナルがチームを組んで行う作業です。デザイナーは具体的なビジュアルデザインやインタラクションデザインを作成し、フロントエンド開発者はそれを実装します。

しかし、個人の場合は、開発に興味があるからといって、デザインのビジョンがないわけではありませんし、その逆もまた然りです。Webの基本的な技術やデザインの原理を少しでも知っていれば、あなたのキャリアやビジネスに大きなプラスになるはずです。

フロントエンドの開発は、多かれ少なかれコーディング作業となります。さらに重要なことは、半分以上デザイン思考であるということです。多くのコンセプトは、印刷生産の世界から来ています。なぜなら、そのコードが他のウェブプログラミング言語（その多くはバックエンドにあります）よりも複雑でなく、寛容で、基礎知識を必要としない場合、コンピュータコードを使用するからです。

Webフロントエンド：マークアップ、スタイルシート、プログラミング言語

Webページの多くは、HTML（Hypertext Markup Language）、CSS（Cascading Style Sheets）、JS（JavaScript）という3つの技術を使って構築されている。

HTMLなどのマークアップ言語では、タグを使って文書をマークアップします。タグは、文書の意味的な内容と構造を定義します。
CSSは、ページコンポジター（プリンターで印刷するための最終的な画像を作成するもの）の印刷スタイル指示の流れをくむスタイルシート言語で、Webでは通常、タイポグラフィーやレイアウトなどのコンテンツ表現、グラフィックの配置を示す。
最初の2つとは異なり、JavaScriptはプログラミング言語である。jsはインタラクションとユーザー入力を扱い、ユーザーが生成するイベントに関係する。さらに付け加えれば、イベントドリブンのパラダイムとは対照的に、プログラミングの実行はユーザーの入力に依存しない。

html形式

HTMLは20年以上前から存在していますが、その中心的な目的は変わりません。読者が必要とするテキストと、文書を解析するために必要な構造を分離することです。

必要な理由

なぜHTMLは今でも重要なのか？簡単に言えば、HTMLはコンテンツのセマンティクスが存在する場所なのです。検索エンジンのスパイダーやスクリーンリーダーなどの機械読み上げに必要なものです。時を経て、意味論と構造論を区別することの関連性は、時代とともに薄れるどころか、ますます高まっている。HTMLの最新版（5）では、意味や構造を明確にするために、 , , , などのタグが導入されています。これは、人間と機械の両方の読者にメリットがあります。

html 要素の解剖学

HTMLの要素は、少なくとも開始タグと終了タグのペアで、それぞれを<括弧>でシアン色に囲んだもので、以下の段落タグのようなものです。要素は下のマゼンタのような属性を取ることができます。例えば「class」は、その要素をHTMLやJSが影響を与えられるグループのメンバーにします。style属性の内容は下の赤で示されており、要素に対して一回限りのCSSルールを作成する方法として効果的なものです。(CSSは、後述するように、サイトやページレベルで記述するのが最適です)。

このマーカーを使った結果

これはプレーンな段落テキストです。

エクストラクレジット（上級）

あらゆる種類の開発者が、実行の速さに魅了されています。そのために、言語そのものを最適化し、読みやすい行を書いたり、作成したりする速度を上げるという。これは構文的なアイシングとして知られている。HTMLのコミュニティでは、そのような取り組みがいくつかなされている。

初めて使うことを想定して、なぜ開発者中心のショートカットを使うのか？よりシンプルなマークアップでモノを作ることで、表現よりも意図にフォーカスし、標準に照らし合わせて検証することができます。簡略化されたマークアップで生成されたソースファイルは、有効なHTMLにコンパイルされるか、コンパイラが特定の行番号でエラーを投げるかのどちらかです。タグのスープ」の中で足りない括弧を探すより、こちらの方が勉強になるかもしれません。どちらも、HTMLに変換するための中間ソフトが必要です（結局、これは追加単位なのですが）。

Haml (HTML Abstract Markup Language) は、Ruby (以前にも丁寧に書きました) のコンパイルに必要な
Jade [remove broken URL] | node.jsが必要です (イントロダクションはこちら) compile
Slim はコンパイルするために Ruby を必要とします (上記のとおり)

CSSフォーマット

CSSは、意味的なコンテンツと文書表現を別々に保存することを可能にし、レイアウト、色、タイポグラフィーなどのスタイル的な特徴を異なる文書に移植し適用することを可能にします。コンテンツとビジュアルデザインを分離することで、開発者はより柔軟で一貫性のあるビジュアルデザインを手に入れることができます。

必要な理由

粗雑なウェブサイトは、見た目も悪いし、魅力もない。CSSは可読性が高いとはいえ、レイアウトをサポートするため、視覚情報階層の要となるものです。例えば、以下の画像は、CSSを適用していないmakeuseof.comのウェブサイトの現在のトップナビゲーションメニューを部分的に示しています。

なお、スタイルのないメニューは、ブラウザのデフォルトスタイルであるため、タイポグラフィとカラーを除き、縦長となります。1990年代のインターネットを再現しようとは思わないでしょうから、真の実力を発揮するためには、健康的で一貫したCSSの知識が必要でしょう。さらに、iphoneやタブレットなどのさまざまなサイズや接続デバイスの増加により、Webページをさまざまな画面サイズに適応させる「レスポンシブデザイン」も重要なスキルの1つになっています。これはすべてCSSで実現されています。

CSSルールプロファイリング

CSSのルールは、a) 要素にインラインで記述する、b) HTML文書のマークアップにセクションを設ける、c) スタイルシートなど別のスタイルシートに記述する、の3つの場所のいずれかに記述される。

理想的には、スタイルは複数のページで参照される可能性のある別々のスタイルシートに記述される。同じルールを使うことで、作者は時間を節約し、より整理された一貫性のあるビジュアル表現を作成することができます。(インラインスタイルは、ページスタイルでさえも、ウェブサイトの構成要素を形成するのに役立ちません。そのため、特定のニーズを満たすために控えめに使用するのが最善です)。

CSSのルールは、以下の緑色で書かれたセレクタで始まります。この場合、ルールのセレクタは p となります。段落の場合：ルールは段落要素に適用されます。ルールは{curly brackets}で囲まれ、<pointed brackets>ではありません。この場合、ルールは段落のテキストを通常のフォントで作成します。

CSSのルールは、今回紹介したものよりも複雑になることがあります。そのため、提出時間という点では、CSSはHTMLよりも習得に時間がかかると予想されます。

エクストラクレジット（上級）

CSSは、HTMLと同様に、より速く、より多くを達成したい人のために最適化されています。

SASS（およびSCSS）には、上記のようにRubyが必要です
Less|Node.jsが必要、同上

ジャバスクリプト言語

コーディングというと、多くの人がコンピュータに何かを指示することだと考えています。これはプログラミング言語のタスクで、フロントエンドの方程式に最後に付け加えられるものです。

プログラミング言語は、意味論、祖語、パラダイム、型規則などの抽象度によって分類されることが多い。 JavaScriptは、さまざまな目的に合わせて多くのフレームワークに拡張されているため、単純な分類を否定する。C言語ファミリーの柔軟でファジーな派生言語であり、マルチパラダイムで疎な型付きのハイブリッドカメレオンは、コーディングコンセプトでカササギを演じているのです。それは、非常に一般的な言語の非常に良い例であるか、または多くの異なるタイプの言語の非常に悪い例であるかのどちらかです。

必要な理由

なぜJavaScriptを学ぶのか？私の同僚が指摘するように、JavaScriptには賛否両論があり、特に初めて学ぶ人には難しい。現在、最も普及しているプログラミング言語であろう。コーディング王国の他の部分を理解するための強力な基礎にはなりませんが、JSやRuby、PHPを学ぶ理由は十分にあります。

とはいえ、バニラJSは行き過ぎたものではありません。今日のウェブページは、このフレームワークが担っているのです。

エクストラクレジット（上級）

JavaScriptの書き換え機能には構造的な強制力が必要であり、以下の各アイシングはその実現に役立ちます。

Coffee Script|Node.jsが必要、上記と同様。
Typescript｜Node.jsが必要、上記と同様。

どこから学ぶか

フロントエンド開発は、あらゆる種類の知識労働者にとって重要な職業スキルとして広く認識されているため、Eラーニングコースの形で多くの出発点を見つけることができます。ここでは、読者のために厳選したリストを紹介します**。

Coursera（有料） Courseraは、大学や学習機関からオンラインコースを集めている。コースの価格は50〜250ドルですが、高水準の知識と高い能力の成果を促進します。
Congress (無料) Congressは、有料の専門教育として人気があります。dashはその無料製品で、HTML/CSS/JSをカバーしています。
MakeUseOf.com ウェブサイト - Learn to Code 2017 バンドル（有料、プラグアンドプレイ）フロントエンドとバックエンドのWeb開発の範囲をカバーする10クラスの生涯アクセスは、わずか20ドルです。
Mozilla Developer Network（無料）MDNは権威あるものですが、教室形式の指導やゲーム化されたオンラインサービスよりも、ドキュメントのスタイルが強いです。
ツリーハウスのもう一つのオンラインコース（有料）、こちらはコースというより月額料金です。カレン・X・チェンがバイラルメディアに投稿した「デザイン学校に行かずにデザイナーとして就職する方法」で推薦されたものです。
Web Design Tutorials by Envato Tuts+ (無料と有料のコンテンツが同程度の品質で混在) 単発の記事で構成された複数パートのシリーズで、通常は1つのトピックに関する高品質で具体的、的を射た情報です。

はじめに

初心者がフロントエンド開発を行う際の利点は、ほとんどの場合、高価な専用ツールを必要としないことです。フロントエンド開発の最も基本的なツールは、テキストエディタとお好みのブラウザです。

GitのAtomテキストエディター、Sublime text（有料）、MicrosoftのVS codeなどのテキストエディター
Mozilla FirefoxやGoogle Chromeなどのブラウザー
ホストやローカルサーバ（XAMPPなど）を設定するのも便利ですが、この記事の範囲外です。

より便利な方法は、以下のようなウェブベースのライブエディタを使用することです。

コード Pen.io
JSbin.comのウェブサイト

ショートカット

HTML構造は概ね理解できるため、頻繁にキーワードをリセットする価値はない。CSSの場合、平均的なウェブサイトのスタイルシートは数千行に及び、純粋に手作業で書かれたモダンなスタイルはほとんどないと考えてよいだろう。インタラクティブ性という点では、さまざまな規格が登場しています。このような背景から、多くのフロントエンド開発者は、あらかじめ用意されたフレームワークをバックボーンとして使用し、必要に応じて微調整や削除、交換を行うことができます。

BootstrapはもともとTwitter社が開発したもので、現在ウェブ上で広く使われているHTML、CSS、JSのテンプレートが含まれています。bootstrapはウェブ開発の初期にほぼ世界共通言語として使われていたものです。
ファウンデーションは世界最先端のフレームワークを謳っており、小規模であることとスピードを重視しています。

標準物質

1枚-A級出版物 "**siteの人々のために"
使える - "HTML5、CSS3などに対応したテーブル"
CSS Tips - CSSコミュニティの中心であり、ベストプラクティスと互換性の知識の源です。
HTMLリビングスタンダードドキュメント - "ウェブデベロッパーのリビングスタンダード"
HTML5をお願いします - "新しいもの、輝くものを責任を持って使いましょう"
ベストマガジン - プロフェッショナル Web デザイナー＆デベロッパー

結論

このフロントエンド志向の世界をぜひ楽しんでください。このように、フロントエンド開発は多くの可能性に満ちた分野でありながら、入口も多い。習得することで、あなたのポートフォリオに素晴らしいスキルが加わり、キャリアにおける次のステップ、あるいはまったく新しい段階への移行を可能にします。

開発者：あなたのフロントエンドスタックには何がありますか？

初心者の方：他にどのような案内を入れればいいのでしょうか？

2021-03-16 05:47 に公開
閲覧 ( 20 )
分類：プログラミング