JavaScript

メッセージ投稿用のエンドポイントを作成してみる。【ver.5.1】

ポートフォリオに追加するメッセージツール用のエンドポイントを作成してみた。 kazmaarakaki.hatenablog.com Expressを使えばめちゃくちゃ簡単、と思いきやPOSTでクライアントからデータを送るときには追加のモジュールが必要。 body-parserをインストール …

bundle.jsをminifyしてみる。【ver.4.1】

先の記事に載せたスクリーンショットの通り、現在bundle.jsのファイル容量が大きくなっている。 kazmaarakaki.hatenablog.com ビルドされたbundle.jsの中身を確認すると、不要なコメントや改行が多く、minifyするだけでかなり圧縮できるものと思われる。 Web…

ExpressでWebサーバーを動かしてみる。【ver.3.2】

server.jsを作成する [ROOT]/ + node_modules/ + build/ + source/ | + images/ | + renderer/ | + index.html | + style.css | + server.js + .gitignore + .babelrc + webpack.config.babel.js + gulpfile.babel.js + package.json server.js diff import …

読む本リストのJSONデータを読み込んで描画してみる。【ver.2.3】

ほんとはデータベースを使うべきなんだろうが、とりあえずJSONで代用する。 データファイルの作成 components/books/components/main/books.json diff [ { "title": "本のタイトル", "url": "AmazonのURL" }, ... ] Viewファイルの編集 components/books/com…

RE: javascript 即時関数の書き方

あてつけのようになってしまい申し訳ないがコメント欄が見当たらなかったのでこちらの記事に書く。 ううむ、即時関数を呼び出すにはどのようにしたら良いのでしょうか。 引数なしだったらいけそうな気もします。再度、色々なアプローチで実験してみようと思…

react-router-domを使って画面遷移をしてみる。【ver.2.2】

ver.3.0のビジョンが見えないまま前回ver.2.1へ移行してしまったわけだが、あらためてver.3.0への目標を決めたい。 読む本リストの実装、これだ。 読む本リストを思いついた時点で、なんか他にもリスト系作ってみたいなーと思ったので、別画面を作成して画面…

CSS Modulesを導入する。【ver.2.0】

WebpackのCSS Modulesは、loaderを追加するだけでHTMLファイルの<head>内にモジュールの記述をまとめた<style>要素を追加してくれる。 ここまででいったんReact化についてやりたいことは一段落したのでver.2.0としたい。 ソース【ver.2.0】 https://github.com/cosmology2</head>…

コードをES2015+の文法で書き換えてみる。【ver.1.4】

とりあえず書き換えて実行してWebpackのエラー見ながら設定直していこうかな、と思ったら普通にビルドできちゃった。 Webpackすげえ。 ディレクトリ構成 [ROOT]/ + node_modules/ + build/ + source/ | + images/ | | + main.jpg | | | + renderer/ | | + co…

各パーツのコンポーネント化をしてみる。【ver.1.3】

Reactでのビルドと描画が無事成功したので、次はコンポーネントを作ってみたい。 Header, Main, Footerの3つのコンポーネントに分けようと思う。 エラー出て修正したところは赤太字。 コンポーネントを意識したディレクトリ構成へ React関連はsource/rendere…

WebpackでReactを試してみる。【ver.1.2】

Webpackの雰囲気がふわっとつかめてきたので早速ポートフォリオをReact化してみる。 エラー出て修正したところは赤太字(太字とh3タグの見分けがつかない)。 Webpackのインストール > npm install webpack --save-dev jsxのトランスパイルのためにloaderが…

Webpackの使い方を学んでみる。

前回インストールしたReact用のライブラリは、requireという関数で呼び出すのだが、ブラウザの実行環境ではJSファイルから他のJSファイルを参照することができない(つまりrequireを使えない)。 それを解決するのがBrowserifyだったりWebpackだったりするら…

記事内に目次を作りたい。

考えてみた 記事内のhタグを拾ってどうにか目次にできないだろうか。 ※この記事では動作確認のために普段より多めにhタグを使っています。 たとえば 見出し1 小見出し1 小見出し2 見出し2 小見出し2 みたいな。クリックしてジャンプできるとなお良し。 …

ポートフォリオ作る。

ということで作る。頑張る。 kazmaarakaki.hatenablog.com 環境作りから!!!(要るかな。。。?) プロジェクトに新しいディレクトリ作って。 > npm init > npm install gulp --save-dev > npm install gulp-webserver --save-dev index.html と gulpfile.…