joppot

コピペで絶対動く。説明を妥協しない

「 プログラミング 」 一覧

React WebでURLをaタグのリンクにして表示する

概要 みなさんこんにちはcandleです。今回はReactでコメントなどに投稿されたURLからリンクを生成する方法を紹介します。しかし、URLからリンクの自動生成は結構危険です。無尽蔵にリンク化を許可 …

javascript + Reactでhtmlタグの削除と許可とXSS対策

概要 みなさんこんにちはcandleです。今回はReactで許可したhtmlタグだけを表示し、それ以外のタグは削除するプログラムを書いてみます。 注意、本来ユーザーなどが投稿した内容をそのまま表示させ …

React webでreact-simple-formatを使う

概要 みなさんこんにちはcandleです。今回はreactでsimple-formatを使ってみたいと思います。simple-formatは割とRuby on Railsでは有名で、よく使われます。R …

Hiragino Sansフォントウェイトのcss書き方まとめ

2018/12/05   -プログラミング
 ,

概要 みなさんこんにちはcandleです。今回はHiragino Sansのcssの書き方を紹介します。 Hiragino Sansの特徴はフォントの太さを1から9段階まで変えられることです。 一方で …

react-lazyloadを使って画像を遅延ロードをする

概要 みなさんこんにちはcandleです。今回はreact-lazyloadを使って画像の遅延読み込みをしてみましょう。SPAにおける問題は最初の読み込み時の遅さです。その中でも画像が多いサイトになる …

Rubyで文字列に含んで欲しくないキーワードがある場合はマッチさせない正規表現

概要 みなさんこんにちはcandleです。今回はRuby主にruby on railsで文字列に含まれて欲しくないキーワードがマッチした場合は通らない正規表現を作りたいと思います。 これは例えばこのよ …

入門ReactでGSAPアニメーションの使い方

概要 みなさんこんにちはcandleです。今回はReactでGSAPを使ってみたいと思います。 簡単にアニメーションが使えるjsライブラリはjQueryが有名です。ただ、jQueryとReactは相性 …

reactで最もシンプルなドロップダウンメニューを作成

概要 みなさんこんにちはcandleです。今回はreactで最もシンプルなドロップダウンメニューを作ってみたいと思います。 前提 Reactの知識がある 準備 以下のコマンドでreactプロジェクトを …

react-modalの背面のスクロールを固定する

概要 みなさんこんにちはcandleです。今回はreact-modalの背面がスクロールした時に動いてしまう問題を解決してみたいと思います。 前提 reactの知識がある 完成版のサンプルコード サン …

react-modalを利用してモーダルを作成するチュートリアル

概要 みなさんこんにちはcandleです。今回はreact-modalを使ってモーダルを作ってみたいと思います。 react-modalはreactで簡単にモーダルを取り扱えるライブラリです。 しかし …

ReactでFaker.jsを利用してダミーデータを生成する

概要 みなさんこんにちはcandleです。今回はFaker.jsをReactで使ってみようと思います。 Faker.jsの使用目的は様々あると思います。多くの場合はテストで使うと思うのですが、今回は簡 …

React webでsematic-ui-reactを使い基本的なサイトを作成する

2018/07/27   -プログラミング
 ,

概要 みなさんこんにちはcandleです。今回はSemantic UIを使ってReactのデザイン開発をして見たいと思います。 Semantic UIはCSSフレームワークの1つで他に有名なところはT …


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー