[RUBY] [Pour les débutants] Feuille de route complète pour l'apprentissage de la programmation WEB [De l'achat d'un MacBook au niveau pratique]
Qu'est-ce qu'une feuille de route complète pour l'apprentissage de la programmation WEB?
Nous proposons les expériences suivantes ** entièrement gratuites **. Prendre de l'argent Contrairement à la note, Qiita n'a pas de fonction d'article payant. Je suis soulagé.
・ Tout le monde peut acheter un MacBook
・ Matériel pédagogique pour les débutants en programmation
・ Je vais vous expliquer les bases de la programmation WEB
・ Vous pouvez apprendre la programmation même si vous êtes complètement inexpérimenté
Vous pouvez créer personnellement des services WEB comme ・ Qiita
Avantages de lire cet article
・ Vous acquerrez les compétences nécessaires pour créer un site Web pouvant être livré pour 500000 yens
Le site Web que vous utilisez actuellement s'appelle "Qiita". Si vous produisez à partir de 1, l'échelle est "délai de livraison 30 à 60 jours, prix de 500 à 1 million de yens".
Dans ce matériel pédagogique, nous créerons un site Web qui simplifie Qiita à partir de zéro. Si vous pouvez l'effacer, vous acquerrez la compétence pour gagner à peu près ce montant.
Livrables
Conclusion Je vais commencer. Les livrables produits par ce matériel pédagogique sont les sites Web suivants.
Introduction de la fonction
** Publier de nouveaux articles (articles # nouveau) ** Vous pouvez publier un article de blog. Comme avec Qiita, vous pouvez utiliser des fonctions telles que la notation de démarquage, l'insertion de blocs de code et l'insertion d'images dans le texte.
** Affichage de la liste d'articles (articles # index) ** Vous pouvez afficher une liste d'articles publiés. Vous pouvez accéder à l'écran de visualisation de l'article en cliquant sur l'icône de l'article.
** Voir les articles (articles # afficher) ** Vous pouvez parcourir les articles publiés. Il a également une fonction similaire et une fonction de partage SNS.
** Ma page (utilisateurs # show) ** Vous pouvez voir le profil de l'utilisateur, ses impressions et une liste d'articles publiés.
Ce qui précède est le livrable de ce matériel pédagogique. Bref, je vais faire Qiita. Maintenant, commençons à apprendre.
Programme d'apprentissage
[** 1. Achetez un MacBook ](# 1 Achetez un macbook) [ 2. Installez le navigateur ](# 2 Installez le navigateur) [ 3. Créons un environnement de développement [Homebrew] ](# 3 Créons un environnement de développement homebrew) [ 4. Téléchargez l'éditeur ](# 4 Téléchargez l'éditeur) [ 5. Comprendre les bases de HTML et CSS ](# 5 Comprendre les bases de html et css) [ 6. Utilisons les outils de développement ](# 6 Utilisons les outils de développement) [ 7. Familiarisez-vous avec le responsive design ](# 7 Apprenez à connaître le responsive design) [ 8. Maîtrisons Flexbox [Dieu] ](# 8 Maîtrisons Flexbox) [ 9. Créons une application semblable à Twitter avec Rails ](Créons une application semblable à Twitter avec # 9rails) [ 10. Utilisons Git / Github ](# 10 Utilisons gitgithub) [ 11. Déployons l'application sur AWS ](déployons l'application sur # 11aws) [ 12. Créons une application de type Qiita avec Rails **](Créons une application de type qiita avec # 12 rails)
1. Achetez un MacBook
Tout d'abord, achetons un ordinateur. Un ordinateur MacBook Pro 13 pouces est recommandé et le prix est de 134800 ¥ (hors taxes). C'est une dépense décente pour votre portefeuille. Cependant, supposons que le "site Web de style Qiita" produit cette fois-ci se soit vendu 500 000 yens. Ensuite, l'investissement initial de 150 000 yens peut être récupéré lorsqu'un site Web est vendu.
Retour de l'apprentissage de la programmation
・ Période de développement: 1 mois
・ Coût initial: 150 ¥,000
・ Prix unitaire de l'application: 500 ¥,000
·revenir(1 an)：¥(50×12-15)×10,000 = ¥5,850,000
Cependant, ce qui précède est le calcul en continuant sans frustration dans l'apprentissage de la programmation, donc en cas de frustration, ce ne sera pas comme ci-dessus. Cependant, dans ce cas, je pense que c'est juste une question de vendre le MacBook chez Mercari. <a href = "https://www.mercari.com/jp/items/m45876950419/?_s=U2FsdGVkX1-Foy-31PNe5xn_c8LGBRbGeazegs4v_pNr_Y5c2dx2cYlgOhtm_T2xFVSwo Vous pouvez le sauver en dépensant des yens.
En résumé, les performances de coût de l'apprentissage de la programmation sont les suivantes.
Coût performance de l'apprentissage de la programmation
・ Période de développement: 1 mois
・ Coût initial: 150 ¥,000
・ Prix unitaire de l'application: 500 ¥,000
・ Risque: ¥(15-8)×10,000 = ¥ 90,000
·revenir(1 an)：¥(50×12-15)×10,000 = ¥5,850,000
Je pense personnellement que le risque d'un défi avec un rendement annuel de 5,85 millions de yens est trop faible à 90 000 yens. Dans l'ancien temps, si vous vouliez obtenir ce chiffre de retour, vous deviez démarrer une entreprise, démarrer une entreprise, rassembler des amis, etc. Et si l'entreprise fait faillite, c'est comme perdre des millions de dettes, de confiance et d'amis.
Ceci peut être réalisé en payant un risque de seulement 90 000 yens individuellement. De plus, le rendement est de 585/9 = 65 fois à partir de la première année. Cospa est trop bon. C'est un bon moment.
D'une manière générale, on dit que le revenu mensuel moyen des ingénieurs qui vivent dans le langage de programmation "Ruby" introduit cette fois-ci est de 500 à 1 million de yens (revenu annuel de 6 à 12 millions de yens), donc cette estimation est souvent erronée. Je ne pense pas que ce soit le cas. Si vous êtes intéressé, ** Revenu annuel moyen de Rails Engineer ** Essayez Google.
Maintenant, achetons un MacBook. MacBook ** Vous pouvez acheter à partir d'ici. ** Il existe différents types, mais je pense que le MacBook Pro 13 pouces convient à moins que vous ne soyez particulier à ce sujet. Vous pouvez choisir entre 8 Go / 16 Go de mémoire, mais 8 Go suffisent pour la programmation.
2. Installez le navigateur
Un «navigateur» est une application permettant de naviguer sur Internet. Il existe différents types, mais il est courant d'utiliser un navigateur appelé ** Google Chrome ** pour la programmation.
** Cliquez sur ce lien ** pour installer. Si vous cliquez sur ** Télécharger Chrome ** à la destination du lien, ** googlechrome.dmg ** s'affiche en bas à gauche de l'écran. Il s'agit du fichier d'installation, cliquez donc dessus pour terminer l'installation.
3. Créez un environnement de développement [Homebrew]
Un «environnement de développement» est requis pour la programmation. Si vous achetez un nouveau smartphone, vous téléchargerez des applications telles que LINE, Youtube et Twitter à partir du magasin.
C'est comme télécharger une application pour la programmation, comme ça. Celles à télécharger ici portent les noms suivants.
・ Homebrew
・ Rbenv
・ Rubis-build
・ Readline
・ Rubis
・ MySQL
・ Bundler
· Des rails
· Alors.js
Comme vous pouvez le voir, il y en a beaucoup, mais vous n'avez pas à vous en souvenir. Lorsque vous avez appris à utiliser LINE, vous n'avez pas vérifié les rôles et les fonctions de LINE un par un à l'avance. Avec le même sentiment, si vous l'utilisez, vous vous souviendrez naturellement de "qu'est-ce que cette application", alors travaillons sans nous en soucier.
Même ainsi, vous pouvez penser que beaucoup de mots inconnus apparaissent devant vous avec Dawn et vous pensez déjà "C'est douloureux ...", mais pensez à cela comme un exemple d'application pour smartphone. Est-il difficile de voir la liste de mots suivante?
· LIGNE
· Twitter
・ Instagram
· TIC Tac
· Youtube
Ce n'est pas épicé. Cependant, c'est aussi exactement la même «liste de mots mystérieux» que la liste ci-dessus. La liste de mots ci-dessus peut être difficile à voir pour une vieille femme qui ne connaît pas les smartphones.
Dans l'apprentissage de la programmation, vous rencontrerez encore et encore une «liste de mots mystérieux». Puisque l'inconnu est une «peur» pour les humains, de nombreux programmeurs inexpérimentés ont tendance à être frustrés par les rencontres avec l'inconnu.
Cependant, tous les "mots inconnus" se transforment en mots inoffensifs comme "LINE Twitter" lorsque vous les touchez à plusieurs reprises. Par conséquent, j'aimerais que vous travailliez sur vos études avec confiance.
En outre, ce matériel ne «vous laisse pas derrière». Soyez assuré que nous rédigeons l'intégralité du programme du point de vue "Est-il transmis au lecteur?"
Commençons maintenant par le travail réel.
Présentation des outils de ligne de commande
Il y a «un» article à lire. ** ・ Qu'est-ce que les outils de ligne de commande? Expliquez le rôle et comment l'utiliser **
Présentation de Homebrew
Il y a «un» article à lire. ** ・ Qu'est-ce que Homebrew? Expliquez le rôle et la méthode d'installation **
Introduction de Ruby et Rails
Il y a un «langage» dans la programmation. C'est comme «japonais» ou «anglais» dans le monde réel. Il y en a beaucoup, mais cette fois j'utiliserai "Ruby".
Il y a «un» article à lire. ** ・ Qu'est-ce que Rails on Rails? Expliquer son rôle et sa méthode d'introduction [Conclusion: Curry Lou] **
Présentation de MySQL
Il y a «un» article à lire. ** ・ Qu'est-ce que MySQL? Comment l'installer sur votre Mac avec des crêpes [Facile] **
La construction de l'environnement est terminée
Je vous remercie pour votre travail acharné! Ensuite, passons au travail d'introduction d'un éditeur.
4. Téléchargez l'éditeur
Il y a «un» article à lire. ** ・ Qu'est-ce que VSCode? Expliquer le rôle et la méthode d'introduction [Conclusion: C'est une application d'écriture de code] **
Prêt!
Ceci termine toutes les préparations. A partir de là, c'est enfin du travail de codage!
5. Comprendre les bases du HTML et du CSS
Il y a "2" vidéos à regarder. ** - Premier cours d'introduction au HTML (24) ** ** - Premier cours d'introduction CSS (34 livres) **
En regardant cette vidéo, déplaçons réellement vos mains et votre code. Puisque nous coderons avec VSCode, ouvrez d'abord VSCode et appuyez sur commande + N sur le clavier. Cela générera un fichier appelé Untitled-1. Ce fichier n'est pas enregistré, il est donc recommandé de l'enregistrer en spécifiant "Bureau" dans le menu de sauvegarde qui apparaît lorsque vous appuyez sur commande + S. Nommez également le fichier «nom de fichier.extension», par exemple «index.html» ou «style.css». L '"extension" indique le type de fichier, et si vous utilisez .html, vous pouvez dire à votre ordinateur que "ce fichier est écrit en html".
Aussi, lors de l'ouverture d'un fichier écrit en HTML, vous pouvez l'ouvrir en cliquant sur le fichier enregistré sur le bureau avec deux doigts → ouverture avec cette application → Google Chrome.
6. Utilisons les outils de développement
À ce stade, on se sent comme un "débutant". Propagons le MacBook avec Starva et sentons-nous bien. La motivation explose. Lol
Il y a "une" vidéo à regarder. ** - Je ne peux plus vous demander! Comment utiliser les outils de développement de navigateur **
En apprenant à utiliser les outils de développement, vous serez en mesure de convertir le code de sites sympas en vos propres compétences. C'est un joli raccourci. Il y a une grande différence dans le taux de croissance selon que vous le savez ou non, alors n'oubliez pas de vous en souvenir.
7. Apprenez à connaître le design réactif
De là, vous apprendrez ce que l'on appelle le «design réactif». La conception réactive est littéralement une «conception réactive». Ce qui le fait réagir, c'est principalement la "largeur de l'écran". Certains sites Web sont consultés sur un ordinateur, certains sur une tablette et certains sur un smartphone. Tous ont des largeurs d'écran différentes, donc si vous affichez le même site Web avec la même apparence, il sera difficile de voir l'affichage. Pour éviter cela, nous allons créer un dessin qui change son apparence en fonction de la largeur.
Il y a "une" vidéo à regarder. ** - Premier cours d'introduction à la conception Web adaptative (19 livres) **
8. Maîtrisons Flexbox [Dieu travaille]
En apprenant jusqu'ici, je pense que le concept de flotteur a émergé. C'est en fait assez difficile à comprendre et peut être le plus gros revers pour les débutants en programmation. C'est l'accord F de la guitare. Mais en fait, ce concept de flotteur peut être rendu "presque inutile" en apprenant le travail divin de Flexbox.
Il y a "une" vidéo à regarder. ** ・ Apprenez à utiliser Flexbox dans un jeu! **
La vidéo ci-dessus est recommandée car il est amusant d'apprendre Flexbox dans un format de jeu. En outre, la feuille récapitulative Flexbox est distribuée dans l'article suivant, assurez-vous donc de l'obtenir. ** - J'ai créé une feuille de triche CSS Flexbox et je la distribuerai **
9. Créez une application semblable à Twitter avec Rails
Jusqu'à présent, nous avons principalement appris à créer l'apparence de sites Web. À partir de là, nous commencerons le travail de création du système interne. Le système interne est, par exemple, la «fonction d'enregistrement de l'utilisateur», la «fonction de connexion», la «fonction de tweet», etc. dans Twitter. En outre, ces systèmes sont créés en utilisant le langage Ruby. Ruby on Rails est un "framework" qui vous aide à développer des systèmes utilisant Ruby.
Il y a «un» article à lire. ** ・ [Introduction à Ruby on Rails] Je vais vous expliquer toutes les étapes pour créer Twitter avec Ruby [Facile] **
10. Utilisons Git / Github
C'est à nouveau un nouveau caractère horizontal. Cependant, je ne pense pas que quiconque a lu jusqu'ici sera effrayé. Git est un mécanisme de "sauvegarde et chargement" en programmation. Lorsque vous jouez à un jeu vidéo, vous enregistrez et chargez des données. Cela peut également être fait par programmation. C'est super pratique. Introduisons-le immédiatement.
Il y a «un» article à lire. ** - Qu'est-ce que Git? Qu'est-ce que Github? Je vais vous expliquer le rôle et comment l'utiliser **
** * Dans cet article, nous allons générer l'application de base pour l'application de blog de style Qiita créée au chapitre 12. Assurez-vous de le lire. ** **
11. Déployez votre application sur AWS
Nous publierons l'application créée dans le monde en utilisant quelque chose appelé AWS. Les applications que j'ai créées jusqu'à présent sont accessibles à partir de l'adresse localhost: 3000, mais cela ne peut être consulté que sur mon propre PC. Les sites Web doivent être accessibles de n'importe où sur Internet, et AWS rend cela possible.
Il y a «un» article à lire. ** - [Version conservée] Toutes les étapes de l'enregistrement du compte AWS au déploiement automatique de Rails [Capistrano] **
12. Créez une application de type Qiita avec Rails
Enfin le dernier chapitre. Créons une application Rails plus avancée que l'application de type Twitter créée dans le chapitre précédent et acquérons la création de site Web de niveau pratique.
Annexe: Plans de gain
Je vous remercie pour votre travail acharné! Ce sont toutes les informations sur les «compétences en programmation» que vous pouvez apprendre de cette feuille de route. Avec cela, vous avez acquis la compétence de «créer une application qui se vend 500 000 yens» comme mentionné au début. A partir de là, la question est "comment gagner 500 000 yens". En conclusion, il existe différentes méthodes. Je voudrais conclure cet article avec quelques suggestions.
Trouver un emploi / changer d'emploi
C'est le moyen le plus rapide. Il existe de nombreux services de soutien à l'emploi / au changement d'emploi dans le monde, alors créez un CV basé sur vos propres compétences et répétez l'emploi / le changement d'activité jusqu'à ce que vous réussissiez. Les services d'assistance suivants sont recommandés.
** ・ Wantedly Business SNS qui rend le "travail" intéressant **
De plus, il existe de nos jours de nombreuses «écoles de programmation avec un soutien total pour changer d'emploi», il est donc préférable de s'inscrire dans une école et d'obtenir un emploi avec un soutien. Bien qu'il s'agisse d'une méthode fiable, elle présente également des inconvénients tels que le fait que l'employeur a tendance à être un sous-traitant. Cependant, on peut dire que c'est le chemin le plus court si vous souhaitez simplement faire carrière en tant qu'ingénieur système. Il sera plus facile de saisir l'opportunité de viser une carrière plus élevée si vous pouvez construire et être fier que "j'ai une expérience pratique". Les écoles suivantes sont recommandées.
<a href = "https://tech-camp.in/expert?gclid=Cj0KCQjwrIf3BRD1ARIsAMuugNtwuqBofzmZ207oy8T8NNeyJZpwViBZoaHXn9PuO6g5xf7DSS
aller seul
C'est le cas lorsque vous sortez du rail de l'emploi / changement d'emploi et que vous choisissez la voie du freelance. C'est la carrière que je fais. "Freelance" est une façon très cool de le dire, et en d'autres termes, on peut dire que c'est "sans emploi". C'est un moyen de créer une entreprise de vos propres mains sans appartenir à une entreprise.
Un moyen rapide de gagner de l'argent de manière indépendante consiste à utiliser un mécanisme appelé «cloud sourcing». C'est une façon de monter sur un autre rail tout en retirant le rail. Le sourcing dans le cloud attire essentiellement les entreprises qui recherchent des emplois «externalisés» à la condition de «n'importe qui» et qui proposent «laissez-moi le faire». Les deux services suivants sont connus, donc je pense que c'est une bonne idée de s'inscrire ci-dessous et de rechercher immédiatement des projets en utilisant "HTML CSS", "JavaScript", "Rails", etc. et faire des suggestions.
** - Le sourcing cloud est le plus grand "Cloud Works" du Japon ** ** ・ Lancers | Le plus grand site de demande d'emploi dans le cloud au Japon **
Il existe d'innombrables autres options pour l'indépendance. Une façon est d'acheter du «matériel pédagogique pour gagner» vendu par des influenceurs célèbres. Le ** produit de manablog ** , qui m'a inspiré pour commencer la programmation, a été un succès. Je le recommande car il a beaucoup de monde.
Dans mon cas, je suis devenu indépendant par la méthode du "lancement de mon propre blog technique". Il existe différents «chemins de gains» tels que l'adsense et la vente de produits sur les blogs, j'ai donc décidé de suivre cette voie.
démarrer une entreprise
C'est presque la même chose que l'indépendance, mais c'est recommandé pour ceux qui veulent le titre de "Co., Ltd.". En plus du titre, je pense qu'il comporte divers avantages comme des garanties sociales. Pour faire simple, il semble qu'il soit facile de gagner la confiance sociale, de sorte que le taux de réussite des commandes pour l'approvisionnement en nuage est susceptible d'augmenter.
Je ne l'ai jamais fait auparavant, donc je pense qu'il est préférable de demander conseil à des «personnes qui ont de l'expérience dans le démarrage de l'informatique». Eh bien, plutôt que d'attendre des conseils honnêtes, je pense qu'il est plus facile de l'essayer vous-même si cela vous intéresse. Cela peut sembler irresponsable, mais c'est probablement la vérité.
Il y a beaucoup de gens qui ont de l'expérience dans le démarrage d'entreprises liées aux TI, il est donc difficile de «PRENDRE» de ces personnes. Parce que je dois leur donner un niveau de «DONNER» qui dépasse la vie quotidienne de ces gens extraordinaires. Dans ce cas, il me semble qu'il est beaucoup plus rapide pour moi de devenir cette "personne géniale". À propos, les sites suivants semblent être utiles pour démarrer une entreprise.
## Que peut-on dire en commun Que vous changiez d'emploi ou deveniez indépendant, je pense que vous pourrez gagner de l'argent si vous remplissez la condition de «dire ce qu'on vous donne» d'une manière facile à comprendre pour que l'autre personne puisse le voir.Je suis moi-même en situation de «programmation d'auto-apprentissage 2 mois → école 2 mois → auto-apprentissage 2 mois → rédaction d'article maintenant». Je pense sérieusement que la solution optimale pour aider les gens est «de fournir aux débutants les connaissances acquises grâce à l'auto-apprentissage et à l'école de toutes leurs forces pour les débutants en programmation». J'ai donc lancé ce blog et je l'envoie à tout le monde de cette manière.
Sur la base de cet article de blog, je pense gagner la confiance comme ma première "réalisation". C'est ce que je veux faire. Je crois qu'il y a toujours un moment dans le monde où «ce que vous voulez faire» pour quelqu'un et «ce que vous voulez faire» pour quelqu'un correspondent.
Je vous remercie pour votre travail acharné!
Merci beaucoup d'avoir lu jusqu'ici. Nous souhaitons continuer à publier des articles qui profiteront à tous ceux qui les liront Merci pour votre coopération.
Informations sur l'auteur
・ Blog: ** De l'achat d'un MacBook ONSEO au niveau pratique ** ・ Twitter: ** https://twitter.com/soeno_onseo **
Recommended Posts