web-dev-qa-db-ja.com

バックエンド開発の経験のみがある場合、フロントエンド開発（js、html、css）にはどのようにすればよいですか？

現在、私は「フルスタック」開発者（役職上のアプリケーション開発者）として会社でインターンをしており、フロントエンドタスクへの対応に困難を感じています。これは、新しいフロントエンド機能の実装を任されているときに特に当てはまり、フロントエンドの開発哲学と構造にこだわるのに苦労しているように見えます（魔法のように感じられる場合、HTMLとJavaScriptがどのように連携しているかは正確にはわかりません。 Angular.jsを追加すると、バックエンド（静的型付き言語（Java、C＃）があり、すべてがどのように定義されているかを確認する方法を見つけることができ、コードを簡単にたどることができます）に比べてさらに奇妙になります）。

注* RESTカーテンの後のすべてとしてバックエンドを定義し、RESTカーテンの前にすべてとしてフロントエンドを実行するコードとして、 Webブラウザ用。

これまで、私の仕事とインターンシップはすべて、バックエンドのコード、サーバー、データベース、ファイルを扱ってきました。ハッカソンでは、チームメイトがフロントエンドのコーディングを行う間、私は特に自分でバックエンドアーキテクチャを行います。

そうは言っても、バックエンドの経験だけでフロントエンドの開発に取り掛かるのに最適なアプローチは何でしょうか？言語固有、javascriptとangularjsがHTMLでどのように機能するかを理解するための最良の方法は何ですか？これらの言語をトラバースしてすべてがどのように接続されているかを見つけるにはどうすればよいですか？

この質問の根拠は、Javascript、HTML、CSSとその派生物がどのように機能するかを理解し、それがどのように機能し、どのようにトラバース/プログラミングするかを理解できるようにする方法を探すことです。私はWebコースで基本的なJS構文を理解していますが、それがWebデザインにどのように統合されているかはわかりません。

javascriptweb-developmentangularjs
4
zerogeneration

どのようにしてバックエンド開発者になったのですか？当時は非常によく似ていたはずです。それでもあなたはそれを管理しました。フロントエンドについても同じことをすると思います。

これが私があなたの学習を提案する方法です：

  1. 最初にhtmlを理解してください。それは非常に簡単で迅速なはずです。
  2. CSSを学ぶ。マスターしないでください。そのプロパティのmajorityに慣れます（習得しなくても問題ありませんflexbox存在することがわかっている限り））all CSS3セレクタータイプ（すべてのタイプでどのように機能するかを正確に知っている必要があります）
  3. ＃1と＃2で少し遊ぶ
  4. DOMを学び、JavaScriptがどのように機能し、相互作用するかを理解する
  5. JQueryと非同期通信を学ぶ-Ajax
  6. プロトタイプでOOPのようにJavaScriptを徹底的に学ぶ
  7. angularを学ぶ。

最終的にはすべてが適切に配置され、理解できるはずです。

4
Robert Koritnik

私はおそらく基本的なHTMLとCSSから始めます。
プログラミング方法をすでに知っている場合は、難しくありません。
まず、HTML、CSS、JavaScriptを使用して個人プロジェクトを作成します。
jsに慣れてきたらjQueryに進んでください。
問題は、同時に多くを達成しようとしていることだと思います。

そうは言っても、今日はオンラインで基本的なフロントエンドを学ぶための多くのリソースがあります。

4
taesu

簡単な答えは、Angularの優れた本を読んで、もう一度読んでから、コーディングを練習することです。とはいえ、UIを使用したことがない場合は、すべてをまとめるのに役立ついくつかの基本的な概念情報が欠落している可能性があるため、興味深い挑戦になる可能性があります。

以下では、HTMLタグとは何か、フォーム要素がどのように機能するかを理解していることを前提としています。そうしないと、これは長い道のりになるでしょう。

データバインディング、または「犬を自動的にヒールする方法」

次のHTMLについて考えてみます。

<span id="name"></span>

あなたはサーバースペシャリストなので、XMLやJSONなどのコンテンツをクライアントに提供するだけでなく、HTMLページをブラウザーに提供することもできると思います。データベースから値を検索し、そのスパンタグの中央に挿入して、ブラウザに出力できるとしたらどうでしょう。

<span id="name">Rufus McGillicutty</span>

これはおそらくデータバインディングの最も基本的な形式です。つまり、ページの要素をデータベースのコンテンツで埋めます。そして、それを行うためにJavaScriptやCSSを知る必要さえありません。 JavaScriptフレームワークは、サーバー側で文字列を一緒に貼り付けるのではなく、DOMを操作してデータバインディングを行います。

フォーム、または「ここに名前を入力します。」

あなたが持っている場合

<form></form>

その後、ユーザーが[送信]ボタンを押すと、そのフォーム内のコントロールの値を取得できます。これらの値をデータオブジェクトにバインドする方法があり、データベースに挿入できるデータがいくつかあります。

それは単なるCRUDです。

作成、読み取り、更新、削除。これらは、サポートする必要がある操作です。さて、それらと「注文」のようなもの。サーバーで重要な作業を行ったことがあれば、これは既におなじみのはずです。

それはすべてアーキテクチャについてです

うまくいけば、MVCやMVVMのような頭字語を聞いたことがあるでしょう。正確な複雑さを理解するためではなく、それらを研究する必要がありますが、これらの組織化の原則がなぜ有用で保守可能なユーザーインターフェースを構築するのにうまく機能するのかを理解するために、さらに検討する必要があります。

次の用語を勉強、理解、理解する必要があります。

Model
View
ViewModel
Controller
Service Layer
Data Layer

Angularは、学習するのに最適なフロントエンドフレームワークではない可能性があることに注意してくださいfirst。ノックアウトは、その点でおそらくより適切です。なぜなら、よりシンプルで、学習曲線がかなり長くないためです。また、jQueryについて少なくともある程度の知識が必要です。

3
Robert Harvey