ブックマーク / qiita.com/baby-degu (6)

  • より良いReactJS開発者になるための10のヒントとコツ - Qiita

    より良いReact開発者になり、より優れたコードを書き、コーディング面接で抜き出るため、Reactの技量を改善するすぐに使える知識です。 さあ、皆さん。始めましょう。 1. Reactフックを使った関数コンポーネント フックはReact v16.8で導入され、Reactの関数型プログラミングを大きく向上させました。Reactフックで、クラスコンポーネントの代わりに関数コンポーネントが使えますし、使うべきです。しかし...関数コンポーネントとステートとは?ライフサイクルメソッドとは? 怖がる必要はありません。Reactフックを使えばできます。 例をいくつか見てみましょう。 これは、クラスを使う従来の方法です。次のようにuseStateフックが使えます。 簡単に見えますか?その通りです!useStateフックを使って、初期状態を空の文字列('')に設定し、現在の状態(value)とその状態を変

    より良いReactJS開発者になるための10のヒントとコツ - Qiita
    yarumato
    yarumato 2021/11/24
    “「10 Tips and Tricks That Will Make You a Better ReactJS Dev」(2021年4月4日公開)の和訳”
  • すべての開発者が知るべきGoogle Chromeの隠れた機能5選 - Qiita

    試した方がいいGoogle Chrome experiments はじめに Chromeデベロッパーツールは、ウェブ開発者間で最も使われているツールの1つです。しかし、ほとんどの開発者が知らない素晴らしい機能があります。 この記事では、すべての開発者が試すべきChromeデベロッパーツールの実験的機能トップ5について説明します。 1. CSS Overview - すべてのスタイルの詳細情報を表示する CSS Overviewは、ウェブページで使われているすべてのスタイルの概要を表示します。 この機能は、色、フォント、メディアクエリ、未使用の宣言に関する詳細情報を含んでいます。UICSSの修正を加える時に便利で、カラーピッカーなどのサードパーティツールを使う必要がなくなります。 ChromeデベロッパーツールのCSS Overviewタブ この機能を有効にするには Google Chro

    すべての開発者が知るべきGoogle Chromeの隠れた機能5選 - Qiita
    yarumato
    yarumato 2021/11/24
    “CSS Overview-すべてのスタイルの詳細情報を表示する。New Font Editor Tool - フォントスタイルを瞬時に入れ替える。 この機能を有効にするには。”
  • フロントエンドの刺激的なコーディング課題6選 - Qiita

    素晴らしい課題でコーディング意欲を高めよう。 Photo by Ferenc Almasi on Unsplash. はじめに コーディングを上達させる最も効率的な方法の1つは、できるだけたくさん作ることです。 コーディング課題は、ものを作ることで自分のスキルアップする楽しい方法です。この記事のリストを参考に、何か選んで作り始めましょう! 急いでいる時や、コーディングのアイディアを枯渇させたくない時は、100以上の課題をここにまとめてあります。 課題には好きなツールを使えるので、練習したいものがあれば、気軽に挑戦してみてください。 1. タスクマネージャUI なんて美しいアプリケーションでしょう!クリーンでモダン、インテリジェントなUIです。 Aysenur Turkによる「CSSグリッドを使ったタスクマネージャーUI」 学べること HTMLCSSを使用する方法。新しいCSSグリッドを試

    フロントエンドの刺激的なコーディング課題6選 - Qiita
    yarumato
    yarumato 2021/06/02
    “コーディングを上達させる最も効率的な方法の1つは、できるだけたくさん作ることです。”
  • シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita

    開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを当に理解していますか?実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で

    シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita
    yarumato
    yarumato 2021/04/07
    “パワフルなスクリーンショットを撮る。ページの読み込み状況を監視する。画像をData URIとしてコピーする。要素を選択してキーボードのHキーを押すと、要素を素早く非表示に”
  • フロントエンドのコーディング課題6選-このフロントエンドの課題、実装できますか? - Qiita

    こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。 自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。 優れたフロントエンド開発者になるために効果的な方法の1つは、単純にできるだけ多くの課題に取り組み、解決することです。 フロントエンド開発の達人になるために、今日から解き始めることができる6つの課題を紹介します。 ではさっそく、実装すべき6つの課題はこちら。 1. ク

    フロントエンドのコーディング課題6選-このフロントエンドの課題、実装できますか? - Qiita
    yarumato
    yarumato 2019/11/21
    “フロントエンド開発の達人になるための6課題を紹介。クレジットカードフォーム、一から作る棒グラフ、...”
  • トップデベロッパーになるために作成したいアプリ8選 - Qiita

    こちらの記事は、Indrek Lasn 氏により2017年 12月に公開された『 The Secret to Being a Top Developer Is Building Things! Here’s a List of Fun Apps to Build! 』の和訳です。 記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek 少し考えてみてください。あなたがもし健康に関する書籍をたくさん読んだとしても健康になることはありません。実際には、ジムに行き数時間運動をして汗をかかなければ健康は手に入りません。 同じことが開発にも言えます。努力なしに優れたデベロッパーになることはできないのです。 そこで、コーディング力を鍛える8つの素晴らしいプロジェクトを紹介します。 あなたの好きなテクノロジースタックを使っ

    トップデベロッパーになるために作成したいアプリ8選 - Qiita
    yarumato
    yarumato 2019/11/12
    “1. Trelloクローン:下記を学べます…。ユーザー管理ダッシュボード、暗号通貨モバイルアプリ、独自のWebpack設定、HackerNewsクローン、ToDoアプリ、ソート可能なD&Dリスト、メッセンジャーネイティブアプリ”
  • 1