Webシステムの設計の変遷（2000年から2021年までの概観）ー 技術選定の指標 - Qiita
１．1990年～2000年初頭：カオス・黎明期 インターネットが流行り始めた頃は、HTMLに装飾を記述し、CSSに装飾を書くなどの分離はあまり見られなかった。 また、Javascript（以下、Js）の利用も限定的で、画面の要素をJsで作ったり、ましてや、コンポーネントの発想などほぼ見られなかったように記憶している。 見た目のデザインとコード構造もカオスだった時代。 ※@error_401さんのコメントにあるように、Javaでのシステム開発が多く、Java Appletによって動的な画面作成もあった。若い人は、Appletの存在はわからないかもしれないけど、少しの間、ブラウザにもその設定があった。 また、AdobeのFlashによる動的コンテンツの作成もあった。Appletよりは長く使われており、Jsでの動的なコンテンツ作成の前には、AdobeのFlashでの開発が多かったと思う。 １－１
JavaScript ライジングスター 2021
6回目の JavaScript ライジングスター にようこそ！ JavaScript疲れから逃れるためにここに来たみなさん、ちょうどいいところに来ましたね。 今回はメタフレームワーク、速度の必要性、界隈のオールスターがテック企業にジョインした話などの話題があります。 しかし、まずはチャンピオンの話です。 今年は誰もが予想していなかった新しい覇者が誕生しました！ しかもそれは、なんとコマンドラインツールです！ 以下は、2021年の1年間で増加したGitHubのスター数によるランキングです。Webプラットフォームに関するベストプロジェクトを集めたリストであるBest of JSからの一年間の分析です。各プロジェクトをクリックすると、より詳細な情報を閲覧することができます。
Next.jsとGo言語(gqlgen)でGraphQLを使ったアプリケーションを構築する方法 - Qiita
この記事では、フロントエンドにNext.js、バックエンドにGo言語(gqlgen)を用いて、フロントエンドとバックエンド間のAPIにGraphQLを使ったアプリケーションを構築する方法をまとめます。 作成したのは以下のような簡易ブクマアプリです。 フロントエンドはほぼNext.jsのexamplesのままで、本記事ではバックエンドの実装をメインに解説します。 背景 個人的に、「フロントエンドフレームワークとGo言語の組み合わせで何か開発をしてみたい」と以前から思っていました。 そんな中、ReactのフレームワークであるNext.jsの使い勝手が良さそうという噂を耳にしました。 加えて、Next.jsのexamplesが充実していて、Apolloを使ったアプリケーションのひな形が簡単に作れることを知ったので、今回Go言語のバックエンドと組み合わせて動かしてみることにしました。 構成要素 図
JavaScript で任意のテキストをクリップボードにコピーする
copyToClipboard 関数次の copyToClipboard 関数を使うと、引数で指定したテキストを OS のクリップボードにコピーすることができます。 function copyToClipboard(text){ // テキストコピー用の一時要素を作成 const pre = document.createElement('pre'); // テキストを選択可能にしてテキストセット pre.style.webkitUserSelect = 'auto'; pre.style.userSelect = 'auto'; pre.textContent = text; // 要素を追加、選択してクリップボードにコピー document.body.appendChild(pre); document.getSelection().selectAllChildren(pre); co
保存版！「sequelize」モデルの使い方実例・全59件
さてさて、前回の記事「Node.jsにDBマイグレーション、Seed、モデルを用意する」では、「Sequelize」というパッケージを使ってデータベース周りの開発を楽にしてみました。 前回は、その「Sequelize」のインストールやコマンドの使い方をメインにしてご紹介したのですが、実はひとつ情報が多すぎてまとめていない部分があります。 それは・・・ モデルを使ってデータベース操作（取得／追加／更新／削除）する方法 です。 そこで！ 今回は「Sequelize」モデルの使い方を実例でお届けしたいと思います。 ぜひ皆さんのお役に立てると嬉しいです😊✨ 開発環境： Node.js 8.10、Express 4.1、Sequelize 5.2 前提として 今回の記事は「sequelize」がインストールされていて、さらに、すでにモデルが作成されている必要があります。 もしまだ準備が整っていない
react-hook-formとReact Datepickerを組み合わせる
Next.jsアプリケーションでフォームを扱う必要があったので、React Hook Formを利用した。 また、カレンダーから日時選択ができるようにしたかったのでReact Datepickerと組み合わせることにした。 components/DatePicker.tsxHook FormのControllerのドキュメントを参考にDatePicker用のコンポーネントを作成。 import 'react-datepicker/dist/react-datepicker.css' import React from 'react' import ReactDatePicker from 'react-datepicker' import { Control, Controller, Path } from 'react-hook-form' type Props<T> = { label
はじめに | Next.js
Next.js のドキュメントへようこそ！ Next.js を初めて使用する場合は、学習コースから始めることをお勧めします。 学習コースは翻訳されていません。 インタラクティブなクイズによる学習コースでは、Next.js を使うために必要なすべての知識を習得できます。 Next.js に関連事項する質問がある場合は、GitHub Discussions のコミュニティーでなんでも質問してください。 システム要件 Node.js 12.22.0 または、それ以降 MacOS, Windows (WSL を含む)、そして Linux をサポート 自動セットアップ すべてを自動的にセットアップする create-next-app を使って、Next.js アプリを作成することをお勧めします。プロジェクトを作成するために、次を実行します: npx create-next-app@latest #
入門者は基礎からしっかり理解Next.jsの基本(React) | アールエフェクト
本文書はNext.jsのバージョン12を元に作成していますが新たにNext.jsのバージョン13に対応した記事を公開しました。 Next.jsはオープンソースのReactベースのフロントエンドフレームワークです。パフォーマンス、SEOやアプリケーションの開発の効率化に関わるFile System Based Routing, Server Side Rendering(SSR), Static Site Generator(SSG), Incremental Static Regeneration(ISR), Image Optimization, Code Splitting, Pre-fetching, Serverless Functions, Fast Refreshなどの機能が事前に組み込まれています。これらの機能を自分で実装しようとすると非常に困難です。しかし自分で実装すること
Cytoscape.jsを試してみた - teruuuのブログ
Cytoscape.jsとは もともとはクライアントアプリとして欧米の研究機関によって開発されているオープンソースのネットワーク可視化ソフトウェアプラットフォームであるCytoscapeが10年ほど前に作られ現在も継続して開発が行われています。Cytoscapeはデータの読み込み、分析、可視化といった一連の処理を行うことができますが、分析は別のソフト例えばRなどを使い、それから分析結果をエクスポートしてCytoscapeで可視化と言った使われ方もあるようです。クライアントアプリでは分析結果の共有に不便であるためカナダのトロント大学Cytoscape.jsのを開発を始めたようです。 以下のデモを見るのが一番わかりやすいと思います。 js.cytoscape.org Cytoscapeでの処理フローについて 下記URLのCytoscapeの開発者の記事によりますと以下のような処理フローになるよ
Turn.js: The page flip effect in HTML5
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page
CentOSにPhantomJSとCasperJSをインストールする - ソフラボの技術ブログ
以前、CentOSに最新のPhantomJSをインストールしようとするとエラーが発生するという記事を書きました。shinsuke789.hatenablog.jp その後、さらに調べてみると古いバージョンのバイナリが配布されていることがわかり、これをインストールすると問題なく使用できたので、その時の手順を紹介します。 環境 OS CentOS 6.4 PhantomJS 1.9.8 CasperJS 1.1.0-beta3 手順 PhantomJS 1.PhantomJSのBitbucketよりバイナリファイルをダウンロードします。そのままwgetすると長いURLになってしまうので、別名で保存します。 # 保存先に移動する cd /usr/local/src # バイナリをダウンロードする wget https://bitbucket.org/ariya/phantomjs/downloa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js における環境変数 (env) の基本的な設定方法 | fwywd（フュード）powered by キカガク
Chart.js
メンテナブルなJsってなんだろう