たった5分で分かる！ Reactのコンセプトや用語をやさしく解説
Reactは、WebサイトやスマホアプリのUIを構築する人気が高いJavaScriptのライブラリです。再利用可能なコンポーネントを作成し、複雑なUIでも効率的に管理できるようにすることで、フロントエンドの開発に革命をもたらしました。 Reactを始めたいけどなんだか難しそう、、、そんな人にReactを簡単に理解できるようにReactのコンセプトや用語をやさしく解説した記事を紹介します。Reactにおけるコンポーネントとはどんなものなのか、reconciliation, state, propsなどの用語についても分かりやすく解説されています。 Every React Concept Explained in 5 Minutes by Jitendra Choudhary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに
はじめに教わるデザインの基本。気をつけるべき28のポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
突然ですが、下記のバナーにはデザインのルール上あまり適切でないことが含まれています。 ・ ・ ・ みなさんはわかりましたか？ 「なにがよくないのかわからない……」という方は、ぜひこの記事を最後までご覧ください！ 今回は新米デザイナーさんに向けて、先輩からはじめに教わるデザイナーが覚えておきたい基本やポイントをご紹介します。レビュワーの立場にあるデザイナーの方も、デザインのチェックリストとして使っていただけると幸いです！ （すぐに答えが知りたい方はこちらをクリックしてジャンプ！） 今回ご紹介するのは、デザイナーなら誰もが一度は目にするような基本中の基本です。ただし、これらは「絶対的なルール」というわけではありません。経験豊富なデザイナーさんであれば、状況に応じてあえてこれらの基本を外すこともあると思います。 でも、覚えておいていただきたいのは、ルールを知った上で破るのと、知らずに破るのでは大
AWSの勉強に役立ったおすすめ教材9選！効率的な学習法も紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Technology部の山岡です。AWS（Amazon Web Service）は、インフラの構築の際に用いられるクラウドサービスで、広範なユースケースに対応できることが魅力の一つです。 構築も手軽で、可用性も高くて、障害にも強い。AWSと調べると目に飛び込む文言として、素晴らしいメリットの数々があります。しかし実際に触ってみると…… 「あれ、思っていたより設定値が多い……」 「手軽に構築できるにはできるけど、本当にこれでうまく動くの？」 「サービス数が多すぎて何から手をつけていいかわからん」 などなど、思いの外多くの壁があって、困惑されている方も多いのではないでしょうか。 そこで今回は、AWS初学者様に向けて、学習ステップやおすすめの勉強法、初学者向けの資格についてご紹介します。「AWSってどうやって学習を進めたらいいの？」とお困りの方は、ぜひご覧ください。 AWSを効果的に学ぶための4
はじめてのフォトショップ レイヤーとは？完全ガイド【動く図解付き】| レッスン２
この記事は、初心者のためのPhotoshop入門完全ガイドです。 ２回目のレッスンとなる今回は、フォトショップでの編集作業に欠かせない、「レイヤー」について詳しくご紹介します。 「フォトショップのレイヤーって何？」 「なんでレイヤーを利用すべきなの？」 「基本的なレイヤーの使い方を知りたい」 このレッスンが終わる頃には、そんな悩みが吹き飛び、レイヤーのすべてを知っていることでしょう。 これからフォトショップをはじめる人も、しっかりとした基礎を学びたい人も、必要なことがすべて詰め込まれています。 すぐにでも始められるよう、必要なことのみに絞り、できるだけシンプルに、だれにでも理解できるよう心がけています。 では、早速はじめていきましょう。
はじめてのフォトショップ使い方入門完全ガイド【動く図解付き】
このレッスンが終わるころには、フォトショップを怖いと感じることはなくなるでしょう。 この記事は、初心者のためのPhotoshop入門完全ガイドです。 これからフォトショップをはじめる人も、しっかりとした基礎を学びたい人も、必要なことがすべて詰め込まれています。 すぐにでも始められるよう、必要なことのみに絞り、できるだけシンプルに、だれにでも理解できるよう心がけています。 では、フォトショップの世界をのぞいてみましょう。
初心者に分かりやすい！JavaScript 入門チートシート - コムテブログ
TL;DR このページでは、Jamstack を使った構築や、Next.js を使う上で必要となる JavaScript の基礎知識をまとめたものを初心者向けにチートシート形式でご紹介します。JavaScript の主要な特性や概念を分かりやすく網羅していますので、JavaScript の学び直しにもご活用できるかと思います。定期的に見返しましょう！ 項目 内容
CSSのブレンドモードを美しいデモでインタラクティブに学べる -Brad Woods' Digital Garden
CSSのブランドモードは、知っているけどあまり使用したことがないという人もいると思います。そんなCSSのブレンドモードを使用して、さまざまな美しいデモでインタラクティブに学べるサイトを紹介します。 CSSのブレンドモードは、IEを除くデスクトップ・スマホのすべてのブラウザでサポートされています。 CSS Blend Modes Brad Woods' Digital Gardenは、Web上で作成するための設計図になることを目的としたサイトです。CSSをはじめ、HTMLやSVG、JavaScript、WebAPIなど、Webの実装に役立つさまざまなコンテンツが揃っています。 それらの中から最近リリースされた、CSSのブレンドモードを紹介します。ページのデザインも美しく、インタラクティブなデモがたくさんあるので、見ているだけでも楽しめます。 CSS Blend Modes まずは、CSSブレ
JavaScriptをもうちょっと理解する54のトピック - Qiita
この記事について JavaScriptはお好きですか？ Reactなどフロンドエンドを中心に人気の言語なので、触ってる人はたくさんいると思います。 奥深くて自分も好きな言語ですが、結構なんとなくで触っていたりしませんか？ 今回は自分が後輩によく聞かれた事や、自分が引っかかった事をたくさん書いていきます。 つまり基本的には初心者向け、よくても中級者向けです。 何か一個でも知らない事があれば御の字のつもりで書いたので、ぜひ気軽に読んでください！ JavaScript編 略称はJS、Javaダメぜったい いなさそうなのに稀にいるという・・ Web開発から入ってプログラムを広く知らない場合に発生しやすい？ Javaは全く別に王者がいるので、万が一使っていたららやめましょう。 略称は JS（じぇーえす） でお願いします。 データ型、Object Objectはキーと値をいくつも持てるJSのデータ型で
フロント学習の最高の教材集 - Qiita
はじめに 今回はフロント学習で重宝できる教材をまとめました。 軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。 実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。 今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。 「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。 この記事の主な対象者 フロントエンドの学習をこれからしていきたい人 何を学べばよいのかがわからない人 HTMLとCSSはある程度かける人 この記事の目標 フロント学習の指針が立てられる 実務現場でも活用できるスキルを学べる教材を知れる JavaScript ドットインストールのJavaSc
【Docker】初心者向けDocker基礎編 | バシャログ。
こんにちは。nakagiriです。 今年は梅雨が明けるのが早くて毎日真夏並みに暑いですね。( ´∵｀) みなさんも熱中症にならないように気をつけてください。 今回からDockerについて全四回に分けて解説していきます。 一回目の本記事では、「Dockerって何だろう？」、「Dockerを使うとどんなメリットがあるのだろう？」といった疑問を解決するDockerの基礎編です。 Dockerに関する記事はたくさんありますが、難しい言葉が多く羅列されていてなんとなく難しいイメージを持たれている方もいるかもしれません。そこで、イラストを使ってなるべくわかりやすく噛み砕いてお伝えしていきたいと思います。 二回目以降の記事では、実際にDockerを使って解説していくので、ぜひ一緒にやってみてください。（※実際の構築は、Docker Composeを使用して解説する予定です。） Dockerとは？ Doc
【React】イラストで基礎を解説してみる（初心者向け） | バシャログ。
はじめまして。去年の9月にコーダーとして入社したnakagiriです！ 今日は、勉強中のReactについて解説します。 勉強する前は、先輩がReactをつかって開発をしているのは知っているけど、実際よく分からない。 そんな状態だったので、この機会にReactについてどのような特徴があるのか一つ一つ整理してまとめてみます。 この記事のゴール Reactにはどのような特徴があるか理解すること この記事の対象となる方 HTML、CSS、jQueryを使ってWEBサイトを作ってみたことがある方 Reactの特徴を知りたい方 そもそもReactとは？ Facebookが開発しているUIに特化したJavaScriptライブラリです。 FacebookやInstagram、Netflix やYahoo!にも使われている技術。 Vue.jsやAngular.jsと比較されること多い。 Reactの特徴 R
サーバ構築の初心者がAWSでサーバ構築をしてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。テクニカルディレクターのタケです。 私はこれまでサーバ構築についてはあまりやっておらず、案件で必要な際はいつも業者に依頼していました。しかし勉強する機会があり、今回の記事はAWSでサーバ構築をしてみた話です。 細かく説明しだすと文字数が半端なく増えてしまうため、今回は作業内容を簡単に説明します！ 構成 今回構築する構成はAPサーバ用のパブリックサブネットとDBサーバ用のプライベートサブネットとなります。WEBサービスを行うときのシンプルな構成です。 VPCの作成 まずはVPCの作成から行います。VPC（Virtual Private Cloud）はAWSのネットワーク内に自分専用のネットワークを仮想的に構築したネットワークです。 VPCダッシュボードを表示し左のメニューにあるVPC→VPC作成をクリックします。 VPC作成画面が表示されるのでVPCの名前とCIDRブロック入力し
業務ができる中級者になるためのJavaScript入門（DOM編）
✨無料公開中✨ 業務ができる中級者になるためのJavaScript入門の第2弾となります。何度学んでも今一つ理解できないDOMに関して、できるだけわかりやすく説明しています。 業務ができる中級者になるためのJavaScript入門（文法編） https://zenn.dev/books/568dd4d86562a1/edit ✨開発環境に役立ててください✨ 👾 やっぱりwebpackがわからない（エピソード1） https://zenn.dev/antez/articles/58307946cf4f3e 👾 やっぱりwebpackがわからない（エピソード2） https://zenn.dev/antez/articles/638382faa06bd7 👾 そもそもnpmからわからない https://zenn.dev/antez/articles/a9d9d12178b7b2 ✨Wo
JavaScriptのイベントの仕組みが一発で理解できるウェブアプリ「Explore DOM Events」レビュー
JavaScriptには、特定の動作が発生した際にそれに応じてコードを実行する「イベント」という仕組みが存在しています。そのイベントがDOM内でどのように伝わるのかについて、「Explore DOM Events」というウェブアプリがイベントのオプションに応じて視覚的に表示してくれるとのことなので、実際に使って分かりやすさを確かめてみました。 Explore DOM Events https://domevents.dev/ ページにアクセスすると、「親(PARENT)」「子(CHILD)」「孫(GRANDCHILD)」というDOMの親子関係が表示されており、そのうち1つめの孫(オレンジ)がイベントのターゲットに設定されていることが分かります。このまま「Dispatch」をクリックしてみると…… イベントが伝わっていく様子がアニメーションで表示されました。まだ何もイベントリスナーを追加して
TypeScript の概要 - Qiita
概要 AltJS としての言語 TypeScript の特徴をかいつまんで説明します。 対象者 JavaScript でコードを書いたことがある。 JavaScript でプログラムを書くのが辛い or もっと楽したい。 TypeScript ってなに？聞いたことはあるけど・・・ ・・・な人。 TypeScriptの参考資料 TypeScript - JavaScript that scales. (公式サイト) TypeScriptってどんなもの？ プロ生ちゃんと始めてみよう！ - Build Insider Insider.NET > TypeScriptで学ぶJavaScript入門 - ＠IT TypeScriptの型入門 - Qiita ワイ「いうても型なんて面倒くさいだけやろ？」 - Qiita TypeScriptの型入門 - Qiita AltJS (Alternative
JavaScript入門: 基礎知識をGIFアニメで分かりやすく解説 -総まとめ
JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting（巻き上げ）など、GIFアニメを使用して詳しく解説しています。 シリーズ7本すべてと、プラス1として楽しく学べるクイズもあります。 JavaScript イベントループの仕組み JavaScriptでエラーの原因となるHoisting（巻き上げ）の仕組み JavaScriptのスコープチェーン・変数参照の仕組み JavaScriptエンジンの仕組み JavaScript プロトタイプ継承の仕組み JavaScriptのジェネレータ関数とイテレータの仕組み JavaScriptの
デザイナーがAfter Effectsを学ぶ / 1ヶ月の記録 / 勉強方法とコツ｜fuyuna
ブランディングデザイン会社neccoでデザインの仕事をしながら、7月からAfter Effectsの練習を始めました。 最初は全然使い方がわからず、「難しそうだしやめとこうかな、やっぱりデザインに専念した方がいいのかな」と思うこともありましたが、1ヶ月間練習を続けるうちにどんどん楽しくなってきました。 ▼はじめの頃に作ったもの モーショングラフィックス使いたい 案件のためにAfter Effect練習中🌱 楽しい〜！もっと上手になりたい☺️✨ pic.twitter.com/AzvZ1U1Pue — fuyuna🌷necco Designer (@fuyuna_design) July 5, 2020
React初心者がReactを学ぶために使用したサイトや書籍
Reactを学習する時に実際に使ったサイトや書籍を紹介します。私が使用した順ではなく、一通り実践した結果、この順番だと基礎から学べるかなと思った順番に紹介してます。 Reactを学習する時に実際に使ったサイトや書籍を紹介します。私が使用した順ではなく、一通り実践した結果、この順番だと基礎から学べるかなと思った順番に紹介してます。 ちなみに学び始める前の私のスキルは下記の通りです。 JavaScriptの基本的な理解はあるjQueryは仕事で使えるレベルReactは全く使ったことがない 注意 Reactは変化が早く、ここ数年で書き方の主流も大きく変わっており、Reactコンポーネントの主流はクラスコンポーネントから関数コンポーネントに移り変わってきているようです。（私もまだちゃんと理解はしてない。。） ここで取り上げた教材や書籍も、情報や書き方が今では古くなっていたりするものもあります。そち
穴埋め問題を解くような形式でPHPを学べる勉強サイト・(un)classroom
プログラミングを学べる、みたいなサイト が凄く増えている印象ですが、また似たよ うなサイトを見かけましたのでご紹介です。 実践しながら学べるサイト・(un)classroom。 実践といっても、穴埋め問題っぽい感じで、 手を動かして学べるようになってるだけで すが。 こういうサイト、日本でも増えていく気もします。需要が高い事は明白ですし、このように前例が出来ればインスパイアされるものですのでいずれ増えてくるんじゃないでしょうかね・・ まだ出来たばかりでPHPの基礎とFacebookアプリの作り方しか教室が無いんですが、今後に期待という事で・・ 最初の授業です。「PHPは<?phpで始まって?>で終わらせます」とあります。基礎のキですね。で、右側のsubmitで実行してみましょう、といった流れで進んでいきます。 で、2ページ目でレッチチャレンジ、という感じで穴埋めし、先ほどと同じようにsub
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactを関数型プログラミングの文脈で理解する｜こわくない関数型プログラミング
