フロントエンドエンジニアが持つべき3つの考え方_html/css_WEB-ITnose

あなたが天才レベルのエンジニア（すぐに辞めても大丈夫です）で、多くのことを独立して達成できるなら、あなたは変人でも構いません、なぜならあなたを賞賛しない人はいないと私は信じているからです。しかし、現実は現実であり、ほとんどの人は天才ではありません。職場ではチームワーク、調整、協力が必要であり、コード以外のことも考慮する必要があります。

フロントエンドエンジニアは、情報を受け取り、データを収集し、対応するだけを担当するわけではありません。もちろんこれらを行うだけでは問題ありませんが、バックエンドエンジニアとのコミュニケーションも必要ですし、デザインとのコミュニケーションも必要ですし、PMとのコミュニケーションも必要です。この三者に？

論理的思考

特定のコードを書き始めるとき、それがどこで使用されるのか、再利用されるのかを考えます。 将来的に変更される可能性がありますか? 変更できる場合、どのように変更できますか?一般的な Web ページの構造には多くの変化がありますが、根拠もあり、この根拠は事前に推定することができます。 「修正されない」ケースはありません。修正を行う必要がある場合も多く、場合によっては大きな変更が生じる可能性もあります。変更や修正が本当に必要な場合、どのような戦略を立てますか?これらはすべて、論理に基づいて熟考する必要があります。

通常、プロのデザイナーは、コードを再利用できるように、均質性が高く、比例または対照的な要素を含む Web ページをデザインします。では、なぜ CSS プリプロセッサ (Sass、stylus、less) の使い方や Mixin や変数の書き方を学ぶ必要があるのでしょうか? 最初は面倒に感じるかもしれませんが、一度使ってしまうともう戻れなくなります。効率が向上するだけでなく、精度も向上します。

エンジニアの世界は武道のようなもので、みんなが自主的に練習していて、毎日新しい人がいて、いつか武道の達人になりたいと思って練習に通っています。これは、知識や専門性を向上させる可能性でもあります。好奇心がなく、あまりにも物事を見たり理解したりしなければ、当然、論理は時代に追いつきません。論理的思考を磨くためには学び続けなければなりません。

一定レベルの論理的思考は、書けるだけでなく、保守性と読みやすさにもつながります。物事が適切なロジックに基づいていれば、エラーの可能性は低くなり、一緒に働く人々はより幸せになります。

一つのことをうまくやることができれば、あなたは達人であり、一つのことをうまくやって未来を予測することができれば、あなたは専門家です。

ビジネス思考

PM、上司、クライアントは皆、「どれくらいの時間が必要ですか？」と尋ねますが、短すぎると言ったら、それを終えることができないかもしれません。長い間、それは不可能です。これは、どうやって死ぬかという質問にどう答えるかです。時には立場を変えて第三者の視点から考えることも必要です。私たちの完成度と彼らの完成度は異なる場合があります。

ケースの詳細を 2 つの状況に分けます。1 つは、すでに経験があり、時間を見積もることができる場合です。もう 1 つは、これまでにやったことがない、またはあまり慣れておらず、時間がない場合です。時間の見積もりの​​基礎となります。

次に、彼らが受け入れられる最低限の基準を考え出します。例えば、アプリのウェブサイトの場合、最低限の基準は、ホームページとアプリをダウンロードするための 2 つのボタンが必要です。残りについては、調査して、より十分な根拠のある時間を与える必要があります。プロジェクトが完了するまでにどれくらいの時間がかかるかを見積もることは非常に重要です。なぜなら、自分の時間ではなく、グループの時間を消費することになるからです (あなたが一人でやっている場合や、あなたが上司である場合を除く)。見積もりが間違っていれば後で遅れますが、それが完了できなくても問題はありません。最も重要なことは問題を解決し、問題を解決する目的を達成できる解決策を提案することです。

別の視点から解決策を提示することは有益であり、モバイル Web ページで 20 列の表が表示されないという問題を解決できなくても、顧客は気にしません。でも、このようなテーブルは見栄えが悪いという声を聞きました。表示方法を変更できます。顧客は、Rails を使用するか PHP を使用するかをあまり気にせず (一部の人は気にしますが、理解しているふりをします)、ただ買い物をして投稿するだけで済みます。

フロントエンドエンジニアは顧客からのクレームにさらされやすいので、いくつかのことをよく考えておかないと非常に面倒になります。 Web サイトを作成します。あなたがネチズンまたは顧客だったら、作成した Web サイトに満足しますか?

デザイン思考

フロントエンドエンジニア自身がデザイナーであることも多いですが、フロントエンドエンジニアでありバックエンドエンジニアそのものである人も多く、デザインとフロントエンドは切り離せないものです。もちろん、ここで話しているデザインでは、実際に写真を作成したり、完全なデザイン図を作成したりする必要はありません。

「デザインとは、見た目や感触だけではありません。」スティーブ・ジョブズ

フロントエンドデザインとは、画像や要素がどのように実行、作成、移動、または削除されるかを指します。このデザインは、さまざまな幅や高さ、さまざまなデバイスで表示されたときにどのような影響を及ぼしますか。これを考慮したデザインの考え方と方法を教えてください。デザイナーの絵を実際のWebページにするには、デザイン画のコンセプトを完全に表現するためにデザイナーの視点で考える必要があります。

先ほど、「×」が付いた「設計図」が届いたのですが、それは何ですかとお客様に聞いたら、「前のページに戻る」とのことですが、なぜ戻るのに「×」になっているのですか？前のページですか? これはモーダルではありません。同時に、この図にはさまざまな色とサイズの「X」がたくさんあり、それぞれ「削除」、「閉じる」、「下にスライド」を表しています。 . これは無理な設計です。

デザイン思考は、デザインの焦点がどこにあるのか、デザイナーが求める効果を達成するためにどのように書くのかが見えないため、自分が書くコード構造やWebページ構造に直接影響します。構造と要素を間違えると、Web ページを適切にまとめることができません。これでは効率が大幅に低下するだけでなく、得られる結果にも一貫性がなくなります。 Web サイト上には、同じであるはずのボタンがいくつかあるかもしれませんが、それらを作成するために複数のクラスと異なる構造を使用したため、「似ている」ものの異なっていることが判明することがあります。最初からデザインを考えていなかったんですね。

何ができますか

1. 何もすることがなくて練習する場合は、数分間FBにアクセスしてください。 あまり長居する必要はありません。

2. ウェブサイトを作成して、自分でプレイし、友達にプレイさせて、意見を求めますか？さらにいくつか質問してください。

3. 設計図を見て、自分だったらどうするかを考えます。

上記はフロントエンドエンジニアが持つべき3つの考え方です_html/css_WEB-ITnose 関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。