はてなブックマーク

今回はReactとaxiosを使ってgithubのAPIからデータを取得しようと思います。 まず、初めにプロジェクトフォルダを作ってください。 作成後、プロジェクトフォルダに移動して以下のコマンドを実行してください。 create-react-app プロジェクト名 create-react-appはreactの環境を簡単に作成することができる超便利ツールです。 その後、yarn start自動でブラウザが立ち上がります。 編集するファイルはApp.jsとApp.cssファイルだけになります。 今回はgithub APIのデータをaxiosを使って取得することに集中したいのでコンポーネント化などはしません。 まず、必要なパッケージをインストールします。 yarn install -D axios App.jsの全体のコードになります。 順を追って説明していきたいと思います。 import

JavaScriptにおけるシャローコピー(shallow copy)とディープコピー(deep copy)について簡単にまとめました。 shallowは日本語で「浅い」という意味になります。 シャローコピー シャローコピーはざっくり言うと参照元のオブジェクトとコピー先のオブジェクトどちらも同じメモリを参照していることをいいます。 簡単な例 const obj = { name: "hoge", age: 24 } const obj2 = obj obj.name = "fuga"; console.log(obj2.name) // fuga console.log(obj.name) // fuga 同じメモリを参照しているのでobj2のnameを変更するobjのnameも変更されてしまいます。 ディープコピー ディープコピーとは、オブジェクトのみのコピーではなく、オブジェクトとメモ

最近、「環境構築とかしたくないー」などと嘆くデザイナーさんがいらっしゃったので、何か手軽にフロントエンドの環境を構築できる方法はないかなーと思っていました。そこで良いツールを見つけました！！ その名もPingyです。 gulpやGruntなどは学習コストが掛かります。 Pingyの場合は、複雑なビルドのフローなどには向きませんが、設定ファイルなどもシンプルで初心者に優しく簡単に環境構築ができます！ では、早速環境構築をしていきましょう！ nodeが入っていることは前提としていますのでまだNodeをインストールしていない方は下記の記事を参考にしてください。(尚nodeのバージョンは6以上をサポートしています) Macユーザーはこちら qiita.com Windowsユーザーはこちら qiita.com 1 インストール npm i -g @pingy/cli 作業ディレクトリを作成 mkd

ついに webapck4.0.0がリリースされましたね！ 変更点としてよく言われているのが設定ファイルが不要ということです。 この記事では主要な変更点に絞って実際に手を動かしながらwebpack4の特徴を掴んでいくことを目的とします。 では早速、開発用のディレクトリを作成します。 mkdir webpack4_practice npm init -y package.jsonファイルが作られます。 ではではwebpack4.0.0をインストールしましょう！ npm i -D webpack webpackみたいにコマンドを実行している場合はcliを入れる必要があります。webpack-cliをインストールしましょう。 npm i webpack-cli -D インストールができたらpackage.jsonを開き、以下の記述を追加します。 "scripts": { "build": "web