2021-01-01から1年間の記事一覧
今回は、コンポジション vs 継承を学びます。 子要素の出力 Sidebar や Dialog のような汎用的なコンテナコンポーネントでよく使われる方法。 children を使い、受け取った子要素を出力。 function FancyBorder(props) { return <div className={'FancyBorder FancyBorder-' + props. color}>{props.children}</div>; } 他のコ…
公式サイトのURLは https://ja.reactjs.org/docs/lifting-state-up.html 複数のコンポーネントが同一の変化するデータを反映する必要がある場合は、最も近い共通の祖先コンポーネントへ共有されている state をリフトアップすること。 えられた温度で水が沸…
リストと key 。まずはリストの変換方法のおさらいからスタートです。 map 関数を使ったコード。 const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); // [2, 4, 6, 8, 10] 配列を要素のリストに…
イベント処理 Reactのイベント処理は DOM 要素のイベントの処理と似ているが、イベント処理文法的な違いがある。 camelCaseで名付ける JSX では関数を渡す デフォルト動作の抑止に preventDefault を使う HTML <button onclick="activeLases()"> Active Lasers </button> React <button onClick={activeLases}> Active Lasers </button> デフォ…
クラスに変換 5ステップで関数コンポーネントをクラスコンポーネントに変換する。 https://ja.reactjs.org/docs/state-and-lifecycle.html#converting-a-function-to-a-class function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTi</h2></div>…
要素のレンダー 要素のレンダー 要素とは React アプリケーションの最小単位の構成ブロックです。 要素は画面に表示したいものの説明書き。 <h1>Hello, world</h1> React 要素はプレーンなオブジェクト、安価に作成できる。安価というのは、素早くハードの省資源で作…
Reactの [Main Consepts] をなぞって学ぶ。 Getting Started から始める。 試す 既存のプロジェクトに徐々に追加可能 どの程度利用するか選択可能 オンラインエディタで試せる CodePen CodeSandbox Stackblitz 最初の例 最初の例として、React のホームペー…
書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座をWebデザインの教科書として学ぶ。 今日からは「お問い合わせページ」の制作に入る。 お問い合わせページの制作 お問い合わせページを「CONTACT」ページとして制作する。「menu.html」 を複製し「co…
HTML&CSS と Web デザイン入門でWebデザインを学ぶ。 タイル型レイアウトとは タイル型レイアウトとは、画像や四角形の要素を並べたレイアウトのこと(P228)。整った印象になる。 「MENU」ページではCSSグリッドを使ってレスポンシブ対応させる。 ファイルを…
HTML&CSSとWebデザイン入門を今日教科書としてWebデザインを学習中。 「NEWS」ページのレイアウトをカスタマイズする。 (P223) 3カラムに変更 表示するカラムの順番を変更する 3カラムレイアウトに設定 news.html を開き <div class="news-contents wrapper"> 内に ad クラスのついた <div> タグと画</div></div>…
1冊ですべて身につくHTML & CSSとWebデザイン入門講座で学ぶWebデザイン。 レスポンシブWebデザインとは、表示領域の幅によって見え方がかわるようにデザインされたWebサイトのこと。 (P216) カラム数を1カラムにしたり、メニュー用のアイコンをタップするこ…
書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座 でWebデザインを学習中！ <aside> タグの中にサイドバーに掲載するコンテンツを書き加える。 (P213) <aside> <h3 class="sub-title">カテゴリー</h3> <ul class="sub-menu"> <li><a href="#">VVVVV</a></li> <li><a href="#">WWWWWWWW</a></li> <li><a href="#">XXXX</a></li> <li><a href="#">YYYYY</a></li> </ul> </aside></aside>
書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座 で学ぶWebデザイン。 2カラムレイアウト カラムとは列のこと。垂直方向にコンテンツをグギってレア言うとすることを カラムレイアウト と呼ぶ。 (P198) コンテンツ量が多いニュースサイトやブログサ…
書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座をWebデザインの教科書として学ぶ。 フルスクリーンWebサイトの制作 画像や動画などのメインビジュアルを画面全体を使って表示するレイアウトのこと。 (P174) head部の記述 HTML の骨組みを記述する…
CSSグリッドを使って同じ大きさのボックスを等しい間隔で並べるタイル型レイアウトを実現できる。 (P158) 書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座では、3列2行に並べる。 親要素であるグリッドコンテナーの中に、子要素にあたるグリッドア…
レイアウトを組む 書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座でWebデザインを勉強中。 レイアウトとはコンテンツをどこに、どう配置するか設計すること。 (P152) Flexbox 複雑なレイアウトも簡単に組める。Flexコンテナーとなる親要素の中に、…
書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座でWebデザインの学習を進める。 カラーピッカー Googleで「カラーピッカー」と検索するとツールが表示される (P107)。 配色 配色により雰囲気が変わる。 (P110) 色相 : 色の違いのこと。色相環の反対…
文字や文章の扱い 文字サイズ 14pxから18px程度が一般的 (P98)。 サイズバリエーション 2から5種類程度にとどめる。 本文で使う文字サイズを決めた後、これを基準に見出しや注釈などの文字サイズを決める。 ジャンプ率 見出しと本文の文字サイズ比率をジャン…
コードの中の文節・文章は、書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座のテキスト原稿を改変している。 CSS を適用させるには、3つの方法がる。 (P89) 拡張子 css ファイルを作成し、 HTML ファイルに読み込ませる HTML ファイルの <head> 内に <style> タ</style></head>…
引き続き書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座で学習です。 HTML のタグの中からいくつかをピックアップ。 metaタグ 文書のメタ情報をを記述し、ブラウザや検索エンジンに情報を知らせるタグ。 <meta name="description" content="hogehoge"> (P55) 説明文を書く。どのようなサイトな</meta>…
書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座より、Webデザインの5つの重要ポイントをメモ! 実際には、他にも重要ポイントが書かれている。私が、重要と考えた5つを紹介する。 デザインは伝えるための手段、美しく装飾することではない (P14) デ…
書籍「ハンズオン Node.js」は、ユニットテスト、デプロイなど数章が残っている。 Node.js を使った Web アプリケーション の実装を通して HTML と CSS の知識不足を実感。頭に浮かんだ Web アプリケーション を実現するために改めて HTML と CSS を勉強しま…
NoSQL は SQL を使わずにデータを操作するデータベース。次のように分類できる。 KVS ドキュメントストア ワイドカラムストア グラフデータベース 書籍「ハンズオン Node.js」では、環境構築が容易な LevelDB を取り組む。 level Fast & simple storage. A N…
リレーショナルデータベースは、環境構築が容易な SQLite を利用する。 SQLite そのものを別途インストールする必要はなく $ npm i sqlite3@4.2.0 と入力したら大量のメッセージが! $ npm i > leveldown@5.6.0 install /path/to/todo-data-storage/node_modu…
この章からはデータストレージを用いてデータの永続化する方法を学んでいく。 最初は JSON 形式のテキストファイルをデータストレージとして利用。特に難しいところはない。 id の生成に UUID を使うことも想定の範囲内。 UUID のドキュメント uuid For the …
ユーザ操作に依存せず、クライアントサイドにサーバサイドの最新情報を動悸させる Web アプリケーション リアルタイム Web アプリケーション の実装方法 ポーリング 最もシンプルな方法。一定間隔で WebAPI 呼び出しを繰り返し、定期的にサーバと同期する。 …
ユニバーサル Web アプリケーション の構築へと進む。 怒涛のごとく専門用語とその定義が紹介されている。 今時の Web アプリケーション のことでしょとゆるふわな理解で先に進むぞ。 技術選定として、 UI ライブラリに React 。アプリケーションフレームワ…
POSTリクエストの処理を行う。 "use strict"; const express = require("express"); const app = express(); let todos = [ { id: 1, title: "ネーム", completed: true }, { id: 2, title: "下書き", completed: false }, { id: 3, title: "フルーツグラノ…
nodemon の公式サイトは Github で OK??? nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected. まじかよ！神ツール nodemon は開発時の…
