タグ

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

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

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

    より良いReactJS開発者になるための10のヒントとコツ - Qiita
    lugecy
    lugecy 2021/12/05
  • すべての開発者が知るべき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
  • API設計スキルを次のレベルに引き上げるベストプラクティス22選 - Qiita

    記事は、Mohammad Faisal氏による「22 Best Practices to Take Your API Design Skills to the Next Level」(2021年4月15日公開)の和訳を、著者の許可を得て掲載しているものです。 REST API設計のための実践的アドバイス Photo by Andrea Piacquadio from Pexels はじめに すべてが分かりにくく、ひどいAPIに不満を感じたことはありませんか?私はそうです。 マイクロサービスの世界では、バックエンドAPIの一貫した設計が不可欠です。 今日は、知っておくべきベストプラクティスについて、簡潔に説明します。さあ始めましょう! 用語 API設計は、リソース指向設計というものに従います。3つの重要な概念で構成されています。 リソース:データの一部(例:ユーザー) コレクション:リソー

    API設計スキルを次のレベルに引き上げるベストプラクティス22選 - Qiita
  • すごいReactフック8選 - Qiita

    はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取

    すごいReactフック8選 - Qiita
  • 2021年に知っておきたいJavaScript最適化技術34選 - Qiita

    最新の省略テクニック、コツ、秘訣で、JavaScriptコードを最適化する。 開発者の生活というのは常に新しいことを学ぶことで、その変化についていくことは決して難しいことではありません。私は、フロントエンド開発者として知っておく必要のある省略形や機能など、JavaScriptのすべてのベストプラクティスを紹介して、2021年の生活をより快適にしたいと考えています。 JavaScript開発に長く携わっている人でも、コードを追加しなくても問題解決できるような最新機能を知らないこともあるかもしれません。ここで紹介するものは、クリーンで最適化されたJavaScriptのコード記述にも、2021年のJavaScriptの面接準備にも役立ちます。 これは新しいシリーズで、2021年版のJavaScriptコーディングチートシートです。 1. 複数の条件を持つif 配列に複数の値を格納し、includ

    2021年に知っておきたいJavaScript最適化技術34選 - Qiita
  • すべての開発者へ。すごいGitHubリポジトリ10選 - Qiita

    記事は、Simon Holdorf氏による「10 Extraordinary GitHub Repos for All Developers」(2021年4月4日公開)の和訳を、著者の許可を得て掲載しているものです。 こちらもどうぞ すべてのウェブ開発者へ。人気GitHubリポジトリ9選 面接のリソース、build your own X、優れたパブリックAPIのリストなど Photo by Vishnu R Nair on Unsplash はじめに GitHubは、あらゆる種類の技術、フレームワーク、ライブラリ、コレクションなどを共有するためのNo.1プラットフォームです。しかし、その巨大さゆえに、最も有用なリポジトリを探すのが難しいという問題もあります。そこで私は、すべてのソフトウェアエンジニアに大きな価値のある、素晴らしいリポジトリ10選を作ることにしました。すべてに多くのGitH

    すべての開発者へ。すごいGitHubリポジトリ10選 - Qiita
  • 必要だと気付いてもいなかったフロントエンド用リポジトリ7選 - Qiita

    より良いものをより早く作るのに役立つ、あまり知られていないリポジトリ。 Photo by Juan Rumimpunu on Unsplash はじめに 私たちは、汎用ツールやリソースが数回タップするだけで手に入る時代に生きています。しかも幸いなことに、そのほとんどが無料です。 新しいツールやより簡単な方法が見つかり、面倒で複雑なタスクを実行できれば、誰にとっても、特に開発者には嬉しいことです。 でも、より良く賢い方法があり、予想外の方法で時間を節約できることを知らない場合もあります。 この2年間で見つけたGitHubの素晴らしいリソースは、私をかなり助けてくれました。これらのうちいくつかは、その必要性さえ知りませんでした。 そこで、あなたもおそらく必要になるGitHubリポジトリのリストを作りました。 1. 33 JS concepts ソース 私はプログラミングをJavaで始め、その後

    必要だと気付いてもいなかったフロントエンド用リポジトリ7選 - Qiita
  • シニアフロントエンド開発者みたいに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
  • すごいReactパッケージ5選 - Qiita

    小さくてもインパクトのある変更で、あなたのアプリを競合他社から引き離します。 1. React Loader Spinner 待つのが好きな人はいません。今やユーザーは最低限の条件として、ウェブサイトが高速であることを求めています。アプリが重いか遅い場合は、コンテンツの読み込み中、この最新のローディングアニメーションを表示しましょう。アプリの美観を向上させるだけでなく、ユーザーを維持するのにも役立ちます。 このパッケージで提供する全ローディングアニメーション npmまたはyarnから直接インストールします。

    すごいReactパッケージ5選 - Qiita
  • フロントエンド開発者のための便利なオンラインツール11選 - Qiita

    私が愛用するオンライン開発ツール インターネット上には、フロントエンド開発者の生活を楽にしてくれる素晴らしいツールが沢山あります。この記事では、私が開発の仕事で頻繁に使っている11のツールについて簡単に説明します。 1. CanIUse Web APIが特定のブラウザで互換性があるのか、モバイルブラウザで使用できるのか、分からないことはありませんか?このオンラインツールを使えば、ブラウザの互換性についてWeb APIを簡単にテストできます。 Can I use―HTML5、CSS3などの対応表。 「Can I use」は、デスクトップとモバイルにおけるフロントエンドWebテクノロジーを支援する、最新のブラウザ対応表を提供します。 caniuse.com Web Share APIのnavigator.share(...)に対応しているブラウザとバージョンを知りたいとします。 結果を見てくだ

    フロントエンド開発者のための便利なオンラインツール11選 - Qiita
  • 2020年の11の必見のフロントエンドトレンド - Qiita

    こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法! チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー

    2020年の11の必見のフロントエンドトレンド - Qiita
    lugecy
    lugecy 2020/07/29
  • どんなに小さなサイドプロジェクトでもCI/CDパイプラインは大いに役立つ - Qiita

    こちらの記事は、Luc Juggery 氏により2018年9月に公開された『 Even the Smallest Side Project Deserves its CI/CD Pipeline 』の和訳です。 記事は原著者から許可を得た上で記事を公開しています。 TL;DR 今を行く最新のツールを使えば、シンプルなCI/CDパイプラインを構築することは難しくありません。個人的なサイドプロジェクトであっても、CI/CDパイプラインを構築することで多くのことを学ぶことができるでしょう。DockerGitLab、Portainerはこのようなセットアップで使うのに最適なコンポーネントです。 サンプルプロジェクト 南フランスのソフィア・アンティポリス地域で技術イベントをよく主催する私は、今後開催されるイベントを全部知る方法はないのかとよく聞かれていました(ミートアップ、ジャグ、自治会主催のも

    どんなに小さなサイドプロジェクトでもCI/CDパイプラインは大いに役立つ - Qiita
  • 2019年のデザインを振り返る - Qiita

    こちらの記事は、Christie Tang 氏により2019年12月に公開された『 2019 Design In Review 』の和訳です。 記事は原著者から許可を得た上で記事を公開しています。 2019年は良い年でした。今こそ、2019年のすべてのトレンドとハイライトを振り返るときです。デザインのトレンドを常に把握しておくことは重要であり、そうすることで常に最新かつモダンな外観をデザインすることができます。あなたが1年中トレンドから迷子になっていたとしても、心配しないで。お父さんお母さんはここですよ。そうでなかった人たちも、2019年の予測が正しかったかどうかを思い返して考えてみたり、または単にデザインが私たちをいかに前進させてくれたかを祝うことができるでしょう。乾杯! まずは今年のロゴデザイン、製品、UIの刷新についての大きな出来事に触れた上で、それからビジュアルのトレンドについて

    2019年のデザインを振り返る - Qiita
  • 最新のVue3.0でウェブ開発はどう変わるか? - Qiita

    こちらの記事は、2019年1月に公開された『 What Does Vue 3.0 Mean for Web Development? 』の和訳になります。 投稿は転載であり、記事はこちらになります。 補足: Vue3.0は2019年内もしくは2020年の初めにリリースされると予測されています。 2019年9月時点ではまだv2.6.10であること、ご留意ください。 はじめに 昨年11月、VueのクリエーターであるEvan Youは、Javascriptフレームワークの最新版となるVue 3.0の主要アップデートを紹介しました。 今回のアップデートによってVueはより効率的で、モジュール化され、さらに使いやすくなりました。 これらの変更と、Vue 3.0のリリースによる影響について説明します。 Vueの現在の状況は? 彼らによると、Vueは「ユーザーアプリケーションを構築するためのプログレ

    最新のVue3.0でウェブ開発はどう変わるか? - Qiita
  • 2019年版 最先端のフロントエンド開発者になるために学ぶべきこと - Qiita

    こちらの記事は、『Learn to become a modern Frontend Developer in 2019』の和訳になります。 投稿は転載であり、記事はこちらになります。 はじめに 新年になって以前書いた記事を少し簡潔にして理解しやすいように書き直してみました。この文章に以前私が書いた文章と違ったことが書いてあったり、少し矛盾する内容が見つかってもあまり気にする必要はありません。 昨年私が書いた記事はGitHubで公開しています。 Web開発は絶えず変化する分野です - 今日私たちがWebサイトを構築する方法は、2~3年前のやり方とは全く違ってきています。利用できるツールが沢山あり、新しいツールも毎日出てくるので、ウェブ開発者はいつもどのツールを使えばよいのか迷ってしまいます。 私は、ウェブ開発に係るフロントエンド、バックエンド、または運用を学びたいと思う人を対象にしたツ

    2019年版 最先端のフロントエンド開発者になるために学ぶべきこと - Qiita
  • 1