RのWeb制作 Webサービス制作のための技術情報を。データ分析（Python、機械学習コンペ他）や自作野球ゲームMeisyoのこと中心。 最近、駆け出しエンジニアをTwitter上で数多く見るようになりました。 ただ、揃いも揃って「フロントエンドエンジニア」になりたい（意訳）とプロフィールに書いてあります。 なぜでしょうか。 それは何が問題なのでしょうか。 私が何を問題視しているかというと、フロントエンドエンジニアってそんなにコストパフォーマンス良くないぞ？ということです。 なぜなら、バックエンド等に比べて要求される技術の種類が多くなりがちであるからです。 そこで今回、給与や技術などの視点から、この原因を読み解いてみました。 ※すべてのベースとなる情報科学の知識については全く触れていません。 目次 給与 技術 目指してしまう理由 解決策 あとがき 給与 indeedをはじめ、リクナビネク
現況 Internet Explorer 6 は 2001/8/27 にリリースされまして、ブラウザシェアは現在 0.01% となっております。 ちなみに2年前に調べた時は0.1%強だったのでかなり減っています。 使ったもの Lang: TypeScript UI: Hyperapp v1 i18n: i18next HTTP client: jQuery 1 CSS: Cascade Framework Icon: Material design icons Hosting: Google App Engine IE6 に対応することとは IE6 環境を用意する TypeScript を ES3 ベースに独自の実装を加えた JScript に変換する バージョン毎に実装が異なるスタイルと向き合う Web API を JSONP で作る TLS 1.0 に対応したサーバに設置する というこ
In our team at Rakuten, we have been using Elm1 in production for almost two years now. This post is about our story, the lessons we learned, and our likes and dislikes. This post is quite long so if you prefer to see an overview, feel free to jump to the index. Everything started in the Berlin branch of Rakuten during the summer of 2017. We were maintaining a medium-size single-page application w
Elm at Rakuten
lucamug Posted on Jan 25, 2021 • Updated on Mar 4, 2023 • Originally published at engineering.rakuten.today In our team at Rakuten, we have been using Elm1 in production for almost two years now. This post is about our story, the lessons we learned, and our likes and dislikes. This post is quite long so if you prefer to see an overview, feel free to jump to the index. Everything started in the Ber
この記事はElm Advent Calendar 2019最終日の記事です。 去年末あたりから現職のチームでElmを書き始めたので、大体1年程度はプロダクションでElmのコードを書き続けたことになる。学生時代はRubyとJavaScriptばっかりだったので、関数型プログラミングとかそういうバックグラウンドは一切なかった。その観点から、改めて率直な感想を申し上げておく。 なお、弊社フロントエンドチームとElmに関するはなしは、私の書いたFringe81アドベントカレンダーの記事を参照のこと。 fringeneer.hatenablog.com Elmには中毒性がある Elmを触ったことのない方からすると「？」になるかもしれない（というか、昔の自分がそうだった）が、率直に言ってElmには中毒性がある。一度Elmを知ると、Elm以外の言語を触るたびに「これ、Elmだったら〇〇なのにな〜」と思う
はじめに 昨日今日と JSConf JP 2019 に参加してきたので、聴講したセッションの内容を紹介します。 本記事は Recruit Engineers Advent Calendar 2019 1日目の記事です。 JSConf JP 2019 とは JSConf JP は世界的な JavaScript Conference である JSConf の日本開催です。昨年まで日本Node.jsアソシエーションがNode学園祭として開催していた大規模JavaScript イベントが、Node.js に限らず JavaScript に関する内容のお祭りとして変化を遂げ、今年からJSConf JP となった形です。今年は、2019年11月30日、12月1日の二日間で開催されました。リクルートテクノロジーズは、イベントのプラチナスポンサーの１つです。 以下、公式ページからの引用です。 jsconf
ep.39 Vue 3 Study 『Render function で React の世界を覗いてみる』 | UIT INSIDE
@spring_raining と @potato4d が、 Vue 3 の render function についてのアップデート、TypeScript と TSX、Babelに依存しない Vue.js 開発について語りました。 UIT で定期的に実施している Vue.js 勉強会 前回の Podcast: https://uit-inside.linecorp.com/episode/36 Vue 3で変更されるRender Functionの仕様変更 https://github.com/vuejs/rfcs/blob/master/active-rfcs/0007-functional-async-api-change.md https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-
GitHubActionsでQiitaとSlackを繋いで、エンジニアにとっての良い習慣をつくる。(追記あり) - Qiita
GitHubActionsでQiitaとSlackを繋いで、エンジニアにとっての良い習慣をつくる。(追記あり)Node.js自動化SlackRPAGitHubActions よりよい技術者を目指すための習慣 私が感銘を受けた佐藤太一さんの講演でエンジニアが身につけたい習慣についてのお話があります。 デブサミ2016レポート「今日の習慣が明日をつくる～よりよい技術者を目指して～」 この中で特に、そこまで敷居が高くなく毎日実践できそうなことが書かれていました。（スライドお借りします。） 惰性でトレンドを見る習慣をつけるのが大事 毎日5分Trending repositories on GitHub todayを見よう どんな言語が流行り、開発者が注目されているかを見る 最初はリポジトリまで見なくてもいい。惰性でトレンドを見る習慣をつけるのが大事 言語を絞らずにトレンドに上がるリポジトリを見てみ
Preact + Typescript + Parcel + Redux Zero: Rebuilding the QMENTA Front-End focusing on Performance and Minimalism.
Preact + Typescript + Parcel + Redux Zero: Rebuilding the QMENTA Front-End focusing on Performance and Minimalism. At QMENTA we have been rebuilding the front-end from scratch, seeking simplicity and performance not only in design, but also in the technology stack used for it . This article provides a comprehensive overview of the different parts that compound the new platform, such as how decorat
For a while now, JavaScript and its ecosystem have been thriving. From different tooling categories, UI frameworks have enjoyed immense popularity. New libraries and frameworks seem to pop up almost every day, while Vue, React, and Angular persistently lead the way. From these new options, there are some that deserve your attention. I’m thinking Svelte, Solid, and Hyperapp - an ultra-lightweight U
A collection of JavaScript libraries, resources and shiny things. Package Managers Host the JavaScript libraries and provide tools for fetching and packaging them. npm - npm is the package manager for JavaScript. Bower - A package manager for the web. component - Client package management for building better web applications. spm - Brand new static package manager. jam - A package manager using a
Pythonでスクレイピングを実装する機会があったので、その中で利用した（もしくは技術検証した）ライブラリについて、特徴やどういう時に利用するかについて個人的な見解を書いていこうと思います。 requests 特徴 インストール 実装サンプル 単純にリクエスト リトライありでリクエスト Beautiful Soup 特徴 インストール 実装サンプル pyppeteer 特徴 詳細 requests-html 特徴 実装サンプル ヘッドレスブラウザを使わないケース ヘッドレスブラウザを使うケース scrapy 特徴 詳細 参考リポジトリ 結局どれを使う？ requests 指定したURLに対してリクエストを投げて、レスポンスを取得することができるシンプルなライブラリです。 JavaScript実行を必要としないような静的なサイトからResponseを取得する目的であればこれで十分です。 特徴
はじめに Advent Calendar初参加です。 仮想DOMによるUIフレームワークは、特にJS界ではReactやVue、hyperappなど多くの選択肢がある中、C#だと、現状Blazorぐらいしか無いのではないでしょうか。（あったら失礼しました！） そんな中、C#でも様々な選択肢を取れるようになればと思い、今回はC#による仮想DOMのUIフレームワークを作ってみました。 この記事ではまず、今回作ってみたフレームワークであるExprazorのAPIや実装を紹介し、内部実装のうち仮想DOMの仕組みを中心に解説していきたいと思います。
After I finished the first article I wasn't sure how long it would be before we'd have enough topics for the next round. But given the continuing atmosphere around the JavaScript ecosystem, many of these topics just fell on my lap. So let's get this started. Fight! 1. Build vs No Build Several years ago I read a great article(which I can't seem to find anymore) that saw JavaScript being at a cross
Hyperappを学ぶ（フロントエンドに慣れる）ために定番のTODOアプリを作りました。 reactやangularのチュートリアルに触れたことがある程度の経験の僕でも結構あっさり作れて楽しいです。 開発環境はこの記事と同じです。 state export interface ITodoItem { id: string; done: boolean; text: string; } export interface ITodoState { inputText: string; todos: ITodoItem[]; } export const todoState: ITodoState = { inputText: "", todos: [ /* ダミーのTodoを格納しておきます */ { id: "1", done: false, text: "dummy todo 1" },
github.com Ovtoとは github.com Rubyで書かれたフロントエンドのフレームワーク。 Hyperappをベースにしていて、VDOMを使っている。 https://magazine.rubyist.net/articles/0059/0059-Ovto.html とかを読むのが良いと思います。 PureComponentとは Reactとかにあるそれとだいたい同じで、コンポーネントに渡る引数が変わらない場合にrenderメソッドの呼び出しを省略できる。 たとえば次の例だと、Pure#renderはstate.fooが更新された時にだけ呼ばれるが、NotPure#renderはstate.fooが更新されてもstate.barが更新されても呼ばれる。 つまり、頻繁に更新されるstateがあるけどそれに依存していないコンポーネントがある場合、renderメソッドの呼び出し
1. はじめに 表題の通りアプリを作ったので記事にしておこうと思います！ 初めてHyperappで開発を始める方は 基本的な考え方を是非こちらでご確認ください。 https://qiita.com/hajime-nohara/items/888aae1c4e553f3cec86 実際にアプリを触りながら読んでもらえると良いと思います。 https://www.sharpen.tokyo/gantt.html 本記事はアプリの実装内容についてザックリ記し、開発環境設定については触れません。 ※ 以降、本記事で紹介するアプリをsharpenと呼びます ※ 発展途上アプリです、ご指摘やアドバイスお願いします😉 1-1. sharpenはどんなアプリ？ シンプルなガントチャートUIをベースにした タスク管理アプリです。 デザイン、UX、共にシンプルを追求。 1-2. 設計思想 ・サンプルと呼べる
Vue.jsはJavaScriptのフレームワークですが、どのようなものかご存じでしょうか。本記事では、Vue.jsについて、何ができるのかや他のフレームワークとの違いなどを紹介します。Vue.jsに興味がある方は、是非この記事を読んでみてください。 ＜業界実績17年＞ シニアフリーランス専門 エージェントSEES 40～60代以上のシニアエンジニア案件探しは、私たちにお任せください！ ご登録者様限定で、Webに公開していない非公開案件をご提案いたします。 無料登録して 案件を紹介してもらう 「Vue.jsとは、どのようなものなのだろう？」 「Vue.jsを使ってできることはどんなこと？」 「Vue.jsと他のフレームワークはどう違うの？」 JavaScriptを使って開発を始めたいと考えている人は、Vue.jsという言葉を聞いてこのような疑問を持つことがあるのではないでしょうか。 本記事
1 はじめ 何か自分の欲しい情報を定刻に毎日配信してくれるものはないかな～ そうだ作ろう、という感じでスタート 構成 ざっくり CloudWatch Eventsで定刻にLambdaを実行 Lambdaはどこからか情報を取得/編集、SendGridで結果をメール配信 LambdaでKotlinを使用する方法は過去に書いたこの記事を参照 KotlinでAWS Lambdaを書く！ SendGridはクラウドメール配信サービスです。 登録後審査があるのですぐ使用開始！、とはいかないのですがFreeプランもあり良いサービスです。 ※私の場合は1営業日ほどで認可されました。 SendGrid 各言語のSDKもあります。 https://github.com/sendgrid/sendgrid-java#usage 何を配信しよう？？ とりあえずQiitaの日間トレンドを取得してみようか。 トレンド
RのWeb制作 Webサービス制作のための技術情報を。データ分析（Python、機械学習コンペ他）や自作野球ゲームMeisyoのこと中心。 最近、駆け出しエンジニアをTwitter上で数多く見るようになりました。 ただ、揃いも揃って「フロントエンドエンジニア」になりたい（意訳）とプロフィールに書いてあります。 なぜでしょうか。 それは何が問題なのでしょうか。 私が何を問題視しているかというと、フロントエンドエンジニアってそんなにコストパフォーマンス良くないぞ？ということです。 なぜなら、バックエンド等に比べて要求される技術の種類が多くなりがちであるからです。 そこで今回、給与や技術などの視点から、この原因を読み解いてみました。 ※すべてのベースとなる情報科学の知識については全く触れていません。 目次 給与 技術 目指してしまう理由 解決策 あとがき 給与 indeedをはじめ、リクナビネク
TypeScriptで画像をimportしても怒られない方法(ParcelとHyperappを添えて) - Qiita
注意 TypeScript 3.2.2にアップグレードしたら怒られるようになった。調査中。 importにこだわらないなら、以下。
Pythonでスクレイピングを実装する機会があったので、その中で利用した（もしくは技術検証した）ライブラリについて、特徴やどういう時に利用するかについて個人的な見解を書いていこうと思います。 requests 指定したURLに対してリクエストを投げて、レスポンスを取得することができるシンプルなライブラリです。 JavaScript実行を必要としないような静的なサイトからResponseを取得する目的であればこれで十分です。 特徴 HTTPレスポンス（ヘッダー、ステータスコード、HTML）を取得できる リクエストヘッダーやクッキーを指定してリクエストすることができる リダイレクト（301や302など）もしてくれる urllib3.util.retry.Retryと一緒に使えばリトライもできる response.textで本文を取得する際、charsetをよしなに解釈してdecodeして文字列
【Python】HTMLをJSON形式にしたり、簡易的にjQueryのセレクタっぽい解析ができるモジュールを作ってみた。 - Qiita
【Python】HTMLをJSON形式にしたり、簡易的にjQueryのセレクタっぽい解析ができるモジュールを作ってみた。PythonHTMLスクレイピングJSON きっかけ 唐突にHTMLをJSON形式に変形したい衝動に駆られたので書きました。 ついでにセレクタ機能もどきもつけてみようかと。 このセレクタ機能もどきを使えばQiitaのトップページから2行でトレンド情報のJSONを抜き出せます。 構造 ・ディクショナリクラスを継承して、辞書としての機能のほか、タグや親（子）要素、テキストなどの情報を個別に保持できるクラス ・HTMLの各タグを上記クラスに加工する関数 ・おまけのHTTPリクエストから加工までやってくれる関数 以上 実装 import re class html(dict): def __init__(self, tag, parent=None, attributes={})
Hyperappでhead内のタグを書き換えるライブラリ、Hyperapp Helmetをリリースしました！ - Qiita
import { h, View } from 'hyperapp' import { App as A } from './App' import { getHelmetNodes } from 'hyperapp-helmet' const Fragment = '' export const Html: View<A.State, A.Actions> = ( state: A.State, actions: A.Actions ) => { const helmetNodes = getHelmetNodes(A.view, state, actions) return ( <Fragment> <Fragment innerHTML="<!doctype html>" /> <html lang="ja"> <head> <meta charset="utf-8" /> <met
1. はじめに 表題の通りアプリを作ったので記事にしておこうと思います！ 初めてHyperappで開発を始める方は 基本的な考え方を是非こちらでご確認ください。 https://qiita.com/hajime-nohara/items/888aae1c4e553f3cec86 実際にアプリを触りながら読んでもらえると良いと思います。 https://www.sharpen.tokyo/gantt.html 本記事はアプリの実装内容についてザックリ記し、開発環境設定については触れません。 ※ 以降、本記事で紹介するアプリをsharpenと呼びます ※ 発展途上アプリです、ご指摘やアドバイスお願いします😉 1-1. sharpenはどんなアプリ？ シンプルなガントチャートUIをベースにした タスク管理アプリです。 デザイン、UX、共にシンプルを追求。 1-2. 設計思想 ・サンプルと呼べる
JSX の本質を理解する 『JSX』という名前は『JavaScript』と『XML』の組み合わせ でできてる。JSX は XML ライクな記述ができるようにした ECMAScript 2015 に対する構文拡張 JSX の構文は、本質的には ReactElement オブジェクトを生成するための式 変数に代入したり、狭義のオブジェクトのプロパティ値にしたり、関数の引数や 戻り値にしたりもできる なぜ React は見た目とロジックを混在させるのか 機能単位で分割された独立性の高いパ ーツを組み合わせることでアプリケーションを構築しようというのが React の開発思想 そのパーツがコンポーネントという React はコンポーネント自身が、 自身の描画に必要な処理を自分でやり、レンダリングもコンポーネントごとに個別で行われる そしてそれらはコンポーネント単位で並列に非同期で実行される 私たち
import requests from bs4 import BeautifulSoup import json import re html = requests.get('https://qiita.com') qiita = BeautifulSoup(html.content, "html.parser") qiita.select('div[data-hyperapp-app="Trend"]') target_div = qiita.select('div[data-hyperapp-app="Trend"]')[0] trend_items = json.loads(target_div.get('data-hyperapp-props')) for v in trend_items['trend']['edges']: print(v['node']['title'])
Angular TypeScriptとRxJS AngularJS 動作端末が多いアプリケーションを作成出来る Vue.js 開発者Evan You（元Google） ライブラリ jQuery 開発者ジョン・レシグ React.js JSX、Flow、Redux Riot.js 非常にシンプルかつ学習コストの低いコンポーネント指向のフレームワーク Hyperapp 開発者Jorge Bucaran（Qiitaの中の人） Backbone.js その他 w2ui ■ 【CSSフレームワーク】 No CSSフレームワーク 開発 公開年 バージョン(確認日時) 概要
![[開発]javascriptフレームワーク比較 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a3061e31dd5fc523d26cf1157bb588b86be8c42/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU5JTk2JThCJUU3JTk5JUJBJTVEamF2YXNjcmlwdCVFMyU4MyU5NSVFMyU4MyVBQyVFMyU4MyVCQyVFMyU4MyVBMCVFMyU4MyVBRiVFMyU4MyVCQyVFMyU4MiVBRiVFNiVBRiU5NCVFOCVCQyU4MyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MDgzYjQ0YmQ1NGJlYmZhNzkzYmJjY2RiNGUwZDZjZmU%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBza3R3JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kYzk5ZGMzODQ3MTcyZGZhZDY2ZTkxZjNhNDQwNTAwMQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Da9920fedb3d9e5974345b3d3356a8d2a)
記事の目的 この記事は、プログラミング初学者の中でも、 HTML → CSS → jQuery と学んできて、次のステップとしてJavaScriptを学び始めた人が、 技術的な話の前に知っておいたほうが助かりそうな事情や背景をまとめた記事です。 JavaScriptをちょっと初めてみたけど、よくわからん！と混乱しているタイミングで、読んでいただけたらと思います。 「そんなことわかってるよ」と言いたくなるような初歩的な説明もあると思うので、読み飛ばしていただければと思います。 執筆者もプログラミング歴１年程度の初心者なので、知識の浅い部分があります。 また、初心者ながらJavaScriptを学んでしばらくたっているので、当事者目線からずれた説明をしてしまう部分もあるかもしれません。 そのため、この記事のコメント欄で、ターゲットとなる当事者の方や、執筆者よりも博識な方などから、 いろいろな意見
ページ容量を増やさないために、不具合報告やコメントは、説明記事に記載いただけると助かります。 対象期間: 2020/01/13 ～ 2021/01/12, 総タグ数1: 45,560 総記事数2: 166,944, 総いいね数3: 2,326,183, 総フォロワー数4: 119,088 総合評価5: ((68.756 * 記事数) + (4.457 * いいね数) + (115.138 * フォロワー数))pt 総合順位;タグ名;記事数順位;いいね数順位;フォロワー数順位 1;Python;1;2;1 2;JavaScript;2;1;2 3;Ruby;4;5;7 4;Rails;3;4;16 5;PHP;8;12;12 6;AWS;5;7;30 7;初心者;6;3;61 8;Git;18;14;4 9;GitHub;26;19;3 10;Docker;7;6;28 11;Linux;1
Hyperapp 2.0.4では正常に動作していたのに、2.0.5以上にあげたら動かなくなったという報告が上がっている。 私の所でも、見事に動かなくなった。どうやら、仕様が変わったようだ。せめて2.1.0とかにしてくれれば良いのに…。 ということで、私が気付いた変更点をあげてみる。 テキストノードを作成のためのtext()関数が追加された。テキストノードは文字列"hoge"ではなくtext("hoge")というように記述する必要がある。 Lazy()はmemo()と名前が変更された。(動作が変わったどうかまでは未確認) DOM以外のVODMはh()関数を経由せずに直接関数として呼び出すようになった。 h()関数において第四引数以降が無視されるようになった。子ノードが複数ある場合は配列にする必要がある。 app()のsubscriptionsに指定する関数は、subscriptionsの配列
CDNでHyperapp + JSX - Qiita
はじめに HyperappでもJSXが使えるらしいです。READMEを読むと"@babel/plugin-transform-react-jsx"をインストールして、.babelrcに以下を記述するように書いてあります。 { "plugins": [["@babel/plugin-transform-react-jsx", { "pragma": "h" }]] } <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script> <script type="text/babel" id="script"> define('main', ['hyperapp'], ({h, app}) => () => {
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
駆け出しエンジニアは本当にフロントエンドエンジニアを目指すべきなのか – RのWeb制作
2020年20年目を迎える IE6 に対応した SPA を TypeScript で作る - Qiita
Elm at Rakuten | Rakuten Engineering Blog
Elmをプロダクトで一年書き続けた感想 - Runner in the High
JSConf JP 2019 参加報告 - とろろこんぶろぐ
Hyperapp – Is It the Lightweight 'React Killer'?
JavaScript Library and Resources - DEV Community
pythonでスクレイピングする際に利用するライブラリ比較 - rinoguchiのメモブログ
自作UIフレームワークExprazorの紹介と仮想DOMの実装方法 - Qiita
JavaScript vs JavaScript: Round 2. Fight!
hyperappを理解するためにTODOアプリを作成しました - Qiita
OvtoにPureComponentを実装した - pockestrap
Hyperappでタスク管理アプリを作った - Qiita
Vue.jsを使ってできる12のこと｜その他のフレームワークとの比較
【Lambda×Kotlin×SendGrid】自分にメール配信する機能を作ってみた - Qiita
駆け出しエンジニアは本当にフロントエンドエンジニアを目指すべきなのか – RのWeb制作
pythonでスクレイピングする際に利用するライブラリ比較 – rinoguchi's techlog
Hyperappでタスク管理アプリを作った - Sync from Qiita
第5章 JSXでUIを表現する メモ - Qiita
【Python】Qiitaのトレンドを取得 - Qiita
[開発]javascriptフレームワーク比較 - Qiita
jQueryの次にJavaScriptを学びはじめたキミのための記事！ - Qiita
タグ一覧(ランキング順)【直近１年間/上位25,000タグ】【2021/1 更新停止】 - Qiita
Hyperapp 2.0.5から動作が変わったという話 - Qiita