React入門(4)classコンポーネントの作成

Reactコンポーネントの作成には、関数型とclassを使う方法の2つがあります。 関数型コンポーネントについてはReact入門(3)関数型コンポーネントの作成を参考にしてください。 ここではclass型コンポーネントに  >>続きを読む

React入門(3)関数型コンポーネントの作成

このページの詳細なサンプルは「GitHubの React_sample1 funcブランチ」にあります。 コンポーネント Reactの思想としてUIの基本単位をコンポーネントと考えています。コンポーネントは部品と考えるこ  >>続きを読む

React入門(2)render関数の使い方〜Hello worldの作成

このページで使用するサンプルの詳細はGitHubにあります。 Reactの環境設定方法は React入門(1)環境設定 を参照ください。 Reactの開発環境を構築すると、開発用のサーバーが使えるようになっています。   >>続きを読む

React入門(1)環境設定

Reactとは ReactはFacebook社が開発したJavaScriptライブラリです。フレームワークとされる場合がありますが、正式にはライブラリです。 Reactは特にJavaScriptを多用したWebサービスに  >>続きを読む

Gitの使い方(2)コマンド編〜ブランチ、マージ、リベースなど

ブランチの作成 ブランチの作成コマンドの説明です。 **注意 ブランチを作成しただけではブランチを変更したわけではないことに注意してください。 *ブランチの作成 [crayon-5b795df171a7b73845418  >>続きを読む

Gitの使い方 コマンド編(1)〜環境設定から基本操作まで

今回はGitをMacのターミナルで使う例です。 すでにGitは導入済みでSource TreeなどでGUI環境でGitを使っている初心者向けの記事です。 入門者はまずSource Treeで使ってみることをお勧めします。  >>続きを読む

webpack4の導入方法(4)SASSの導入

webpack4にSASSの環境を構築するには以下インストールします。 index.htmlへのcss書き出しはhead内のstyle要素内となります。 *詳細なコードはGitHubにあります。 [crayon-5b79  >>続きを読む

webpack4の導入方法(3)画像のバンドル

そもそもwebpackはモジュール化するものであり、それはJavaScriptで活用するものです。 けれども、ローダーという仕組みを使用するとJavaScript以外のCSSや画像などでもバンドルすることができるようにな  >>続きを読む

webpack4の導入方法(2)スタイルシートのバンドル

スタイルシートのバンドル化ってどういうこと?一見、複数のCSSファイルを1枚のCSSファイルにしてくれる仕組みのような気がしますが、それは違います。それならSASSを使えばスッキリと済むはずです。 ここで行うのはCSSフ  >>続きを読む

webpack4の導入方法(1)

webpackとは webpackとはWebアプリを構成するリソースファイルをひとまとめにしてくれるものです。 例えば、複数のJavaScriptファイルだったり、CSSファイルもそうです。あるいは画像ファイルだったりし  >>続きを読む

WatsonのAssistant機能をDogRoboにつけました

IBM WatsonのAssistant機能をDogRoboにつけました。 まだテスト運用で色々なことはできませんが、試してみてください。

ヒアドキュメント と Nowdoc

PHPでヒアドキュメントは頻繁に見かけますが、Nowdocはあまり見ないですね。 使う機会も少ないかもしれませんが、知っておいて損はないでしょう。 ヒアドキュメントがダブルクォーテーションと同じ扱いで変数を展開するなら、  >>続きを読む

以上・以下・未満・超える

「以上」、「以下」、「未満」、「超える」の使い分けを明確にしておきましょう。以下の用語は法律用語として使われているようですから、これを使えば問題はなさそうです。 以上 「以上」は対象の値を含めた数より大きい数 PHPの例  >>続きを読む

デザインカンプからコーディングで重宝するツール

デザインカンプと1pxも違わないコーディングを行うには細かな確認が必要になります。 そんな時に役立つツールの紹介です。ただし、MAC専用です。 LayerX psd形式を含めた画像ファイルを透明化してコーディングしたペー  >>続きを読む

MAMP設定〜2018年版 Claud機能が追加されたが設定はどこで?

2018年にMAMPのCloud機能が追加されました。共同作業をMAMPで行う場合は便利かと思いますが、PHPやWordPressの学習のためには必要無いものです。 MAMP(旧バージョン)の新規インストールの方法はこち  >>続きを読む

マークダウンの勧め

マークアップ言語にはHTML言語も含まれるわけですが、そのほかにも様々な記述方法があります。そしてその中の一つにマークダウンという記述方法があります。GitHubの中でもDocumentとして活用されています。 HTML  >>続きを読む

FlexBoxの使い方(7)〜 flex-wrapについて

floatの代わりにdisplay:flexを使用するとレイアウトが簡単になります。けれども、場合によっては思わぬ挙動となり困る場合が出てきます。それは例えば幅の問題です。Flexアイテムに指定した幅はしばしば無視されて  >>続きを読む

Twitterユーザータイムラインを自分のホームページに表示

Twitterのユーザータイムラインを自分のホームページに表示する方法は他のSNSに比較して簡単です。 Twitterのユーザータイムラインとは自分がツイートした内容を表示するものです。 まず、PCでTwitterの管理  >>続きを読む

Instagramの「accessToken」と「userid」を取得する方法〜2018年4月版

InstagramのAPI使用方法 Instagramの投稿内容を自分のホームページで表示するには、面倒な手続きが必要です。 それは「accessToken」と「userid」を取得することから始めます。 なお、2018  >>続きを読む

TypeScript入門(1)

TypeScriptはJavaScriptの問題点をカバーするためにマイクロソフト社により開発されたJavaScriptの代替言語です。 TypeScriptはコンパイルすることでJavaScriptに変換することができ  >>続きを読む

Node.js入門(4)コマンドライン引数について

Node.js ではコマンドライン引数は process.argv で受け取ることができます。 process.argv はコマンドで指定した引数を配列として格納されます。 process.argv 0: /Users/  >>続きを読む

Node.js入門(3)Node.jsでES2015(ES6) 入門

ECMAScriptはEcma Internationalによって標準化された仕様です。ECMAScript6は2015年に採用されたため、ES2015やES6などと省略されて呼ばれています。ここではES6で特筆すべき  >>続きを読む

inline要素のpaddingを使う場合の注意点

display:inlineに設定された要素にpaddingをつけた場合の注意点です。padding-leftの指定を行っても、行の終端でインライン要素が折り返された場合には、次の行の先頭にはpadding-leftが付  >>続きを読む

Illustratorで作成したオブジェクトをPhotoshopで使う

Illustratorで作成したオブジェクトをPhotoshopで使うにはIllustratorで作成したオブジェクトをコピーしてPhotoshopの画像にペーストするだけです。 ペーストする際に次のようなboxが表示さ  >>続きを読む

全称セレクターと擬似クラス

全称セレクターは簡単なサンプル作成時にmarginやpaddingを初期化する時くらいしかお目にかからないのですが、実はもっと使い方があります。 CSSの仕様書には次のように記述されています。 全称セレクタ * (名前空  >>続きを読む

Pythonの勧め(4)パーセプトロンについて

パーセプトロンとはニューラルネットワークを学習する上でその起源となるものです。パーセプトロンを理解することは機械学習を勉強する上で重要な入り口となるでしょう。 そして神経細胞の仕組みをアルゴリズムに取り入れたのがパーセプ  >>続きを読む

floatの仕組みとoverflowでfloat解除できる理由

HTML&CSSのコーディングで初心者泣かせなのがフロートを使ったレイアウトです。その理由は正しいfloatプロパティの原理原則を勉強してない事と、clearプロパティの正しい使い方を理解してないからです。 また  >>続きを読む

CSS詳説(2)構文と基本データ型について

このカテゴリでは構文と値についての記述されています。 構文 トークン まずはトークンの決まりごとについて。 プログラム言語に置いてトークンとは、コードの最小単位の語句のことで、ここでは字句レベルで、CSSスタイルシートは  >>続きを読む

CSS詳説(1)仕様書を見よう

CSSを本気で勉強するとしたら、仕様書をまず読みましょう。 今回の記事はCSSの仕様書に沿って重要な点をチェックしていきたいと思います。 もしあなたが入門書を勉強したり、ネットで情報を探しながらなんとなくCSSを覚えてい  >>続きを読む

Illustrator環境設定〜角度の制限

Illustratorの環境設定から「一般」の中に「角度の制限」は通常「0」になっています。 この値を変更するとテキストを挿入したりオブジェクトを作成した場合に指定した角度になります。 角度の制限を30度にした例 よっぽ  >>続きを読む