フロントエンド

ajaxやfetch、axiosをPOSTでAPI接続する方法〜リクルート A3RTのTalk APIを取得例

ajaxやfetch、axiosなどでAPI接続するための方法をリクルートのA3RTで試しました。 getなら比較的簡単に取得できますが、post指定の場合はちょっと難易度が上がります。参考にしてください。 今回はリクル  >>続きを読む

Vue.jsの基本(6)親コンポーネントから子コンポーネントへデータを渡す方法

コンポーネントのデータのやりとりについて コンポーネントを作成するときにコンポーネント間のデータをやりとりする方法は重要な概念となります。 この仕組みをいい加減にすると混乱の原因となります。そのため、Vue.jsでは親コ  >>続きを読む

Vue.jsの基本(5)コンポーネント作成

Vue.jsはコンポーネントを作成するのに都合の良いライブラリです。 再利用可能なコンポーネントを作成することは作業の効率化に貢献します。そして何よりもVue.jsの使いやすさが魅力です。複雑な環境設定も必要なく、学習し  >>続きを読む

Vue.jsの基本(4)監視プロパティについて

Vue.jsでは特定のデータやcomputedの状態を監視して、変化があるとその処理を実行する機能があります。このことを監視プロパティは行います。監視プロパティは別にウオッチャーと呼ばれています。 監視プロパティの記述は  >>続きを読む

Vue.jsの基本(3)computedとmethodsの違い

computedは日本語では算出プロパティと呼ばれています。 computedはdataプロパティに対して何らかの処理を行いたい場合に使用します。 computedの記述方法としては何らか処理をしたデータを返す関数として  >>続きを読む

Vue.jsの基本(2)dataプロパティについて

Vue.jsの最大の特徴はリアクティブシステムであることです。 そして、もっとも重要なことはデータをリアクティブデータにすることで、あるデータを新たに加えたり、変更したり、削除すると即座にそのデータの表示を変更することが  >>続きを読む

Vue.jsの基本(1)

Vue.jsについて Vue.jsはビュージェイエスと読みます。Vue.jsはViewに特化したライブラリです。今回はVue.jsを活用するための基本を学習します。 Vue.jsはおそらくAngularやRactよりも  >>続きを読む

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-5c15a7eb4d2e168873208  >>続きを読む

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

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

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

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

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

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

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

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

webpack4の導入方法(1)

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

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で特筆すべき  >>続きを読む

AngularJSのDirectiveについて(2)

AngularJSのよく使うdirectiveの紹介です。 今回は「ng-if」、「ng-class」、「ng-repeat」、「ng-click」、「ng-cloak」を紹介していますが、他にも便利なdirective  >>続きを読む

AngularJSのDirectiveについて(1)

AngularJSのDirectiveは、HTMLでどのようにDOMを組み立てるか命令するものです。Directiveは例えば「ng-app」のようにHTMLのカスタム属性を使って記述していきます。 ここでは、「ng-m  >>続きを読む

AngularJSのインターポレーションについて

インターポレーション(interpolation)とは、書き入れ、書き入れられた語句、補間法などの意味があります。 プログラムにおけるインターポレーションとは文字列補完を行うことで、もっと簡単に言うと変数展開になります。  >>続きを読む

AngularJSにおけるminify化の問題点

minify化(ファイル圧縮)とは、改行や空白、コメントなどを取り除きファイルサイズを削減することです。一般的にはminify化でファイルのダウンロードを高速化するねらいで活用されるものです。 minify化は色々なサイ  >>続きを読む

AngularJS入門(1)〜AngularJSで送信フォームの作成でviewの活用

AngularJSはGoogleが開発に携わるJavaScriptのフレームワークです。AngularJSには様々なバージョンがあり、現在(2017/11月)ではバージョン5がリリースされています。 尚、「Angu  >>続きを読む

Node.js入門(2)Gulpの導入と使い方

GulpとはNode.jsをベースにした開発ワークフローで苦労したり時間のかかるタスクを自動化するためのツールキットです。 Gulpでできること Sassのコンパイル コードの連結と圧縮 画像の圧縮 CSSベンダープリフ  >>続きを読む

Node.js入門(1)環境づくりと少しだけ試してみる

Node.jsのページ Node.jsについて Nodeとは何か?これは本家のページの「NODE.JSとは」のページに記述されています。 Node はスケーラブルなネットワークアプリケーションを構築するために設計された非  >>続きを読む

Redmineのインストール方法〜Mac用

Redmineはチームでシステム開発を進める場合に誰がいつまでに何をやるのか、また現在どのくらい進んでいるのかをRedmineに記録することでタスク管理することができるオープンソースソフトウェアのツールです。 チーム作業  >>続きを読む