サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
掃除・片付け
www.aizulab.com
【React】スライダープラグイン「slick」のReact版「react-slick」の使い方 slickのことをjQueryプラグインとして覚えている人も多いと思う。slickは、スライダー&カルーセルを実装するプラグインでカスタマイズオプションも豊富に用意されていて使い勝手がよい。 わたしも多くの案件でスライダー実装には、slickを使ったものだ。いまでも静的サイトコーディングでスライダー実装が必要ならば、真っ先にslickを検討するはずだ。 そんなslickだが、jQueryプラグインであることから、昨今のSPAやSSR案件では使う機会が遠のいているのも事実。ReactやVue、Angularといったライブラリにもスライダー&カルーセルを実装するライブラリがあるからだ。そんな環境にわざわざjQueryを入れようとは思わない。 ところが、React用にモジュール化されたslickがあ
React Hooksに対応した複数のonChangeハンドラを処理する書き方 Functional Componentにおける複数のonChangeハンドラを一元的に処理するコールバック関数をお伝えしたい。 まずフォーム項目の操作は、onChangeハンドラが必要で、記述がなければwarningが発生するケースもある。input要素を有するコンテンツに限れば、必須イベントハンドラといえる。 そしてinput要素がひとつということも考えにくく、複数のinput要素から構成されることが予想される。たとえばログインフォームにしても、メールアドレスとパスワード、ログイン保持などが考えられるが、そのどれもstate変化によって成り立つ。 すなわちonChangeハンドラが必要となるが、それぞれでコールバック関数を定義していては効率が悪い。複数input要素があっても、ひとつのコールバック関数が処理
こんにちは、ソリューションの五十嵐です。 Netlify CMS + GatsbyのようなJAMStackなブログが話題になっています。 弊社のブログもJAMStackな構成にしたいと思っていますが、Netlifyなどのサービスを利用するよりは自社のサーバにHeadlessCMSを構築したいと考えています。 調べたところによるとNode.jsで構築できる「Strapi」というオープンソースのHeadlessCMSがありましたので試してみようと思います。 https://strapi.io/ Strapiのインストールはnpmで行います。 公式のチュートリアル通りに以下のコマンドを実行しましょう。 $ npm install strapi@alpha -gインストールが完了したらstrapiコマンドでプロジェクトディレクトリを作成します。 公式ではMongoDBを推奨していますが、MySQL
Next.jsでSassファイルを使う!node-sassモジュール設定方法 Next.jsでSassモジュールを使えるようにしたい?その手続き、私がお手伝いしましょう。 Next.jsには、もともとstyled-jsxが用意されています。それによりパッケージを追加せずとも、ReactコンポーネントベースのCSS設計ができるわけです。 コンポーネント単位でスタイルを当てる分には、設定もなくJSX形式で記述できます。しかしextendしたいCSSプロパティなどがある場合には、当該コンポーネントでは完結しません。 そこで取り入れたいのが、アプリケーション全体に適用されるスタイルです。CSSファイルを読み込めば済みますが、開発過程でSassを使用しているケースもあります。それならば折角だから、Next.js環境にもSassを導入したいではありませんか。 それが、このエントリーの動機です。あなたも
ログインShellをfishにして作業効率を改善する こんにちは、ソリューションの五十嵐です。 ログインShellとしてzshを使用しているのですがイマイチzshを使いこなせておらず、bashと比べても作業効率が良くなっているようには思えませんでした。 そんな中fishの記事を拝見して興味を持ったので試してみました。 ちなみにGoogleでfishについて調べるとfishがなんとなく良いものだとわかります。 インストール 私はMac環境ですのでHomebrewでインストールします。 $ brew install fish ログインShellに設定できるように/etc/shellsの末尾に/usr/local/bin/fishを追加します。 $ sudo vi /etc/shells /usr/local/bin/fish 以下のコマンドでログインShellに設定します。 $ chsh -s
パララックス効果を与えるとても簡単なJavaScriptライブラリ「simpleParallax.js」の使い方 パララックス効果は数年前にトレンドとなって、いまでもWebデザインの表現に欠かせない要素のひとつであるが、しかしその表現はさまざまで、複雑さを増している印象がある。 そんな影響を受けてかパララックスライブラリも高機能になっていき、使いにくい状況になってしまっている。さらにサイト設計に関わるJavaScriptフレームワーク(ライブラリ)との依存性も考えなければならない。 そのような訳で、パララックスの実装に苦手意識をもっていないだろうか?できれば、「パララックス効果を含んだデザインを入稿しないでね」って具合に。 でも大丈夫。実装がとても簡単なJavaScriptライブラリがある。 このエントリーでは、パララックス効果を与えるJavaScriptライブラリ「simpleParal
Gmailエイリアス機能で別名アドレスを作る方法 私は、メールのやり取りに「Gmail」を利用している。仕事、プライベートともにである。そしてこの記事をご覧になるあなたもGmailを日々活用していることだろう。 そんななか、つぎのような必要に迫られたことはないだろうか? 「SNSアカウント作成ごとにメールアドレスを変えたい」 「ラベル・フィルタの分類を楽にしたい」 「新たにメールアドレスが欲しいけど、アカウントは作りたくない」 などに該当する場合は、有効な手段になり得るエイリアス機能を紹介したい。 引き続きご覧いただけると幸いだ。 Gmailエイリアス機能とは? まずエイリアス機能について解説しよう。Gmailを使うにあたり、Googleアカウントを開設している訳だが、Gmailアドレスは1アカウントにつき1アドレス発行される。 また同一アカウントでサブアカウントは開設できない。つまり「~
ホームテクノロジーAWS Lambda で Python みたいな関数型言語 Coconut を動かすぞ!!!!!!!(非カスタムランタイム) AWS Lambda で Python みたいな関数型言語 Coconut を動かすぞ!!!!!!!(非カスタムランタイム)みなさんはじめまして!!!!!!!!!!!! 会津ラボで主にバックエンドの開発を担当している吉原です。他にブロックチェーン等もやってます。好きな言語は Haskell、趣味はクイズゲームです。以後お見知りおきを。 ※ ちなみに弊社には吉の字がつくバックエンド担当が2人おり、度々間違われます。当ブログをご覧になる場合はご留意ください。 さて、今日(注:執筆開始時点)はお盆です。 ……お盆も働いていたやつらだ。面構えが違う。 というのは冗談で、お盆休みをずらして取得しているため、その代わりに出勤しています。こういったことができる所
ホームテクノロジー【Electron+Next.js】デスクトップアプリジェネレーターNextronで簡単にElectronアプリ開発をしよう 【Electron+Next.js】デスクトップアプリジェネレーターNextronで簡単にElectronアプリ開発をしよう Electronデスクトップアプリのレンダラープロセス設計において、求められるスキルセットはWebアプリ案件とそれほど違うところはない。 静的コンテンツで済むのであれば、HTML&CSSとわずかなJavaScript(jQuery)があればよい。コンテンツ更新が頻発するのなら、SPAを考慮したい。ReactやVue.js、Angularなどが候補になるだろう。 SSRフレームワークで知られるNext.jsやNuxt.jsを得意とするなら、十分に活用できるはずだ。ただしレンダラープロセスのウインドウ生成には、起点となるHTML
このページを最初にブックマークしてみませんか?
『to Advance Knowledge for Humanity』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く